@mdn/bob
Version:
Builder of Bits aka The MDN Web Docs interactive examples, example builder
91 lines • 3.57 kB
JavaScript
import * as featureDetector from "./editor-libs/feature-detector.js";
import mceConsole from "./editor-libs/console.js";
import * as mceEvents from "./editor-libs/events.js";
import "../css/editor-libs/ui-fonts.css";
import "../css/editor-libs/common.css";
import "../css/editable-js-and-wat.css";
import { initCodeEditor, getEditorContent, languageJavaScript, } from "./editor-libs/codemirror-editor.js";
(function () {
const codeBlock = document.getElementById("static-js");
const exampleFeature = codeBlock.dataset["feature"];
const execute = document.getElementById("execute");
const output = document.querySelector("#console code");
const reset = document.getElementById("reset");
let codeMirror;
let staticContainer;
let liveContainer;
/**
* Reads the textContent from the interactiveCodeBlock, sends the
* textContent to executeLiveExample, and logs the output to the
* output container
*/
function applyCode() {
if (!codeMirror) {
initCodeMirror();
// "as EditorView" on next line needed to trick TypeScript
}
const currentValue = getEditorContent(codeMirror);
updateOutput(currentValue);
}
/**
* Initialize CodeMirror
*/
function initCodeMirror() {
const editorContainer = document.getElementById("editor");
codeMirror = initCodeEditor(editorContainer, codeBlock.textContent || "", languageJavaScript());
}
/**
* Initialize the interactive editor
*/
function initInteractiveEditor() {
/* If the `data-height` attribute is defined on the `codeBlock`, set
the value of this attribute as a class on the editor element. */
if (codeBlock?.dataset["height"]) {
const editor = document.getElementById("editor");
editor.classList.add(codeBlock.dataset["height"]);
}
staticContainer = document.getElementById("static");
staticContainer.classList.add("hidden");
liveContainer = document.getElementById("live");
liveContainer.classList.remove("hidden");
mceConsole();
mceEvents.register();
initCodeMirror();
}
/**
* Executes the provided code snippet and logs the result
* to the output container.
* @param {String} exampleCode - The code to execute
*/
function updateOutput(exampleCode) {
output.classList.add("fade-in");
try {
// Create a new Function from the code, and immediately execute it.
new Function(exampleCode)();
}
catch (event) {
output.textContent = "Error: " + event?.message;
}
output.addEventListener("animationend", () => output.classList.remove("fade-in"));
}
/* only execute code in supported browsers */
if (featureDetector.isDefined(exampleFeature)) {
document.documentElement.classList.add("js");
initInteractiveEditor();
execute.addEventListener("click", () => {
output.textContent = "";
applyCode();
});
reset.addEventListener("click", (event) => {
if (!window.confirm("Are you sure you want to reset the editor?\nAny changes you have made will be lost.")) {
event.preventDefault();
return;
}
window.location.reload();
});
}
else {
console.warn(`Feature ${exampleFeature} is not supported; code editor disabled.`);
}
})();
//# sourceMappingURL=editable-js.js.map