Mercurial > projects > booket

changeset 24:6cf1ec2e8955

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Use expanders for action forms
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sun, 05 Oct 2014 20:25:51 +0200
parents 69552aee9993
children b2c9c4fb8d4c
files booket.html booket.js
diffstat 2 files changed, 40 insertions(+), 26 deletions(-) [+]
line wrap: on
line diff
--- a/booket.html	Sun Oct 05 19:46:32 2014 +0200
+++ b/booket.html	Sun Oct 05 20:25:51 2014 +0200
@@ -99,8 +99,8 @@
     </aside>
 
     <form id="load-form">
-      <fieldset>
-        <legend>Load Bookmarks</legend>
+      <fieldset class="expander">
+        <legend tabindex="0" class="expander-label">Load Bookmarks</legend>
         <label accesskey="i" class="top-label">File <input type="file"
         accept="application/json" required="required"
         name="file"></input></label>
@@ -111,8 +111,8 @@
     </form>
 
     <form id="save-form">
-      <fieldset>
-        <legend>Save Bookmarks</legend>
+      <fieldset class="expander">
+        <legend tabindex="0" class="expander-label">Save Bookmarks</legend>
         <p class="unsaved-changes-message" hidden="hidden"><strong>There are
         unsaved changes to your bookmarks.</strong></p>
         <a href="#" id="save-link" hidden="hidden"
@@ -123,8 +123,8 @@
     </form>
 
     <form id="import-form">
-      <fieldset>
-        <legend>Import Bookmarks</legend>
+      <fieldset class="expander">
+        <legend tabindex="0" class="expander-label">Import Bookmarks</legend>
         <label accesskey="e" class="top-label">File <input type="file"
         accept="text/html" required="required" name="file"></input></label>
         <label><input type="checkbox" name="merge"></input> Merge with existing
@@ -134,8 +134,8 @@
     </form>
 
     <form id="export-form">
-      <fieldset>
-        <legend>Export Bookmarks</legend>
+      <fieldset class="expander">
+        <legend tabindex="0" class="expander-label">Export Bookmarks</legend>
         <a href="#" id="export-link" hidden="hidden"
         download="bookmarks.html"></a>
         <button type="submit" name="export-file"
--- a/booket.js	Sun Oct 05 19:46:32 2014 +0200
+++ b/booket.js	Sun Oct 05 20:25:51 2014 +0200
@@ -1098,43 +1098,37 @@
 
 var ActionsView = function () {
     var saveFormElement;
-    var loadFormElement;
-    var importFormElement;
-    var exportFormElement;
     var newNode;
+    var fieldsetElement;
+    var legendElement;
     var i;
 
     ObservableMixin.call(this);
 
+    this.actionsElement = document.querySelector('#actions');
+
     this.tagInputTemplate = document.querySelector('#tag-input-template');
     saveFormElement = document.querySelector('form#save-form');
-    saveFormElement.addEventListener('submit', this);
 
     this.unsavedChangesElement =
         saveFormElement.querySelector('.unsaved-changes-message');
 
     this.saveLinkElement = saveFormElement.querySelector('a#save-link');
 
-    loadFormElement = document.querySelector('form#load-form');
-    loadFormElement.addEventListener('submit', this);
-
-    importFormElement = document.querySelector('form#import-form');
-    importFormElement.addEventListener('submit', this);
-
-    exportFormElement = document.querySelector('form#export-form');
-    exportFormElement.addEventListener('submit', this);
-
     // create new editor form from template
     newNode = document.importNode(
         document.querySelector('#bookmark-editor-template').content, true);
 
     this.editorFormElement = newNode.querySelector('form.bookmark-editor-form');
-    this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
     this.editorFormElement.querySelector('label').accessKey = 'a';
-    this.editorFormElement.addEventListener('input', this);
-    this.editorFormElement.addEventListener('click', this);
-    this.editorFormElement.addEventListener('submit', this);
-    this.editorFormElement.addEventListener('reset', this);
+
+    fieldsetElement = this.editorFormElement.querySelector('fieldset');
+    fieldsetElement.classList.add('expander');
+
+    legendElement = fieldsetElement.querySelector('legend');
+    legendElement.textContent = 'Add Bookmark';
+    legendElement.tabIndex = 0;
+    legendElement.classList.add('expander-label');
 
     this.faviconImageElement =
         this.editorFormElement.querySelector('img.bookmark-favicon');
@@ -1153,6 +1147,11 @@
     saveFormElement.parentNode.insertBefore(newNode,
         saveFormElement.nextSibling);
 
+    this.actionsElement.addEventListener('click', this);
+    this.actionsElement.addEventListener('keydown', this);
+    this.actionsElement.addEventListener('submit', this);
+    this.actionsElement.addEventListener('reset', this);
+
     document.querySelector('a#bookmarklet-link').href = BOOKMARKLET_URI;
 };
 
@@ -1217,6 +1216,21 @@
             e.target.blur();
 
             this.editTagListElement.appendChild(this.createTagInputElement(''));
+        } else if (e.target.classList.contains('expander-label')) {
+            if (e.target.parentNode.dataset.expanderOpen !== undefined) {
+                delete e.target.parentNode.dataset.expanderOpen;
+            } else {
+                e.target.parentNode.dataset.expanderOpen = '';
+            }
+        }
+        break;
+    case 'keydown':
+        if (e.keyCode === 32 && e.target.classList.contains('expander-label')) {
+            if (e.target.parentNode.dataset.expanderOpen !== undefined) {
+                delete e.target.parentNode.dataset.expanderOpen;
+            } else {
+                e.target.parentNode.dataset.expanderOpen = '';
+            }
         }
         break;
     case 'submit':