User:Mike Dillon/Scripts/easydom-console.js
< User:Mike Dillon | Scripts
Note: You may have to bypass your browser’s cache to see the changes. In addition, after saving a sitewide CSS file such as MediaWiki:Common.css, it will take 5-10 minutes before the changes take effect, even if you clear your cache.
- Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
- Konqueror and Chrome: click Reload or press F5;
- Opera: clear the cache in Tools → Preferences;
- Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.
- This script lacks a documentation subpage. Please create it.
- Useful links: root page • root page’s subpages • links • redirects • your own
// 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 <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" }));
}
});