From 016dc180d41c28c8fb0883b09a55b69cb060a0c1 Mon Sep 17 00:00:00 2001
From: n-peugnet <n.peugnet@free.fr>
Date: Mon, 21 Oct 2019 23:06:56 +0200
Subject: make font-size input work with codemirror

---
 app/view/templates/edittopbar.php |  2 +-
 src/edit.js                       | 87 ++++++++++++++++++++++-----------------
 2 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/app/view/templates/edittopbar.php b/app/view/templates/edittopbar.php
index ec1a875..13cef96 100644
--- a/app/view/templates/edittopbar.php
+++ b/app/view/templates/edittopbar.php
@@ -27,7 +27,7 @@
 <span id="fontsize" class="hidephone">
     
     <label for="fontsize">Font-size</label>
-    <input type="number" name="fontsize" value="<?= Config::fontsize() ?>" id="fontsize" min="5" max="99">
+    <input type="number" name="fontsize" value="<?= Config::fontsize() ?>" id="editfontsize" min="5" max="99">
 </span>
 
 <span id="download" class="hidephone">
diff --git a/src/edit.js b/src/edit.js
index ba83488..6843fff 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -6,6 +6,7 @@ import "codemirror/mode/htmlmixed/htmlmixed"
 import "codemirror/mode/javascript/javascript"
 
 let form;
+let editors = [];
 let unsavedChanges = false;
 const inputEvent = new InputEvent('input');
 
@@ -23,45 +24,47 @@ window.onload = () => {
 
     delete CodeMirror.keyMap['default']["Ctrl-D"];
 
-    CodeMirror.fromTextArea(document.getElementById('editmain'), {
-        mode: 'markdown',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
-
-    CodeMirror.fromTextArea(document.getElementById('editcss'), {
-        mode: 'css',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
-
-    CodeMirror.fromTextArea(document.getElementById('editheader'), {
-        mode: 'markdown',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
-
-    CodeMirror.fromTextArea(document.getElementById('editnav'), {
-        mode: 'markdown',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
-
-    CodeMirror.fromTextArea(document.getElementById('editaside'), {
-        mode: 'markdown',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
-
-    CodeMirror.fromTextArea(document.getElementById('editfooter'), {
-        mode: 'markdown',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
-
-    CodeMirror.fromTextArea(document.getElementById('editbody'), {
-        mode: 'htmlmixed',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
+    editors = [
+        CodeMirror.fromTextArea(document.getElementById('editmain'), {
+            mode: 'markdown',
+            lineNumbers: true,
+        }),
+        CodeMirror.fromTextArea(document.getElementById('editcss'), {
+            mode: 'css',
+            lineNumbers: true,
+        }),
+        CodeMirror.fromTextArea(document.getElementById('editheader'), {
+            mode: 'markdown',
+            lineNumbers: true,
+        }),
+        CodeMirror.fromTextArea(document.getElementById('editnav'), {
+            mode: 'markdown',
+            lineNumbers: true,
+        }),
+        CodeMirror.fromTextArea(document.getElementById('editaside'), {
+            mode: 'markdown',
+            lineNumbers: true,
+        }),
+        CodeMirror.fromTextArea(document.getElementById('editfooter'), {
+            mode: 'markdown',
+            lineNumbers: true,
+        }),
+        CodeMirror.fromTextArea(document.getElementById('editbody'), {
+            mode: 'htmlmixed',
+            lineNumbers: true,
+        }),
+        CodeMirror.fromTextArea(document.getElementById('editjavascript'), {
+            mode: 'javascript',
+            lineNumbers: true,
+        }),
+    ];
+    for (const editor of editors) {
+        editor.on('change', cmChangeHandler);
+    }
 
-    CodeMirror.fromTextArea(document.getElementById('editjavascript'), {
-        mode: 'javascript',
-        lineNumbers: true,
-    }).on('change', cmChangeHandler);
+    const fontSizeInput = document.getElementById('editfontsize');
+    fontSizeInput.addEventListener('change', fontSizeChangeHandler)
+    fontSizeInput.dispatchEvent(new Event('change'));
 
     window.onkeydown = keyboardHandler;
     window.onbeforeunload = confirmExit;
@@ -114,6 +117,14 @@ function cmChangeHandler(cm){
     textArea.dispatchEvent(inputEvent);
 }
 
+function fontSizeChangeHandler(e) {
+    for (const editor of editors) {
+        const element = editor.getWrapperElement();
+        element.style.fontSize = `${e.target.value}px`;
+        editor.refresh();
+    }
+}
+
 /**
  * Manage submit event
  * @param {HTMLFormElement} form
-- 
cgit v1.2.3