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!

Functions

The following functions are available:

Skin.App.init

Initialize Skin's features, typically via data-* attributes.

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,
    },
    popper: {
        enabled: true
    },
    tabs: {
        enabled: true,
        updateHash: true
    },
}

debug

When debug is set to true, errors will output to the console. This should not be enabled in production environments.

urlTheme

When urlTheme.enabled is set to true, the theme can be changed using a URL query parameter.

For example, by adding ?theme=dark to the URL, the theme will be set to dark, and the preference will be saved in local storage. Valid themes are light and dark.

The urlTheme.paramName member defines the URL query parameter used to change the theme.

theme

When theme.enabled is set to true, elements with a data-theme-toggle attribute will set the theme to its value when clicked.

To see it in action, see the dark mode example.

hide

When hide.enabled is set to true, elements with a data-hide attribute will hide the element with that ID when clicked.

An optional data-hide-duration attribute specifies the duration (in minutes) to keep the element hidden. Omitting the data-hide-duration attribute or setting it to 0 will only hide the element for the current page load.

In addition, an optional data-hide-transition attribute specifies the animation duration (in milliseconds).

Adding the attribute data-hidden="true" to the dismissible element will hide it by default. This prevents it from showing before it is hidden by JavaScript.

For an example, see the tc-toast component.

show

When show.enabled is set to true, elements with a data-show attribute will show the element with that ID when clicked.

Hidden elements should include the attribute data-hidden="true" to hide by default.

An optional data-show-duration attribute specifies the duration (in milliseconds) to show the element. Omitting the data-show-duration attribute or setting it to 0 will show the element for the current page load.

In addition, an optional data-show-transition attribute specifies the animation duration (in milliseconds).

For an example, see the tc-toast component.

toggle

When toggle.enabled is set to true, elements with a data-toggle attribute will toggle visibility of the element with that ID when clicked. An optional data-toggle-transition attribute sets the animation duration in milliseconds (250 by default).

For an example, see example toggle.

loadSrc

When loadSrc.enabled is set to true, all images with a data-load-src attribute will have their src replaced by its value. This is useful for "lazy loading" larger images to speed up the page load time.

For an example, see example images.

modal

When modal.enabled is set to true, elements with a data-modal-open attribute will open the modal with that ID when clicked. An optional data-modal-strict attribute specifies whether to open the modal in strict mode.

In addition, elements with a data-modal-close attribute will close the modal with that ID when clicked.

For an example, see the tc-modal component.

popper

When popper.enabled is set to true, elements with a data-popper attribute will be used to show a Popper element with that ID.

An optional data-popper-placement attribute allows customization of the Popper placement (default of top).

An optional data-popper-offset attribute allows customization of the Popper placement (default of 0,0).

An optional data-popper-trigger attribute allows the Popper to show on click or hover (default).

For an example, see tc-popper component.

tabs

When tabs.enabled is set to true, Skin will use elements with role=tab, role=tablist and role=tabpanel to build interactive tabs.

The tabs are fully accessible, and work with the following keyboard interactions:

CommandDescription
← →Selects the previous/next non-disabled tab
Space EnterActivate the selected tab

When tabs.updateHash is set to true, the URL hash will update as tabs are shown. In addition, tabs can be shown by the URL hash.

For an example, see example tabs.

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.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)
    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

loadSrc

Load and replace source using data-load-src attribute.

Parameters:

  • el - Element