OpenLIME

Class: Skin

Skin

Manages SVG-based user interface elements (skin) for OpenLIME.

The Skin system provides a centralized way to manage and customize UI elements through an SVG-based theming system. Each UI component (buttons, menus, toolbars, dialogs) sources its visual elements from a single SVG file.

Design Requirements:

  • SVG elements must have class names prefixed with 'openlime-'
  • Icons should be properly viewboxed for scaling
  • SVG should use relative paths for resources

Technical Features:

  • Async SVG loading
  • DOM-based SVG manipulation
  • Element cloning support
  • Automatic viewbox computation
  • Padding management
  • Transform handling

Default Configuration

  • {string} url - Default skin URL ('skin/skin.svg')
  • {number} pad - Icon padding in SVG units (5)

File Structure Requirements:

<svg>
  <!-- Icons should use openlime- prefix -->
  <g class="openlime-home">...</g>
  <g class="openlime-zoom">...</g>
  <g class="openlime-menu">...</g>
</svg>

Common Icon Classes:

  • openlime-home: Home/reset view
  • openlime-zoom: Zoom controls
  • openlime-menu: Menu button
  • openlime-close: Close button
  • openlime-next: Next/forward
  • openlime-prev: Previous/back

Usage Notes:

  • Always use async/await with icon methods
  • Icons are cloned to allow multiple instances
  • SVG is loaded once and cached
  • Padding is applied uniformly
  • ViewBox is computed automatically

new Skin()

Source:

Methods

<async, static> appendIcon(container, icon)

Appends an SVG icon to a container element Handles both string selectors and SVG elements Automatically manages viewBox and transformations

Parameters:
Name Type Description
container HTMLElement

Target DOM element to append icon to
icon string | SVGElement

Icon selector or SVG element
Source:
Returns:

Processed and appended SVG element

Processing steps:

  1. Loads icon (from selector or element)
  2. Creates SVG wrapper if needed
  3. Computes and sets viewBox
  4. Applies padding
  5. Handles transformations
  6. Appends to container
Type
Promise.<SVGElement>
Example
```javascript
// Append by selector
const icon1 = await Skin.appendIcon(
    document.querySelector('.toolbar'),
    '.openlime-zoom'
);

// Append existing SVG
const icon2 = await Skin.appendIcon(
    container,
    existingSvgElement
);
```

<async, static> getElement(selector)

Retrieves a specific element from the skin by CSS selector Automatically loads the SVG if not already loaded

Parameters:
Name Type Description
selector string

CSS selector for the desired element
Source:
Throws:

Implicitly if element not found

Type
Error
Returns:

Cloned SVG element

Type
Promise.<SVGElement>
Example
```javascript
// Get home icon
const homeIcon = await Skin.getElement('.openlime-home');

// Get menu button
const menuBtn = await Skin.getElement('.openlime-menu');
```

<async, static> loadSvg()

Loads and parses the skin SVG file Creates a DOM-based SVG element for future use

Source:
Throws:

If SVG file fails to load

Type
Error
Returns:
Type
Promise.<void>
Example
```javascript
await Skin.loadSvg();
// SVG is now loaded and ready for use
```

<static> setUrl(url)

Sets the URL for the skin SVG file

Parameters:
Name Type Description
url string

Path to SVG file containing UI elements
Source:
Example
```javascript
// Set custom skin location
Skin.setUrl('/assets/custom-skin.svg');
```