Mercurial > projects > booket

comparison booket.js @ 26:8c2f3e72d514

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Create new view for notifications Create new view for notifications which handles the keyboard shortcuts overlay message and the unsaved changes notification. This ensures that the unsaved changes notification is always visible, even when the save form expander is closed.
author Guido Berhoerster <guido+booket@berhoerster.name>
date Mon, 06 Oct 2014 13:52:50 +0200
parents b2c9c4fb8d4c
children
comparison
equal deleted inserted replaced
25:b2c9c4fb8d4c 26:8c2f3e72d514
919 919
920 /* 920 /*
921 * view 921 * view
922 */ 922 */
923 923
924 var KeyboardShortcutsView = function () { 924 var NotificationsView = function () {
925 this.unsavedChangesElement =
926 document.querySelector('#notifications .unsaved-changes-message');
927
928 this.shortcutKeysOverlayElement =
929 document.querySelector('#keyboard-shortcuts');
930
925 document.addEventListener('keydown', this); 931 document.addEventListener('keydown', this);
926 document.addEventListener('keyup', this); 932 document.addEventListener('keyup', this);
927 933 };
928 this.shortcutKeysOverlayElement = 934
929 document.querySelector('#keyboard-shortcuts'); 935 NotificationsView.prototype.handleEvent = function (e) {
930 };
931
932 KeyboardShortcutsView.prototype.handleEvent = function (e) {
933 var elements; 936 var elements;
934 var i; 937 var i;
935 938
936 // keyboard shortcut hints are visible when the Alt key is pressed and 939 // 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 940 // hidden again when the Alt key is released or another key is pressed
939 (e.type === 'keyup' || e.type === 'keydown')) { 942 (e.type === 'keyup' || e.type === 'keydown')) {
940 delete this.shortcutKeysOverlayElement.dataset.overlayVisible; 943 delete this.shortcutKeysOverlayElement.dataset.overlayVisible;
941 } else if (e.type === 'keydown' && e.keyCode === 18) { 944 } else if (e.type === 'keydown' && e.keyCode === 18) {
942 this.shortcutKeysOverlayElement.dataset.overlayVisible = ''; 945 this.shortcutKeysOverlayElement.dataset.overlayVisible = '';
943 } 946 }
947 };
948
949 NotificationsView.prototype.onUnsavedChangesChanged = function (unsavedChanges) {
950 this.unsavedChangesElement.hidden = !unsavedChanges;
944 }; 951 };
945 952
946 953
947 var TagView = function () { 954 var TagView = function () {
948 var tagsElement; 955 var tagsElement;
1108 this.actionsElement = document.querySelector('#actions'); 1115 this.actionsElement = document.querySelector('#actions');
1109 1116
1110 this.tagInputTemplate = document.querySelector('#tag-input-template'); 1117 this.tagInputTemplate = document.querySelector('#tag-input-template');
1111 saveFormElement = document.querySelector('form#save-form'); 1118 saveFormElement = document.querySelector('form#save-form');
1112 1119
1113 this.unsavedChangesElement =
1114 saveFormElement.querySelector('.unsaved-changes-message');
1115
1116 this.saveLinkElement = saveFormElement.querySelector('a#save-link'); 1120 this.saveLinkElement = saveFormElement.querySelector('a#save-link');
1117 1121
1118 // create new editor form from template 1122 // create new editor form from template
1119 newNode = document.importNode( 1123 newNode = document.importNode(
1120 document.querySelector('#bookmark-editor-template').content, true); 1124 document.querySelector('#bookmark-editor-template').content, true);
1317 window.alert('Failed to load bookmark file:\n' + message); 1321 window.alert('Failed to load bookmark file:\n' + message);
1318 }; 1322 };
1319 1323
1320 ActionsView.prototype.onParseFileError = function (message) { 1324 ActionsView.prototype.onParseFileError = function (message) {
1321 window.alert('Failed to parse bookmark file:\n' + message); 1325 window.alert('Failed to parse bookmark file:\n' + message);
1322 };
1323
1324 ActionsView.prototype.onUnsavedChangesChanged = function (unsavedChanges) {
1325 this.unsavedChangesElement.hidden = !unsavedChanges;
1326 }; 1326 };
1327 1327
1328 1328
1329 var BookmarkView = function () { 1329 var BookmarkView = function () {
1330 var searchFormElement; 1330 var searchFormElement;
1708 1708
1709 /* 1709 /*
1710 * controller 1710 * controller
1711 */ 1711 */
1712 1712
1713 var BooketController = function(bookmarkModel, keyboardShortcutsView, 1713 var BooketController = function(bookmarkModel, notificationsView,
1714 actionsView, tagView, bookmarkView) { 1714 actionsView, tagView, bookmarkView) {
1715 this.bookmarkModel = bookmarkModel; 1715 this.bookmarkModel = bookmarkModel;
1716 this.keyboardShortcutsView = keyboardShortcutsView; 1716 this.notificationsView = notificationsView;
1717 this.actionsView = actionsView; 1717 this.actionsView = actionsView;
1718 this.tagView = tagView; 1718 this.tagView = tagView;
1719 this.bookmarkView = bookmarkView; 1719 this.bookmarkView = bookmarkView;
1720 1720
1721 /* connect the views to the model */ 1721 /* connect the views to the model */
1732 this.bookmarkModel.addObserver('save-file', 1732 this.bookmarkModel.addObserver('save-file',
1733 this.actionsView.onSaveFile.bind(this.actionsView)); 1733 this.actionsView.onSaveFile.bind(this.actionsView));
1734 this.bookmarkModel.addObserver('export-file', 1734 this.bookmarkModel.addObserver('export-file',
1735 this.actionsView.onExportFile.bind(this.actionsView)); 1735 this.actionsView.onExportFile.bind(this.actionsView));
1736 this.bookmarkModel.addObserver('unsaved-changes-changed', 1736 this.bookmarkModel.addObserver('unsaved-changes-changed',
1737 this.actionsView.onUnsavedChangesChanged.bind(this.actionsView)); 1737 this.notificationsView.onUnsavedChangesChanged.bind(this.notificationsView));
1738 this.bookmarkModel.addObserver('tag-added', 1738 this.bookmarkModel.addObserver('tag-added',
1739 this.tagView.onTagAdded.bind(this.tagView)); 1739 this.tagView.onTagAdded.bind(this.tagView));
1740 this.bookmarkModel.addObserver('tag-count-changed', 1740 this.bookmarkModel.addObserver('tag-count-changed',
1741 this.tagView.onTagCountChanged.bind(this.tagView)); 1741 this.tagView.onTagCountChanged.bind(this.tagView));
1742 this.bookmarkModel.addObserver('tag-deleted', 1742 this.bookmarkModel.addObserver('tag-deleted',
1897 1897
1898 1898
1899 document.addEventListener('DOMContentLoaded', function (e) { 1899 document.addEventListener('DOMContentLoaded', function (e) {
1900 var controller; 1900 var controller;
1901 var bookmarkModel; 1901 var bookmarkModel;
1902 var keyboardShortcutsView; 1902 var notificationsView;
1903 var actionsView; 1903 var actionsView;
1904 var tagView; 1904 var tagView;
1905 var bookmarkView; 1905 var bookmarkView;
1906 var hashChangeEvent; 1906 var hashChangeEvent;
1907 1907
1908 bookmarkModel = new BookmarkModel(); 1908 bookmarkModel = new BookmarkModel();
1909 keyboardShortcutsView = new KeyboardShortcutsView(); 1909 notificationsView = new NotificationsView();
1910 tagView = new TagView(); 1910 tagView = new TagView();
1911 actionsView = new ActionsView(); 1911 actionsView = new ActionsView();
1912 bookmarkView = new BookmarkView(); 1912 bookmarkView = new BookmarkView();
1913 controller = new BooketController(bookmarkModel, keyboardShortcutsView, 1913 controller = new BooketController(bookmarkModel, notificationsView,
1914 actionsView, tagView, bookmarkView); 1914 actionsView, tagView, bookmarkView);
1915 1915
1916 // initialize state from the current URL 1916 // initialize state from the current URL
1917 hashChangeEvent = new Event('hashchange'); 1917 hashChangeEvent = new Event('hashchange');
1918 hashChangeEvent.oldURL = window.location.href; 1918 hashChangeEvent.oldURL = window.location.href;