Stack notifications at the top

Close #479

h/css/base.scss

@@ -222,24 +222,15 @@ $input-border-radius: 2px;
 //FLASH/TOAST/ALERTS///////////////////////////////
 .annotator-notice {
   @include border-radius(.1em);
-  @include smallshadow;
+  @include box-shadow(inset 2px 1px 1px hsla(0, 0%, 0%, .1));
   @include single-transition(opacity, .2s);
-  padding: .3em;
   font-family: $sansFontFamily;
-  border: solid 1px;
-  bottom: 18%;
-  left: 50%;
-  margin-left: -15%;
+  line-height: 29px;
   opacity: 0;
-  pointer-events: none;
-  position: fixed;
   text-align: center;
-  width: 30%;
-  z-index: 2000;
 
   &.show, &.annotator-notice-show {
-    opacity: .8;
-    pointer-events: initial;
+    opacity: 1;
   }
 }
 

h/css/common.scss

@@ -1216,7 +1216,7 @@ h3.stream {
   padding-bottom: 2em;
   width: 100%;
   text-align: center;
-  position: fixed;
+  position: absolute;
   top: 29px;
   right: 0;
   z-index: 4;

h/js/flash.coffee

@@ -5,7 +5,6 @@ class FlashProvider
     error: []
     success: []
   notice: null
-  timeout: null
 
   constructor: ->
     # Configure notification classes
@@ -15,31 +14,22 @@ class FlashProvider
       SUCCESS: 'success'
 
   _process: ->
-    @timeout = null
     for q, msgs of @queues
       if msgs.length
         msg = msgs.shift()
         unless q then [q, msg] = msg
-        if annotator.isOpen() or not annotator.host
-          notice = Annotator.showNotification msg, q
-          @timeout = this._wait =>
-            this._process()
-        else
-          annotator.host.notify
-            method: "showNotification"
-            params:
-              message: msg
-              type: q
-          @timeout = this._wait =>
-            annotator.host.notify
-              method: "removeNotification"
-            this._process()
+        notice = new Hypothesis.Notification()
+        notice.show(msg, q)
+        notice.element.hide().slideDown()
+        this._wait =>
+          notice.element.slideUp ->
+            notice.element.remove()
         break
 
   _flash: (queue, messages) ->
     if @queues[queue]?
       @queues[queue] = @queues[queue]?.concat messages
-      this._process() unless @timeout?
+      this._process()
 
   $get: ['$timeout', ($timeout) ->
     this._wait = (cb) -> $timeout cb, 5000

h/js/guest.coffee

@@ -265,8 +265,6 @@ class Annotator.Guest extends Annotator
 
       # Are we allowed to create annotations? Return false if we can't.
       unless @canAnnotate
-        #@Annotator.showNotification "You are already editing an annotation!",
-        #  @Annotator.Notification.INFO
         return false
 
       # Do we really want to make this selection?
@@ -446,7 +444,7 @@ class Annotator.Guest extends Annotator
     # We have to clear the selection.
     # (Annotator does this automatically by focusing on
     # one of the input fields in the editor.)
-    @Annotator.util.getGlobal().getSelection().removeAllRanges()
+    Annotator.util.getGlobal().getSelection().removeAllRanges()
 
   onSetTool: (name) ->
     switch name

h/js/host.coffee

@@ -36,16 +36,6 @@ class Annotator.Host extends Annotator.Guest
     # Scan the document
     this.scanDocument "Host initialized"
 
-    # Save this reference to the Annotator class, so it's available
-    # later, even if someone has deleted the original reference
-    @Annotator = Annotator
-
-    # Configure notification classes
-    Annotator.$.extend Annotator.Notification,
-      INFO: 'info'
-      ERROR: 'error'
-      SUCCESS: 'success'
-
   _setupXDM: (options) ->
     channel = super
 
@@ -99,18 +89,6 @@ class Annotator.Host extends Annotator.Guest
       Math.max.apply(Math, all)
     )
 
-    .bind('showNotification', (ctx, n) =>
-      @_pendingNotice = @Annotator.showNotification n.message, n.type
-    )
-
-    .bind('removeNotification', =>
-      # work around Annotator.Notification not removing classes
-      return unless @_pendingNotice?
-      for _, klass of @_pendingNotice.options.classes
-        @_pendingNotice.element.removeClass klass
-      delete @_pendingNotice
-    )
-
   _setupDragEvents: ->
     el = document.createElementNS 'http://www.w3.org/1999/xhtml', 'canvas'
     el.width = el.height = 1

h/js/services.coffee

@@ -631,6 +631,17 @@ class Hypothesis extends Annotator
     return @element.injector().get('drafts').discard()
 
 
+class Hypothesis.Notification extends Annotator.Notification
+  constructor: (options) ->
+    element = $(@options.html).prependTo('body')[0]
+    Annotator.Delegator.call(this, element, options)
+
+  # Retain the fat arrow binding despite skipping the super-class constructor
+  # XXX: replace with _appendElement override when we move to Annotator v2.
+  show: => super
+  hide: => super
+
+
 class AuthenticationProvider
   constructor: ->
     @actions =