green-honchos-pixel.js

(function (window, document) {
    window.domEventsHandler = (function (window, document) {
        let  srcElement;

        /*
        * Options value for the highlighter
        * */
        const opt = {
            ignoreElem: ['head', 'meta', 'link', 'style', 'title', 'script'], // elements to ignore
            queryElem : 'img, a, button, input, textarea', // elements to track on click
            elemClickCount:{}
        };

        /*
        * Define all the events
        * */
        const events = {
            click: 'click',
            mouseover: 'mouseover',
            mouseenter: 'mouseenter',
            mouseup: 'mouseup',
            mouseleave: 'mouseleave',
            mousedown: 'mousedown',
            keyUp: 'keyup',
        };

        /*
        * Actions to take
        * */
        const actions = {
            start: 'start',
            stop: 'stop',
        };

        /*
        * Search query for DOM elements
        * */
        const getQuery = function () {
            let query = '*';
            const ignore = opt.ignoreElem;
            const ignoreLen = ignore.length;
            if (ignoreLen) { // add ignore elements into query
                for (let i = 0; i < ignoreLen; i++) {
                    query += `:not(${ignore[i]})`;
                }
            }
            return query;
        };

        /*
        * Highlights the active element
        * */
        const captureEvent = function (e) {
            srcElement = e.srcElement;
            let key = srcElement.getAttribute('data-ref');
            if(key!=null){
                let count = 1;
                if(key in opt.elemClickCount){
                    opt.elemClickCount[key] = opt.elemClickCount[key]+1;
                    count = opt.elemClickCount[key];
                }else {
                    opt.elemClickCount[key] = count;
                }
                console.log('%c '+key.toUpperCase()+' was clicked by user '+count+' times', 'color: green');
            }else{
                console.log('%c UNTRACKED CLICK EVENT', 'color: red');
                console.log(srcElement);
            }

        };

        /*
        * Attaches listener to DOM
        * */
        const attachListeners = function (type) {
            const query = opt.queryElem;
            const allNodes = document.querySelectorAll(query);
            for (let i = 0; i < allNodes.length; i++) { // loop each node to bind the listener
                const elem = allNodes[i];
                if (type === actions.stop) {
                    elem.removeEventListener(events.click, captureEvent);
                } else if (type === actions.start) {
                    elem.addEventListener(events.click, captureEvent);
                }
            }
        };


        /*
        * Initializing the plugin
        * */
        const init = function (type) { // initiate the library
            const action = (type) ? actions.start : actions.stop;
            attachListeners(action);
        };

        /*
        * expose the function
        * */
        return {
            init,
        };

    }(window, document));
}(window, document));