dgc-icon-explorer

(function () {
    let iconMatch = /content: "[\ue000-\uf000]";/;
    let classMatch = /(?<= \.)dcg-.+?(?=\:\:before)/

    const classList = Array.from(
        document.styleSheets[0].cssRules
    ).filter((rule) => {
        return iconMatch.test(rule.cssText);
    }).map((rule) => {
        return rule.cssText.match(classMatch);
    });

    const ctNodes = insertNodes(document.body, {
        group : [{
            tag : 'div',
            varName : 'fltDiv',
            styles : {
                display : 'flex',
                flexWrap : 'wrap',
                overflowY : 'scroll',
                position : 'absolute',
                zIndex : '99',
                width : '544px',
                height : '544px',
                background : '#ededed',
                left: '50%',
              top: '50%',
              transform : 'translate(-50%, -50%)',
                fontSize: 'x-large',
                justifyContent: 'space-evenly'
            }
        }]
    });

    let seedDiv = document.createElement('div');
    let seedSpan = document.createElement('i');

    seedDiv.className = 'dcg-btn-flat-gray dcg-settings-pillbox';
    Object.assign(seedDiv.style, {
        display : 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width : '60px',
        height : '60px'
    });
    seedDiv.appendChild(seedSpan);

    let divList = genNodes(seedDiv, classList.length, true);
    let spanList = [];
    divList.forEach((item) => {
        spanList.push(item.childNodes[0]);
    });

    addClasses(spanList, classList);

    divList.forEach((item) => {
        ctNodes.fltDiv.appendChild(item);
    });

    /*******************************************/

    function addClasses(nodeList, classList) {
        classList.forEach((item, i) => {
            if (i >= nodeList.length) return 0;
            nodeList[i].classList.add(item);
        });
    }

    function genNodes (seed, total, deep) {
        let clones = [];
        clones.length = total;

        for (let i = 0; i < total; ++i) {
            clones[i] = seed.cloneNode(deep);
        }

        return clones;
    }

    // creates a tree of elements and appends them into parentNode. Returns an object containing all named nodes
    function insertNodes(parentNode, nodeTree) {
        function recurseTree (parent, nextTree, nodeAdder) {
            for (let branch of nextTree.group) {
                if (!branch.hasOwnProperty('tag')) {
                    throw new CustomError('Parameter Error', 'Tag type is not defined');
                }
                let child = document.createElement(branch.tag);
                parent.appendChild(child);

                if (branch.hasOwnProperty('varName')) {
                    nodeAdder[branch.varName] = child;
                }
                if (branch.hasOwnProperty('id')) {
                    child.setAttribute('id', branch.id);
                }
                if (branch.hasOwnProperty('classes')) {
                    child.classList.add(...branch.classes);
                }
                if (branch.hasOwnProperty('styles')) {
                    Object.assign(child.style, branch.styles);
                }
                if (branch.hasOwnProperty('attributes')) {
                    branch.attributes.forEach(elem => {
                        child.setAttribute(elem.name, elem.value);
                    });
                }
                if (branch.hasOwnProperty('nodeContent')) {
                    child.innerHTML = branch.nodeContent;
                }
                if (branch.hasOwnProperty('group')) {
                    recurseTree(child, branch, nodeAdder); // they grow so fast :')
                }
            }
            return nodeAdder;
        }
        return recurseTree(parentNode, nodeTree, []);
    }

}) ()