[#22][s]: refactor notification to use Bootstrap alerts.

demo/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="../css/bootstrap.css">
 
   <script type="text/javascript" src="../src/deps-min.js"></script>
+  <script type="text/javascript" src="../vendor/bootstrap/1.4.0/bootstrap-alerts.js"></script>
 
   <script type="text/javascript" src="../src/util.js"></script>
   <script type="text/javascript" src="../src/costco.js"></script>

src/util.js

@@ -153,11 +153,26 @@ var util = function() {
 
   function notify(message, options) {
     if (!options) var options = {};
-    $('.data-explorer .notification-container').show();
+    var tmplData = _.extend({
-    $('.data-explorer .notification-message').text(message);
+      msg: message,
-    if (!options.loader) $('.data-explorer .notification-loader').hide();
+      category: 'warning'
-    if (options.loader) $('.data-explorer .notification-loader').show();
+      },
-    if (!options.persist) setTimeout(function() { $('.data-explorer .notification-container').hide() }, 3000);
+      options);
+    var _template = ' \
+      <div class="alert-message {{category}} fade in" data-alert="alert"><a class="close" href="#">×</a> \
+        <p>{{msg}} \
+          {{#loader}} \
+          <img src="images/small-spinner.gif" class="notification-loader"> \
+          {{/loader}} \
+        </p> \
+      </div>';
+    var _templated = $.mustache(_template, tmplData); 
+    _templated = $(_templated).appendTo($('.data-explorer .alert-messages'));
+    if (!options.persist) {
+      setTimeout(function() {
+        $(_templated).remove();
+      }, 3000);
+    }
   }
   
   function formatMetadata(data) {

src/view.js

@@ -46,6 +46,8 @@ function parseQueryString(q) {
 my.DataExplorer = Backbone.View.extend({
   template: ' \
   <div class="data-explorer"> \
+    <div class="alert-messages"></div> \
+    \
     <div class="header"> \
       <ul class="navigation"> \
         <li class="active"><a href="#grid" class="btn">Grid</a> \
@@ -64,11 +66,6 @@ my.DataExplorer = Backbone.View.extend({
         <div class="dialog-content dialog-border"></div> \
       </div> \
     </div> \
-    <div class="notification-container"> \
-      <div class="notification"> \
-        <img src="images/small-spinner.gif" class="notification-loader"><span class="notification-message">Loading...</span> \
-      </div> \
-    </div> \
   </div> \
   ',
 
@@ -402,12 +399,15 @@ my.DataTableRow = Backbone.View.extend({
     var newData = {};
     newData[header] = newValue;
     this.model.set(newData);
-    util.notify("Updating row...", {persist: true, loader: true});
+    util.notify("Updating row...", {loader: true});
     this.model.save().then(function(response) {
-        util.notify("Row updated successfully");
+        util.notify("Row updated successfully", {category: 'success'});
       })
       .fail(function() {
-        alert('error saving');
+        util.notify('Error saving row', {
+          category: 'error',
+          persist: true
+        });
       });
   },
 

vendor/bootstrap/1.4.0/bootstrap-alerts.js

@@ -0,0 +1,113 @@
+/* ==========================================================
+ * bootstrap-alerts.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ){
+
+  "use strict"
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+   var transitionEnd
+
+   $(document).ready(function () {
+
+     $.support.transition = (function () {
+       var thisBody = document.body || document.documentElement
+         , thisStyle = thisBody.style
+         , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+       return support
+     })()
+
+     // set CSS transition event type
+     if ( $.support.transition ) {
+       transitionEnd = "TransitionEnd"
+       if ( $.browser.webkit ) {
+        transitionEnd = "webkitTransitionEnd"
+       } else if ( $.browser.mozilla ) {
+        transitionEnd = "transitionend"
+       } else if ( $.browser.opera ) {
+        transitionEnd = "oTransitionEnd"
+       }
+     }
+
+   })
+
+ /* ALERT CLASS DEFINITION
+  * ====================== */
+
+  var Alert = function ( content, options ) {
+    this.settings = $.extend({}, $.fn.alert.defaults, options)
+    this.$element = $(content)
+      .delegate(this.settings.selector, 'click', this.close)
+  }
+
+  Alert.prototype = {
+
+    close: function (e) {
+      var $element = $(this).parent('.alert-message')
+
+      e && e.preventDefault()
+      $element.removeClass('in')
+
+      function removeElement () {
+        $element.remove()
+      }
+
+      $.support.transition && $element.hasClass('fade') ?
+        $element.bind(transitionEnd, removeElement) :
+        removeElement()
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( options ) {
+
+    if ( options === true ) {
+      return this.data('alert')
+    }
+
+    return this.each(function () {
+      var $this = $(this)
+
+      if ( typeof options == 'string' ) {
+        return $this.data('alert')[options]()
+      }
+
+      $(this).data('alert', new Alert( this, options ))
+
+    })
+  }
+
+  $.fn.alert.defaults = {
+    selector: '.close'
+  }
+
+  $(document).ready(function () {
+    new Alert($('body'), {
+      selector: '.alert-message[data-alert] .close'
+    })
+  })
+
+}( window.jQuery || window.ender );