element util

Summary

js/lib/utils/element-util

The utility library for DOM Elements.

Usage

import Cosmos from 'cosmos-css';
Cosmos.lib.ElementUtil.wrap('.my-list', 'list-wrapper');
// --- or ---
import { ElementUtil } from 'cosmos-css';
ElementUtil.addClass('#target', 'success');

Functions

• Element Functions
• Class Functions
• Display Functions
• Filter Functions
• Sort Functions

Element Functions

getElement

• Syntax

let element = ElementUtil.getElement(selector, base = document);

• Param {String|Element|NodeList} selector
• Param {Element} [ base = document ]
• Return {Element}

getElements

• Syntax

let nodes = ElementUtil.getElements(selector, base = document);

• Param {String|Element|NodeList} selector
• Param {Element} [ base = document ]
• Return {NodeList}

addListener

Add event listener on selector.

• Syntax

let effected = ElementUtil.addListener(selector, type, listener, useCapture = false);

• Param {String} selector
• Param {String} type - event type.
• Param {Function} listener
• Param {Boolean} [ useCapture = false ]
• Return {Number} - length of elements.

findAncestor

• Syntax

let element = ElementUtil.findAncestor(element, selector);

• Param {Element|String} element or querySelector - base element.
• Param {String} selector - ancestor's querySelector.
• Return {Element|null}

wrap

wrap elements by div.wrapper, one by one.

• Syntax

ElementUtil.wrap(selector, className, tagName = 'DIV');

• Param {String} selector
• Param {String} className - wrapper's class name.
• Param {String} [ tagName = 'DIV' ] - wrapper's tag name.
• Return {void}

wrapAll

wrap all elements inside to div.wrapper.

• Syntax

ElementUtil.wrapAll(selector, className);

• Param {String} selector
• Param {String} className - wrapper's class name.
• Param {String} [ tagName = 'DIV' ] - wrapper's tag name.
• Return {void}

submitConfirm

• Syntax

ElementUtil.submitConfirm(selector, message = 'Are you confirm?');

• Param {String|Element|NodeList} selector
• Param {String} [ message = 'Are you confirm?' ]
• Return {void}

Class Functions

addClass

• Syntax

ElementUtil.addClass(selector, className);

• Param {String} selector
• Param {String} className
• Return {void}

removeClass

• Syntax

ElementUtil.removeClass(selector, className);

• Param {String} selector
• Param {String} className
• Return {void}

toggleClass

• Syntax

ElementUtil.toggleClass(selector, className);

• Param {String} selector
• Param {String} className
• Return {void}

Display Functions

hide

• Syntax

ElementUtil.hide(selector);

• Param {String} selector
• Return {void}

show

• Syntax

ElementUtil.show(selector);

• Param {String} selector
• Return {void}

toggleShow

• Syntax

ElementUtil.toggleShow(selector);

• Param {String} selector
• Return {void}

Filter Functions

filter

• Syntax

let hit = ElementUtil.filter(selector, filter, htmlMode = false);

• Param {String} selector
• Param {String} filter
• Param {Boolean} [ htmlMode = false ] - If default, filtered by textContent. If this value is true, filtered by innerHTML.
• Return {Number} hit number

Sort Functions

sortElements

• Syntax

ElementUtil.sortElements(selector, itemSelector);

• Param {String} selector - parent element. (e.g. 'ul')
• Param {String} itemSelector - child items. (e.g. 'li')
• Return {void}
• Example
  • html

  <!-- default sort-type: string -->
  <ul class="list">
    <li>three</li>
    <li>one-hundred</li>
    <li>two-thousands</li>
  </ul>
  
  <!-- sort-type: number -->
  <ul class="list" data-sort-type="number">
    <li data-sort-value="3">three</li>
    <li data-sort-value="100">one-hundred</li>
    <li data-sort-value="2000">two-thousands</li>
  </ul>

  • script

  ElementUtil.sortElements('ul.list', 'li');

sortTable

• Syntax

ElementUtil.sortTable(selector);

• Param {String} selector
• Return {void}
• Example
  • html

  <table class="table">
    <thead>
      <tr>
        <th>column 1</th>
        <th data-sort-type="date">column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>America</td>
        <td data-sort-value="2017-01-01">cell value</td>
      </tr>
      <tr>
        <td>Europe</td>
        <td data-sort-value="2017-03-02">cell value</td>
      </tr>
      <tr>
        <td>Asia</td>
        <td data-sort-value="2017-05-04">cell value</td>
      </tr>
    </tbody>
  </table>

  • script

  ElementUtil.sortTable('table.table');