User:Mike Dillon/Scripts/easydom-console.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 }));
        }
    };

    // Samples
    var samples = createSection('Samples', 'easyDomSamples');

    // Command Window
    var commandWindow = createSection('Command Window', 'easyDomCommandWindow');

    var handleSubmit = function () {
        try {
            eval('with (easyDom) { ' + this.code.value + ' }');
            // Store history
            storeHistoryItem(this.code.value);
            // Clear
            this.code.value = '';
        } catch (e) {
            alert('Error: ' + e.name + ': ' + e.message);
        }
        return false;
    };

    with (easyDom) {
        var pane = div({ "style": "background: #aaa; border: solid black 1px;" });

        pane.appendChild(p('Standard variables:', ul(
            li(em(strong('easydom'), 'The Easy DOM HTML namespace (implicitly available)')),
            li(em(strong('playground')))
        )));

        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 form = form({ onsubmit: handleSubmit });
        var textArea = textarea({ name: "code", rows: 10, style: "width: 100%"});
        form.appendChild(div(textArea));
        form.appendChild(div(input({ type: "submit", value: "Evaluate" })));
        pane.appendChild(form);

        commandWindow.appendChild(pane);
    }

    // Command History
    var commandHistory = createSection('Command History', 'easyDomCommandHistory');

    var commandCounter = 0;

    var commandHistoryList = commandHistory.appendChild(
        easyDom.ul({ "style": "list-style: none; padding: 0" }));
    commandHistoryList.style.overflow = "auto";
    commandHistoryList.style.height = "15em";

    var historyLimit = 30;
    var storeHistoryItem = function (data) {
        var historyItem = easyDom.li(easyDom.pre(
            { "style": "border: 1px solid rgb(80,60,60); margin: 0" },
            ++commandCounter, ": ", 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 playground = createSection('Plyaground', 'easyDomPlayground');

    playground.appendChild(easydom.p({ style: "background: red; border: 1px solid grey;" },
        "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."));
});
// </nowiki></pre>