Indicate when Firepad believes it has unsaved changes (#56).

Also initial "loading..." indication.

Not sure it's water-tight wrt bugs like #85.

index.html

@@ -75,6 +75,9 @@ <h1 style="display: inline">
         </span>
       </h1>
     </div>
+    <div id="status_container">
+      <span id="status">loading...</span>
+    </div>
 
     <form id="content"><textarea id="code" name="code"></textarea></form>
     <script src="mathdown.js"></script>

mathdown.css

@@ -4,6 +4,18 @@
 }
 .warning { color: orange; }
 
+/* Horizontally center http://stackoverflow.com/a/10352525/239657 */
+#status_container {
+    position: fixed; top: 1ex; left: 0; right: 0;
+    text-align: center;
+}
+#status {
+    display: inline-block;
+    padding: 0 0.5em; border-radius: 1ex;
+    color: black; background-color: yellow; opacity: 0.6;
+    font-size: 150%; font-style: italic;
+}
+
 @media print { #header { display: none; } }
 
 #content { clear: both; }

mathdown.js

@@ -4,6 +4,9 @@
 
 "use strict";
 
+// Logging
+// =======
+
 // Prevent errors on IE (but do strive to log somehow if IE Dev Tools are open).
 function log() {
   try {
@@ -27,6 +30,18 @@ MathJax.Message.filterText = function(text, n, msgType) {
   return origFilterText(text, n, msgType);
 }
 
+var statusElement = document.getElementById("status");
+// Show "flash" message (remove if "")
+function setStatus(text) {
+  statusElement.innerHTML = "";
+  if(text) {
+    statusElement.appendChild(document.createTextNode(text));
+  }
+}
+
+// Random pad IDs
+// ==============
+
 // Return an int in [0, 62).
 var random62 = (window.crypto && window.crypto.getRandomValues) ?
     function() {
@@ -203,6 +218,8 @@ CodeMirror.hookMath(editor, MathJax);
 
 var firepad =  Firepad.fromCodeMirror(firepadRef, editor);
 firepad.on("ready", function() {
+  setStatus("");
+
   if (firepad.isHistoryEmpty()) {
     firepad.setText(
       "# Untitled\n" +
@@ -232,5 +249,12 @@ firepad.on("ready", function() {
     editor.renderAllMath();
   });
 });
+firepad.on("synced", function(isSynced) {
+  if(!isSynced) {
+    setStatus("unsaved");
+  } else {
+    setStatus("");
+  }
+})
 
 })()