add boostrap-twipsy and bootstrap-alerts

examples/assets/js/bootstrap-alerts.js

@@ -0,0 +1,73 @@
+(function( $ ){
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+  $.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
+  })()
+
+
+ /* SHARED VARS
+  * =========== */
+
+   var transitionEnd
+
+  // 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 ) {
+    var that = this
+    this.$element = $(content)
+    this.$element.delegate('.close', 'click', function (e) {
+      e.preventDefault()
+      that.close()
+    })
+  }
+
+  Alert.prototype = {
+
+    close: function () {
+      var that = this
+
+      function removeElement () {
+        that.$element.remove()
+        that.$element = null
+      }
+
+      $.support.transition ?
+        this.$element.bind(transitionEnd, removeElement) :
+        removeElement()
+
+      this.$element.removeClass('show')
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( options ) {
+    return this.each(function () {
+      new Alert(this)
+    })
+  }
+
+})( jQuery || ender )

examples/assets/js/bootstrap-modal.js

@@ -34,11 +34,7 @@
   * ============================= */
 
   var Modal = function ( options ) {
-    this.settings = {
-      backdrop: false
-    , closeOnEscape: false
-    , content: false
-    }
+    this.settings = $.extend({}, $.fn.modal.defaults)
 
     if ( typeof options == 'string' ) {
       this.settings.content = options
@@ -59,8 +55,8 @@
       var that = this
       this.isOpen = true
 
-      _private.escape.call(this)
-      _private.backdrop.call(this)
+      _.escape.call(this)
+      _.backdrop.call(this)
 
       this.$element = $(this.settings.content)
         .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() })
@@ -68,8 +64,8 @@
         .show()
 
       setTimeout(function () {
-        that.$element.addClass('open')
-        that.$backdrop && that.$backdrop.addClass('open')
+        that.$element.addClass('show')
+        that.$backdrop && that.$backdrop.addClass('show')
       }, 1)
 
       return this
@@ -80,10 +76,10 @@
 
       this.isOpen = false
 
-      _private.escape.call(this)
-      _private.backdrop.call(this)
+      _.escape.call(this)
+      _.backdrop.call(this)
 
