add permalinks, move about links to data.js

3 files changed, 118 insertions, 8 deletions

diff --git a/htdocs/index.html b/htdocs/index.html
index 0fe5fd4..3a5c416 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -45,6 +45,19 @@
         </a><!-- btn -->
       </div><!-- btn-group -->
 
+      <div class='btn-group btn-group-sm'>
+        <a
+          href='#'
+          class='btn btn-default'
+          title='Create permalink.'
+          data-toggle='modal'
+          data-target='#link-dialog'
+        >
+          <i class='fa fa-link'></i>
+          Link
+        </a><!-- btn -->
+      </div><!-- btn-group -->
+
       <div class='btn-group btn-group-sm pull-right dropup'>
         <a
           href='#'
@@ -102,10 +115,6 @@
             </p>
 
             <ul>
-              <li><a target='_blank' title='Ace Editor' href='https://ace.c9.io/'>Ace Editor</a></li>
-              <li><a target='_blank' title='Bootstrap' href='https://getbootstrap.com/'>Bootstrap</a></li>
-              <li><a target='_blank' title='jQuery' href='https://jquery.com'>jQuery</a></li>
-              <li><a target='_blank' title='MathJax' href='https://www.mathjax.org/'>MathJax</a></li>
             </ul>
           </div><!-- modal-body -->
 
@@ -164,6 +173,54 @@
       </div><!-- modal-dialog -->
     </div><!-- modal -->
 
+    <div id='link-dialog' class='modal fade' role='dialog'>
+      <div class='modal-dialog' role='document'>
+        <div class='modal-content'>
+          <div class='modal-header'>
+            <button
+              type='button'
+              class='close'
+              title='Close dialog.'
+              data-dismiss='modal'
+              aria-label='Close'
+            >
+              <span aria-hidden='true'>
+                &times;
+              </span>
+            </button><!-- close -->
+
+            <h4 class="modal-title">
+              <i class='fa fa-link'></i>
+              Permalink
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <p>
+              Copy the link below to share this entry:
+            </p>
+
+            <input
+              type='text'
+              class='form-control'
+              readonly='readonly'
+            />
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              type='button'
+              class='btn btn-default'
+              title='Close dialog.'
+              data-dismiss='modal'
+            >
+              &times; Close
+            </button>
+          </div><!-- modal-footer -->
+        </div><!-- modal-content -->
+      </div><!-- modal-dialog -->
+    </div><!-- modal -->
+
     <script type="text/x-mathjax-config">
       MathJax.Hub.Config({
         showProcessingMessages: false,
diff --git a/htdocs/js/data.js b/htdocs/js/data.js
index f17f364..5a12764 100644
--- a/htdocs/js/data.js
+++ b/htdocs/js/data.js
@@ -1,4 +1,21 @@
 var DATA = {
+  links: [{
+    name: 'Ace Editor',
+    link: 'https://ace.c9.io/',
+  }, {
+    name: 'Bootstrap',
+    link: 'https://getbootstrap.com/',
+  }, {
+    name: 'Font Awesome',
+    link: 'http://fontawesome.io/',
+  }, {
+    name: 'jQuery',
+    link: 'https://jquery.com',
+  }, {
+    name: 'MathJax',
+    link: 'https://www.mathjax.org/',
+  }],
+
   examples: [{
     name: "Some Limit",
     text: [
diff --git a/htdocs/js/mathy.js b/htdocs/js/mathy.js
index 2100b26..9e9c71d 100644
--- a/htdocs/js/mathy.js
+++ b/htdocs/js/mathy.js
@@ -2,6 +2,18 @@ jQuery(function($) {
   "use strict";
 
   var TEMPLATES = new LuigiTemplate.Cache({
+    link: [
+      "<li>",
+        "<a ",
+          "href='%{link|h}' ",
+          "title='%{name|h}' ",
+          "target='_blank' ",
+        ">",
+          "%{name|h}",
+        "</a>",
+      "</li>",
+    ],
+
     save: [
       "<li>",
         "<a ",
@@ -162,13 +174,24 @@ jQuery(function($) {
   });
 
   (function() {
-    // load autosaved text
-    var last = localStorage.getItem('mathy_last');
-    if (!last)
+    var text = null;
+
+    // guard against old IE
+    if (window.URL) {
+      // load from query parameter
+      text = (new URL(document.location)).searchParams.get('t');
+    }
+
+    if (!text) {
+      // load autosaved text
+      text = localStorage.getItem('mathy_last');
+    }
+
+    if (!text)
       return;
 
     // set text
-    editor.setValue(last);
+    editor.setValue(text);
   })();
 
   $('#saves').on('click', 'a', function() {
@@ -269,4 +292,17 @@ jQuery(function($) {
     // stop event
     return false;
   });
+
+  // populate links
+  $('#about-dialog .modal-body ul').html($.map(DATA.links, function(row) {
+    return TEMPLATES.run('link', row);
+  }).join(''));
+
+  $('#link-dialog').on('show.bs.modal', function() {
+    $(this).find('input').val(document.location + '?' + $.param({
+      t: editor.getValue(),
+    }));
+  }).on('shown.bs.modal', function() {
+    $(this).find('input').focus().select();
+  });
 });