Cognetif JS ToolKit

This project is a common use front end toolkit. It include commonly used JavaScript classes and functions through out Cognetif development projects. Alos included is a default SCSS configuraton and commonly used components normally copied from one project to another.

Installation

$ yarn add cognetif/js-toolkit

Usage

JavaScript Functions

Class Toggle

Toggles a css class for a given element on or off

Example:

import classToggle from "cognetif/js-toolkit"; 
    
const app = document.getElementById('app');
classToggle(app, 'my-class');

Has Class

Validate is a given element has a given class

Example:

import hasClass from "cognetif/js-toolkit"; 
    
const app = document.getElementById('app');
if (hasClass(app, 'my-class')) {
    console.log('App has class');
}else {
    console.log('App missing class');
}

JavaScript Classes

Throttle

Provides throttle function to avoid Jank on resize or scroll events:

Example:

import Throttle from "cognetif/js-toolkit";


const t = new Throttle();
window.addEventListener('resize', () => {
    t.throttle(() => {
        console.log('This function is throttled every 100ms.');
    });

});

You can adjust the throttle delay before the callback function is executed (default:100ms):

import Throttle from "cognetif/js-toolkit";


const t = new Throttle();
t.setDelay(1000);
window.addEventListener('resize', () => {
    t.throttle(() => {
        console.log('This function is throttled every 1s.');
    });

});

MenuToggle

Used for menu mobile toggle. Use in conjunction with scss/components/menu-toggle.scss to hide/show a mobile menu with the following markup:

<nav>
    <div class="menu-items">
        <a href="#1">item 1</a>    
        <a href="#2">item 2</a>    
        <a href="#3">item 3</a>    
    </div>
    <div class="menu-toggle">
         <a href="#" class="link" aria-label="Menu">
             <span class="bar top"></span>
             <span class="bar mid"></span>
             <span class="bar end"></span>
         </a>
     </div>
 </nav>

When the mobile icon is clicked it will add the "clicked" icon to the .menu-toggle element and the "open" menu to the parent nav element. The parent, link element selectors can be configured as well as the open and clicked classes:

Example:

import MenuToggle from "cognetif/js-toolkit";


((menuToggles) => {
            Array.from(menuToggles).forEach((menuToggle) => {
               const menu = new MenuToggle(menuToggle);
                menu.setMenuSelector('nav-selector'); //No '.' or '#'
                menu.setToggleSelector('.link-selector');
                menu.setMenuOpenClass('is-open');
                menu.setToggleClickedClass('is-clicked');
            });
        })(document.getElementsByClassName('menu-toggle'));