client-side flash message implementation

closes #233

h/css/app.scss

@@ -204,24 +204,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
     }
   }
 
-  .info {
-    color: #3a87ad;
-    background-color: #d9edf7;
-    border-color: #98BED1;
-  }
-
-  .good {
-    color: #468847;
-    background-color: #dff0d8;
-    border-color: #8DC98E;
-  }
-
-  .bad {
-    color: #b94a48;
-    background-color: #f2dede;
-    border-color: #F5A1A0;
-  }
-
   .nav-tabs {
     padding-left: 1.3em;
   }

h/css/common.scss

@@ -119,6 +119,45 @@ button, input[type=submit], .btn {
 }
 
 
+//FLASH/TOAST/ALERTS///////////////////////////////
+.toast, .annotator-notice {
+  @include border-radius(.5em);
+  @include smallshadow;
+  @include single-transition(opacity, .2s);
+  left: 50%;
+  margin-left: -15%;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  text-align: center;
+  top: .25em;
+  width: 30%;
+  z-index: 2000;
+
+  &.show, &.annotator-notice-show {
+    opacity: 1;
+    pointer-events: initial;
+  }
+}
+
+.info, .annotator-notice-info {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #98BED1;
+}
+
+.success, .annotator-notice-success {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #8DC98E;
+}
+
+.error, .annotator-notice-error {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #F5A1A0;
+}
+
 
 //CLOSER////////////////////////////////
 .close {

h/js/controllers.coffee

@@ -9,11 +9,11 @@ class App
 
   this.$inject = [
     '$compile', '$element', '$http', '$location', '$scope',
-    'annotator', 'threading'
+    'annotator', 'flash', 'threading'
   ]
   constructor: (
     $compile, $element, $http, $location, $scope,
-    annotator, threading
+    annotator, flash, threading
   ) ->
     $scope.reset = => angular.extend $scope, @scope
 
@@ -131,9 +131,9 @@ class App
           'Content-Type': 'application/x-www-form-urlencoded'
         withCredentials: true
       .success (data) =>
-        # Extend the scope with updated model data
-        angular.extend($scope, data.model) if data.model?
-        # TODO: flash data.error server messages
+        if data.model? then angular.extend($scope, data.model)
+        if data.flash? then flash q, msgs for q, msgs of data.flash
+        if data.status is 'failure' then flash 'error', data.reason
 
     $scope.toggleShow = ->
       if annotator.visible
@@ -158,7 +158,10 @@ class App
       if oldValue? and not newValue?
         $http.post 'logout', '',
           withCredentials: true
-        .success (data) => $scope.reset()
+        .success (data) =>
+          $scope.reset()
+          if data.model? then angular.extend($scope, data.model)
+          if data.flash? then flash q, msgs for q, msgs of data.flash
 
     $scope.$watch 'token', (newValue, oldValue) =>
       if plugins.Auth?
@@ -186,7 +189,8 @@ class App
     $http.get '',
       withCredentials: true
     .success (data) =>
-      angular.extend $scope, data.model
+      if data.model? then angular.extend $scope, data.model
+      if data.flash? then flash q, msgs for q, msgs of data.flash
 
     $scope.$evalAsync 'reset()'
 

h/js/services.coffee

@@ -377,6 +377,45 @@ class Hypothesis extends Annotator
       annotation.id
 
 
+class FlashProvider
+  queues:
+    info: []
+    error: []
+    success: []
+  notice: null
+  timeout: null
+
+  constructor: ->
+    # Configure notification classes
+    angular.extend Annotator.Notification,
+      INFO: 'info'
+      ERROR: 'error'
+      SUCCESS: 'success'
+
+  _process: ->
+    @timeout = null
+    for q, msgs of @queues
+      if msgs.length
+        notice = Annotator.showNotification msgs.shift(), q
+        @timeout = this._wait =>
+          # work around Annotator.Notification not removing classes
+          for _, klass of notice.options.classes
+            notice.element.removeClass klass
+          this._process()
+        break
+
+  $get: ['$timeout', 'annotator', ($timeout, annotator) ->
+    this._wait = (cb) -> $timeout cb, 5000
+    angular.bind this, this._flash
+  ]
+
+  _flash: (queue, messages) ->
+    if @queues[queue]?
+      @queues[queue] = @queues[queue]?.concat messages
+      this._process() unless @timeout?
+
+
 angular.module('h.services', [])
+  .provider('flash', FlashProvider)
   .service('annotator', Hypothesis)
   .value('threading', mail.messageThread())