comparison 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
comparison
equal deleted inserted replaced
21:2a4922945b8d 22:b19db583b5f8
919 919
920 /* 920 /*
921 * view 921 * view
922 */ 922 */
923 923
924 var KeyboardShortcutsView = function () {
925 document.addEventListener('keydown', this);
926 document.addEventListener('keyup', this);
927
928 this.shortcutKeysOverlayElement =
929 document.querySelector('#keyboard-shortcuts');
930 };
931
932 KeyboardShortcutsView.prototype.handleEvent = function (e) {
933 var elements;
934 var i;
935
936 // keyboard shortcut hints are visible when the Alt key is pressed and
937 // hidden again when the Alt key is released or another key is pressed
938 if (this.shortcutKeysOverlayElement.dataset.overlayVisible !== undefined &&
939 (e.type === 'keyup' || e.type === 'keydown')) {
940 delete this.shortcutKeysOverlayElement.dataset.overlayVisible;
941 } else if (e.type === 'keydown' && e.keyCode === 18) {
942 this.shortcutKeysOverlayElement.dataset.overlayVisible = '';
943 }
944 };
945
946
924 var TagView = function () { 947 var TagView = function () {
925 var tagsElement; 948 var tagsElement;
926 949
927 ObservableMixin.call(this); 950 ObservableMixin.call(this);
928 951
1105 newNode = document.importNode( 1128 newNode = document.importNode(
1106 document.querySelector('#bookmark-editor-template').content, true); 1129 document.querySelector('#bookmark-editor-template').content, true);
1107 1130
1108 this.editorFormElement = newNode.querySelector('form.bookmark-editor-form'); 1131 this.editorFormElement = newNode.querySelector('form.bookmark-editor-form');
1109 this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark'; 1132 this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
1110 this.editorFormElement.querySelector( 1133 this.editorFormElement.querySelector('label').accessKey = 'a';
1111 'input:not([type="hidden"])').accessKey = 'a';
1112 this.editorFormElement.addEventListener('input', this); 1134 this.editorFormElement.addEventListener('input', this);
1113 this.editorFormElement.addEventListener('click', this); 1135 this.editorFormElement.addEventListener('click', this);
1114 this.editorFormElement.addEventListener('submit', this); 1136 this.editorFormElement.addEventListener('submit', this);
1115 this.editorFormElement.addEventListener('reset', this); 1137 this.editorFormElement.addEventListener('reset', this);
1116 1138
1644 1666
1645 /* 1667 /*
1646 * controller 1668 * controller
1647 */ 1669 */
1648 1670
1649 var BooketController = function(bookmarkModel, actionsView, tagView, 1671 var BooketController = function(bookmarkModel, keyboardShortcutsView,
1650 bookmarkView) { 1672 actionsView, tagView, bookmarkView) {
1651 this.bookmarkModel = bookmarkModel; 1673 this.bookmarkModel = bookmarkModel;
1674 this.keyboardShortcutsView = keyboardShortcutsView;
1652 this.actionsView = actionsView; 1675 this.actionsView = actionsView;
1653 this.tagView = tagView; 1676 this.tagView = tagView;
1654 this.bookmarkView = bookmarkView; 1677 this.bookmarkView = bookmarkView;
1655 1678
1656 /* connect the views to the model */ 1679 /* connect the views to the model */
1832 1855
1833 1856
1834 document.addEventListener('DOMContentLoaded', function (e) { 1857 document.addEventListener('DOMContentLoaded', function (e) {
1835 var controller; 1858 var controller;
1836 var bookmarkModel; 1859 var bookmarkModel;
1860 var keyboardShortcutsView;
1837 var actionsView; 1861 var actionsView;
1838 var tagView; 1862 var tagView;
1839 var bookmarkView; 1863 var bookmarkView;
1840 var hashChangeEvent; 1864 var hashChangeEvent;
1841 1865
1842 bookmarkModel = new BookmarkModel(); 1866 bookmarkModel = new BookmarkModel();
1867 keyboardShortcutsView = new KeyboardShortcutsView();
1843 tagView = new TagView(); 1868 tagView = new TagView();
1844 actionsView = new ActionsView(); 1869 actionsView = new ActionsView();
1845 bookmarkView = new BookmarkView(); 1870 bookmarkView = new BookmarkView();
1846 controller = new BooketController(bookmarkModel, actionsView, 1871 controller = new BooketController(bookmarkModel, keyboardShortcutsView,
1847 tagView, bookmarkView); 1872 actionsView, tagView, bookmarkView);
1848 1873
1849 // initialize state from the current URL 1874 // initialize state from the current URL
1850 hashChangeEvent = new Event('hashchange'); 1875 hashChangeEvent = new Event('hashchange');
1851 hashChangeEvent.oldURL = window.location.href; 1876 hashChangeEvent.oldURL = window.location.href;
1852 hashChangeEvent.newURL = window.location.href; 1877 hashChangeEvent.newURL = window.location.href;