Merge pull request #267 from huboard/discorick/beef_up_the_flash_component

Implements Sticky and Progress flashes

Author: dahlbyk

app/assets/stylesheets/components/_flash-message.scss

@@ -8,12 +8,35 @@
 
   .message {
     position: relative;
-    background: $hb-purple-dark;
     color: white;
     font-size: 13px;
     text-align: center;
     padding: 8px;
     margin-bottom: 4px;
     box-shadow: -1px 2px 2px rgba(0,0,0,0.5);
+
+    .ui-icon-x-thin {
+      position: relative;
+      bottom: 5px;
+      float: right;
+      font-size: 8px;
+      margin-left: -16px;
+      margin-right: -8px;
+    }
+  }
+
+  .info {
+    background: $hb-purple-dark;
+  }
+
+  .warning {
+    background: $hb-red;
+  }
+
+  .hb-spinner {
+    position: relative;
+    float: right;
+    right: 28px;
+    bottom: 4px;
   }
 }

ember-app/app/components/flash/hb-flash-message.js

@@ -1,5 +1,45 @@
 import Ember from 'ember';
 
+//##Usage Info:
+//
+//Inject the `flashMessages: Ember.inject.service()` into the
+//target Ember Class
+//
+//##Standard Info Toast:
+//
+//`this.get('flashMessages').info('Some Message');
+//
+//##Sticky Toast:
+//
+//`this.get('flashMessages').add({
+//   message: 'Some Message',
+//   sticky: true,
+//   type: 'info|warning'
+//})`
+//
+//##Progress Toast:
+//
+//(Note: the callback uses the context of the flash-message component)
+//
+//`var progress = {
+//  status: true,
+//  callback: function(){
+//    this.set('message', 'completed!');
+//    this.get('flash')._setTimer('timer', 'destroyMessage', 2000)
+//  }
+//}`
+//
+//`setTimeout(function(){
+//   Ember.set(progress, 'status', false);
+//}, 10000)`
+//
+//`this.get('flashMessages').add({
+//   message: 'Some Message',
+//   sticky: true,
+//   progress: progress,
+//   type: 'info|warning'
+//})`
+
 var HbFlashMessageComponent = Ember.Component.extend({
   classNames: ['hb-flash-message'],
   flashMessages: Ember.inject.service(),
@@ -19,10 +59,11 @@ var HbFlashMessageComponent = Ember.Component.extend({
       } else if(index > max) {
         _self.resetTimer(flash, this.get('timer') * 2);
       }
-    })
+    });
   }.observes('flashMessages.queue.[]', 'currentFlash.[]'),
   addToQueue: function(flash, current){
     var _self = this;
+    flash.id = _.uniqueId('flash');
     flash.on('didDestroyMessage', ()=>{
       _self.scheduleRemove(flash);
     });
@@ -31,10 +72,10 @@ var HbFlashMessageComponent = Ember.Component.extend({
     if(first && !first.isDestroying){
       this.resetTimer(first, this.get('timer') / 2);
     }
-    if(!flash.get('sticky')){
-      this.resetTimer(flash, this.get('timer'));
-    }
-    current.unshiftObject(flash);
+    this.resetTimer(flash, this.get('timer'));
+
+    var index = this.determineIndex(flash);
+    current.insertAt(index, flash);
   },
   scheduleRemove: function(flash){
     var current = this.get('currentFlash');
@@ -51,20 +92,29 @@ var HbFlashMessageComponent = Ember.Component.extend({
   },
   removeFlash: function(flash, callback){
     this.set("removingFlash", true);
-    if(this.get("currentFlash").length === 1){
+    if(this.get("currentFlash").indexOf(flash) === 0){
       return this.$(".message").first().animate({
         'top': '-=38px'
       }, 400, callback);
     }
-    this.$(".message").last().animate({
+    this.$(`.message.${flash.id}`).first().animate({
       'top': '+=8px',
       'opacity': 'hide'
     }, 400, callback);
   },
   resetTimer: function(flash, time){
+    if(flash.get('sticky')){ return; }
     flash._cancelTimer("timer");
     flash._cancelTimer("exitTimer");
     flash._setTimer("timer", "destroyMessage", time);
+  },
+  determineIndex: function(flash){
+    var current = this.get('currentFlash');
+    var sticky = current.find((f)=> {return f.sticky});
+    if(sticky){
+      return current.indexOf(sticky) + 1;
+    }
+    return 0;
   }
 });
 

ember-app/app/components/flash/hb-message.js

@@ -2,6 +2,14 @@ import Ember from 'ember';
 
 var  HbFlashComponent = Ember.Component.extend({
   classNames: ['message'],
+  classNameBindings: ['flash.id'],
+  progress: Ember.computed.alias('flash.progress.status'),
+
+  click: function(){
+    if(this.get('progress')){return;}
+    var flash = this.get('flash');
+    flash._setTimer("timer", "destroyMessage", 0);
+  },
 
   setMessage: function(){
     var message = this.get('flash.message');
@@ -14,7 +22,13 @@ var  HbFlashComponent = Ember.Component.extend({
       'top': '+=38px',
       'margin-bottom': '+=42px'
     }, 400);
-  }
+  },
+  observeProgress: function(){
+    var flash = this.get('flash');
+    if(!flash.progress.status && flash.progress.callback){
+      flash.progress.callback.call(this);
+    }
+  }.observes('progress')
 });
 
 export default HbFlashComponent;

ember-app/app/templates/components/flash/hb-flash-message.hbs

@@ -2,5 +2,6 @@
   {{
     flash/hb-message
     flash=flash
+    class=flash.type
   }}
 {{/each}}

ember-app/app/templates/components/flash/hb-message.hbs

@@ -1 +1,9 @@
-{{truncate message 50}}
+{{#if flash.sticky}}
+  <i class='ui-icon ui-icon-x-thin'></i>
+{{/if}}
+
+<div class='message-copy'>{{truncate message 50}}</div>
+
+{{#if progress}}
+  {{hb-spinner}}
+{{/if}}