render cleanup, move examples to data

1 files changed, 116 insertions, 105 deletions

diff --git a/htdocs/js/mathy.js b/htdocs/js/mathy.js
index 13794fc..500f677 100644
--- a/htdocs/js/mathy.js
+++ b/htdocs/js/mathy.js
@@ -25,161 +25,162 @@ jQuery(function($) {
         "</a>",
       "</li>",
     ],
-  });
 
-  var Preview = window.Preview = {
-    delay: 150,        // delay after keystroke before updating
+    help: [
+      "<li class='dropdown-header'>",
+      "  Examples",
+      "</li>",
 
-    preview: null,     // filled in by Init below
-    buffer: null,      // filled in by Init below
+      "%{examples}",
 
-    timeout: null,     // store setTimout id
-    mjRunning: false,  // true when MathJax is processing
-    mjPending: false,  // true when a typeset has been queued
-    oldText: null,     // used to check if an update is needed
+      "<li class='divider'>",
+      "</li>",
+    ],
 
-    //
-    //  Get the preview and buffer DIV's
-    //
-    Init: function () {
-      this.preview = document.getElementById("MathPreview");
-      this.buffer = document.getElementById("MathBuffer");
-    },
+    help_row: [
+      "<li>",
+        "<a ",
+          "href='#' ",
+          "class='example' ",
+          "data-text='%{text|h}' ",
+        ">",
+          "%{num|h}. %{name|h}",
+        "</a>",
+      "</li>",
+    ],
+  });
 
