Mercurial > projects > booket

changeset 22:b19db583b5f8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Display keyboard shortcuts as an overly when pressing Alt
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sat, 04 Oct 2014 22:16:56 +0200
parents 2a4922945b8d
children 69552aee9993
files booket.css booket.html booket.js
diffstat 3 files changed, 73 insertions(+), 35 deletions(-) [+]
line wrap: on
line diff
--- a/booket.css	Thu Oct 02 00:19:34 2014 +0200
+++ b/booket.css	Sat Oct 04 22:16:56 2014 +0200
@@ -117,6 +117,25 @@
     height: 2em;
 }
 
+#keyboard-shortcuts {
+    display: none;
+    padding: .5em;
+    font-size: .75em;
+    background: rgba(251, 251, 249, .75);
+    border: 1px solid #d3d7cf;
+    border-radius: .5em;
+    box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, .25);
+}
+
+#keyboard-shortcuts[data-overlay-visible] {
+    display: block;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+}
+
 #actions {
     margin: 1em 0 0 0;
 }
@@ -164,8 +183,7 @@
     padding: 1px 0;
 }
 
-#bookmarklet,
-#keyboard-shortcuts {
+#bookmarklet {
     float: right;
     border: 1px solid #d3d7cf;
     border-radius: .5em;
@@ -198,11 +216,6 @@
     margin: 0;
 }
 
-#keyboard-shortcuts {
-    background-color: #fbfbf9;
-    clear: right;
-}
-
 #keyboard-shortcuts dl {
     margin: 1em 0 0 0;
 }
--- a/booket.html	Thu Oct 02 00:19:34 2014 +0200
+++ b/booket.html	Sat Oct 04 22:16:56 2014 +0200
@@ -38,6 +38,28 @@
 
   <datalist id="tag-datalist"></datalist>
 
+  <div id="keyboard-shortcuts">
+    <h3>Keyboard Shortcuts</h3>
+    <dl>
+      <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
+      <dd>Select bookmark file to load</dd>
+      <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
+      <dd>Load selected bookmark file</dd>
+      <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
+      <dd>Save bookmark file</dd>
+      <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
+      <dd>Focus bookmark editor</dd>
+      <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
+      <dd>Select bookmark file to import</dd>
+      <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
+      <dd>Import selected file</dd>
+      <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
+      <dd>Export selected file</dd>
+      <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
+      <dd>Focus search field</dd>
+    </dl>
+  </div>
+
   <template id="tag-input-template">
     <li><label class="top-label">Tag <input type="text" name="tag"
     pattern="[^,;]*" size="20" list="tag-datalist" placeholder="tag"></input>
@@ -76,28 +98,6 @@
       <a title="Create Bookmark" id="bookmarklet-link">Create Bookmark</a>
     </aside>
 
-    <aside id="keyboard-shortcuts">
-      <h3>Keyboard Shortcuts</h3>
-      <dl>
-        <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
-        <dd>Select bookmark file to load</dd>
-        <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
-        <dd>Load selected bookmark file</dd>
-        <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
-        <dd>Save bookmark file</dd>
-        <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
-        <dd>Focus bookmark editor</dd>
-        <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
-        <dd>Select bookmark file to import</dd>
-        <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
-        <dd>Import selected file</dd>
-        <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
-        <dd>Export selected file</dd>
-        <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
-        <dd>Focus search field</dd>
-      </dl>
-    </aside>
-
     <form id="load-form">
       <fieldset>
         <legend>Load Bookmarks</legend>
--- a/booket.js	Thu Oct 02 00:19:34 2014 +0200
+++ b/booket.js	Sat Oct 04 22:16:56 2014 +0200
@@ -921,6 +921,29 @@
  * view
  */
 
+var KeyboardShortcutsView = function () {
+    document.addEventListener('keydown', this);
+    document.addEventListener('keyup', this);
+
+    this.shortcutKeysOverlayElement =
+        document.querySelector('#keyboard-shortcuts');
+};
+
+KeyboardShortcutsView.prototype.handleEvent = function (e) {
+    var elements;
+    var i;
+
+    // keyboard shortcut hints are visible when the Alt key is pressed and
+    // hidden again when the Alt key is released or another key is pressed
+    if (this.shortcutKeysOverlayElement.dataset.overlayVisible !== undefined &&
+            (e.type === 'keyup' || e.type === 'keydown')) {
+        delete this.shortcutKeysOverlayElement.dataset.overlayVisible;
+    } else if (e.type === 'keydown' && e.keyCode === 18) {
+        this.shortcutKeysOverlayElement.dataset.overlayVisible = '';
+    }
+};
+
+
 var TagView = function () {
     var tagsElement;
 
@@ -1107,8 +1130,7 @@
 
     this.editorFormElement = newNode.querySelector('form.bookmark-editor-form');
     this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
-    this.editorFormElement.querySelector(
-        'input:not([type="hidden"])').accessKey = 'a';
+    this.editorFormElement.querySelector('label').accessKey = 'a';
     this.editorFormElement.addEventListener('input', this);
     this.editorFormElement.addEventListener('click', this);
     this.editorFormElement.addEventListener('submit', this);
@@ -1646,9 +1668,10 @@
  * controller
  */
 
-var BooketController = function(bookmarkModel, actionsView, tagView,
-        bookmarkView) {
+var BooketController = function(bookmarkModel, keyboardShortcutsView,
+        actionsView, tagView, bookmarkView) {
     this.bookmarkModel = bookmarkModel;
+    this.keyboardShortcutsView = keyboardShortcutsView;
     this.actionsView = actionsView;
     this.tagView = tagView;
     this.bookmarkView = bookmarkView;
@@ -1834,17 +1857,19 @@
 document.addEventListener('DOMContentLoaded', function (e) {
     var controller;
     var bookmarkModel;
+    var keyboardShortcutsView;
     var actionsView;
     var tagView;
     var bookmarkView;
     var hashChangeEvent;
 
     bookmarkModel = new BookmarkModel();
+    keyboardShortcutsView = new KeyboardShortcutsView();
     tagView = new TagView();
     actionsView = new ActionsView();
     bookmarkView = new BookmarkView();
-    controller = new BooketController(bookmarkModel, actionsView,
-        tagView, bookmarkView);
+    controller = new BooketController(bookmarkModel, keyboardShortcutsView,
+        actionsView, tagView, bookmarkView);
 
     // initialize state from the current URL
     hashChangeEvent = new Event('hashchange');