@springernature/global-javascript

    3.0.3 • Public • Published

    Global Javascript

    Shared Javascript that can be included in your project or component.

    Helpers

    A collection of JavaScript helpers to achieve common, repetitive tasks.

    Usage

    You can import as many of the named exports from the helpers as you require for your project.

        import {helper1, helper2} from '@springernature/global-javascript/helpers';

    Util

    Dom

    Util

    Util helpers are used to help achieve JavaScript tasks that do not involve touching the DOM.

    makeArray

    Makes an array from an iterable. Commonly used for converting a NodeList into an Array so array methods can then be used on the iterable.

    const elementsNodeList = document.querySelectorAll('.elements');
    const elementsArray = makeArray(elementsNodeList);
    
    elementsArray.forEach(element => {
        // Do something
    });

    createEvent

    Simple wrapper for customEvent that enforces an event namespace of the form namespace:event.

    This should be the default method for component module communication, where the name of the component is used as the namespace.

    const elementToBind = document.getElementById('element');
    
    // Create event namespaced to component
    const event = createEvent('eventName', 'componentName', {
        bubbles:true,
        cancelable: true,
        detail: {
            hazcheeseburger: true
        }
    });
    
    // Dispatch event
    elementToBind.dispatchEvent(event);
    
    // Listen for event
    elementToBind.addEventListener('componentName:eventName', function (event) {
        // Do something
    }, false);

    getCookie

    Retrieves a cookie by name from document.cookie.

    const myCookie = getCookie('name-of-cookie');

    setCookie

    Sets a cookie with a name, value and attributes using document.cookie. Configurable options are:

    • path (string)
    • domain (string)
    • max-age (number as string)
    • expires (string)
    • secure (string)
    • samesite (string)
    setCookie('name-of-cookie', 'cookie-value', {
        path: '/',
        domain: 'mydomain.com',
        'max-age': '31536000'
    });

    deleteCookie

    Expires a cookie by name from document.cookie. Configurable options are:

    • path (string)
    • domain (string)
    deleteCookie('name-of-cookie', {
        path: '/',
        domain: 'mydomain.com',
    });

    debounce

    Allows sequential calls to a function to be grouped together so that the function will only be called once. The call will be made once the timeframe has passed after the last call.

    The debounce function accepts two arguments, func, and an options object that accepts wait and immediate. func is the function to debounce; wait is the time (in ms) that should pass after the last function call; immediate allows the function to be called once before the timer begins.

    debounce returns a function and will use requestAnimationFrame if no wait time is passed in. immediate defaults to false.

    Common use cases are when you want to execute a handler only at the end of a series of events, for example when making asynchronous requests in response to a users input.

    const input = document.querySelector('input.autocomplete');
    input.addEventListener('input', debounce(myHandler, {wait: 200, immediate: true}));

    throttle

    Allows a function to be called once within a set timeframe. Additional function calls within the timeframe will be ignored. The throttle function accepts two arguments, func, which is the function to throttle, and wait, which is the duration of the throttle (in ms).

    throttle returns a function with a default wait time of 100.

    Common use cases are when you want to consistently execute a handler but at a decreased ratio to the browsers default 1:1, for example scroll and resize event handlers.

    document.addEventListener('scroll', throttle(myHandler, 200));

    onetrust

    OneTrust is the cookie management tool we use in order to aid GDPR compliance. This helper exports two named functions, checkConsent and isConsentBannerClosed.

    checkConsent

    Takes a OneTrust category string and returns a boolean representing whether the category has been consent to (retrieved from the OptanonConsent cookie).

    Valid categories are:

    • "strictlyNecessary"
    • "performance"
    • "functional"
    • "targetingFirstParty"
    • "targetingThirdParty"
    checkConsent('targetingThirdParty');

    An error will be thrown if an invalid category is passed in.

    isConsentBannerClosed

    Returns a boolean representing whether the cookie consent banner has been closed (retrieved from the OptanonAlertBoxClosed cookie).

    isConsentBannerClosed();

    Dom

    Dom helpers are used to help achieve JavaScript tasks that involve getting information from, or manipulating the DOM.

    getDataOptions

    Takes an element and an Object of component options and data-attribute selectors and returns the an Object with the value for those data-attributes. Because it returns an Object, it is easy to merge with other options Objects, such as the default options.

    <div class="my-component" data-mycomponent-option1="foo" data-mycomponent-option2="bar" data-mycomponent-option3="baz">My Component</div>
    // my-component.js
    const DataOptions = {
        OPTION_1: 'data-mycomponent-option1',
        OPTION_2: 'data-mycomponent-option2',
        OPTION_3: 'data-mycomponent-option3',
    };
    
    const component = document.querySelector('.my-component');
    
    const options = getDataOptions(component, DataOptions);
    
    console.log(options);
    
    // Output:
    
    // {
    //	OPTION_1: 'foo',
    //	OPTION_2: 'bar',
    //	OPTION_3: 'baz',
    // }

    License

    MIT License © 2020, Springer Nature

    Install

    npm i @springernature/global-javascript

    DownloadsWeekly Downloads

    2,296

    Version

    3.0.3

    License

    MIT

    Unpacked Size

    25 kB

    Total Files

    22

    Last publish

    Collaborators

    • nasiamakryg
    • morgaan
    • sonniesedge
    • rlau
    • dotcode
    • joseluisbolos
    • hollsk
    • moddular
    • jpw
    • nickcall
    • howlingmad
    • sndigital
    • davidpauljunior