Starting to add Timeline notifications.

res/app/components/stf/timelines/index.js

@@ -0,0 +1,6 @@
+require('./timelines.css')
+
+module.exports = angular.module('stf.timelines', [
+
+])
+  .directive('timelines', require('./timelines-directive'))

res/app/components/stf/timelines/timeline-message/index.js

@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.timeline-message', [
+
+])
+  .directive('timelineMessage', require('./timeline-message-directive'))

res/app/components/stf/timelines/timeline-message/timeline-message-directive.js

@@ -0,0 +1,41 @@
+module.exports = function timelineMessageDirective(Timelines, $sce, $interpolate) {
+
+  var defaults = {
+    message: '',
+    type: 'info',
+    ttl: 5000
+  }
+
+  return {
+    restrict: 'AE',
+    replace: true,
+    template: '',
+    transclude: true,
+    link: function (scope, iElem, iAttrs, ctrls, transcludeFn) {
+
+      var options = angular.extend({}, defaults, scope.$eval(iAttrs.timelineMessage))
+
+      transcludeFn(function (elem, scope) {
+        var e,
+          html,
+          interpolateFn,
+          safeHtml;
+
+        // Create temporary wrapper element so we can grab the inner html
+        e = angular.element(document.createElement('div'))
+        e.append(elem)
+        html = e.html()
+
+        // Interpolate expressions in current scope
+        interpolateFn = $interpolate(html)
+        html = interpolateFn(scope)
+
+        // Tell Angular the HTML can be trusted so it can be used in ng-bind-html
+        safeHtml = $sce.trustAsHtml(html)
+
+        // Add notification
+        Timelines.add(safeHtml, options.type, options.ttl)
+      })
+    }
+  }
+}

res/app/components/stf/timelines/timeline-message/timeline-message-spec.js

@@ -0,0 +1,23 @@
+describe('timelineMessage', function () {
+
+  beforeEach(module('stf.timeline-message'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div timeline-message name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});

res/app/components/stf/timelines/timelines-directive.js

@@ -0,0 +1,12 @@
+module.exports = function timelinesDirective(Timelines) {
+  return {
+    restrict: 'AE',
+    replace: false,
+    scope: {},
+    template: require('./timelines.jade'),
+    link: function (scope) {
+      scope.cssPrefix = Timelines.options.cssPrefix;
+      scope.notifications = Timelines.notifications;
+    }
+  }
+}

res/app/components/stf/timelines/timelines-spec.js

@@ -0,0 +1,23 @@
+describe('timelines', function () {
+
+  beforeEach(module('stf.timelines'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div timelines name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});

res/app/components/stf/timelines/timelines.css

@@ -0,0 +1,3 @@
+.stf-timelines {
+
+}

res/app/components/stf/timelines/timelines.jade

@@ -0,0 +1,5 @@
+div.stf-timelines
+  ui.list-unstyled
+    li(ng-repeat='(id, notification) in notifications')
+      div(ng-class='{{cssPrefix}} {{cssPrefix}}-{{notification.type}}')
+        div(ng-bind-html='notification.message')