projects/booket

changeset 22:b19db583b5f8

Display keyboard shortcuts as an overly when pressing Alt
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sat Oct 04 22:16:56 2014 +0200 (2014-10-04)
parents 2a4922945b8d
children 69552aee9993
files booket.css booket.html booket.js
line diff
     1.1 --- a/booket.css	Thu Oct 02 00:19:34 2014 +0200
     1.2 +++ b/booket.css	Sat Oct 04 22:16:56 2014 +0200
     1.3 @@ -117,6 +117,25 @@
     1.4      height: 2em;
     1.5  }
     1.6  
     1.7 +#keyboard-shortcuts {
     1.8 +    display: none;
     1.9 +    padding: .5em;
    1.10 +    font-size: .75em;
    1.11 +    background: rgba(251, 251, 249, .75);
    1.12 +    border: 1px solid #d3d7cf;
    1.13 +    border-radius: .5em;
    1.14 +    box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, .25);
    1.15 +}
    1.16 +
    1.17 +#keyboard-shortcuts[data-overlay-visible] {
    1.18 +    display: block;
    1.19 +    position: fixed;
    1.20 +    top: 50%;
    1.21 +    left: 50%;
    1.22 +    transform: translate(-50%, -50%);
    1.23 +    z-index: 10;
    1.24 +}
    1.25 +
    1.26  #actions {
    1.27      margin: 1em 0 0 0;
    1.28  }
    1.29 @@ -164,8 +183,7 @@
    1.30      padding: 1px 0;
    1.31  }
    1.32  
    1.33 -#bookmarklet,
    1.34 -#keyboard-shortcuts {
    1.35 +#bookmarklet {
    1.36      float: right;
    1.37      border: 1px solid #d3d7cf;
    1.38      border-radius: .5em;
    1.39 @@ -198,11 +216,6 @@
    1.40      margin: 0;
    1.41  }
    1.42  
    1.43 -#keyboard-shortcuts {
    1.44 -    background-color: #fbfbf9;
    1.45 -    clear: right;
    1.46 -}
    1.47 -
    1.48  #keyboard-shortcuts dl {
    1.49      margin: 1em 0 0 0;
    1.50  }
     2.1 --- a/booket.html	Thu Oct 02 00:19:34 2014 +0200
     2.2 +++ b/booket.html	Sat Oct 04 22:16:56 2014 +0200
     2.3 @@ -38,6 +38,28 @@
     2.4  
     2.5    <datalist id="tag-datalist"></datalist>
     2.6  
     2.7 +  <div id="keyboard-shortcuts">
     2.8 +    <h3>Keyboard Shortcuts</h3>
     2.9 +    <dl>
    2.10 +      <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
    2.11 +      <dd>Select bookmark file to load</dd>
    2.12 +      <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
    2.13 +      <dd>Load selected bookmark file</dd>
    2.14 +      <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
    2.15 +      <dd>Save bookmark file</dd>
    2.16 +      <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
    2.17 +      <dd>Focus bookmark editor</dd>
    2.18 +      <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
    2.19 +      <dd>Select bookmark file to import</dd>
    2.20 +      <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
    2.21 +      <dd>Import selected file</dd>
    2.22 +      <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
    2.23 +      <dd>Export selected file</dd>
    2.24 +      <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
    2.25 +      <dd>Focus search field</dd>
    2.26 +    </dl>
    2.27 +  </div>
    2.28 +
    2.29    <template id="tag-input-template">
    2.30      <li><label class="top-label">Tag <input type="text" name="tag"
    2.31      pattern="[^,;]*" size="20" list="tag-datalist" placeholder="tag"></input>
    2.32 @@ -76,28 +98,6 @@
    2.33        <a title="Create Bookmark" id="bookmarklet-link">Create Bookmark</a>
    2.34      </aside>
    2.35  
    2.36 -    <aside id="keyboard-shortcuts">
    2.37 -      <h3>Keyboard Shortcuts</h3>
    2.38 -      <dl>
    2.39 -        <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
    2.40 -        <dd>Select bookmark file to load</dd>
    2.41 -        <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
    2.42 -        <dd>Load selected bookmark file</dd>
    2.43 -        <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
    2.44 -        <dd>Save bookmark file</dd>
    2.45 -        <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
    2.46 -        <dd>Focus bookmark editor</dd>
    2.47 -        <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
    2.48 -        <dd>Select bookmark file to import</dd>
    2.49 -        <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
    2.50 -        <dd>Import selected file</dd>
    2.51 -        <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
    2.52 -        <dd>Export selected file</dd>
    2.53 -        <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
    2.54 -        <dd>Focus search field</dd>
    2.55 -      </dl>
    2.56 -    </aside>
    2.57 -
    2.58      <form id="load-form">
    2.59        <fieldset>
    2.60          <legend>Load Bookmarks</legend>
     3.1 --- a/booket.js	Thu Oct 02 00:19:34 2014 +0200
     3.2 +++ b/booket.js	Sat Oct 04 22:16:56 2014 +0200
     3.3 @@ -921,6 +921,29 @@
     3.4   * view
     3.5   */
     3.6  
     3.7 +var KeyboardShortcutsView = function () {
     3.8 +    document.addEventListener('keydown', this);
     3.9 +    document.addEventListener('keyup', this);
    3.10 +
    3.11 +    this.shortcutKeysOverlayElement =
    3.12 +        document.querySelector('#keyboard-shortcuts');
    3.13 +};
    3.14 +
    3.15 +KeyboardShortcutsView.prototype.handleEvent = function (e) {
    3.16 +    var elements;
    3.17 +    var i;
    3.18 +
    3.19 +    // keyboard shortcut hints are visible when the Alt key is pressed and
    3.20 +    // hidden again when the Alt key is released or another key is pressed
    3.21 +    if (this.shortcutKeysOverlayElement.dataset.overlayVisible !== undefined &&
    3.22 +            (e.type === 'keyup' || e.type === 'keydown')) {
    3.23 +        delete this.shortcutKeysOverlayElement.dataset.overlayVisible;
    3.24 +    } else if (e.type === 'keydown' && e.keyCode === 18) {
    3.25 +        this.shortcutKeysOverlayElement.dataset.overlayVisible = '';
    3.26 +    }
    3.27 +};
    3.28 +
    3.29 +
    3.30  var TagView = function () {
    3.31      var tagsElement;
    3.32  
    3.33 @@ -1107,8 +1130,7 @@
    3.34  
    3.35      this.editorFormElement = newNode.querySelector('form.bookmark-editor-form');
    3.36      this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
    3.37 -    this.editorFormElement.querySelector(
    3.38 -        'input:not([type="hidden"])').accessKey = 'a';
    3.39 +    this.editorFormElement.querySelector('label').accessKey = 'a';
    3.40      this.editorFormElement.addEventListener('input', this);
    3.41      this.editorFormElement.addEventListener('click', this);
    3.42      this.editorFormElement.addEventListener('submit', this);
    3.43 @@ -1646,9 +1668,10 @@
    3.44   * controller
    3.45   */
    3.46  
    3.47 -var BooketController = function(bookmarkModel, actionsView, tagView,
    3.48 -        bookmarkView) {
    3.49 +var BooketController = function(bookmarkModel, keyboardShortcutsView,
    3.50 +        actionsView, tagView, bookmarkView) {
    3.51      this.bookmarkModel = bookmarkModel;
    3.52 +    this.keyboardShortcutsView = keyboardShortcutsView;
    3.53      this.actionsView = actionsView;
    3.54      this.tagView = tagView;
    3.55      this.bookmarkView = bookmarkView;
    3.56 @@ -1834,17 +1857,19 @@
    3.57  document.addEventListener('DOMContentLoaded', function (e) {
    3.58      var controller;
    3.59      var bookmarkModel;
    3.60 +    var keyboardShortcutsView;
    3.61      var actionsView;
    3.62      var tagView;
    3.63      var bookmarkView;
    3.64      var hashChangeEvent;
    3.65  
    3.66      bookmarkModel = new BookmarkModel();
    3.67 +    keyboardShortcutsView = new KeyboardShortcutsView();
    3.68      tagView = new TagView();
    3.69      actionsView = new ActionsView();
    3.70      bookmarkView = new BookmarkView();
    3.71 -    controller = new BooketController(bookmarkModel, actionsView,
    3.72 -        tagView, bookmarkView);
    3.73 +    controller = new BooketController(bookmarkModel, keyboardShortcutsView,
    3.74 +        actionsView, tagView, bookmarkView);
    3.75  
    3.76      // initialize state from the current URL
    3.77      hashChangeEvent = new Event('hashchange');