changes indicator

code/static/css/styles.css

@@ -291,8 +291,10 @@ tr:nth-child(odd) {
 }
 
 #editor_area {
-  width: 40vw;
+  width: 82vw;
   float: left;
+  background-color: var(--background-light-color);
+  border: 2px solid var(--border-color);
 }
 
 #editor_preview {
@@ -300,6 +302,7 @@ tr:nth-child(odd) {
   margin-left: 2vw;
   float: left;
   line-height: normal;
+  display: none;
 }
 
 #editor_preview p {

code/static/js/scripts.js

@@ -151,20 +151,40 @@ function UploadURL() {
 }
 
 
-function updateEditorPreview() {
+function updateEditor() {
   var input = document.getElementById("editor_area");
   var preview = document.getElementById("editor_preview");
+  if (preview.style.display === 'block') {
     preview.innerHTML = md.render(input.value);
+  }
+  var currentHash = hashCode(input.value);
+  if (currentHash == editorHash) {
+    document.getElementById("editor_save").value = "Save ";
+  } else {
+    document.getElementById("editor_save").value = "Save*";
+  }
 }
+
+
 function previewToggle() {
     toggler("editor_preview");
     if (document.getElementById("editor_preview").style.display === 'block') {
 		document.getElementById("editor_area").style.width = "40vw";
+        updateEditor();
 	} else {
 		document.getElementById("editor_area").style.width = "82vw";
 	}
 }
 
+function hashCode(s) {
+  var h = 0, l = s.length, i = 0;
+  if ( l > 0 )
+    while (i < l)
+      h = (h << 5) - h + s.charCodeAt(i++) | 0;
+  return h;
+};
+
+
 function changeTitle(newTitle) {
     document.title = "Flees - " + newTitle;
 }

code/templates/editor.html

@@ -12,13 +12,13 @@
                    title="File name to write. Must end in .txt to later edit."
                    value="{{ filename | safe }}" onclick="clear_text(this.id,'paste.txt')">
         <br>
-        <input type=submit value=Save>
+        <input id=editor_save type=submit value=Save>
-        <a class="href_button" onclick="previewToggle()" title="Toggle preview window">Preview</a>
+        <a class="href_button" onclick="previewToggle()" title="Toggle Markdown preview window">Preview</a>
         <a class="href_button" href="{{ url_for('list_view',name = name) }}" title="Forget all changes">Cancel</a>
       </div>
       <div id=editor_floats>
-        <textarea rows="25" name="paste" id="editor_area" autofocus oninput="updateEditorPreview()">{{ content | safe }}</textarea>
+        <textarea rows="25" name="paste" id="editor_area" autofocus oninput="updateEditor()">{{ content | safe }}</textarea>
-        <div id=editor_preview style="display: block;"></div>
+        <div id=editor_preview></div>
       </div>
     </form>
     </div>
@@ -29,6 +29,7 @@
   var md = new Remarkable({
     linkify: true
   });
-  updateEditorPreview();
+  var editorHash = hashCode(document.getElementById("editor_area").value);
+  updateEditor()
 </script>
 {% endblock %}