diff options
-rw-r--r-- | htdocs/index.html | 65 | ||||
-rw-r--r-- | htdocs/js/data.js | 17 | ||||
-rw-r--r-- | htdocs/js/mathy.js | 44 |
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'> + × + </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' + > + × 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(); + }); }); |