diff booket.js @ 24:6cf1ec2e8955

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
line wrap: on
line diff
--- 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':