JavaScript

Some functionality of Skin is made possible by including the JavaScript file. This will bind Skin to the window, making all functions available globally.

This file is written in vanilla JavaScript, so it all works out-of-the-box!

The following functions are available:

Skin.App.init

Initialize the Skin application.

Parameters:

  • config = {} - Object

Any configuration values passed in the config object will override the default values. The default configuration is as follows:


                
                {
    debug: false,
    urlTheme: {
        enabled: true,
        paramName: "theme"
    },
    theme: {
        enabled: true,
    },
    hide: {
        enabled: true,
    },
    show: {
        enabled: true,
    },
    toggle: {
        enabled: true,
    },
    loadSrc: {
        enabled: true,
    },
    modal: {
        enabled: true,
    },
    popup: {
        enabled: true
    },
    tabs: {
        enabled: true,
        updateHash: true
    },
}

For more information on the application's functionality, see application.

Skin.App.getTheme

Get current theme (light/dark).

Skin.App.setTheme

Set theme and optionally save to local storage.

Parameters:

  • theme
  • save = false

Skin.Form.getPromise

Return a Promise object for an expected JSON response from fetch() using the action, method and data of a form.

Parameters:

  • formEl - Form element
  • config = {} - Object

Valid config object properties are data and headers. The data property can be an object whose key/value pairs will be added to the form data. The headers property can be an object whose key/value pairs will be added to the request headers.

The fetch request will be sent with the header Accept: application/json by default.

For an example, see example forms.

Skin.Modal.show

Show a modal component.

Parameters:

  • id - ID of modal to show
  • config = {} - Object

Any configuration values passed in the config object will override the default values. The default configuration is as follows:


                
                {
    strict: false // Restrict modal to only close from a tc-modal-close click
}

When strict is set to true, the modal will be shown in strict mode, which prevents it from being closed by clicking the overlay or pressing the esc key.

Skin.Modal.hide

Hide a modal component.

Parameters:

  • id - ID of modal to hide

Skin.Popup.show

Show a popup component. Under the hood, the Floating UI library is used.

Parameters:

  • referenceEl - Reference element (trigger)
  • floatingEl - Floating element (popup)
  • config = {} - Configuration object

Any configuration values passed in the config object will override the default values. The default configuration is as follows:


                
                {
    unique: false, // Close all other popups when shown
    placement: "bottom",
    offset: {
        mainAxis: 0, // top
        crossAxis: 0 // left
    },
    shift: {},
    flip: {}
}

Note: When the popup is a tooltip, only the mainAxis offset will be used.

For more information on these configuration values, see Floating UI.

Event:

When shown, the floatingEl element dispatches a popupShow event which contains the following detail properties:

  • referenceEl - Reference element (trigger)
  • config = {} - Configuration object

Example:


                
                document.getElementById('popup-menu').addEventListener('popupShow', function(e) {
    // e.detail.referenceEl and e.detail.config are available
    console.log('Popup has been shown');
});

Skin.Popup.isVisible

Is popup visible? Returns boolean value (true/false).

Parameters:

  • el - Floating element (popup)

Skin.Popup.hide

Hide a popup component.

Parameters:

  • el - Floating element (popup)

Event:

When hidden, the el element dispatches a popupHide event.

Example:


                
                document.getElementById('popup-menu').addEventListener('popupHide', function() {
    console.log('Popup has been hidden');
});

Skin.Popup.hideAllVisible

Hide all visible popup components.

Skin.Toast.create

Create and show a toast component.

Parameters:

  • config = {} - Object

Any configuration values passed in the config object will override the default values. The default configuration is as follows:


                
                {
    containerId: "tc-toast-container", // ID of toast container (parent element)
    removeExisting: false, // Remove any existing toasts which exist inside the container
    toastId: "", // ID of toast (blank for none)
    classes: "tc-style-default", // Class(es) to add in addition to "tc-toast"
    duration: 250, // Animation duration in milliseconds
    hideAfter: 3000, // Hide after duration in milliseconds (0 to not hide)
    innerHTML: "", // Toast inner HTML
    role: "alert", // ARIA role
    aria: { // ARIA attributes : values
        "atomic": "true",
        "live": "assertive"
    },
    data: {} // data-* attributes
}

aria- attributes can be added with the optional aria property. data- attributes can be added with the optional data property.

For an example, see the tc-toast component.

Skin.Visibility.hide

Hide element with a given animation duration.

Parameters:

  • el - Element to hide
  • duration = 250 - Animation duration in milliseconds

Skin.Visibility.show

Show element with a given animation duration.

Parameters:

  • el - Element to show
  • duration = 250 - Animation duration in milliseconds

Skin.Visibility.showThenHide

Show element for an amount of time with a given animation duration.

Parameters:

  • el - Element to show
  • hideAfter = 3000 - Hide after duration in milliseconds
  • duration = 250 - Animation duration in milliseconds

Skin.Visibility.toggle

Toggle element visibility with a given animation duration.

Parameters:

  • el - Element to toggle
  • duration = 250 - Animation duration in milliseconds