Mercurial > projects > booket
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');