index.js

'use strict';

var grid, tabBar, tutorial;

window.onload = getSmart.bind(null, {
    data: 'data/nasdaq-100-20181015.json',
    state: 'data/state.json',
    scrollbars: 'data/scrollbars.css;txt', // ;txt forces get as text rather than style element
    localizer: 'data/localizers.js;snippets', // ;snippets forces get as text snippets array rather excuted code
    editor: 'data/cell-editors.js;snippets',
    toc: 'data/table-of-contents.js'
}, function(files) {

    const NEW = '(New)';
    const saveFuncs = {
        editor: saveCellEditor,
        localizer: saveLocalizer
    };
    const applyButtonSelector = 'input[type=button][value=Apply]';

    // Append version numbers to <h1> header
    document.querySelector('body > h1:first-child > span').setAttribute('title', 'Hypergrid v' + fin.Hypergrid.prototype.version + ', Tutorial v18 (11/1/2018)');

    fin.enhance(document);

    tabBar = new CurvyTabs(document.getElementById('editors'));
    tabBar.paint();

    grid = new fin.Hypergrid();

    initLocalsButtons();

    var tutorialTabBarContainer = document.getElementById('tutorial'),
        tutorialPagerContainer = document.getElementById('page-panel'),
        tutorialTabBar = new CurvyTabs(tutorialTabBarContainer),
        toc = [], // built by walk below
        pagerOptions = { path: 'pages/', toc: toc };

    // load following *after* files loaded and tab bars instantiated so <span class="tab"> can be enlivened
    tabBar.getTab('Help').querySelector('iframe').src = "Help.html";
    tutorialTabBar.getTab('Help').querySelector('iframe').src = "pages/Help.html";
    tutorialTabBar.getTab('Jump Start').querySelector('iframe').src = "pages/Jump%20Start.html";

    // flatten the hierarchical files.toc into pagerOptions.toc
    walk(files.toc);
    function walk(list) {
        list.forEach(function (item) {
            if (Array.isArray(item)) {
                walk(item);
            } else {
                pagerOptions.toc.push(item);
            }
        });
    }

    // If there is a page number cookie value, use it!
    var match = location.search.match(/[?&]p=([^?&]+)/) || document.cookie.match(/\bp=([^?&]+)/);
    if (match) {
        pagerOptions.startPage = decodeURIComponent(match[1]);
    }

    tutorial = new CurvyTabsPager(tutorialPagerContainer, tutorialTabBar, pagerOptions);
    tutorial.goFirstEl.style.display = tutorial.goLastEl.style.display = 'none';

    tutorial.tabBar.onclick = function(e) {
        var isTutorialTab = e.detail.content.getAttribute('name') === 'Tutorial';
        document.getElementById('scroll-warning').style.display = isTutorialTab ? null : 'none';
    };

    // listen for page events to highlight the current page's line in the ToC
    document.addEventListener('curvy-tabs-pager-paged', function(e) {
        var pageIndex = e.detail.pager.num - 1;
        var tocLineEls = tutorial.tabBar.container.querySelector('[name="ToC"] > iframe').contentDocument.querySelectorAll('li');
        tocLineEls.forEach(function(el, index) {
            el.classList.toggle('current-page', index === pageIndex);
        });
    });

    callApi('data'); // inits both 'data' and 'state' editors
    callApi('scrollbars'); // injects stylesheet

    initObjectEditor('localizer'); // adds onclick handler
    initObjectEditor('editor'); // adds onclick handler
    applyButtonEl('Data').onclick = callApi.bind(null, 'data', 'Data set.');
    applyButtonEl('State').onclick = callApi.bind(null, 'state', 'State set.');
    applyButtonEl('Scrollbars').onclick = callApi.bind(null, 'scrollbars', 'Stylesheet injected.');

    function applyButtonEl(tabName) {
        return document.querySelector('div[name="' + tabName + '"] > ' + applyButtonSelector);
    }

    document.body.style.visibility = 'visible';

    //// WIRE UP EVENT HANDLERS ////

    document.getElementById('reset-all').onclick = function() {
        if (confirm('Clear localStorage and reload?\n\nThis will reset all tabs to their default values, removing all edits, including new custom localizers and custom cell editors.')) {
            localStorage.clear();
            location.reload();
        }
    };

    grid.addEventListener('fin-after-cell-edit', function(e) {
        document.getElementById('data').value = stringifyAndUnquoteKeys(grid.behavior.getData());
    });

    var dragger, divider = document.querySelector('.divider');
    divider.addEventListener('mousedown', function(e) {
        var div = document.querySelector('#hypergrid > div:first-child');
        div.classList.add('resizing');
        dragger = {
            delta: e.clientY - divider.getBoundingClientRect().top,
            gridHeight: grid.div.getBoundingClientRect().height,
            tabHeight: tabBar.container.getBoundingClientRect().height,
            div: div
        };
        e.stopPropagation(); // no other element needs to handle
    });
    document.addEventListener('mousemove', function(e) {
        if (dragger) {
            var newDividerTop = e.clientY - dragger.delta,
                oldDividerTop = divider.getBoundingClientRect().top,
                topDelta = newDividerTop - oldDividerTop,
                newGridHeight = dragger.gridHeight + topDelta,
                newTabHeight = dragger.tabHeight - topDelta;

            if (newGridHeight >= 65 && newTabHeight >= 130) {
                divider.style.borderTopStyle = divider.style.borderTopColor = null; // revert to :active style
                divider.style.top = newDividerTop + 'px';
                grid.div.style.height = (dragger.gridHeight = newGridHeight) + 'px';
                tabBar.container.style.height = (dragger.tabHeight = newTabHeight) + 'px';
            } else {
                // force :hover style when out of range even though dragging (i.e., :active)
                divider.style.borderTopStyle = 'double';
                divider.style.borderTopColor = '#444';
            }

            e.stopPropagation(); // no other element needs to handle
            e.preventDefault(); // no other drag effects, please

            if (e.buttons ^ 1) {
                e.target.dispatchEvent(new CustomEvent('mouseup', e));
            }
        }
    });
    document.addEventListener('mouseup', function(e) {
        if (dragger) {
            dragger.div.classList.remove('resizing');
            dragger = undefined;
        }
    });

    // Handle window resizing (CSS calc() only performed at initial load for some reason)
    window.addEventListener('resize', function() {
        var width = window.innerWidth * .50,
            height = window.innerHeight,
            divY = document.querySelector('.divider').getBoundingClientRect().top;

        tabBar.container.style.width = width - 16 + 'px';
        tabBar.container.style.height = height - (divY + 32) + 'px';

        tutorial.tabBar.container.style.width = width - 12 + 'px';
        tutorial.tabBar.container.style.height = height - 58 + 'px';

        var tutorialWindow = tutorial.tabBar.getTab('Tutorial').querySelector('iframe').contentWindow;
        if (typeof tutorialWindow.resize === 'function') {
            tutorialWindow.resize();
        }
    });

    function callApi(type, confirmation, e) {
        var textEl = document.getElementById(type); // tab editor's textarea element
        var resetEl = document.getElementById('reset-' + type);

        textEl.oninput = function() {
            resetEl.classList.toggle('disabled', textEl.value === stringifyAndUnquoteKeys(files[type]));
        };

        if (textEl.value) {
            localStorage.setItem(type, textEl.value);
        } else if (!(textEl.value = localStorage.getItem(type))) {
            textEl.value = stringifyAndUnquoteKeys(files[type]);
            localStorage.setItem(type, textEl.value);
        }

        // We're using eval here instead of JSON.parse because we want to allow unquoted keys.
        switch (type) {
            case 'data':
                grid.setData(eval(textEl.value), {schema: []});
                callApi('state'); // reapply state after resetting schema (also inits state editor on first time called)
                break;
            case 'state':
                // Note: L-value must be inside eval because R-value beginning with '{' is eval'd as BEGIN block.
                var Lvalue;
                grid.setState(eval('Lvalue =' + textEl.value));
                break;
            case 'scrollbars':
                injectCSS('custom', textEl.value);
                break;
        }

        if (confirmation) {
            feedback(textEl.parentElement, confirmation);
        }

        textEl.oninput();
        resetEl.onclick = resetTextEditor;
    }

    function resetTextEditor() {
        var type = this.id.replace(/^reset-/, '');
        if (confirm('Reset the ' + capitalize(type) + ' tab editor to its default?\n\nCAUTION: This is not an undo. It restores the editor content to the app\'s original built-in default value!')) {
            document.getElementById(type).value = '';
            localStorage.removeItem(type);
            callApi(type);
        }
    }

    function resetObject() {
        var type = this.id.replace(/^reset-/, '');
        var name = document.getElementById(type + '-dropdown').value;
        if (!isDisabled(this) && confirm('Reset the "' + name + '" ' + type + ' to its default?')) {
            var script = getDefaultScript(type, name);
            if (name !== NEW) {
                localStorage.setItem(type + '_' + name, script);
            }
            document.getElementById(type + '-script').value = script;
            enableResetAndDeleteIcons(type, name);
        }
    }

    function deleteObject() {
        var type = this.id.replace(/^delete-/, '');
        var dropdown = document.getElementById(type + '-dropdown');
        var name = dropdown.value;
        if (!isDisabled(this) && confirm('Delete the "' + name + '" ' + type + '?')) {
            localStorage.removeItem(type + '_' + name);
            dropdown.options.remove(dropdown.selectedIndex);
            dropdown.selectedIndex = 0; // "(New)"
            dropdown.onchange();
        }
    }

    function isDisabled(el) {d
        return el.classList.contains('disabled');
    }

    function capitalize(str) {
        return str[0].toUpperCase() + str.substr(1);
    }

    function initLocalsButton(type, locals) {
        var el = document.getElementById(type + '-dropdown').parentElement.querySelector('.locals');
        locals = locals.sort();
        el.title = locals.join('\n');
        el.onclick = function() {
            alert('Local variables: ' + locals.join(', '));
        };
    }

    function initLocalsButtons() {
        initLocalsButton('editor', ['module', 'exports', 'CellEditor'].concat(Object.keys(grid.cellEditors.items)));
        initLocalsButton('localizer', ['module', 'exports']);
    }

    function initObjectEditor(type) {
        var dropdownEl = document.getElementById(type + '-dropdown'),
            resetEl = document.getElementById('reset-' + type),
            deleteEl = document.getElementById('delete-' + type),
            scriptEl = document.getElementById(type + '-script'),
            addButtonEl = dropdownEl.parentElement.querySelector(applyButtonSelector),
            prefix = type + '_',
            save = saveFuncs[type],
            newScript;

        // STEP 1: Save default scripts to local storage not previously saved
        files[type].map(extractName).sort().forEach(function(name) {
            var script = getDefaultScript(type, name);
            if (name === NEW) {
                dropdownEl.add(new Option(name));
                newScript = scriptEl.value = script;
            } else if (!localStorage.getItem(prefix + name)) {
                localStorage.setItem(prefix + name, script);
            }
        });

        // STEP 2: Load scripts from local storage, re-saving each which adds it to drop-down
        for (var i = 0; i < localStorage.length; ++i) {
            var key = localStorage.key(i);
            if (key.substr(0, prefix.length) === prefix) {
                save(localStorage.getItem(key), dropdownEl);
            }
        }

        // STEP 3: Reset drop-down to first item: "(New)"
        dropdownEl.selectedIndex = 0;
        enableResetAndDeleteIcons(type, NEW);

        // STEP 4: Assign handlers
        resetEl.onclick = resetObject;
        deleteEl.onclick = deleteObject;

        var name = NEW;
        dropdownEl.onchange = function() {
            var newName = this.value;
            var savedScript = localStorage.getItem(prefix + name) || getDefaultScript(type, name);
            var editedScript = document.getElementById(type + '-script').value;

            if (!savedScript || savedScript === editedScript || confirm('Discard unsaved changes?')) {
                name = newName;
                if (name === NEW) {
                    scriptEl.value = newScript;
                    enableResetAndDeleteIcons(type);
                } else {
                    scriptEl.value = localStorage.getItem(prefix + name);
                    enableResetAndDeleteIcons(type, name);
                }
            } else if (savedScript) {
                this.value = name;
            }
        };

        scriptEl.oninput = function() {
            enableResetAndDeleteIcons(type, dropdownEl.value);
        };

        addButtonEl.onclick = function() {
            save(scriptEl.value, dropdownEl);
            name = dropdownEl.value;
            grid.repaint();
        };
    }

    function enableResetAndDeleteIcons(type, name) {
        var resetEl = document.getElementById('reset-' + type);
        var deleteEl = document.getElementById('delete-' + type);

        if (name) {
            var defaultScript = getDefaultScript(type, name);
            var editedScript = document.getElementById(type + '-script').value;
            var alteredFromDefault = defaultScript && defaultScript !== editedScript;
            resetEl.classList.toggle('disabled', !alteredFromDefault);
            deleteEl.classList.toggle('disabled', !!defaultScript);
        } else {
            resetEl.classList.add('disabled');
            deleteEl.classList.add('disabled');
        }
    }

    function getDefaultScript(type, name) {
        return files[type].find(isScriptByName.bind(null, name));
    }

    function isScriptByName(name, script) {
        return extractName(script) === name;
    }

    function extractName(script) {
        var match = script.match(/\.extend\('([^']+)'|\.extend\("([^"]+)"|\bname:\s*'([^']+)'|\bname:\s*"([^"]+)"/);
        return match[1] || match[2] || match[3] || match[4];
    }

    function stringifyAndUnquoteKeys(obj) {
       return typeof obj === 'object'
            ? JSON.stringify(obj, undefined, 2)
                .replace(/(  +)"([a-zA-Z$_]+)"(: )/g, '$1$2$3') // un-quote keys
            : obj;
    }

    function saveCellEditor(script, select) {
        var cellEditors = grid.cellEditors;
        var editorNames = Object.keys(cellEditors.items);
        var editors = editorNames.map(function(name) {
            return cellEditors.items[name];
        });
        var exports = {}, module = { exports: exports };
        var formalArgs = [null, 'module', 'exports', 'CellEditor'] // null is for bind's thisArg
            .concat(editorNames) // additional params
            .concat(script); // function body
        var actualArgs = [module, exports, cellEditors.BaseClass]
            .concat(editors);

        try {
            var closure = new (Function.prototype.bind.apply(Function, formalArgs)); // calls Function constructor using .apply
            closure.apply(null, actualArgs);
            var Editor = module.exports;
            var name = Editor.prototype.$$CLASS_NAME;
            if (!(Editor.prototype instanceof cellEditors.BaseClass)) {
                throw 'Cannot save cell editor "' + name + '" because it is not a subclass of CellEditor (aka grid.cellEditors.BaseClass).';
            }
            if (!name || name === NEW) {
                throw 'Cannot save cell editor. A name other than "(New)" is required.';
            }
        } catch (err) {
            console.error(err);
            alert(err + '\n\nAvailable locals: ' + formalArgs.slice(1, formalArgs.length - 1).join(', ') +
                '\n\nNOTE: Cell editors that extend directly from CellEditor must define a `template` property.');
            return;
        }

        cellEditors.add(Editor);

        localStorage.setItem('editor_' + name, script);

        addOptionInAlphaOrder(select, name);

        enableResetAndDeleteIcons('editor', name);

        if (select) {
            feedback(select.parentElement);
        }

        initLocalsButtons();
    }

    function saveLocalizer(script, select) {
        var module = {};

        try {
            var closure = new Function('module', script);
            closure(module);
            var localizer = module.exports;
            var name = localizer.name;
            if (!name || name === NEW) {
                throw 'Cannot save localizer. A `name` property with a value other than "(New)" is required.';
            }
            grid.localization.add(localizer);
        } catch (err) {
            console.error(err);
            alert(err + '\n\nAvailable locals:\nmodule');
            return;
        }

        localStorage.setItem('localizer_' + name, script);

        addOptionInAlphaOrder(select, name);

        enableResetAndDeleteIcons('localizer', name);

        if (select) {
            feedback(select.parentElement);
        }
    }

    function addOptionInAlphaOrder(el, text, value) {
        if (!el) {
            return;
        }

        var optionEls = el.options;

        var index = optionEls.findIndex(function(optionEl) {
            return optionEl.textContent === text;
        });
        if (index >= 0) {
            el.selectedIndex = index;
            return; // already in dropdown
        }

        var firstOptionGreaterThan = optionEls.find(function(optionEl) {
            return optionEl.textContent > text;
        });

        el.value = name;
        if (el.selectedIndex === -1) {
            el.add(new Option(text, value), firstOptionGreaterThan);
            el.value = value || text;
        }
    }

    function feedback(content, confirmation) {
        var el = content.querySelector('span.feedback');
        if (!confirmation) {
            confirmation = 'Saved';
        }
        el.innerText = confirmation;
        el.style.display = 'inline';
        setTimeout(function() {
            el.style.display = 'none';
        }, 750 + 50 * confirmation.length);
    }

    function injectCSS(name, css) {
        var prefix = 'injected-stylesheet-finbar-';
        var id = prefix + name;
        var el = document.getElementById(id);

        if (!el) {
            el = document.createElement('style');
            el.setAttribute('id', id);
        }

        el.innerHTML = css;

        var baseEl = document.getElementById(prefix + 'base');
        baseEl.parentElement.insertBefore(el, baseEl.nextElementSibling);
    }
});