CSS snippet toggler

Share & showcase
4

@Klaas I’ve uploaded a GIF with higher resolution (but lower quality)

@tallguyjenks it needs some polishing before it can be usable. Right now you can execute this snippet in console

(function () {
    var dq = function (query) { return document.querySelectorAll(query); };
    dq.create = function (el) { return document.createElement(el); };
    function drawModal() {
        var modal = document.createElement('div');
        modal.classList.add('modal-container');
        modal.innerHTML = "<div class=\"modal\"><div class=\"modal-close-button\"></div><div class=\"modal-title\"></div><div class=\"modal-content\"></div></div>";
        modal.querySelector('.modal-close-button').addEventListener('click', function () { return modal.remove(); });
        document.body.appendChild(modal);
        var modal_content = modal.querySelector('.modal-content');
        modal_content.style.maxHeight = '70vh';
        modal_content.style.overflow = 'auto';
        return {
            el: modal,
            addParagraph: function (text) {
                var paragraph = document.createElement('p');
                paragraph.innerHTML = text;
                modal.querySelector('.modal-content').appendChild(paragraph);
            },
            addCheckbox: function (name) {
                var input = dq.create('input');
                input.setAttribute('type', 'checkbox');
                input.setAttribute('name', name);
                modal.querySelector('.modal-content').appendChild(input);
            },
            addLink: function (text, event) {
                var link = document.createElement('a');
                link.innerHTML = text;
                link.addEventListener('click', function () { return event(modal); });
                modal.querySelector('.modal-content').appendChild(link);
                modal.querySelector('.modal-content').appendChild(dq.create('br'));
            }
        };
    }
    function run(el) {
        var regexpParts = /\/\*.+\*\//gi;
        var regexpHeaders = /\/\*(.+)\*\//gi;
        var text = el.innerText;
        var headers = text.match(regexpHeaders);
        var parts = text.split(regexpParts).filter(function (e) { return e; });
        if (!headers || headers.length === 0) {
            alert('Headers not found');
            return;
        }
        var togglerData = headers.map(function (el, i) { return ({
            header: headers[i].replace(/(\/\*|\*\/)/gi, '').trim(),
            content: parts[i],
            enabled: true
        }); });
        var build = function (data) { return el.innerHTML = data.filter(function (e) { return e.enabled; }).map(function (e) { return e.content; }).join(''); };
        var interface = drawModal();
        togglerData.forEach(function (el, index) {
            interface.addCheckbox(el.header);
            interface.addLink(el.header, function (modal) {
                el.enabled = !el.enabled;
                modal.querySelector('input[name="' + el.header + '"').checked = el.enabled;
                build(togglerData);
            });
            var input = interface.el.querySelector('input[name="' + el.header + '"');
            input.checked = el.enabled;
        });
        interface.addLink('refresh', function (modal) {
            modal.remove();
            run(el);
        });
    }
    run(document.head.querySelector('style:last-child'));
})();

to get the very first scratch of that thing.

How to run snippets and warnings - here

1 Like