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