+  // init mathjax
+  var math = (function() {
+    var delay   = 150, // delay after keystroke before updating
+        preview = document.getElementById("math-preview"),
+        buffer  = document.getElementById("math-buffer"),
+        timeout = null,  // timeout ID
+        is_running = false, // true when MathJax is processing
+        is_pending = false, // true when a typeset has been queued
+        old_text = null; // used to check if an update is needed
+
+    // Swap render buffers.
     //
-    //  Switch the buffer and preview, and display the right one.
-    //  (We use visibility:hidden rather than display:none since
-    //  the results of running MathJax are more accurate that way.)
-    //
-    SwapBuffers: function () {
-      var buffer = this.preview, preview = this.buffer;
-      this.buffer = buffer; this.preview = preview;
-      buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
-      preview.style.position = ""; preview.style.visibility = "";
-    },
+    // Note from MathJax example: We use visibility:hidden rather than
+    // display:none since the results of running MathJax are more
+    // accurate that way.
+    function swap_buffers() {
+      var tmp_buffer = preview,
+          tmp_preview = buffer;
+
+      // update buffer
+      buffer = tmp_buffer;
+      buffer.style.visibility = "hidden";
+      buffer.style.position = "absolute";
+
+      // update preview
+      preview = tmp_preview;
+      preview.style.position = "";
+      preview.style.visibility = "";
+    }
 
-    //
-    //  This gets called when a key is pressed in the textarea.
-    //  We check if there is already a pending update and clear it if so.
-    //  Then set up an update to occur after a small delay (so if more keys
-    //    are pressed, the update won't occur until after there has been
-    //    a pause in the typing).
-    //  The callback function is set up below, after the Preview object is set up.
-    //
-    Update: function () {
-      if (this.timeout) {clearTimeout(this.timeout)}
-      this.timeout = setTimeout(this.callback, this.delay);
-    },
 
-    //
-    //  Creates the preview and runs MathJax on it.
-    //  If MathJax is already trying to render the code, return
-    //  If the text hasn't changed, return
-    //  Otherwise, indicate that MathJax is running, and start the
-    //    typesetting.  After it is done, call PreviewDone.
-    //
-    CreatePreview: function () {
-      var syntax = $('#menu-syntax .active a').data();
+    function preview_done() {
+      is_running = is_pending = false;
+      swap_buffers();
+    }
+
+    function create_preview() {
+      // clear timeout value
+      timeout = null;
 
-      Preview.timeout = null;
-      if (this.mjPending) return;
+      if (is_pending)
+        return;
+
+      // get editor text
       var text = "\\[" + editor.getValue() + "\\]";
-      if (text === this.oldtext) return;
-      if (this.mjRunning) {
-        this.mjPending = true;
-        MathJax.Hub.Queue(["CreatePreview",this]);
+
+      if (text === old_text)
+        return;
+
+      if (is_running) {
+        is_pending = true;
+        MathJax.Hub.Queue(create_preview);
       } else {
-        this.buffer.innerHTML = this.oldtext = text;
-        this.mjRunning = true;
+        buffer.innerHTML = old_text = text;
+        is_running = true;
         MathJax.Hub.Queue(
-    ["Typeset",MathJax.Hub,this.buffer],
-    ["PreviewDone",this]
+          ['Typeset', MathJax.Hub, buffer],
+          preview_done
         );
       }
-    },
-
-    //
-    //  Indicate that MathJax is no longer running,
-    //  and swap the buffers to show the results.
-    //
-    PreviewDone: function () {
-      this.mjRunning = this.mjPending = false;
-      this.SwapBuffers();
     }
-  };
 
-  //
-  //  Cache a callback to the CreatePreview action
-  //
-  Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
-  Preview.callback.autoReset = true;  // make sure it can run more than once
-
-  function add_text(el, text, pos) {
-    var val = el.value,
-        head = val.substring(0, el.selectionStart),
-        tail = val.substring(el.selectionEnd, val.length);
-
-    // update value
-    el.value = head + text + tail;
-
-    // get offset
-    if (pos === undefined)
-      pos = text.length;
-
-    // update caret position
-    el.selectionStart = el.selectionEnd = head.length + pos;
-  }
-
-  $('#input').keyup(function(ev) {
-    window.Preview.Update();
-  });
+    // init callback
+    var callback = MathJax.Callback(create_preview);
+    callback.autoReset = true;
+
+    return {
+      update: function() {
+        if (timeout) {
+          clearTimeout(timeout);
+          timeout = null;
+        }
+        timeout = setTimeout(callback, delay);
+      },
+    };
+  })();
 
+  // init editor
   var autosave_timeout = null,
       editor = ace.edit('editor');
   editor.setShowPrintMargin(false);
   editor.setTheme('ace/theme/monokai');
   editor.getSession().setMode('ace/mode/latex');
   editor.getSession().on('change', function(e) {
-    window.Preview.Update();
+    // queue update
+    math.update();
+
     if (autosave_timeout) {
+      // clear autosave timeout
       clearTimeout(autosave_timeout);
       autosave_timeout = null;
     }
+
+    // set autosave timeout
     autosave_timeout = setTimeout(function() {
+      // autosave text
       localStorage.setItem('mathy_last', editor.getValue());
     }, 1000);
   });
 
   (function() {
+    // load autosaved text
     var last = localStorage.getItem('mathy_last');
     if (!last)
       return;
+
+    // set text
     editor.setValue(last);
   })();
 
-  $('#add').click(function() {
-    var el = $('#input')[0];
-    add_shit(el, 'shit');
-    try { el.focus(); } catch (e) {}
-    return false;
-  });
-
   $('#saves').on('click', 'a', function() {
     if ($(this).parent().hasClass('disabled'))
       return false;
 
+    // get text, hide dropdown
     var text = $(this).data('text');
     $('body').trigger('click');
 
     setTimeout(function() {
+      // set editor text
       editor.setValue(text);
     }, 10);
 
+    // stop event
     return false;
   }).parent().on('show.bs.dropdown', function() {
+    // load saves
     var saves = localStorage.getItem('mathy_saves');
     saves = saves ? JSON.parse(saves) : [];
 
+    // build html
     var html = '';
     if (saves.length > 0) {
       html = $.map(saves, function(row) {
@@ -189,10 +190,11 @@ jQuery(function($) {
       html = TEMPLATES.run('none');
     }
 
+    // populate html
     $('#saves').html(html);
   });
 
-  $('#btn-save').click(function() {
+  $('#save').click(function() {
     // get name
     var name = prompt('Enter name:', '');
     if (!name)
@@ -230,16 +232,25 @@ jQuery(function($) {
     return false;
   });
 
-  $('#help').on('click', 'a', function() {
-    var text = $(this).data('text').replace(/^\s+|\s+$/g, '');
+  $('#help').html(TEMPLATES.run('help', {
+    examples: $.map(DATA.examples, function(row, i) {
+      return TEMPLATES.run('help_row', $.extend({}, row, {
+        num: i + 1,
+        text: row.text.join('\n'),
+      }));
+    }).join(''),
+  })).on('click', 'a', function() {
+    var text = $(this).data('text');
+
+    // hide dropdown
     $('body').trigger('click');
 
     setTimeout(function() {
+      // load text
       editor.setValue(text);
     }, 10);
 
+    // stop event
     return false;
   });
-
-  Preview.Init();
 });