# HG changeset patch
# User Guido Berhoerster <guido+booket@berhoerster.name>
# Date 1412596370 -7200
# Node ID 8c2f3e72d5143391d4e8139c55be8a789ae06e90
# Parent  b2c9c4fb8d4c1da0a86d61883aebdc2a3394972c
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.

diff -r b2c9c4fb8d4c -r 8c2f3e72d514 booket.css
--- a/booket.css	Mon Oct 06 12:19:52 2014 +0200
+++ b/booket.css	Mon Oct 06 13:52:50 2014 +0200
@@ -58,6 +58,10 @@
     border: none;
 }
 
+strong {
+    font-weight: bold;
+}
+
 h1 {
     font-size: 2em;
     margin: .67em 0
@@ -154,6 +158,15 @@
     z-index: 10;
 }
 
+.unsaved-changes-message {
+    color: #a40000;
+    background-color: rgba(239, 41, 41, .25);
+    border: 1px solid #a40000;
+    border-radius: .5em;
+    padding: .5em;
+    font-size: .75em;
+}
+
 #actions {
     margin: 1em 0 0 0;
 }
@@ -186,16 +199,6 @@
     font-size: .75em;
 }
 
-#save-form .unsaved-changes-message {
-    margin: 0;
-    font-size: .75em;
-}
-
-.unsaved-changes-message strong {
-    font-weight: bold;
-    color: #a40000;
-}
-
 form.bookmark-editor-form img.bookmark-favicon {
     display: block;
     padding: 1px 0;
diff -r b2c9c4fb8d4c -r 8c2f3e72d514 booket.html
--- a/booket.html	Mon Oct 06 12:19:52 2014 +0200
+++ b/booket.html	Mon Oct 06 13:52:50 2014 +0200
@@ -38,27 +38,32 @@
 
   <datalist id="tag-datalist"></datalist>
 
-  <div id="keyboard-shortcuts">
-    <h3>Keyboard Shortcuts</h3>
-    <dl>
-      <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
-      <dd>Select bookmark file to load</dd>
-      <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
-      <dd>Load selected bookmark file</dd>
-      <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
-      <dd>Save bookmark file</dd>
-      <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
-      <dd>Focus bookmark editor</dd>
-      <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
-      <dd>Select bookmark file to import</dd>
-      <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
-      <dd>Import selected file</dd>
-      <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
-      <dd>Export selected file</dd>
-      <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
-      <dd>Focus search field</dd>
-    </dl>
-  </div>
+  <section id="notifications">
+    <div id="keyboard-shortcuts">
+      <h3>Keyboard Shortcuts</h3>
+      <dl>
+        <dt><kbd>Prefix</kbd>+<kbd>i</kbd></dt>
+        <dd>Select bookmark file to load</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>l</kbd></dt>
+        <dd>Load selected bookmark file</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>s</kbd></dt>
+        <dd>Save bookmark file</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>a</kbd></dt>
+        <dd>Focus bookmark editor</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>e</kbd></dt>
+        <dd>Select bookmark file to import</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>m</kbd></dt>
+        <dd>Import selected file</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>x</kbd></dt>
+        <dd>Export selected file</dd>
+        <dt><kbd>Prefix</kbd>+<kbd>f</kbd></dt>
+        <dd>Focus search field</dd>
+      </dl>
+    </div>
+
+    <p class="unsaved-changes-message" hidden="hidden"><strong>There are
+    unsaved changes to your bookmarks.</strong></p>
+  </section>
 
   <template id="tag-input-template">
     <li><label class="top-label">Tag <input type="text" name="tag"
@@ -113,8 +118,6 @@
     <form id="save-form">
       <fieldset class="expander">
         <legend tabindex="0" class="expander-label">Save Bookmarks</legend>
-        <p class="unsaved-changes-message" hidden="hidden"><strong>There are
-        unsaved changes to your bookmarks.</strong></p>
         <a href="#" id="save-link" hidden="hidden"
         download="bookmarks.json"></a>
         <button type="submit" name="save-file"
diff -r b2c9c4fb8d4c -r 8c2f3e72d514 booket.js
--- a/booket.js	Mon Oct 06 12:19:52 2014 +0200
+++ b/booket.js	Mon Oct 06 13:52:50 2014 +0200
@@ -921,15 +921,18 @@
  * view
  */
 
-var KeyboardShortcutsView = function () {
-    document.addEventListener('keydown', this);
-    document.addEventListener('keyup', this);
+var NotificationsView = function () {
+    this.unsavedChangesElement =
+        document.querySelector('#notifications .unsaved-changes-message');
 
     this.shortcutKeysOverlayElement =
         document.querySelector('#keyboard-shortcuts');
+
+    document.addEventListener('keydown', this);
+    document.addEventListener('keyup', this);
 };
 
-KeyboardShortcutsView.prototype.handleEvent = function (e) {
+NotificationsView.prototype.handleEvent = function (e) {
     var elements;
     var i;
 
@@ -943,6 +946,10 @@
     }
 };
 
+NotificationsView.prototype.onUnsavedChangesChanged = function (unsavedChanges) {
+    this.unsavedChangesElement.hidden = !unsavedChanges;
+};
+
 
 var TagView = function () {
     var tagsElement;
@@ -1110,9 +1117,6 @@
     this.tagInputTemplate = document.querySelector('#tag-input-template');
     saveFormElement = document.querySelector('form#save-form');
 
-    this.unsavedChangesElement =
-        saveFormElement.querySelector('.unsaved-changes-message');
-
     this.saveLinkElement = saveFormElement.querySelector('a#save-link');
 
     // create new editor form from template
@@ -1321,10 +1325,6 @@
     window.alert('Failed to parse bookmark file:\n' + message);
 };
 
-ActionsView.prototype.onUnsavedChangesChanged = function (unsavedChanges) {
-    this.unsavedChangesElement.hidden = !unsavedChanges;
-};
-
 
 var BookmarkView = function () {
     var searchFormElement;
@@ -1710,10 +1710,10 @@
  * controller
  */
 
-var BooketController = function(bookmarkModel, keyboardShortcutsView,
+var BooketController = function(bookmarkModel, notificationsView,
         actionsView, tagView, bookmarkView) {
     this.bookmarkModel = bookmarkModel;
-    this.keyboardShortcutsView = keyboardShortcutsView;
+    this.notificationsView = notificationsView;
     this.actionsView = actionsView;
     this.tagView = tagView;
     this.bookmarkView = bookmarkView;
@@ -1734,7 +1734,7 @@
     this.bookmarkModel.addObserver('export-file',
         this.actionsView.onExportFile.bind(this.actionsView));
     this.bookmarkModel.addObserver('unsaved-changes-changed',
-        this.actionsView.onUnsavedChangesChanged.bind(this.actionsView));
+        this.notificationsView.onUnsavedChangesChanged.bind(this.notificationsView));
     this.bookmarkModel.addObserver('tag-added',
         this.tagView.onTagAdded.bind(this.tagView));
     this.bookmarkModel.addObserver('tag-count-changed',
@@ -1899,18 +1899,18 @@
 document.addEventListener('DOMContentLoaded', function (e) {
     var controller;
     var bookmarkModel;
-    var keyboardShortcutsView;
+    var notificationsView;
     var actionsView;
     var tagView;
     var bookmarkView;
     var hashChangeEvent;
 
     bookmarkModel = new BookmarkModel();
-    keyboardShortcutsView = new KeyboardShortcutsView();
+    notificationsView = new NotificationsView();
     tagView = new TagView();
     actionsView = new ActionsView();
     bookmarkView = new BookmarkView();
-    controller = new BooketController(bookmarkModel, keyboardShortcutsView,
+    controller = new BooketController(bookmarkModel, notificationsView,
         actionsView, tagView, bookmarkView);
 
     // initialize state from the current URL