onboarding/index.js

A simple frontend function chain for handeling onboarding

import randomID from 'random-id'

class _Event {
    constructor(name, run, callback) {
        this.name = name;
        this.run  = run;
        this.callback = callback;
    }
    execute() {
        if (typeof this.callback === 'function') {
            var _run = this.run.apply(this, arguments);
            if (Array.isArray(_run))
                this.callback.apply(this, _run);
            else
                this.callback(_run);
        }
        else
            return this.run.apply(this, arguments);
    }
}

class Emphasis extends _Event {
    constructor(name, run, remove, callback, elements){
        super(name, run, callback);
        this.elements = (Array.isArray(elements)) ? elements : [elements];
        this.remove = remove;
        this.elements = [];
    }
}

class Trigger extends _Event {
    constructor(name, run, callback, remove) {
        super(name, run, callback);
        this.remove_emphasis = remove;
    }

    execute(element, emphasis) {
        var _run = this.run(element, emphasis);
        if (_run !== false)
            this.callback(element, emphasis);
    }
    
    start_emphasis(element, emphasis){
        this.callback(element, emphasis)
    }
}

class Element extends _Event {
    constructor(onboardingName, onboardID, element, run, emphasis, callback){
        super(onboardID, run, callback);
        this.emphasis = emphasis;
        element.onboarding = element.onboarding || {};
        element.onboarding[onboardingName] = element.onboarding[onboardingName] || {};
        element[onboardingName][onboardID] = this;
    }

    run_trigger(){
        this.callback(true);
    }
}

class Onboarding {
    constructor (name){
        this.name = name || randomID(20, "aA");
        this.emphases = {};
        this.triggers = {};
        this.elements = {};
    }
    new_emphasis(name, run, remove, callback, elements) {
        this.emphases[name] = new Emphasis(name, run, remove, callback, elements);
    }
    new_trigger(name, run) {
        this.triggers[name] = new Trigger(name, run, (element, emphasis) => {
            if (typeof element === 'string' && typeof emphasis === 'string')
                this.emphases[emphasis].execute(element);
        }, (element, emphasis) => {
            this.emphases[emphasis].remove(element);
        });
    }
    attachToElement(element, trigger, emphasis, initialize) {
        if (!!(element && element.nodeType === 1)) {
            console.error("attachToElement requires a dom node as its first parameter. It was given: ", element);
            return false;
        }
        const onboardID = this.onboardID();
        let start = (typeof initialize === 'function') ? false : true;
        this.elements[onboardID] =  new Element(this.name, onboardID, element, initialize, emphasis, (e) =>{
            if (e)
               this.triggers[trigger].execute(onboardID, emphasis);
        });
        if (start) {
            this.elements[onboardID].run_trigger();
        } else {
            this.elements[onboardID].execute();
        }
        return this.elements[onboardID];
    }

    onboardID(){
        let _ID = randomID(20, 'aA');
        while (this.elements[_ID]) {
            _ID = randomID(20, 'aA');
        }
        return _ID;
    }

    get emphases_names() {
        var arg = [];
        for (var n in this.emphases) {
            arg.push(n);
        }
        return arg
    }
}

module.exports = {
  Onboarding: Onboarding
}