Merge pull request #23 from n-peugnet/asterix-unsaved-changes

feat: add unsaved changes' asterix indicator

2 files changed, 27 insertions, 3 deletions

diff --git a/app/view/templates/edit.php b/app/view/templates/edit.php
index 2de0c9b..5507583 100644
--- a/app/view/templates/edit.php
+++ b/app/view/templates/edit.php
@@ -29,6 +29,7 @@
 
 <script>
     const pageid = '<?= $page->id() ?>';
+    let pagetitle = '<?= $page->title() ?>';
 </script>
 <script src="<?= Wcms\Model::jspath() ?>edit.bundle.js"></script>
 </body>
diff --git a/src/edit.js b/src/edit.js
index 062a0de..c1018d7 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -10,9 +10,16 @@ import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/dialog/dialog.css';
 
+/** @type {HTMLFormElement} */
 let form;
+
+/** @type {CodeMirror.EditorFromTextArea[]} */
 let editors = [];
+
+/** @type {boolean} */
 let unsavedChanges = false;
+
+/** @type {InputEvent} */
 const inputEvent = new InputEvent('input');
 
 window.addEventListener('load', () => {
@@ -27,6 +34,7 @@ window.addEventListener('load', () => {
         submitHandler(this);
     });
 
+    // disable CodeMirror's default ctrl+D shortcut (delete line)
     delete CodeMirror.keyMap['default']['Ctrl-D'];
 
     editors = [
@@ -84,6 +92,10 @@ window.addEventListener('load', () => {
     fontSizeInput.addEventListener('change', fontSizeChangeHandler);
     fontSizeInput.dispatchEvent(new Event('change'));
 
+    document.getElementById('title').addEventListener('input', e => {
+        pagetitle = e.target.value;
+    });
+
     window.onkeydown = keyboardHandler;
     window.onbeforeunload = confirmExit;
 });
@@ -127,7 +139,7 @@ function changeHandler(e) {
     ) {
         return;
     }
-    unsavedChanges = true;
+    changed();
 }
 
 /**
@@ -157,8 +169,7 @@ function submitHandler(form) {
     var fd = new FormData(form);
 
     xhr.addEventListener('load', function(event) {
-        unsavedChanges = false;
-        // Add "last update" timestamp here
+        saved();
     });
     xhr.addEventListener('error', function(event) {
         alert('Error while trying to update.');
@@ -176,3 +187,15 @@ function confirmExit(e) {
         return 'You have unsaved changes, do you really want to leave this page?';
     }
 }
+
+function changed() {
+    unsavedChanges = true;
+    document.title = '✏ *' + pagetitle;
+    document.getElementById('headid').innerHTML = '*' + pageid;
+}
+
+function saved() {
+    unsavedChanges = false;
+    document.title = '✏ ' + pagetitle;
+    document.getElementById('headid').innerHTML = pageid;
+}