Javascript Methods

At the heart of Design Language interactions is The RCDL methods object. This contains all the logic, event handlers and DOM manipulation that powers the components.

To disable javascript from an element apply one of the following methods:

You can view which listener has been activated by console logging "RCDL.DOMelmReady.listeners" in a browser. Inside the listeners you can view the selectors used for targeting.

Disabling javascript on a component basis

Add the data-rc-disable-js attribute to disable all events.

            <span class="select">
  <label class="select__label" for="id-single-select">I am interested in</label>
  <select data-js-select data-rc-disable-js id="id-single-select">
    <option selected disabled value="" placeholder>Select an option</option>
    <option disabled>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>

Disabling ALL RCDL event listeners

To disable all even listeners from the RCDL just add rc-no-listeners to the html element.

Disabling javascript on a component basis

Add the data-rc-disable-js attribute with a stringified array of listener names to disable.

Some of the listeners are:

  • selects
  • forms
  • toggle-group
  • carousels
  • datepicker
  • image-galleries
  • parallax
  • progress
  • sliders
  • sticky
  • alerts
  • tooltip
  • svgAnimation
  • modal
  • navigation
  • responsive-video-loader

(For a full list of activated listeners console log "RCDL.DOMelmReady.listeners")

            <div data-rc-disable-js='["forms","selects"]'></div>

Included vanilla javascript libraries

We’ve included some carefully selected third party vanilla javascript libraries.

Choices.js - Github

A vanilla, lightweight (15kb gzipped), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

Pikaday.js - Github

A lightweight javascript date picker.

Tiny-slider.js - Github

Tiny slider for all purposes, inspired by Owl Carousel. Vanilla js and no dependencies.

Tippy.js - Github

Tippy.js is a lightweight, vanilla JS tooltip library powered by Popper.js. View the documentation and demo here.

Nouislider.js - Github

noUiSlider is a lightweight javascript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.

RCDL.ready() method

This method takes a function and executes it when the DOM is ready. This is similar to $(document).ready() but does not require jQuery.

  • @param {Object} fn – Function object to be executed when ready.

rc_webpack_done event

This event is fired when webpack load all RCDL javascript features. You can use it to call custom methods. Example: call custom select method after webpack is done loading dependencies.

            document.addEventListener('rc_webpack_done', function () {
  let options = {
    shouldSort: true,
    searchEnabled: true,
    itemSelectText: 'Custom'

  RCDL.features.Selects.init('[data-js-custom-select]', null, options);

RCDL.utilities.modifyClass() method

This method takes a DOM node and toggles a class.

  • @param {String} type – The type of class modifier, accepts add, remove or toggle.
  • @param {Node} target – The targeted DOM node item.
  • @param {String} className – The class to be toggled, added or removed.
            RCDL.utilities.modifyClass('add', target[0], 'hidden');

RCDL.utilities.wrap() method

Takes two DOM nodes and wraps one around the other.

  • @param {Node} el – The DOM node item to be wrapped.
  • @param {Node} wrapper – The DOM node item to become the wrapper.
            RCDL.utilities.wrap(node[0], node[1]);

RCDL.utilities.triggerResize() method

Triggers a fake page resize. This is sometimes useful to force window redraws or recalculations if you are manipulating elements in the DOM.


RCDL.utilities.hasClass() method

Checks if target DOM node has a class.

            RCDL.utilities.hasClass(node[0], 'target-class');

More coming soon