diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css index b6cc74bf..c29f855f 100755 --- a/src/web/stylesheets/layout/_io.css +++ b/src/web/stylesheets/layout/_io.css @@ -449,6 +449,11 @@ margin-left: 0; } +.cm-status-bar .disabled { + background-color: unset !important; + cursor: not-allowed; +} + /* Dropup Button */ .cm-status-bar-select-btn { border: none; diff --git a/src/web/utils/statusBar.mjs b/src/web/utils/statusBar.mjs index d58e8d68..8fe4e348 100644 --- a/src/web/utils/statusBar.mjs +++ b/src/web/utils/statusBar.mjs @@ -22,6 +22,7 @@ class StatusBarPanel { this.eolHandler = opts.eolHandler; this.chrEncHandler = opts.chrEncHandler; this.chrEncGetter = opts.chrEncGetter; + this.htmlOutput = opts.htmlOutput; this.eolVal = null; this.chrEncVal = null; @@ -65,6 +66,9 @@ class StatusBarPanel { const el = e.target .closest(".cm-status-bar-select") .querySelector(".cm-status-bar-select-content"); + const btn = e.target.closest(".cm-status-bar-select-btn"); + + if (btn.classList.contains("disabled")) return; el.classList.add("show"); @@ -269,6 +273,30 @@ class StatusBarPanel { ); } + /** + * Checks whether there is HTML output requiring some widgets to be disabled + */ + monitorHTMLOutput() { + if (!this.htmlOutput?.changed) return; + + if (this.htmlOutput?.html === "") { + // Enable all controls + this.dom.querySelectorAll(".disabled").forEach(el => { + el.classList.remove("disabled"); + }); + } else { + // Disable chrenc, length, selection etc. + this.dom.querySelectorAll(".cm-status-bar-select-btn").forEach(el => { + el.classList.add("disabled"); + }); + + this.dom.querySelector(".stats-length-value").parentNode.classList.add("disabled"); + this.dom.querySelector(".stats-lines-value").parentNode.classList.add("disabled"); + this.dom.querySelector(".sel-info").classList.add("disabled"); + this.dom.querySelector(".cur-offset-info").classList.add("disabled"); + } + } + /** * Builds the Left-hand-side widgets * @returns {string} @@ -404,6 +432,7 @@ function makePanel(opts) { sbPanel.updateBakeStats(); sbPanel.updateStats(view.state.doc); sbPanel.updateSelection(view.state, false); + sbPanel.monitorHTMLOutput(); return { "dom": sbPanel.dom, @@ -412,6 +441,7 @@ function makePanel(opts) { sbPanel.updateCharEnc(); sbPanel.updateSelection(update.state, update.selectionSet); sbPanel.updateBakeStats(); + sbPanel.monitorHTMLOutput(); if (update.geometryChanged) { sbPanel.updateSizing(update.view); } diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs index e88052d8..6f888c49 100755 --- a/src/web/waiters/OutputWaiter.mjs +++ b/src/web/waiters/OutputWaiter.mjs @@ -91,7 +91,8 @@ class OutputWaiter { bakeStats: this.bakeStats, eolHandler: this.eolChange.bind(this), chrEncHandler: this.chrEncChange.bind(this), - chrEncGetter: this.getChrEnc.bind(this) + chrEncGetter: this.getChrEnc.bind(this), + htmlOutput: this.htmlOutput }), htmlPlugin(this.htmlOutput), copyOverride(), @@ -564,9 +565,6 @@ class OutputWaiter { switch (output.data.type) { case "html": - // TODO what if the HTML content needs to be in a certain character encoding? - // Grey out chr enc selection? Set back to Raw Bytes? - this.setHTMLOutput(output.data.result); break; case "ArrayBuffer":