chuijs 4.0.3 → 4.0.4

package/framework/components/chui_text_editor/text_editor.js

@@ -7,10 +7,10 @@ const { Button } = require("../chui_button/button");
 const { TextInput } = require("../chui_inputs/chui_text/text");
 
 class TextEditor {
-    #chui_text_editor_test = document.createElement("chui_text_editor_test");
-    #chui_text_editor = document.createElement("chui_text_editor");
-    #editor_controls = document.createElement("chui_editor_controls");
-    #text_input = document.createElement("chui_editor_text_input");
+    #chuiTextEditorTest = document.createElement("chui_text_editor_test");
+    #chuiTextEditor = document.createElement("chui_text_editor");
+    #editorControls = document.createElement("chui_editor_controls");
+    #textInput = document.createElement("chui_editor_text_input");
     #id = require("randomstring").generate();
     #label = document.createElement("label");
     constructor(height = String(), options = {}) {
@@ -24,69 +24,69 @@ class TextEditor {
             this.#label.setAttribute("for", this.#id);
             // `for` у div не работает: имя связываем через aria-labelledby
             this.#label.id = `${this.#id}_label`;
-            this.#chui_text_editor_test.appendChild(this.#label);
+            this.#chuiTextEditorTest.appendChild(this.#label);
         }
         // Панель управления — панель инструментов с именем
-        this.#editor_controls.appendChild(new TextEditorPanel(this.#text_input, options.controls).set());
-        this.#editor_controls.setAttribute("role", "toolbar");
-        this.#editor_controls.setAttribute(
+        this.#editorControls.appendChild(new TextEditorPanel(this.#textInput, options.controls).set());
+        this.#editorControls.setAttribute("role", "toolbar");
+        this.#editorControls.setAttribute(
             "aria-label",
             options.controlsLabel === undefined ? I18n.t("editor.formatting") : options.controlsLabel
         );
-        this.#editor_controls.setAttribute("aria-controls", this.#id);
+        this.#editorControls.setAttribute("aria-controls", this.#id);
         //
-        this.#text_input.contentEditable = "true";
-        this.#text_input.id = this.#id;
+        this.#textInput.contentEditable = "true";
+        this.#textInput.id = this.#id;
         // contenteditable — это textbox: без роли и имени поле читается как пустой текст
-        this.#text_input.setAttribute("role", "textbox");
-        this.#text_input.setAttribute("aria-multiline", "true");
-        if (options.title !== undefined) this.#text_input.setAttribute("aria-labelledby", this.#label.id);
+        this.#textInput.setAttribute("role", "textbox");
+        this.#textInput.setAttribute("aria-multiline", "true");
+        if (options.title !== undefined) this.#textInput.setAttribute("aria-labelledby", this.#label.id);
         else
-            this.#text_input.setAttribute(
+            this.#textInput.setAttribute(
                 "aria-label",
                 options.label === undefined ? I18n.t("editor.textEditor") : options.label
             );
-        this.#text_input.style.height = height;
-        this.#chui_text_editor.appendChild(this.#editor_controls);
-        this.#chui_text_editor.appendChild(this.#text_input);
+        this.#textInput.style.height = height;
+        this.#chuiTextEditor.appendChild(this.#editorControls);
+        this.#chuiTextEditor.appendChild(this.#textInput);
         //
         document.execCommand("defaultParagraphSeparator", false, "p");
-        this.#text_input.appendChild(initFirstLine());
+        this.#textInput.appendChild(initFirstLine());
         //
-        this.#text_input.addEventListener("keyup", (e) => {
-            if (e.keyCode === 8 && this.#text_input.children.length === 0) {
-                this.#text_input.appendChild(initFirstLine());
+        this.#textInput.addEventListener("keyup", (e) => {
+            if (e.keyCode === 8 && this.#textInput.children.length === 0) {
+                this.#textInput.appendChild(initFirstLine());
             }
         });
-        let editImage = new DialogEdit(I18n.t("editor.editImage"));
-        this.#text_input.addEventListener("dblclick", (e) => {
+        const editImage = new DialogEdit(I18n.t("editor.editImage"));
+        this.#textInput.addEventListener("dblclick", (e) => {
             if (e.target.tagName === "IMG") {
                 editImage.setTarget(e.target);
                 editImage.openDialog();
             }
         });
