* Moved getElementById and querySelector calls from insertText into the constructor

* Replaced prompt with Dialog.prompt
* Replaced loop in wrapText with string.lastIndexOf
* Renamed wrapText to wrap_by_space
* Renamed variables in insertText to match the snake_case convention
* Moved new strings to the end of localization files

www/lang/de-DE.json

@@ -43,8 +43,6 @@
     "coming-soon": "Demnächst verfügbar…",
     "dry-run": "Testlauf",
     "dry-run-test-print-process-only": "Testlauf: nur Probedruckvorgang",
-    "text-font": "Schriftart",
-    "text-size": "Textgröße",
     "you-can-close-this-page-manually": "Sie können diese Seite manuell schließen",
     "please-enable-bluetooth": "Bitte aktivieren Sie Bluetooth",
     "error-happened-please-check-error-message": "Fehler aufgetreten, bitte Fehlermeldung einsehen",
@@ -105,5 +103,8 @@
     "high-contrast": "High Contrast",
     "copyright-and-license": "Copyright and License",
     "welcome": "Welcome!",
-    "some-rights-reserved": "Einige Rechte sind vorbehalten."
+    "some-rights-reserved": "Einige Rechte sind vorbehalten.",
+    "text-font": "Schriftart",
+    "text-size": "Textgröße",
+    "enter-text": "Text eingeben"
 }

www/lang/en-US.json

@@ -42,8 +42,6 @@
     "coming-soon": "Coming Soon…",
     "dry-run": "Dry Run",
     "dry-run-test-print-process-only": "Dry Run: test print process only",
-    "text-font": "Font",
-    "text-size": "Text size",
     "you-can-close-this-page-manually": "You can close this page manually",
     "please-enable-bluetooth": "Please enable Bluetooth",
     "error-happened-please-check-error-message": "Error happened, please check error message",
@@ -130,5 +128,8 @@
     "cat-face-toward": "Cat Face Toward",
     "quality-": "Quality:",
     "print-quality": "Print quality",
-    "show-more-options": "Show More Options"
+    "show-more-options": "Show More Options",
+    "text-font": "Font",
+    "text-size": "Text size",
+    "enter-text": "Enter text"
 }

www/main.js

@@ -298,6 +298,9 @@ class CanvasController {
         this.preview = document.getElementById('preview');
         this.canvas = document.getElementById('canvas');
         this.controls = document.getElementById('control-overlay');
+        this.textSize = document.getElementById("text-size");
+        this.textFont = document.getElementById("text-font");
+        this.textAlgorithm = document.querySelector('input[name="algo"][value="algo-direct"]');
         this.height = CanvasController.defaultHeight;
         this._thresholdRange = document.querySelector('[name="threshold"]');
         this._energyRange = document.querySelector('[name="energy"]');
@@ -317,7 +320,7 @@ class CanvasController {
 
         putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
         putEvent('#insert-picture'   , 'click', () => this.insertPicture(), this);
-        putEvent('#insert-text'   , 'click', () => this.insertText(), this);
+        putEvent('#insert-text'   , 'click', () => Dialog.prompt(i18n('enter-text'), (text) => this.insertText(text), true), this);
         putEvent('#button-preview'   , 'click', this.activatePreview , this);
         putEvent('#button-reset'     , 'click', this.reset           , this);
         putEvent('#canvas-expand'    , 'click', this.expand          , this);
@@ -438,70 +441,63 @@ class CanvasController {
             input.click();
         }
     }
-    insertText() {
+    insertText(text) {
+        if (text == null) { return; }
 
-        const textSize = parseInt(document.getElementById("text-size").value);
+        const text_size = parseInt(this.textSize.value);
-        const textFont = document.getElementById("text-font").value;
+        const text_font = this.textFont.value;
-        const yStep = textSize;
+        const y_step = text_size;
         
         const ctx = this.canvas.getContext("2d");
-        let canvasFont = textSize + "px " + textFont;
+        let canvas_font = text_size + "px " + text_font;
-        // const textWidth = ctx.measureText(textSize);
+        const max_width = this.canvas.width - 10;
-        const maxWidth = this.canvas.width - 10;
-        
-        
-        let text = prompt("Enter text");
-        if (text == null) { return; }
         
         // Use Word Wrap to split the text over multiple lines
         let lines = [];
         // Calculate the aproximate maximum length of a string
         // taking font and text size in account
-        const getMaxCharsPerLine = (text, ctx) => { 
+        const get_max_chars_per_line = (text, ctx) => { 
-            let textWidth = ctx.measureText(text).width;
+            let text_width = ctx.measureText(text).width;
-            let textIndex = maxWidth / textWidth;
+            let textIndex = max_width / text_width;
             
             if (textIndex > 1) { return text.length}
             return Math.floor(textIndex * text.length); 
         }
         
         // Wrap the text if it does not fit on a single line
-        const wrapText = (text, maxLength) => {
+        const wrap_by_space = (text, max_length) => {
-            let splitPos = maxLength - 1;
+            let split_pos = text.lastIndexOf(" ", max_length);
-            while (text[splitPos] != " " && splitPos > 0) {
+
-                splitPos--;
+            if (split_pos == 0) { split_pos = max_length; }
-            }
+            return [text.slice(0, split_pos).trim(), text.slice(split_pos, text.length).trim()];
-            if (splitPos == 0) { splitPos = maxLength; }
-            return [text.slice(0, splitPos).trim(), text.slice(splitPos, text.length).trim()];
         }
         
-        ctx.font = canvasFont;
+        ctx.font = canvas_font;
-        while (ctx.measureText(text).width > maxWidth) {
+        while (ctx.measureText(text).width > max_width) {
             let line;
-            let maxChars = getMaxCharsPerLine(text, ctx);
+            let max_chars = get_max_chars_per_line(text, ctx);
-            if (maxChars == 0) { 
+            if (max_chars == 0) { 
                 lines.push(text.slice(0, 1));
                 text = text.slice(1, text.length);
                 continue;
             }
-            [line, text] = wrapText(text, maxChars);
+            [line, text] = wrap_by_space(text, max_chars);
             lines.push(line);
         }
         lines.push(text);
-        this.height = (lines.length * yStep) + (yStep / 2);
+        this.height = (lines.length * y_step) + (y_step / 2);
-        ctx.font = canvasFont; // Setting this.height resets the font.
+        ctx.font = canvas_font; // Setting this.height resets the font.
 
-        let yPos = yStep;
+        let y_pos = y_step;
         for (let line of lines) {
-            ctx.fillText(line, 0, yPos); 
+            ctx.fillText(line, 0, y_pos); 
-            yPos += yStep;
+            y_pos += y_step;
         }
 
         this.crop();
 
-        this.useAlgorithm("algo-direct");
+        this.textAlgorithm.checked = true;
-        let textAlgo = document.querySelector('input[name="algo"][value="algo-direct"]');
+        this.textAlgorithm.dispatchEvent(new Event("change"));
-        textAlgo.checked = true;
         
         this.imageUrl = this.canvas.toDataURL();
         this.activatePreview();