Merge lp:~stephen-stewart/snapweb/the-sun-is-the-same-in-a-relative-way into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

add a clock as per design doc

[Sergio Schvezov (sergiusens)]

We should probably find someone who can review the actual code ;-)

review: Approve

=== modified file 'package.json'
--- package.json	2015-05-26 21:20:54 +0000
+++ package.json	2015-05-26 21:20:54 +0000
@@ -35,6 +35,7 @@
     "karma-jasmine-ajax": "^0.1.12",
     "karma-phantomjs-launcher": "~0.1.4",
     "lodash": "~3.3.1",
+    "moment": "^2.10.3",
     "normalize.css": "^3.0.3",
     "postcss-bem-linter": "git://github.com/necolas/postcss-bem-linter",
     "postcss-custom-media": "^3.0.0",

=== added file 'www/src/css/infobar.css'
--- www/src/css/infobar.css	1970-01-01 00:00:00 +0000
+++ www/src/css/infobar.css	2015-05-26 21:20:54 +0000
@@ -0,0 +1,11 @@
+/** @define b-infobar; weak */
+
+.b-infobar {
+  padding:8px 0;
+  font-size:12px;
+}
+
+.b-infobar__datetime {
+  float:right;
+  display:inline-block;
+}

=== added file 'www/src/js/templates/layout-infobar.hbs'
--- www/src/js/templates/layout-infobar.hbs	1970-01-01 00:00:00 +0000
+++ www/src/js/templates/layout-infobar.hbs	2015-05-26 21:20:54 +0000
@@ -0,0 +1,5 @@
+<div class="b-layout__container">
+  <div class="b-infobar__datetime">
+    {{datetime}}
+  </div>
+</div>

=== modified file 'www/src/js/templates/layout.hbs'
--- www/src/js/templates/layout.hbs	2015-05-05 11:20:39 +0000
+++ www/src/js/templates/layout.hbs	2015-05-26 21:20:54 +0000
@@ -1,4 +1,5 @@
 <div class="b-layout__alerts"></div>
 <div class="b-layout__banner"></div>
+<div class="b-layout__infobar"></div>
 <div class="b-layout__main"></div>
 <div class="b-layout__footer"></div>

=== added file 'www/src/js/views/layout-infobar.js'
--- www/src/js/views/layout-infobar.js	1970-01-01 00:00:00 +0000
+++ www/src/js/views/layout-infobar.js	2015-05-26 21:20:54 +0000
@@ -0,0 +1,49 @@
+// infobar view
+var _ = require('lodash');
+var $ = require('jquery');
+var moment = require('moment');
+var Backbone = require('backbone');
+Backbone.$ = $;
+var Marionette = require('backbone.marionette');
+var template = require('../templates/layout-infobar.hbs');
+
+module.exports = Marionette.ItemView.extend({
+
+  initialize: function() {
+  },
+
+  ui: {
+    'datetime': '.b-infobar__datetime'
+  },
+
+  className: 'b-infobar',
+
+  template : function(data) {
+    return template(data);
+  },
+
+  serializeData: function() {
+    return {
+      datetime: this.getDatetime
+    };
+  },
+
+  onDomRefresh: function() {
+    this.updateClock();
+  },
+
+  onBeforeDestroy: function() {
+    clearTimeout(this.timeoutID);
+  },
+
+  getDatetime: function() {
+    return moment().format('ddd, MMMM Do YYYY, h:mm:ss a');
+  },
+
+  updateClock: function() {
+    var now = this.getDatetime();
+    this.ui.datetime.text(now);
+    this.timeoutID = setTimeout(_.bind(this.updateClock, this), 1000);
+  }
+
+});

=== modified file 'www/src/js/views/layout.js'
--- www/src/js/views/layout.js	2015-05-05 11:20:39 +0000
+++ www/src/js/views/layout.js	2015-05-26 21:20:54 +0000
@@ -6,6 +6,7 @@
 var Marionette = require('backbone.marionette');
 var Radio = require('backbone.radio');
 var BannerView = require('./layout-banner.js');
+var InfobarView = require('./layout-infobar.js');
 var FooterView = require('./layout-footer.js');
 var NotificationsView = require('./alerts.js');
 var template = require('../templates/layout.hbs');
@@ -26,6 +27,7 @@
 
   onRender: function() {
     this.showChildView('bannerRegion', new BannerView());
+    this.showChildView('infobarRegion', new InfobarView());
     this.showChildView('footerRegion', new FooterView());
   },
 
@@ -40,9 +42,10 @@
   },
 
   regions: {
-    bannerRegion: '.b-layout__banner',
-    mainRegion:   '.b-layout__main',
-    footerRegion: '.b-layout__footer',
-    alertsRegion: '.b-layout__alerts'
+    bannerRegion:   '.b-layout__banner',
+    infobarRegion:  '.b-layout__infobar',
+    mainRegion:     '.b-layout__main',
+    footerRegion:   '.b-layout__footer',
+    alertsRegion:   '.b-layout__alerts'
   }
 });