-      this.$element.removeClass('open')
+      this.$element.removeClass('show')
 
       function removeElement () {
         that.$element.remove()
@@ -103,7 +99,7 @@
  /* MODAL PRIVATE METHODS
   * ===================== */
 
-  var _private = {
+  var _ = {
 
     backdrop: function () {
       var that = this
@@ -112,7 +108,7 @@
           .click(function () { that.close() })
           .appendTo(document.body)
       } else if ( !this.isOpen && this.$backdrop ) {
-        this.$backdrop.removeClass('open')
+        this.$backdrop.removeClass('show')
 
         function removeElement() {
           that.$backdrop.remove()
@@ -144,14 +140,16 @@
  /* MODAL PLUGIN DEFINITION
   * ======================= */
 
-  $.modal = function ( options ) {
-    return new Modal(options)
-  }
-
   $.fn.modal = function ( options ) {
     options = options || {}
     options.content = this
     return new Modal(options)
   }
 
+  $.fn.modal.defaults = {
+    backdrop: false
+  , closeOnEscape: false
+  , content: false
+  }
+
 })( jQuery || ender )

examples/assets/js/bootstrap-twipsy.js

@@ -0,0 +1,272 @@
+/* Based on the original tipsy by Jason Frame */
+
+(function( $ ) {
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+  $.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
+  })()
+
+
+ /* SHARED VARS
+  * =========== */
+
+  var transitionEnd
+
+  // 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"
+    }
+  }
+
+
+ /* TWIPSY PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Twipsy = function ( element, options ) {
+    this.$element = $(element)
+    this.options = options
+    this.enabled = true
+    this.fixTitle()
+  }
+
+  Twipsy.prototype = {
+
+    show: function() {
+      var title = this.getTitle()
+        , pos
+        , actualWidth
+        , actualHeight
+        , placement
+        , $tip
+        , tp
+
+      if (title && this.enabled) {
+        $tip = this.tip()
+        $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](title)
+        $tip[0].className = 'twipsy'
+        $tip
+          .remove()
+          .css({ top: 0, left: 0, display: 'block' })
+          .prependTo(document.body)
+
+        pos = $.extend({}, this.$element.offset(), {
+          width: this.$element[0].offsetWidth
+        , height: this.$element[0].offsetHeight
+        })
+
+        actualWidth = $tip[0].offsetWidth
+        actualHeight = $tip[0].offsetHeight
+        placement = _.maybeCall(this.options.placement, this.$element[0])
+
+        switch (placement) {
+          case 'below':
+            tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'above':
+            tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'left':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
+            break
+          case 'right':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
+            break
+        }
+
+        $tip
+          .css(tp)
+          .addClass(placement)
+          .addClass('show')
+      }
+    }
+
+  , hide: function() {
+      var that = this
+        , $tip = this.tip()
+
+      $tip.removeClass('show')
+
+      function removeElement () {
+        $tip.remove()
+      }
+
+      $.support.transition ?
+        $tip.bind(transitionEnd, removeElement) :
+        removeElement()
+    }
+
+  , fixTitle: function() {
+      var $e = this.$element
+      if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+        $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+      }
+    }
+
+  , getTitle: function() {
+      var title
+        , $e = this.$element
+        , o = this.options
+
+        this.fixTitle()
+
+        if (typeof o.title == 'string') {
+          title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
+        } else if (typeof o.title == 'function') {
+          title = o.title.call($e[0])
+        }
+
+        title = ('' + title).replace(/(^\s*|\s*$)/, "")
+
+        return title || o.fallback
+    }
+
+  , tip: function() {
+      if (!this.$tip) {
+        this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
+      }
+      return this.$tip
+    }
+
+  , validate: function() {
+      if (!this.$element[0].parentNode) {
+        this.hide()
+        this.$element = null
+        this.options = null
+      }
+    }
+
+  , enable: function() {
+      this.enabled = true
+    }
+
+  , disable: function() {
+      this.enabled = false
+    }
+
+  , toggleEnabled: function() {
+      this.enabled = !this.enabled
+    }
+
+  }
+
+
+ /* TWIPSY PRIVATE METHODS
+  * ====================== */
+
+   var _ = {
+
+     maybeCall: function ( thing, ctx ) {
+       return (typeof thing == 'function') ? (thing.call(ctx)) : thing
+     }
+
+   }
+
+
+ /* MODAL PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.twipsy = function(options) {
+
+    var twipsy
+      , binder
+      , eventIn
+      , eventOut
+
+    if (options === true) {
+      return this.data('twipsy')
+    } else if (typeof options == 'string') {
+      twipsy = this.data('twipsy')
+      if (twipsy) {
+        twipsy[options]()
+      }
+      return this
+    }
+
+    options = $.extend({}, $.fn.twipsy.defaults, options)
+
+    function get(ele) {
+      var twipsy = $.data(ele, 'twipsy')
+
+      if (!twipsy) {
+        twipsy = new Twipsy(ele, $.fn.twipsy.elementOptions(ele, options))
+        $.data(ele, 'twipsy', twipsy)
+      }
+
+      return twipsy
+    }
+
+    function enter() {
+      var twipsy = get(this)
+      twipsy.hoverState = 'in'
+
+      if (options.delayIn == 0) {
+        twipsy.show()
+      } else {
+        twipsy.fixTitle()
+        setTimeout(function() {
+          if (twipsy.hoverState == 'in') {
+            twipsy.show()
+          }
+        }, options.delayIn)
+      }
+    }
+
+    function leave() {
+      var twipsy = get(this)
+      twipsy.hoverState = 'out'
+      if (options.delayOut == 0) {
+        twipsy.hide()
+      } else {
+        setTimeout(function() {
+          if (twipsy.hoverState == 'out') {
+            twipsy.hide()
+          }
+        }, options.delayOut)
+      }
+    }
+
+    if (!options.live) {
+      this.each(function() {
+        get(this)
+      })
+    }
+
+    if (options.trigger != 'manual') {
+      binder   = options.live ? 'live' : 'bind'
+      eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus'
+      eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
+      this[binder](eventIn, enter)[binder](eventOut, leave)
+    }
+
+    return this
+  }
+
+  $.fn.twipsy.defaults = {
+    delayIn: 0
+  , delayOut: 0
+  , fallback: ''
+  , placement: 'above'
+  , html: false
+  , live: false
+  , offset: 0
+  , title: 'title'
+  , trigger: 'hover'
+  }
+
+  $.fn.twipsy.elementOptions = function(ele, options) {
+    return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
+  }
+
+})( jQuery || ender )

examples/bootstrap-js.html

@@ -13,9 +13,9 @@
 
     <!-- Le javascript -->
     <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-    <script src="assets/js/bootstrap-modals.js"></script>
-    <!-- <script src="assets/js/bootstrap-alerts.js"></script> -->
-    <!-- <script src="assets/js/bootstrap-tips.js"></script> -->
+    <script src="assets/js/bootstrap-modal.js"></script>
+    <script src="assets/js/bootstrap-alerts.js"></script>
+    <script src="assets/js/bootstrap-twipsy.js"></script>
     <!-- <script src="assets/js/bootstrap-popovers.js"></script> -->
 
     <!-- Le styles -->
@@ -28,7 +28,7 @@
     <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
   </head>
 
-  <body style="padding-top: 60px">
+  <body style="padding: 60px 0">
 
     <!-- Topbar
     ================================================== -->
@@ -37,8 +37,10 @@
         <div class="container">
           <h3><a href="#">Bootstrap JS</a></h3>
           <ul>
-            <li class="active"><a href="#modal">Getting Started</a></li>
+            <li class="active"><a href="#javascript">Getting Started</a></li>
             <li><a href="#modal">Modals</a></li>
+            <li><a href="#alerts">Alerts</a></li>
+            <li><a href="#twipsy">Twipsy</a></li>
           </ul>
         </div>
       </div>
@@ -71,17 +73,18 @@
     <!-- Modal
     ================================================== -->
 
-    <section id="javascript">
+    <section id="modal">
       <div class="page-header">
-        <h1>Modals <small>bootstrap-modals.js</small></h1>
+        <h1>Modals <small>bootstrap-modal.js</small></h1>
       </div>
       <div class="row">
         <div class="span4 columns">
           <p>Our Modal plugin is <strong>super</strong> slim! We took special care to only include the bare functionality that we require at twitter, however we look forward to seeing all the cool stuff you do with it!</p>
+          <a href="assets/js/bootstrap-modal.js" class="btn primary">Download</a>
         </div>
         <div class="span12 columns">
           <h2>Using bootstrap-modal</h2>
-          <pre class="prettyprint linenums">$('#modal-content').modal();</pre>
+          <pre class="prettyprint linenums">$('#modal-content').modal(options)</pre>
           <h3>Options</h3>
           <ul>
             <li><strong>backdrop</strong> (<code>boolean</code>) - if true, it will include a modal-backdrop element.</li>
@@ -89,23 +92,12 @@
             <li><strong>content</strong> (<code>string</code>) - alternative way of supplying modal class with HTML content.</li>
           </ul>
           <h3>Methods</h3>
-          <h4>$.modal</h4>
-          <p>Returns an instance of the modal class. It accepts either a <code>string</code> or an options <code>object</code>.</p>
-<pre class="prettyprint linenums">
-// Accepts HTML string
-$.modal(modalHTML)
-
-// Accepts Options
-$.modal({
-  backdrop: true
-, content: modalHTML
-})</pre>
           <h4>$().modal</h4>
           <p>Returns an instance of the modal class. Accepts an optional options <code>object</code>.</p>
 <pre class="prettyprint linenums">
 $('#modal-content').modal({
   closeOnEscape: true
-});</pre>
+})</pre>
           <h4>.toggle</h4>
           <p>Returns an instance of the modal class. Toggle the modal open state.</p>
           <pre class="prettyprint linenums">$('#modal-content').modal().toggle()</pre>
@@ -118,7 +110,7 @@ $('#modal-content').modal({
           <h3>Demo</h3>
 
           <!-- sample modal content -->
-          <div id="modal-from-dom" style="display: none" class="modal">
+          <div id="modal-from-dom" class="modal hide">
             <div class="modal-header">
               <h3>Modal Heading</h3>
               <a href="#" class="close">&times;</a>
@@ -132,50 +124,17 @@ $('#modal-content').modal({
             </div>
           </div>
 
-          <button id="modal-basic" class="btn">Basic Modal</button>
-          <button id="modal-options" class="btn">Modal Options</button>
-          <button id="modal-from-element" class="btn">Modal From Element</button>
+          <button id="modal-from-element" class="btn">Launch Modal</button>
 
           <script>
             $(function () {
-
-              var modalHTML =
-                  '<div class="modal">'
-                + '<div class="modal-header">'
-                + '<h3>Modal Heading</h3>'
-                + '<a href="#" class="close">&times;</a>'
-                + '</div>'
-                + '<div class="modal-body">'
-                + '<p>One fine body…</p>'
-                + '</div>'
-                + '<div class="modal-footer">'
-                + '<a href="#" class="btn primary">Primary</a>'
-                + '<a href="#" class="btn secondary">Secondary</a>'
-                + '</div>'
-                + '</div>'
-
-              var simpleModal = $.modal(modalHTML)
-                , optionModal = $.modal({
-                    backdrop: true
-                  , content: modalHTML
-                  , closeOnEscape: true
-                })
-                , domModal = $("#modal-from-dom").modal({
-                    backdrop: true
-                  , content: modalHTML
-                  , closeOnEscape: true
-                })
-
-              $('#modal-basic').click(function () {
-                simpleModal.toggle()
-              });
-
-              $('#modal-options').click(function () {
-                optionModal.toggle();
-              });
+              var domModal = $("#modal-from-dom").modal({
+                backdrop: true
+              , closeOnEscape: true
+              })
 
               $('#modal-from-element').click(function () {
-                domModal.toggle();
+                domModal.toggle()
               })
 
             })
@@ -184,6 +143,110 @@ $('#modal-content').modal({
         </div>
       </div>
     </section>
+
+    <!-- Alerts
+    ================================================== -->
+
+    <section id="alerts">
+      <div class="page-header">
+        <h1>Alerts <small>bootstrap-alerts.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
+          <a href="assets/js/bootstrap-alerts.js" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using bootstrap-alert</h2>
+          <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
+          <h3>Methods</h3>
+          <h4>$().alert</h4>
+          <p>Wraps all alerts with close functionality.</p>
+          <h3>Demo</h3>
+          <div class="alert-message show warning">
+            <a class="close" href="#">&times;</a>
+            <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+          </div>
+          <div class="alert-message show block-message error">
+            <a class="close" href="#">&times;</a>
+            <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+            <div class="alert-actions">
+              <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+            </div>
+          </div>
+          <script>
+            $(function () {
+              $(".alert-message").alert()
+            })
+          </script>
+        </div>
+      </div>
+    </section>
+
+    <!-- Tips
+    ================================================== -->
+
+    <section id="twipsy">
+      <div class="page-header">
+        <h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p>
+          <a href="assets/js/bootstrap-twipsy.js" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using bootstrap-twipsy.js</h2>
+          <pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
+          <h3>Options</h3>
+          <ul>
+            <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
+            <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
+            <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
+            <li><strong>placement</strong> (<code>string</code>) - position of tooltip - above | below | left | right.</li>
+            <li><strong>html</strong> (<code>boolean</code>) - is tooltip content HTML?</li>
+            <li><strong>live</strong> (<code>boolean</code>) - use live event support?</li>
+            <li><strong>offset</strong> (<code>number</code>) - pixel offset of tooltip from element.</li>
+            <li><strong>title</strong> (<code>string|function</code>) - attribute/callback containing tooltip text.</li>
+            <li><strong>trigger</strong> (<code>string</code>) - how tooltip is triggered - hover | focus | manual.</li>
+          </ul>
+          <h3>Methods</h3>
+          <h4>$().twipsy</h4>
+          <p>Attaches a twipsy handler to an element collection.</p>
+          <h3>Demo</h3>
+          <p>Mustache next level keffiyeh you <a href="#" rel='twipsy' title='Some title text'>probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown you probably haven't heard of them before they sold out. Farm-to-table <a href="#" rel='twipsy' title='i <3 cardigans'>cardigans</a> seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, <a href="#" rel='twipsy' title='Another twipsy'>williamsburg</a> banh mi lomo thundercats. DIY tofu biodiesel marfa, four loko mcsweeney's master cleanse vegan chambray. Etsy fap ethical, wes anderson farm-to-table +1 whatever bicycle rights mixtape portland readymade letterpress artisan. Four loko artisan whatever keytar, scenester farm-to-table <a href="#" rel='twipsy' title='The last tip!'>PBR</a> banksy Austin freegan cred raw denim single-origin coffee viral.
+          </p>
+          <script>
+            $(function () {
+              $("a[rel=twipsy]").twipsy({
+                live: true
+              })
+            })
+          </script>
+        </div>
+      </div>
+    </section>
+
+
+    <!-- Section
+    ================================================== -->
+
+    <!--
+    <section id="section">
+      <div class="page-header">
+        <h1></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p></p>
+        </div>
+        <div class="span12 columns">
+          <h3></h3>
+          <p></p>
+        </div>
+      </div>
+    </section>
+    -->
     </div>
   </body>
 </html>