From 6543fee71a935b0461003bcb3155995d133de17f Mon Sep 17 00:00:00 2001 From: e218736 <147728997+e218736@users.noreply.github.com> Date: Tue, 13 Feb 2024 12:00:40 +0000 Subject: [PATCH] input/optput status bar elements with tooltips tabbable --- src/web/utils/statusBar.mjs | 185 +++++++++++++++++++++++------------- 1 file changed, 120 insertions(+), 65 deletions(-) diff --git a/src/web/utils/statusBar.mjs b/src/web/utils/statusBar.mjs index 6469379a..4d27cbff 100644 --- a/src/web/utils/statusBar.mjs +++ b/src/web/utils/statusBar.mjs @@ -4,14 +4,16 @@ * @license Apache-2.0 */ -import {showPanel} from "@codemirror/view"; -import {CHR_ENC_SIMPLE_LOOKUP, CHR_ENC_SIMPLE_REVERSE_LOOKUP} from "../../core/lib/ChrEnc.mjs"; +import { showPanel } from "@codemirror/view"; +import { + CHR_ENC_SIMPLE_LOOKUP, + CHR_ENC_SIMPLE_REVERSE_LOOKUP, +} from "../../core/lib/ChrEnc.mjs"; /** * A Status bar extension for CodeMirror */ class StatusBarPanel { - /** * StatusBarPanel constructor * @param {Object} opts @@ -42,7 +44,10 @@ class StatusBarPanel { dom.className = "cm-status-bar"; dom.setAttribute("data-help-title", `${this.label} status bar`); - dom.setAttribute("data-help", `This status bar provides information about data in the ${this.label}. Help topics are available for each of the components by activating help when hovering over them.`); + dom.setAttribute( + "data-help", + `This status bar provides information about data in the ${this.label}. Help topics are available for each of the components by activating help when hovering over them.` + ); lhs.innerHTML = this.constructLHS(); rhs.innerHTML = this.constructRHS(); @@ -50,12 +55,24 @@ class StatusBarPanel { dom.appendChild(rhs); // Event listeners - dom.querySelectorAll(".cm-status-bar-select-btn").forEach( - el => el.addEventListener("click", this.showDropUp.bind(this), false) + dom.querySelectorAll(".cm-status-bar-select-btn").forEach((el) => + el.addEventListener("click", this.showDropUp.bind(this), false) + ); + dom.querySelector(".eol-select").addEventListener( + "click", + this.eolSelectClick.bind(this), + false + ); + dom.querySelector(".chr-enc-select").addEventListener( + "click", + this.chrEncSelectClick.bind(this), + false + ); + dom.querySelector(".cm-status-bar-filter-input").addEventListener( + "keyup", + this.chrEncFilter.bind(this), + false ); - dom.querySelector(".eol-select").addEventListener("click", this.eolSelectClick.bind(this), false); - dom.querySelector(".chr-enc-select").addEventListener("click", this.chrEncSelectClick.bind(this), false); - dom.querySelector(".cm-status-bar-filter-input").addEventListener("keyup", this.chrEncFilter.bind(this), false); return dom; } @@ -93,14 +110,14 @@ class StatusBarPanel { e.preventDefault(); const eolLookup = { - "LF": "\u000a", - "VT": "\u000b", - "FF": "\u000c", - "CR": "\u000d", - "CRLF": "\u000d\u000a", - "NEL": "\u0085", - "LS": "\u2028", - "PS": "\u2029" + LF: "\u000a", + VT: "\u000b", + FF: "\u000c", + CR: "\u000d", + CRLF: "\u000d\u000a", + NEL: "\u0085", + LS: "\u2028", + PS: "\u2029", }; const eolval = eolLookup[e.target.getAttribute("data-val")]; @@ -161,7 +178,8 @@ class StatusBarPanel { // CodeMirror always counts line breaks as one character. // We want to show an accurate reading of how many bytes there are. if (state.lineBreak.length !== 1) { - docLength += (state.lineBreak.length * state.doc.lines) - state.doc.lines - 1; + docLength += + state.lineBreak.length * state.doc.lines - state.doc.lines - 1; } length.textContent = docLength; lines.textContent = state.doc.lines; @@ -173,9 +191,9 @@ class StatusBarPanel { * @param {boolean} selectionSet */ updateSelection(state, selectionSet) { - const selLen = state?.selection?.main ? - state.selection.main.to - state.selection.main.from : - 0; + const selLen = state?.selection?.main + ? state.selection.main.to - state.selection.main.from + : 0; const selInfo = this.dom.querySelector(".sel-info"), curOffsetInfo = this.dom.querySelector(".cur-offset-info"); @@ -193,11 +211,12 @@ class StatusBarPanel { if (state.lineBreak.length !== 1) { const fromLine = state.doc.lineAt(from).number; const toLine = state.doc.lineAt(to).number; - from += (state.lineBreak.length * fromLine) - fromLine - 1; - to += (state.lineBreak.length * toLine) - toLine - 1; + from += state.lineBreak.length * fromLine - fromLine - 1; + to += state.lineBreak.length * toLine - toLine - 1; } - if (selLen > 0) { // Range + if (selLen > 0) { + // Range const start = this.dom.querySelector(".sel-start-value"), end = this.dom.querySelector(".sel-end-value"), length = this.dom.querySelector(".sel-length-value"); @@ -207,7 +226,8 @@ class StatusBarPanel { start.textContent = from; end.textContent = to; length.textContent = to - from; - } else { // Position + } else { + // Position const offset = this.dom.querySelector(".cur-offset-value"); selInfo.style.display = "none"; @@ -231,7 +251,7 @@ class StatusBarPanel { "\u000d\u000a": ["CRLF", "Carriage Return + Line Feed"], "\u0085": ["NEL", "Next Line"], "\u2028": ["LS", "Line Separator"], - "\u2029": ["PS", "Paragraph Separator"] + "\u2029": ["PS", "Paragraph Separator"], }; const val = this.dom.querySelector(".eol-value"); @@ -239,11 +259,13 @@ class StatusBarPanel { const eolName = eolLookup[state.lineBreak]; val.textContent = eolName[0]; button.setAttribute("title", `End of line sequence:
${eolName[1]}`); - button.setAttribute("data-original-title", `End of line sequence:
${eolName[1]}`); + button.setAttribute( + "data-original-title", + `End of line sequence:
${eolName[1]}` + ); this.eolVal = state.lineBreak; } - /** * Sets the current character encoding of the document */ @@ -251,13 +273,21 @@ class StatusBarPanel { const chrEncVal = this.chrEncGetter(); if (chrEncVal === this.chrEncVal) return; - const name = CHR_ENC_SIMPLE_REVERSE_LOOKUP[chrEncVal] ? CHR_ENC_SIMPLE_REVERSE_LOOKUP[chrEncVal] : "Raw Bytes"; + const name = CHR_ENC_SIMPLE_REVERSE_LOOKUP[chrEncVal] + ? CHR_ENC_SIMPLE_REVERSE_LOOKUP[chrEncVal] + : "Raw Bytes"; const val = this.dom.querySelector(".chr-enc-value"); const button = val.closest(".cm-status-bar-select-btn"); val.textContent = name; - button.setAttribute("title", `${this.label} character encoding:
${name}`); - button.setAttribute("data-original-title", `${this.label} character encoding:
${name}`); + button.setAttribute( + "title", + `${this.label} character encoding:
${name}` + ); + button.setAttribute( + "data-original-title", + `${this.label} character encoding:
${name}` + ); this.chrEncVal = chrEncVal; } @@ -274,7 +304,9 @@ class StatusBarPanel { bakingTimeInfo.style.display = "inline-block"; bakingTime.textContent = this.timing.duration(this.tabNumGetter()); - const info = this.timing.printStages(this.tabNumGetter()).replace(/\n/g, "
"); + const info = this.timing + .printStages(this.tabNumGetter()) + .replace(/\n/g, "
"); bakingTimeInfo.setAttribute("data-original-title", info); } else { bakingTimeInfo.style.display = "none"; @@ -287,11 +319,11 @@ class StatusBarPanel { */ updateSizing(view) { const viewHeight = view.contentDOM.parentNode.clientHeight; - this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach( - el => { - el.style.maxHeight = (viewHeight - 50) + "px"; - } - ); + this.dom + .querySelectorAll(".cm-status-bar-select-scroll") + .forEach((el) => { + el.style.maxHeight = viewHeight - 50 + "px"; + }); } /** @@ -302,19 +334,27 @@ class StatusBarPanel { if (this.htmlOutput?.html === "") { // Enable all controls - this.dom.querySelectorAll(".disabled").forEach(el => { + 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 + .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(".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"); + this.dom + .querySelector(".cur-offset-info") + .classList.add("disabled"); } } @@ -324,11 +364,11 @@ class StatusBarPanel { */ constructLHS() { return ` - + abc - + sort @@ -351,28 +391,35 @@ class StatusBarPanel { * @returns {string} */ constructRHS() { - const chrEncOptions = Object.keys(CHR_ENC_SIMPLE_LOOKUP).map(name => - `${name}` - ).join(""); + const chrEncOptions = Object.keys(CHR_ENC_SIMPLE_LOOKUP) + .map( + (name) => + `${name}` + ) + .join(""); let chrEncHelpText = "", eolHelpText = ""; if (this.label === "Input") { - chrEncHelpText = "The input character encoding defines how the input text is encoded into bytes which are then processed by the Recipe.

The 'Raw bytes' option attempts to treat the input as individual bytes in the range 0-255. If it detects any characters with Unicode values above 255, it will treat the entire input as UTF-8. 'Raw bytes' is usually the best option if you are inputting binary data, such as a file."; - eolHelpText = "The End of Line Sequence defines which bytes are considered EOL terminators. Pressing the return key will enter this value into the input and create a new line.

Changing the EOL sequence will not modify any existing data in the input but may change how previously entered line breaks are displayed. Lines added while a different EOL terminator was set may not now result in a new line, but may be displayed as control characters instead."; + chrEncHelpText = + "The input character encoding defines how the input text is encoded into bytes which are then processed by the Recipe.

The 'Raw bytes' option attempts to treat the input as individual bytes in the range 0-255. If it detects any characters with Unicode values above 255, it will treat the entire input as UTF-8. 'Raw bytes' is usually the best option if you are inputting binary data, such as a file."; + eolHelpText = + "The End of Line Sequence defines which bytes are considered EOL terminators. Pressing the return key will enter this value into the input and create a new line.

Changing the EOL sequence will not modify any existing data in the input but may change how previously entered line breaks are displayed. Lines added while a different EOL terminator was set may not now result in a new line, but may be displayed as control characters instead."; } else { - chrEncHelpText = "The output character encoding defines how the output bytes are decoded into text which can be displayed to you.

The 'Raw bytes' option treats the output data as individual bytes in the range 0-255."; - eolHelpText = "The End of Line Sequence defines which bytes are considered EOL terminators.

Changing this value will not modify the value of the output, but may change how certain bytes are displayed and whether they result in a new line being created."; + chrEncHelpText = + "The output character encoding defines how the output bytes are decoded into text which can be displayed to you.

The 'Raw bytes' option treats the output data as individual bytes in the range 0-255."; + eolHelpText = + "The End of Line Sequence defines which bytes are considered EOL terminators.

Changing this value will not modify the value of the output, but may change how certain bytes are displayed and whether they result in a new line being created."; } return ` -