C.L.A.R.A.

Core Library And Refined Algorithms

Installation

npm i -S @endgame/clara

The global operation

You'll see that CLARA exports everything you need to build your JS projects from generators and coroutine helpers... to polyfills 👌

If you use the default es6 import you'll get all the "utils functions" from @endgame/clara.

But you can also deconstruct the import to get the specific functions you need.

The motherfu****g example :

import allTheSh_t from '@endgame/clara';
// OR
import { coroutine } from '@endgame/clara';

Async

wait

In an async function, wait allows us to wait in simple way with await.

Example:

// delay is in ms
const delay = 300;

const asyncFunction = async () => {
    ...
    // Do some stuff
    ...
    await wait(delay);
};

asyncFunction();

runPromisesSequence

This function allows us to add a timeout between promises (not possible with Promise.all).

Example:

// Say we want to download medias from urls
// For each url we want to apply the same process...
// With a delay... Because we wanna avoid a server overload

// Media download function
const handleMediaDownload = async (url, mediaName) => {
    const [mediaName] = url.split('/').reverse();
    const filePath = `static-path/${mediaName}`;
    await writeMedia({ filePath, url });
};

// Apply the delay
await runPromisesSequence(
    {
        array: urls, // For the examples' purpose, we'll say that urls is already defined as an array
        handler: handleMediaDownload,
        delay: 500 // In ms
    },
    () => {
        // The callback called when all promises are done
    }
);

Core

forEach

A cool while loop running under the hood to increase the native forEach's performances.

Example:

const emojisArray = ['🔥', '💪', '😏'];

forEach(emojisArray, (item, index) => {
    console.log(`${index}: ${item}`);
    // Will log "1: 🔥"...
});

coroutine

TODO:

DOM

createCrossBrowserEvent

This function will help you to make cross browser events (I hope internet explorer will die one day...).

Example:

const newEvent = createCrossBrowserEvent('test-new-event');

document.addEventListener(
    'test-new-event',
    () => {
        console.log('✅ Cross browser event dispatched');
    },
    false
);

document.dispatchEvent(newEvent);

isDisplayed

isDisplayed will allow you to test if your html element is in display: none mode.

Example:

const testingDisplay = isDisplayed(myElement);

if (testingDisplay) {
    // My element is displayed 💪
}

nodeIndex

With this function you'll be able to know the index of your html element position amongst his siblings.

Example:

const index = nodeIndex(myElement);

query

query will allow you to get any html element you want with performances you can only dream of ! getElementById, getElementsByClassName, getElementsByTagName, querySelectorAll... you don't need to choose anymore, it'll do it for you 😏

Example:

const [byId] = query({ selector: '#my-id' });
const [byClass] = query({ selector: '.my-class' });
const [myNestedElement] = query({
    selector: '.the-ancestor .my-nested-element'
});
const allTheClasses = query({
    selector: '.my-classes'
});
const withContext = query({ selector: '.my-class', ctx: myContextualElement });

requestAnimFrame

A requestAnimationFrame method for every browsers... yes that exists.

Example:

const animationFrameId = requestAnimFrame(() => {});

// The better, you can cancel it 😱
cancelAnimationFrame(animationFrameId);

throttle

throttle has been redisigned.

Example:

throttle({
    callback: () => {
        // Do whatever you want to
    },
    delay: 100
});

loop

TODO:

requestTimeout

TODO:

clearRequestTimeout

TODO:

bodyRouter

bodyRouter will allow you to execute whatever javascript piece of code... on the specific page you want, not the others. One more thing, it uses query under the hood 😏

Example:

bodyRouter({
    identifier: '.page-template-contact',
    callback: () => {
        // Dynamically load your imports for example 💪
    }
});

Fallback

spotMobile

Spot when a mobile is used by adding a class to the html element.

Example:

spotMobile(); // As simple as that

spotIOS

Spot when ios is used by adding a class to the html element.

Example:

spotIOS(); // As simple as that

spotSafari

Spot when safari is used by adding a class to the html element.

Example:

spotSafari(); // As simple as that

spotFF

Spot when firefox is used by adding a class to the html element.

Example:

spotFF(); // As simple as that

spotChromeAndroid

Spot when an android mobile uses chrome by adding a class to the html element.

Example:

spotChromeAndroid(); // As simple as that

spotMS

Spot when a microsoft device is used by adding a class to the html element.

Example:

spotMS(); // As simple as that

spotIE

Spot when internet explorer is used by adding a class to the html element.

Example:

spotIE(); // As simple as that

supportsWebp

To handle webp support correctly... test it in a simple way.

Example:

// In your async function:
const isWebpSupported = await supportsWebp();

if (isWebpSupported) {
    // YEAH WEBP IS COMING IN BABY ! 🔥
} else {
    // OKAY LET'S USE IMAGES THE OLD FASHION WAY
}

Math

roundNumbers

Rounding numbers could be a bit boring sometimes. Now rounding numbers became pretty easy.

Example:

const myNumber = roundNumbers({ number: 10.123456789, decimalOffset: 2 });

// myNumber = 10.12 now

average

TODO:

lerp

TODO:

Parsing

camalize

Just read the title.

Example:

const mySlug = 'test-slug';

const camalizedSlug = camalize(mySlug);
// camalizedSlug = testSlug now.

pascalize

Just read the title.

Example:

const mySlug = 'test-slug';

const pascalizedSlug = pascalize(mySlug);
// pascalizedSlug = TestSlug now.

reverseString

Just read the title.

Example:

const myString = 'emosewa';

const reversedString = reverseString(myString);
// myString = awesome now.

Polyfill

audioContextPolyfill

A sweet polyfill for the web audio api

audioContextPolyfill();

const audioContext = new window.AudioContext();

ie11Polyfills

Internet explorer again...

// Polyfills for matches, closest, entries elements functions
ie11Polyfills();

ioPolyfill

IntersectionObserver is pretty cool... but... like always... Internet explorer

ioPolyfill();

const options = {
    root: document.querySelector('#scrollArea'),
    rootMargin: '0px',
    threshold: 1.0
};

const observer = new IntersectionObserver(callback, options);

smoothScrollPolyfill

Smooth scrolling to anchors is cool... but don't forget IE

smoothScrollPolyfill();

const [scrollToElement] = query({ selector: '.scroll-to-selector' });

window.scroll({
    top: 100, // In px
    left: 0,
    behavior: 'smooth'
});

Snif

isIOS

Check for an ios device

if (isIOS()) {
    // Do some stuff
}

isAndroid

Check for an android device

if (isAndroid()) {
    // Do some stuff
}

isChrome

Check if the device uses chrome

if (isChrome()) {
    // Do some stuff
}

isMobile

Check if the device is a mobile

if (isMobile()) {
    // Do some stuff
}

isChromeAndroid

Check if the device running chrome on android

if (isChromeAndroid()) {
    // Do some stuff
}

isSafari

Check if the device is running safari

if (isSafari()) {
    // Do some stuff
}

isFF

Check if the device is running firefox

if (isFF()) {
    // Do some stuff
}

isMS

Check if the device is a Microsoft product (🤮)

if (isMS()) {
    // Do some stuff
}

mixBlendModeSupport

Check for mix blend mode support

if (mixBlendModeSupport()) {
    // Do some stuff
}

isIe11

Check if the device's running internet explorer

if (isIe11()) {
    // Do some stuff
}

P.S. 21st century's celebrating its 20 years old... Seriously... Internet explorer's not dead by now ??? WTF ???