User:Mike Dillon/Scripts/easydom-console.js

// Requires: [[User:Mike Dillon/Scripts/easydom.js]]
// Optionally requires: [[User:Mike Dillon/Scripts/easydom-ext.js]]
 
// <pre><nowiki>
addOnloadHook(function () {
    var consoleContainer = document.getElementById('easyDomConsole');
    if (consoleContainer == null) return;
 
    var createSection = function (title, id) {
        with (easydom) {
            consoleContainer.appendChild(h2(title));
            return consoleContainer.appendChild(div({ "id": id }));
        }
    };
 
    var removeAllChildren = function (node) {
        while (node && node.hasChildNodes()) {
            node.removeChild(node.firstChild);
        }
    };
 
    // Create sections
    var commandWindow = createSection('Command Window', 'easyDomCommandWindow');
    var samples = createSection('Samples', 'easyDomSamples');
    var commandHistory = createSection('Command History', 'easyDomCommandHistory');
    var playground = createSection('Playground', 'easyDomPlayground');
 
    // Command Window
    var createSubmitHandler = function (data, clear) {
        return function () {
            // Skip blanks
            if (!(data.value && data.value.match('\\S'))) {
                // Clear
                if (clear) data.value = '';
                return false;
            }
 
            try {
                eval('with (easyDom) { ' + data.value + ' }');
                // Store history
                storeHistoryItem(data.value);
                // Clear
                if (clear) data.value = '';
            } catch (e) {
                alert('Error: ' + e);
            }
            return false;
        };
    };
 
    with (easyDom) {
        var pane = div({ "style": "background: #aaa; border: solid black 1px;" });
 
        pane.appendChild(p('Standard variables:', ul(
            li(strong('easydom'), ': The Easy DOM HTML namespace (implicitly available)'),
            li(strong('playground'), ': The playground element')
        )));
 
        if (easydomMath) {
            pane.appendChild(p('Extended variables (available with easydom-ext.js):', ul(
                li(strong('easydomMath'), ': The Easy DOM MathML namespace'),
                li(strong('easydomSvg'), ': The Easy DOM SVG namespace')
            )));
        }
 
        var consoleTextArea = textarea({ name: "code", rows: 10, style: "width: 100%"});
        var consoleForm = form({ onsubmit: createSubmitHandler(consoleTextArea, true) });
        consoleForm.appendChild(div(consoleTextArea));
        var buttons = div(input({ type: "submit", value: "Evaluate" }),
            ' ', input({ type: "reset", value: "Clear" }));
        consoleForm.appendChild(buttons);
        pane.appendChild(consoleForm);
 
        commandWindow.appendChild(pane);
    }
 
    var createCommandWindowPopulator = function (data) {
        return function () {
            consoleTextArea.value = data;
            consoleTextArea.focus();
            return false;
        };
    };
 
    // Samples
    var sampleList = samples.appendChild(easyDom.ul());
    if (samples.style.overflowY != null) {
        samples.style.overflowY = "auto";
        samples.style.maxHeight = "15em";
    } else {
        samples.style.overflow = "scroll";
        samples.style.height = "15em";
    }
 
    var createSampleItem = function (description, sampleCode) {
        with (easydom) {
            var editLink = a({ "href": "#", "title": "Edit sample code in Command Window" }, '(edit)');
            editLink.onclick = createCommandWindowPopulator(sampleCode);
 
            var execLink = a({ "href": "#", "title": "Execute sample code directly" }, '(exec)');
            execLink.onclick = createSubmitHandler({ "value": sampleCode });
 
            return li(description, ' ', editLink, ' ', execLink);
        }
    };
 
    // Say Hello
    sampleList.appendChild(createSampleItem(
        'Add "Say Hello!" link to playground that says "Hello!"',
        'playground.appendChild(p(a({ "href": "#", "onclick": function () {\n' +
        '    alert("Hello!");\n' +
        '    return false;\n' +
        '} }, "Say Hello!")));'
    ));
 
    if (easydomMath) {
        // Simple matrix
        sampleList.appendChild(createSampleItem(
            'Create a simple matrix equation using MathML (Presentation)',
            'with (easydomMath) {\n' +
            '    playground.appendChild(easydom.p(math(mrow(mi("a"), mo("="),\n' +
            '        mfenced({ "open": "[", "close": "]" },\n' +
            '            mtable(\n' +
            '                mtr(mtd(mi("x")), mtd(mi("y"))),\n' +
            '                mtr(mtd(mi("z")), mtd(mi("w")))\n' +
            '            ))))))\n' +
            '}'
        ));
    }
 
    if (easydomSvg) {
        // SVG Star
        sampleList.appendChild(createSampleItem(
            'Create a star using SVG',
            'var starSize = 100;\n' +
            'var createStar = function (size) {\n' +
            '    var scale = size / 11;\n' +
            '\n' +
            '    with (easydomSvg) {\n' +
            '        var star = path({\n' +
            '            "d": "M 100,50 L 65.371323,61.16792 L 65.45085,97.552826 " +\n' +
            '                 "L 44.128677,68.070074 L 9.5491503,79.389263 L 31,50 " +\n' +
            '                 "L 9.5491503,20.610737 L 44.128677,31.929926 L 65.45085,2.4471742 " +\n' +
            '                 "L 65.371323,38.83208 L 100,50 z",\n' +
            '            "transform": "matrix(0,-9.678482e-2,9.678482e-2,0,0.660759,10.80135)",\n' +
            '            "style": "fill: #fdff00; fill-opacity: 1; fill-rule: nonzero; " +\n' +
            '                     "stroke: #605a00; stroke-width: 7.74914932; stroke-linejoin: miter; " +\n' +
            '                     "stroke-miterlimit: 40; stroke-dashoffset: 0; stroke-opacity: 1"\n' +
            '        });\n' +
            '\n' +
            '        return svg({ "width": size, "height": size },\n' +
            '            g({ "transform": "scale(" + scale + ")" }, star));\n' +
            '    }\n' +
            '};\n' +
            '\n' +
            'playground.appendChild(div(createStar(starSize)));'
        ));
    }
 
    // Command History
    var commandCounter = 0;
 
    var commandHistoryList = commandHistory.appendChild(
        easyDom.ul({ "style": "list-style: none; padding: 0" }));
    if (commandHistory.style.overflowY != null) {
        commandHistory.style.overflowY = "auto";
        commandHistory.style.maxHeight = "15em";
    } else {
        commandHistory.style.overflow = "scroll";
        commandHistory.style.height = "15em";
    }
 
    var historyLimit = 30;
    var storeHistoryItem = function (data) {
        var historyLink = easyDom.a({
            "href": "#",
            "title": "Edit previously exited code in Command Window",
            "onclick": createCommandWindowPopulator(data)
        }, ++commandCounter);
 
        var historyItem = easyDom.li(easyDom.pre(
            { "style": "border: 1px solid rgb(80,60,60); margin: 0" },
            historyLink, ": ", data));
        if (!commandHistoryList.hasChildNodes) {
            commandHistoryList.appendChild(historyItem);
            return;
        }
 
        if (commandHistoryList.childNodes.length > historyLimit) {
            commandHistoryList.removeChild(commandHistoryList.childNodes[historyLimit]);
        }
 
        commandHistoryList.insertBefore(
            historyItem, commandHistoryList.firstChild);
    };
 
    // Playground
    var setupPlayground = function () {
        // Clear playground
        removeAllChildren(playground);
 
        // Add boilerplate
        var playgroundMessageAttr = { style: "background: red; border: 1px solid grey;" };
        var playgroundMessage =
            "This <div> is here to play with. It has a DOM id of \"" + playground.id + "\". " +
            "It can also be referenced using the \"playground\" Javascript variable.";
        playground.appendChild(easydom.p(playgroundMessageAttr, playgroundMessage));
    };
    setupPlayground();
 
    // Add clear buttons to Command Window button panel
    with (easydom) {
        var clearHistory = input({ "type": "button", "value": "Clear History",
            "onclick": function () { removeAllChildren(commandHistoryList) } });
        var resetPlayground = input({ "type": "button", "value": "Reset Playground",
            "onclick": function () { setupPlayground() } });
        // Insert float as first child
        buttons.insertBefore(
            div({ "style": "float: right" }, clearHistory, ' ', resetPlayground),
            buttons.firstChild);
        // Clear
        buttons.appendChild(div({ "style": "clear: both" }));
    }
});
// </nowiki></pre>