Toggle

    Toggle Layout

    Layout is pretty simple:

    <!-- Toggle element -->
    <label class="toggle">
      <!-- Toggle input -->
      <input type="checkbox">
      <!-- Toggle icon -->
      <span class="toggle-icon"></span>
    </label>

    Inside of Simple List:

    <div class="list simple-list">
      <ul>
        ...
        <li>
          <span>Text label</span>
          <label class="toggle">
            <input type="checkbox">
            <span class="toggle-icon"></span>
          </label>
        </li>
    </div>

    Inside of usual List (preferable in item-after):

    <div class="list">
      <ul>
        ...
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Text label</div>
            <div class="item-after">
              <label class="toggle">
                <input type="checkbox">
                <span class="toggle-icon"></span>
              </label>
            </div>
          </div>
        </li>
      </ul>
    </div>

    Toggle Colors

    Toggle supports all default colors. So to change its color just add color-[color] class to toggle element.

    <!-- red toggle -->
    <label class="toggle color-red">...</label>
    
    <!-- orange toggle -->
    <label class="toggle color-orange">...</label>

    Toggle App Methods

    Let's look at related App methods to work with Toggle:

    app.toggle.create(parameters)- create Toggle instance

    • parameters - object. Object with toggle parameters

    Method returns created Toggle's instance

    app.toggle.destroy(el)- destroy Toggle instance

    • el - HTMLElement or string (with CSS Selector) or object. Toggle element or Toggle instance to destroy.

    app.toggle.get(el)- get Toggle instance by HTML element

    • el - HTMLElement or string (with CSS Selector). Toggle element.

    Method returns Toggle's instance

    Toggle Parameters

    Now let's look at list of available parameters we need to create Toggle:

    Parameter Type Default Description
    el HTMLElement
    string
    Toggle element. HTMLElement or string with CSS selector of toggle element
    on object Object with events handlers. For example:
    var toggle = app.toggle.create({
      el: '.toggle',
      on: {
        change: function () {
          console.log('Toggle changed')
        }
      }
    })
    

    Toggle Methods & Properties

    So to create Toggle we have to call:

    var toggle = app.toggle.create({ /* parameters */ })

    After that we have its initialized instance (like toggle variable in example above) with useful methods and properties:

    Properties
    toggle.app Link to global app instance
    toggle.el Toggle HTML element
    toggle.$el Dom7 instance with toggle HTML element
    toggle.inputEl Toggle input HTML element
    toggle.$inputEl Dom7 instance with toggle input HTML element
    toggle.checked Boolean property indicating whether it is input is checked or not
    toggle.params Toggle parameters
    Methods
    toggle.toggle() Toggle input state
    toggle.on(event, handler) Add event handler
    toggle.once(event, handler) Add event handler that will be removed after it was fired
    toggle.off(event, handler) Remove event handler
    toggle.off(event) Remove all handlers for specified event
    toggle.emit(event, ...args) Fire event on instance

    Toggle Events

    Toggle will fire the following DOM events on toggle element and events on app and toggle instance:

    DOM Events

    Event Target Description
    toggle:change Toggle Element<div class="toggle"> Event will be triggered when Toggle state has been changed
    toggle:beforedestroy Toggle Element<div class="toggle"> Event will be triggered right before Toggle instance will be destroyed

    App and Toggle Instance Events

    Toggle instance emits events on both self instance and app instance. App instance events has same names prefixed with toggle.

    Event Arguments Target Description
    change toggle toggle Event will be triggered when toggle state has been changed. As an argument event handler receives toggle instance
    toggleChange toggle app
    beforeDestroy toggle toggle Event will be triggered right before Toggle instance will be destroyed. As an argument event handler receives toggle instance
    toggleBeforeDestroy toggle app

    Toggle Auto Initialization

    If you don't need to use toggle API and your toggle is inside of page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional toggle-init class:

    <!-- Add toggle-init class -->
    <label class="toggle toggle-init">
      <input type="checkbox">
      <span class="toggle-icon"></span>
    </label>

    In this case if you need to access created Toggle instance you can use the app.toggle.get app method:

    var toggle = app.toggle.get('.toggle');
    
    if (toggle.checked) {
      // do something
    }

    Examples

    <div class="block-title">Super Heroes</div>
    <div class="list simple-list">
      <ul>
        <li>
          <span>Batman</span>
          <label class="toggle toggle-init color-black">
            <input type="checkbox" checked>
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Aquaman</span>
          <label class="toggle toggle-init color-blue">
            <input type="checkbox" checked>
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Superman</span>
          <label class="toggle toggle-init color-red">
            <input type="checkbox" checked>
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Hulk</span>
          <label class="toggle toggle-init color-green">
            <input type="checkbox">
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Spiderman (Disabled)</span>
          <label class="toggle toggle-init disabled">
            <input type="checkbox">
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Ironman (Disabled)</span>
          <label class="toggle toggle-init toggle-init">
            <input type="checkbox" checked disabled>
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Thor</span>
          <label class="toggle toggle-init color-orange">
            <input type="checkbox" checked>
            <span class="toggle-icon"></span>
          </label>
        </li>
        <li>
          <span>Wonder Woman</span>
          <label class="toggle toggle-init color-pink">
            <input type="checkbox">
            <span class="toggle-icon"></span>
          </label>
        </li>
      </ul>
    </div>