add alert close buttons

Assistant/Threads/WebApp.hs

@@ -63,6 +63,7 @@ instance Yesod WebApp where
 			addStylesheet $ StaticR css_bootstrap_responsive_css
 			addScript $ StaticR jquery_full_js
 			addScript $ StaticR js_bootstrap_dropdown_js
+			addScript $ StaticR js_bootstrap_alert_js
 			$(widgetFile "default-layout")
 		hamletToRepHtml $(hamletFile $ hamletTemplate "bootstrap")
 

static/js/bootstrap-alert.js

@@ -0,0 +1,94 @@
+/* ==========================================================
+ * bootstrap-alert.js v2.0.2
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2012 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"
+
+ /* ALERT CLASS DEFINITION
+  * ====================== */
+
+  var dismiss = '[data-dismiss="alert"]'
+    , Alert = function ( el ) {
+        $(el).on('click', dismiss, this.close)
+      }
+
+  Alert.prototype = {
+
+    constructor: Alert
+
+  , close: function ( e ) {
+      var $this = $(this)
+        , selector = $this.attr('data-target')
+        , $parent
+
+      if (!selector) {
+        selector = $this.attr('href')
+        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+      }
+
+      $parent = $(selector)
+      $parent.trigger('close')
+
+      e && e.preventDefault()
+
+      $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
+
+      $parent
+        .trigger('close')
+        .removeClass('in')
+
+      function removeElement() {
+        $parent
+          .trigger('closed')
+          .remove()
+      }
+
+      $.support.transition && $parent.hasClass('fade') ?
+        $parent.on($.support.transition.end, removeElement) :
+        removeElement()
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('alert')
+      if (!data) $this.data('alert', (data = new Alert(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.alert.Constructor = Alert
+
+
+ /* ALERT DATA-API
+  * ============== */
+
+  $(function () {
+    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
+  })
+
+}( window.jQuery );

templates/bootstrap.hamlet

@@ -40,12 +40,15 @@ $doctype 5
         <div class="span3">
           <div class="sidebar-nav">
             <div class="alert alert-info">
+              <a class="close" data-dismiss="alert" href="#">&times;</a>
               <b>This is just a demo.</b> If this were not just a demo,
               I'd not be filling this sidebar with silly alerts.
             <div class="alert alert-success">
+              <a class="close" data-dismiss="alert" href="#">&times;</a>
               <b>Well done!</b>
               You successfully read this important alert message.
             <div class="alert alert-error">
+              <a class="close" data-dismiss="alert" href="#">&times;</a>
               <b>Whoops!</b>
               Unable to connect to blah blah..
         <div class="span9">