Toolkit of JS Classes and functions common to Cognetif web development

Usage no npm install needed!

<script type="module">
  import cognetifJsToolkit from 'https://cdn.skypack.dev/@cognetif/js-toolkit';


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.


$ yarn add cognetif/js-toolkit


JavaScript Functions

Class Toggle

Toggles a css class for a given element on or off


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


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


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


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();
window.addEventListener('resize', () => {
    t.throttle(() => {
        console.log('This function is throttled every 1s.');



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

    <div class="menu-items">
        <a href="#1">item 1</a>    
        <a href="#2">item 2</a>    
        <a href="#3">item 3</a>    
    <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>

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:


import MenuToggle from "cognetif/js-toolkit";

((menuToggles) => {
            Array.from(menuToggles).forEach((menuToggle) => {
               const menu = new MenuToggle(menuToggle);
                menu.setMenuSelector('nav-selector'); //No '.' or '#'