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

// Requires: User:Mike Dillon/Scripts/easydom.js // Optionally requires: User:Mike Dillon/Scripts/easydom-ext.js

$(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 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" })); } });