projects/booket

changeset 24:6cf1ec2e8955

Use expanders for action forms
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sun Oct 05 20:25:51 2014 +0200 (2014-10-05)
parents 69552aee9993
children b2c9c4fb8d4c
files booket.html booket.js
line diff
     1.1 --- a/booket.html	Sun Oct 05 19:46:32 2014 +0200
     1.2 +++ b/booket.html	Sun Oct 05 20:25:51 2014 +0200
     1.3 @@ -99,8 +99,8 @@
     1.4      </aside>
     1.5  
     1.6      <form id="load-form">
     1.7 -      <fieldset>
     1.8 -        <legend>Load Bookmarks</legend>
     1.9 +      <fieldset class="expander">
    1.10 +        <legend tabindex="0" class="expander-label">Load Bookmarks</legend>
    1.11          <label accesskey="i" class="top-label">File <input type="file"
    1.12          accept="application/json" required="required"
    1.13          name="file"></input></label>
    1.14 @@ -111,8 +111,8 @@
    1.15      </form>
    1.16  
    1.17      <form id="save-form">
    1.18 -      <fieldset>
    1.19 -        <legend>Save Bookmarks</legend>
    1.20 +      <fieldset class="expander">
    1.21 +        <legend tabindex="0" class="expander-label">Save Bookmarks</legend>
    1.22          <p class="unsaved-changes-message" hidden="hidden"><strong>There are
    1.23          unsaved changes to your bookmarks.</strong></p>
    1.24          <a href="#" id="save-link" hidden="hidden"
    1.25 @@ -123,8 +123,8 @@
    1.26      </form>
    1.27  
    1.28      <form id="import-form">
    1.29 -      <fieldset>
    1.30 -        <legend>Import Bookmarks</legend>
    1.31 +      <fieldset class="expander">
    1.32 +        <legend tabindex="0" class="expander-label">Import Bookmarks</legend>
    1.33          <label accesskey="e" class="top-label">File <input type="file"
    1.34          accept="text/html" required="required" name="file"></input></label>
    1.35          <label><input type="checkbox" name="merge"></input> Merge with existing
    1.36 @@ -134,8 +134,8 @@
    1.37      </form>
    1.38  
    1.39      <form id="export-form">
    1.40 -      <fieldset>
    1.41 -        <legend>Export Bookmarks</legend>
    1.42 +      <fieldset class="expander">
    1.43 +        <legend tabindex="0" class="expander-label">Export Bookmarks</legend>
    1.44          <a href="#" id="export-link" hidden="hidden"
    1.45          download="bookmarks.html"></a>
    1.46          <button type="submit" name="export-file"
     2.1 --- a/booket.js	Sun Oct 05 19:46:32 2014 +0200
     2.2 +++ b/booket.js	Sun Oct 05 20:25:51 2014 +0200
     2.3 @@ -1098,43 +1098,37 @@
     2.4  
     2.5  var ActionsView = function () {
     2.6      var saveFormElement;
     2.7 -    var loadFormElement;
     2.8 -    var importFormElement;
     2.9 -    var exportFormElement;
    2.10      var newNode;
    2.11 +    var fieldsetElement;
    2.12 +    var legendElement;
    2.13      var i;
    2.14  
    2.15      ObservableMixin.call(this);
    2.16  
    2.17 +    this.actionsElement = document.querySelector('#actions');
    2.18 +
    2.19      this.tagInputTemplate = document.querySelector('#tag-input-template');
    2.20      saveFormElement = document.querySelector('form#save-form');
    2.21 -    saveFormElement.addEventListener('submit', this);
    2.22  
    2.23      this.unsavedChangesElement =
    2.24          saveFormElement.querySelector('.unsaved-changes-message');
    2.25  
    2.26      this.saveLinkElement = saveFormElement.querySelector('a#save-link');
    2.27  
    2.28 -    loadFormElement = document.querySelector('form#load-form');
    2.29 -    loadFormElement.addEventListener('submit', this);
    2.30 -
    2.31 -    importFormElement = document.querySelector('form#import-form');
    2.32 -    importFormElement.addEventListener('submit', this);
    2.33 -
    2.34 -    exportFormElement = document.querySelector('form#export-form');
    2.35 -    exportFormElement.addEventListener('submit', this);
    2.36 -
    2.37      // create new editor form from template
    2.38      newNode = document.importNode(
    2.39          document.querySelector('#bookmark-editor-template').content, true);
    2.40  
    2.41      this.editorFormElement = newNode.querySelector('form.bookmark-editor-form');
    2.42 -    this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
    2.43      this.editorFormElement.querySelector('label').accessKey = 'a';
    2.44 -    this.editorFormElement.addEventListener('input', this);
    2.45 -    this.editorFormElement.addEventListener('click', this);
    2.46 -    this.editorFormElement.addEventListener('submit', this);
    2.47 -    this.editorFormElement.addEventListener('reset', this);
    2.48 +
    2.49 +    fieldsetElement = this.editorFormElement.querySelector('fieldset');
    2.50 +    fieldsetElement.classList.add('expander');
    2.51 +
    2.52 +    legendElement = fieldsetElement.querySelector('legend');
    2.53 +    legendElement.textContent = 'Add Bookmark';
    2.54 +    legendElement.tabIndex = 0;
    2.55 +    legendElement.classList.add('expander-label');
    2.56  
    2.57      this.faviconImageElement =
    2.58          this.editorFormElement.querySelector('img.bookmark-favicon');
    2.59 @@ -1153,6 +1147,11 @@
    2.60      saveFormElement.parentNode.insertBefore(newNode,
    2.61          saveFormElement.nextSibling);
    2.62  
    2.63 +    this.actionsElement.addEventListener('click', this);
    2.64 +    this.actionsElement.addEventListener('keydown', this);
    2.65 +    this.actionsElement.addEventListener('submit', this);
    2.66 +    this.actionsElement.addEventListener('reset', this);
    2.67 +
    2.68      document.querySelector('a#bookmarklet-link').href = BOOKMARKLET_URI;
    2.69  };
    2.70  
    2.71 @@ -1217,6 +1216,21 @@
    2.72              e.target.blur();
    2.73  
    2.74              this.editTagListElement.appendChild(this.createTagInputElement(''));
    2.75 +        } else if (e.target.classList.contains('expander-label')) {
    2.76 +            if (e.target.parentNode.dataset.expanderOpen !== undefined) {
    2.77 +                delete e.target.parentNode.dataset.expanderOpen;
    2.78 +            } else {
    2.79 +                e.target.parentNode.dataset.expanderOpen = '';
    2.80 +            }
    2.81 +        }
    2.82 +        break;
    2.83 +    case 'keydown':
    2.84 +        if (e.keyCode === 32 && e.target.classList.contains('expander-label')) {
    2.85 +            if (e.target.parentNode.dataset.expanderOpen !== undefined) {
    2.86 +                delete e.target.parentNode.dataset.expanderOpen;
    2.87 +            } else {
    2.88 +                e.target.parentNode.dataset.expanderOpen = '';
    2.89 +            }
    2.90          }
    2.91          break;
    2.92      case 'submit':