-        this.#editor_controls.appendChild(editImage.set());
+        this.#editorControls.appendChild(editImage.set());
         // Фокус отмечает контур области текста (styles.css): рамки у самого редактора больше нет —
         // её рисуют панель сверху и поле снизу, как у MarkdownEditor
-        this.#chui_text_editor_test.appendChild(this.#chui_text_editor);
+        this.#chuiTextEditorTest.appendChild(this.#chuiTextEditor);
     }
     addInputListener(listener = () => {}) {
-        this.#text_input.addEventListener("input", listener);
+        this.#textInput.addEventListener("input", listener);
     }
     setValueAsHTML(value) {
-        this.#text_input.innerHTML = value;
+        this.#textInput.innerHTML = value;
     }
     getValueAsHTML() {
-        return this.#text_input.innerHTML;
+        return this.#textInput.innerHTML;
     }
     setValueAsText(value) {
-        this.#text_input.innerText = value;
+        this.#textInput.innerText = value;
     }
     getValueAsText() {
-        return this.#text_input.innerText;
+        return this.#textInput.innerText;
     }
     set() {
-        return this.#chui_text_editor_test;
+        return this.#chuiTextEditorTest;
     }
 }
 
@@ -94,62 +94,62 @@ exports.TextEditor = TextEditor;
 
 class DialogEdit {
     #target = undefined;
-    #dialog_link = new Dialog({ width: "max-content", height: "max-content", closeOutSideClick: true });
-    #img_width = new TextInput({ title: I18n.t("editor.width"), width: "150px" });
-    #img_height = new TextInput({ title: I18n.t("editor.height"), width: "150px" });
+    #dialogLink = new Dialog({ width: "max-content", height: "max-content", closeOutSideClick: true });
+    #imgWidth = new TextInput({ title: I18n.t("editor.width"), width: "150px" });
+    #imgHeight = new TextInput({ title: I18n.t("editor.height"), width: "150px" });
     constructor(label) {
         //
-        let content_body = new ContentBlock({
+        const contentBody = new ContentBlock({
             direction: "row",
             wrap: "wrap",
             align: "center",
             justify: "center",
         });
-        content_body.setWidth("-webkit-fill-available");
-        let content_header = new ContentBlock({
+        contentBody.setWidth("-webkit-fill-available");
+        const contentHeader = new ContentBlock({
             direction: "row",
             wrap: "wrap",
             align: "center",
             justify: "space-between",
             disableMarginChild: true,
         });
-        content_header.setWidth("-webkit-fill-available");
-        content_body.add(this.#img_width, this.#img_height);
-        this.#dialog_link.addToBody(content_body);
-        content_header.add(
+        contentHeader.setWidth("-webkit-fill-available");
+        contentBody.add(this.#imgWidth, this.#imgHeight);
+        this.#dialogLink.addToBody(contentBody);
+        contentHeader.add(
             new Button({
                 title: I18n.t("common.close"),
-                clickEvent: () => this.#dialog_link.close(),
+                clickEvent: () => this.#dialogLink.close(),
             }),
             new Label(label),
             new Button({
                 title: I18n.t("editor.save"),
                 clickEvent: () => {
-                    this.#target.style.width = `${this.#img_width.getValue()}`;
-                    this.#target.style.height = `${this.#img_height.getValue()}`;
-                    this.#dialog_link.close();
+                    this.#target.style.width = `${this.#imgWidth.getValue()}`;
+                    this.#target.style.height = `${this.#imgHeight.getValue()}`;
+                    this.#dialogLink.close();
                 },
             })
         );
-        this.#dialog_link.addToHeader(content_header);
+        this.#dialogLink.addToHeader(contentHeader);
     }
     setTarget(target) {
         this.#target = target;
-        let style = getComputedStyle(this.#target);
-        this.#img_width.setValue(style.width);
-        this.#img_height.setValue(style.height);
+        const style = getComputedStyle(this.#target);
+        this.#imgWidth.setValue(style.width);
+        this.#imgHeight.setValue(style.height);
     }
     openDialog() {
-        this.#dialog_link.open();
+        this.#dialogLink.open();
     }
     set() {
-        return this.#dialog_link.set();
+        return this.#dialogLink.set();
     }
 }
 
 function initFirstLine() {
-    let first_line = document.createElement("p");
-    let br = document.createElement("br");
-    first_line.appendChild(br);
-    return first_line;
+    const firstLine = document.createElement("p");
+    const br = document.createElement("br");
+    firstLine.appendChild(br);
+    return firstLine;
 }