diff booket.js @ 22:b19db583b5f8

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 4a4d9527c06f
children 69552aee9993
line wrap: on
line diff
--- 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');