divided userbar and notifications

js/apps/system/aardvark/frontend/html/body.html.part

@@ -9,6 +9,8 @@
         </div>
         <div class="usermenu" id="userBar" style="float:right;">
         </div>
+        <div class="notificationmenu" id="notificationBar" style="float:right;">
+        </div>
         <div class="navmenu" id="navigationBar">
         </div>
     </div>

js/apps/system/aardvark/frontend/js/templates/notificationView.ejs

@@ -0,0 +1,17 @@
+<script id="notificationView.ejs" type="text/template">
+<ul class="navlist" id="notificationViewUl">
+
+  <div class="navlogo">
+    <div id="stat_hd" class="notificationButton"><a id="stat_hd_counter">0</a></div>
+  </div>
+
+  <li class="dropdown">
+    <ul class="user-dropdown-menu fixedDropdown" id="notification_menu">
+      <li class="dropdown-header"><a>Notifications</a></li>
+      <ul class="innerDropdownInnerUL"></ul>
+      <button id="removeAllNotifications" class="btn btn-danger">Clear</button>
+    </ul>
+  </li>
+
+</ul>
+</script>

js/apps/system/aardvark/frontend/js/templates/userBarView.ejs

@@ -1,10 +1,6 @@
 <script id="userBarView.ejs" type="text/template">
 <ul class="navlist" id="userBarUl">
 
-  <div class="navlogo">
-    <div id="stat_hd" class="notificationButton"><a id="stat_hd_counter">0</a></div>
-  </div>
-
   <li class="dropdown user-menu">
     <a href="#" class="tab" id="user" >
       <img class="userMenuImg" src="<%=img%>" id="userimage" /> <b class="caret"></b>
@@ -39,16 +35,5 @@
     </ul>
   </li>
 
-  <li class="dropdown">
-    <ul class="user-dropdown-menu fixedDropdown" id="notification_menu">
-      <li class="dropdown-header"><a>Notifications</a></li>
-      <ul class="innerDropdownInnerUL"></ul>
-      <button id="removeAllNotifications" class="btn btn-danger">Clear</button>
-    </ul>
-  </li>
-
-
-
-
 </ul>
 </script>

js/apps/system/aardvark/frontend/js/views/navigationView.js

@@ -19,9 +19,11 @@
         current: window.currentDB
       });
       this.userBarView = new window.UserBarView({
-        collection: this.options.notificationCollection,
         userCollection: window.userCollection
       });
+      this.notificationView = new window.NotificationView({
+        collection: this.options.notificationCollection,
+      });
       this.statisticBarView = new window.StatisticBarView({});
     },
 
@@ -29,7 +31,6 @@
       this.dbSelectionView.render($("#dbSelect"));
     },
 
-
     template: templateEngine.createTemplate("navigationView.ejs"),
 
     render: function () {
@@ -38,6 +39,7 @@
       }));
       this.dbSelectionView.render($("#dbSelect"));
       this.userBarView.render($("#userBar"));
+      this.notificationView.render($("#notificationBar"));
       this.statisticBarView.render($("#statisticBar"));
       return this;
     },

js/apps/system/aardvark/frontend/js/views/notificationView.js

@@ -0,0 +1,64 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true */
+/*global Backbone, templateEngine, $, window*/
+(function () {
+  "use strict";
+
+  window.NotificationView = Backbone.View.extend({
+
+    events: {
+      "click .navlogo #stat_hd"       : "toggleNotification",
+      "click .notificationItem .fa"   : "removeNotification",
+      "click #removeAllNotifications" : "removeAllNotifications"
+    },
+
+    initialize: function () {
+      this.collection.bind("add", this.renderNotifications.bind(this));
+      this.collection.bind("remove", this.renderNotifications.bind(this));
+      this.collection.bind("reset", this.renderNotifications.bind(this));
+    },
+
+    notificationItem: templateEngine.createTemplate("notificationItem.ejs"),
+
+    el: '#notificationBar',
+
+    template: templateEngine.createTemplate("notificationView.ejs"),
+
+    toggleNotification: function (e) {
+      $('#notification_menu').toggle();
+    },
+
+    removeAllNotifications: function () {
+      this.collection.reset();
+    },
+
+    removeNotification: function(e) {
+      var cid = e.target.id;
+      this.collection.get(cid).destroy();
+    },
+
+    renderNotifications: function() {
+      $('#stat_hd_counter').text(this.collection.length);
+      if (this.collection.length === 0) {
+        $('#stat_hd').removeClass('fullNotification');
+      }
+      else {
+        $('#stat_hd').addClass('fullNotification');
+      }
+
+      $('.innerDropdownInnerUL').html(this.notificationItem.render({
+        notifications : this.collection
+      }));
+    },
+
+    render: function () {
+      $(this.el).html(this.template.render({
+        notifications : this.collection
+      }));
+
+      this.renderNotifications();
+      this.delegateEvents();
+      return this.el;
+    }
+
+  });
+}());

js/apps/system/aardvark/frontend/js/views/userBarView.js

@@ -10,22 +10,14 @@
       "click .tab"                    : "navigateByTab",
       "mouseenter .dropdown"          : "showDropdown",
       "mouseleave .dropdown"          : "hideDropdown",
-      "click .navlogo #stat_hd"       : "toggleNotification",
-      "click .notificationItem .fa"   : "removeNotification",
-      "click #removeAllNotifications" : "removeAllNotifications",
       "click #userLogout"             : "userLogout"
     },
 
     initialize: function () {
-      this.collection.bind("add", this.renderNotifications.bind(this));
-      this.collection.bind("remove", this.renderNotifications.bind(this));
-      this.collection.bind("reset", this.renderNotifications.bind(this));
       this.userCollection = this.options.userCollection;
       this.userCollection.bind("change", this.render(this.$el));
     },
 
-    notificationItem: templateEngine.createTemplate("notificationItem.ejs"),
-
     template: templateEngine.createTemplate("userBarView.ejs"),
 
     navigateBySelect: function () {
@@ -46,10 +38,6 @@
       e.preventDefault();
     },
 
-    toggleNotification: function (e) {
-      $('#notification_menu').toggle();
-    },
-
     showDropdown: function (e) {
       var tab = e.target || e.srcElement;
       var navigateTo = tab.id;
@@ -63,30 +51,6 @@
       $("#user_dropdown").hide();
     },
 
-    removeAllNotifications: function () {
-      this.collection.reset();
-    },
-
-    removeNotification: function(e) {
-      var cid = e.target.id;
-      this.collection.get(cid).destroy();
-    },
-
-    renderNotifications: function() {
-
-      $('#stat_hd_counter').text(this.collection.length);
-      if (this.collection.length === 0) {
-        $('#stat_hd').removeClass('fullNotification');
-      }
-      else {
-        $('#stat_hd').addClass('fullNotification');
-      }
-
-      $('.innerDropdownInnerUL').html(this.notificationItem.render({
-        notifications : this.collection
-      }));
-    },
-
     render: function (el) {
       var username = this.userCollection.whoAmI(),
         img = null,
@@ -115,14 +79,10 @@
         img : img,
         name : name,
         username : username,
-        active : active,
-        notifications : this.collection
+        active : active
       }));
 
-      this.renderNotifications();
-
       this.delegateEvents();
-      this.renderNotifications();
       return this.$el;
     },