From 6d7868815ce731b4445b9f87afa09f98be280797 Mon Sep 17 00:00:00 2001
From: Paul Duncan <pabs@pablotron.org>
Date: Wed, 8 Nov 2017 00:21:59 -0500
Subject: add stub about and config dialogs

---
 htdocs/index.html  | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 htdocs/js/mathy.js | 16 +++++++--
 2 files changed, 103 insertions(+), 10 deletions(-)

diff --git a/htdocs/index.html b/htdocs/index.html
index ca4db65..e8c068f 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -21,7 +21,7 @@
         <a
           href='#'
           class='btn btn-default dropdown-toggle'
-          title='load saved result'
+          title='Load saved result.'
           data-toggle='dropdown'
         >
           <i class='fa fa-upload'></i>
@@ -38,7 +38,7 @@
           href='#'
           id='save'
           class='btn btn-default'
-          title='save'
+          title='Save result.'
         >
           <i class='fa fa-save'></i>
           Save
@@ -49,7 +49,7 @@
         <a
           href='#'
           class='btn btn-default dropdown-toggle'
-          title='get help'
+          title='Get help.'
           data-toggle='dropdown'
         >
           <i class='fa fa-question-circle'></i>
@@ -64,16 +64,99 @@
       <div class='btn-group btn-group-sm pull-right'>
         <a
           href='#'
-          id='btn-config'
-          class='btn btn-default disabled'
-          title='edit settings'
+          class='btn btn-default'
+          title='Edit settings.'
+          data-toggle='modal'
+          data-target='#config-dialog'
         >
           <i class='fa fa-cog'></i>
-          Config
+          Settings
         </a><!-- btn -->
       </div><!-- btn-group -->
     </div><!-- btn-toolbar -->
 
+    <div id='about-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">
+              About Mathy
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <p>
+              TODO: about mathy
+            </p>
+          </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 -->
+
+    <div id='config-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">
+              Settings
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <p>
+              TODO: nothing here yet
+            </p>
+          </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/mathy.js b/htdocs/js/mathy.js
index 500f677..7acd7ab 100644
--- a/htdocs/js/mathy.js
+++ b/htdocs/js/mathy.js
@@ -28,12 +28,21 @@ jQuery(function($) {
 
     help: [
       "<li class='dropdown-header'>",
-      "  Examples",
+        "Examples",
       "</li>",
 
       "%{examples}",
 
-      "<li class='divider'>",
+      "<li class='divider'></li>",
+      "<li>",
+        "<a ",
+          "href='#' ",
+          "title='Show about dialog.' ",
+          "data-toggle='modal' ",
+          "data-target='#about-dialog' ",
+        ">",
+          "About Mathy",
+        "</a>",
       "</li>",
     ],
 
@@ -42,6 +51,7 @@ jQuery(function($) {
         "<a ",
           "href='#' ",
           "class='example' ",
+          "title='Load example \"%{name|h}\".' ",
           "data-text='%{text|h}' ",
         ">",
           "%{num|h}. %{name|h}",
@@ -239,7 +249,7 @@ jQuery(function($) {
         text: row.text.join('\n'),
       }));
     }).join(''),
-  })).on('click', 'a', function() {
+  })).on('click', 'a.example', function() {
     var text = $(this).data('text');
 
     // hide dropdown
-- 
cgit v1.2.3