diff --git a/mkdocs_feather/assets/mkdocs-feather/feather.css b/mkdocs_feather/assets/mkdocs-feather/feather.css index cb22585..c983597 100644 --- a/mkdocs_feather/assets/mkdocs-feather/feather.css +++ b/mkdocs_feather/assets/mkdocs-feather/feather.css @@ -1,17 +1,20 @@ .CodeMirror { - border: 1px solid #ddd; - background: #ffe; - height: auto; + border: 1px solid #ddd; + background: #ffe; + height: auto; } + .CodeMirror-scroll { - /* max-height: 300px; */ - /* min-height: 208px; */ + /* max-height: 300px; */ + /* min-height: 208px; */ } + .controls { - padding: 10px 0px; + padding: 10px 0px; } + .code-wrapper { - /* min-height: 200px; */ + /* min-height: 200px; */ } .clearfix { @@ -24,12 +27,12 @@ } .code-wrapper { - /* min-width: 300px; */ - flex: 1; + /* min-width: 300px; */ + flex: 1; } + .output-wrapper { - padding: 5px 20px; - border: 1px solid #eee; + /* padding: 5px 20px; */ } button { @@ -60,11 +63,13 @@ header { .code-editor { clear: both; } + .code-editor .preview-label { font-weight: bold; padding: 0px 10px; background: #eee; } + .code-editor iframe { padding: 20px; border: 1px solid #eee; @@ -77,7 +82,8 @@ header { background-color: #f1f1f1; } -.tabs button, .file-link { +.tabs button, +.file-link { float: left; border: none; outline: none; @@ -86,11 +92,13 @@ header { transition: 0.3s; } -.tabs button:hover, .file-link:hover { +.tabs button:hover, +.file-link:hover { background-color: #ddd; } -.tabs button.active, .file-link.active { +.tabs button.active, +.file-link.active { background-color: #ccc; } diff --git a/mkdocs_feather/assets/mkdocs-feather/feather.js b/mkdocs_feather/assets/mkdocs-feather/feather.js index 39a1197..4a6a18e 100644 --- a/mkdocs_feather/assets/mkdocs-feather/feather.js +++ b/mkdocs_feather/assets/mkdocs-feather/feather.js @@ -37,8 +37,8 @@ const CODEMIRROR_OPTIONS = { extraKeys: { Tab: (cm) => { cm.somethingSelected() - ? cm.execCommand('indentMore') - : cm.execCommand('insertSoftTab'); + ? cm.execCommand('indentMore') + : cm.execCommand('insertSoftTab'); } } } @@ -116,7 +116,7 @@ function setupExample(feather, element) { }, getBuffer(name) { - for (var i=0; i") - .addClass("file-link") - .text(name) - .data("name", name) - .appendTo(parent); + .addClass("file-link") + .text(name) + .data("name", name) + .appendTo(parent); }, triggerEvent(name) { @@ -210,7 +210,7 @@ function setupExample(feather, element) { var lang = this.findLanguage(); var id = $(this.element).data("id") || "default"; var hasOptions = $(`#livecode-options-${id}`).length > 0; - var options = hasOptions ? $(`#livecode-options-${id}`).data() : {}; + var options = hasOptions ? $(`#livecode-options-${id}`).data() : {}; this.options = { ...this.options, @@ -269,7 +269,7 @@ function setupExample(feather, element) { var textarea = $(this.editor).find("textarea.code")[0]; var mode = this.getMode(); - var options = {...CODEMIRROR_OPTIONS, mode: mode}; + var options = { ...CODEMIRROR_OPTIONS, mode: mode }; console.log("codemirror", options); this.codemirror = CodeMirror.fromTextArea(textarea, options); }, @@ -312,8 +312,8 @@ function setupExample(feather, element) { var $iframe = $(this.editor).find(".preview iframe"); function update() { - var html = codemirror.doc.getValue(); - $iframe.attr("srcdoc", html); + var html = codemirror.doc.getValue(); + $iframe.attr("srcdoc", html); } codemirror.on("change", update); update(); @@ -323,7 +323,7 @@ function setupExample(feather, element) { var $iframe = $(this.editor).find(".preview iframe"); function update(output) { - $iframe.attr("srcdoc", output); + $iframe.attr("srcdoc", output); } this.outputHooks.push(update); }, @@ -348,7 +348,7 @@ function setupExample(feather, element) { }, getHeaders() { - var headers = {...this.options.headers}; + var headers = { ...this.options.headers }; if (Object.keys(this.options.env).length) { headers['X-FEATHER-ENV'] = editor.getEnvHeader(); @@ -365,13 +365,13 @@ function setupExample(feather, element) { var editor = this; - $(this.editor).find(".run").on('click', function() { + $(this.editor).find(".run").on('click', function () { var mode = $(this).data("mode") || "exec"; var body; if (editor.options.multifile) { body = new FormData(); - for (var i=0; i < editor.buffers.length; i++) { + for (var i = 0; i < editor.buffers.length; i++) { var buf = editor.buffers[i]; var blob = new Blob([buf.doc.getValue()]); body.append(buf.name, blob, buf.name); @@ -413,10 +413,10 @@ function setupExample(feather, element) { $(editor).find(target).show(); } - $(function() { + $(function () { updateTabs(); - $(editor).find(".tab-link").click(function() { + $(editor).find(".tab-link").click(function () { $(this).parent().find(".tab-link").removeClass("active"); $(this).addClass("active"); updateTabs(); @@ -425,7 +425,7 @@ function setupExample(feather, element) { }, setupFileTabs() { var that = this; - $(this.editor).find(".filenames").on('click', '.file-link', function() { + $(this.editor).find(".filenames").on('click', '.file-link', function () { var name = $(this).html(); that.selectBuffer(name); $(this).parent().find(".file-link").removeClass("active"); @@ -450,10 +450,10 @@ function setupExample(feather, element) { }, showOutput(output) { - $(this.editor).find(".output-wrapper").show(); + $(this.editor).find(".output-wrapper .output").show(); this.options.renderOutput(this.editor, output); - for (var i=0; i < this.outputHooks.length; i++) { + for (var i = 0; i < this.outputHooks.length; i++) { this.outputHooks[i](output); } }, @@ -470,7 +470,7 @@ function setupExample(feather, element) { $(this.editor).find(".output-wrapper .output").hide(); $(this.editor).find(".output").text(""); - for (var i=0; i < this.outputHooks.length; i++) { + for (var i = 0; i < this.outputHooks.length; i++) { this.outputHooks[i](""); } }, @@ -487,7 +487,7 @@ function setupExample(feather, element) { addRunButtons() { var buttons = this.options.buttons; - for (var i=0; i") .addClass("run") @@ -536,7 +536,7 @@ var feather = { getOptions(language) { var defaults = this.defaultOptions[language] || {}; var options = this.options[language] || {}; - return {...defaults, ...options} + return { ...defaults, ...options } }, addRunButton(options) { @@ -549,7 +549,7 @@ var feather = { console.log("feature_config is not setup. Livecode functionality may not work."); } - $(function() { + $(function () { $("pre.feather").each((i, e) => { var editor = setupExample(feather, e); feather.editors.push(editor);