sss-elemental

    1.3.1 • Public • Published

    Elemental

    About

    Elemental is most lightweight and Fault tolerant pure javascript DOM class-control helper with 100% functional test coverage.

    If you are tired of connecting Jquery just to switch classes of elements, then this library is for you.

    Installation

    1. Download Elemental

    2. Connect Elemental before your scripts.

    <script src="/assets/js/lib/Elemental.js"></script>
    1. See how to use the Elemental.
    Package managers 😎

    If you are using package managers such as npm or yarn, import this lib as usual.

    # Yarn 
    yarn add sss-elemental
     
    # NPM 
    npm i sss-elemental --save

    Do import Elemental from 'sss-elemental';

    Usage

    addClass

    Adds string to element's class name

    const item = document.querySelector('body');
    Elemental.addClass(item, 'customClass');

    removeClass

    Removes string from element's class name

    const item = document.querySelector('body');
    Elemental.removeClass(item, 'customClass');

    toggleClass

    Adds or removes class depending on its presence.

    const item = document.querySelector('body');
    Elemental.toggleClass(item, 'customClass');

    hasClass

    Check if element has certain class name

    const body = document.querySelector('body');
    const isActive = Elemental.hasClass(body, 'body_active');
    console.log(isActive); // true

    injectCss

    Inject CSS in element.style directly

    Don't forget about camelCase syntax when styling from javascript

    const body = document.querySelector('body');
    const styles = {
        display: 'none',
        overflowY: 'hidden',
        boxSizing: 'border-box',
    }
     
    Elemental.injectCss(body, styles);

    eject

    Eject all Elemental methods in to Element.prototype allowing you to update class-control syntax.

    // Do eject 
    Elemental.eject();
     
    // Be fancy
    const body = document.querySelector('body');
    body.addClass('body_custom');
    body.removeClass('body_custom');
    body.hasClass('body_custom');
    body.toggleClass('body_custom');

    This technique called Monkey patching and in large projects it is considered as not a best practice. But either way it is an optional feature. Elemental does nothing behind the scene without your command, and use it or not it's up to you to decide.

    License

    This project is available under the MIT license.

    Install

    npm i sss-elemental

    DownloadsWeekly Downloads

    2

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    9.13 kB

    Total Files

    5

    Last publish

    Collaborators

    • natteke