From 5f65df9e2db7c16c3c64930331a467e18501e20c Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Sat, 10 Sep 2011 14:04:22 -0700
Subject: [PATCH 1/2] add some more events to alerts and modal and update docs

---
 docs/javascript.html   | 44 ++++++++++++++++++++++++++++++++++++++----
 js/bootstrap-alerts.js |  9 +++++----
 js/bootstrap-modal.js  |  8 +++++---
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index 8a4636bb3d..47cd34414b 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -85,9 +85,9 @@ $('#modal-content').modal({
   closeOnEscape: true
 })</pre>
           <h3>Events</h3>
-          <p>Trigger events to make things happen!</p>
+          <p>Bootstraps modal class makes use of custom events. You can use <code>trigger</code> to make things happen manually or <code>bind</code> to listen for things happening.</p>
           <h4>modal:toggle</h4>
-          <p> Toggle the modal open state.</p>
+          <p>Toggle the modal open state.</p>
           <pre class="prettyprint linenums">$('#modal-content').trigger('modal:toggle')</pre>
           <h4>modal:show</h4>
           <p>Opens the modal.</p>
@@ -95,8 +95,21 @@ $('#modal-content').modal({
           <h4>modal:hide</h4>
           <p>Closes the modal.</p>
           <pre class="prettyprint linenums">$('#modal-content').trigger('modal:hide')</pre>
+          <h4>modal:shown</h4>
+          <p>Fired when the modal has been made visible.</p>
+  <pre class="prettyprint linenums">
+$('#modal-content')
+  .bind('modal:shown', function () {
+    // do something here...
+  })</pre>
+          <h4>modal:hidden</h4>
+          <p>Fired when the modal has become hidden</p>
+<pre class="prettyprint linenums">
+$('#modal-content')
+  .bind('modal:hidden', function () {
+    $(this).remove() // cleanup jQuery plugin data on hide
+  })</pre>
           <h3>Demo</h3>
-
           <!-- sample modal content -->
           <div id="modal-from-dom" class="modal hide fade">
             <div class="modal-header">
@@ -235,6 +248,8 @@ $('#modal-content').modal({
   &lt;div id="settings"&gt;...&lt;/div&gt;
 &lt;/ul&gt;</pre>
           </p>
+          <p><strong>note:</strong> To manually activate a tab just fire a click event on one of the tabs.</p>
+          <pre class="prettyprint linenums">$('.tabs a[href="#messages"]').click()</pre>
           <h3>Demo</h3>
           <script>
             $(function () {
@@ -296,6 +311,14 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
           <h3>Methods</h3>
           <h4>$().twipsy</h4>
           <p>Attaches a twipsy handler to an element collection.</p>
+          <h3>Events</h3>
+          <p>You can manually control twipsies by firing events on the controlling element.</p>
+          <h4>twipsy:show</h4>
+          <p>Reveals an elements twipsy.</p>
+          <pre class="prettyprint linenums">$('#element').trigger('twipsy:show')</pre>
+          <h4>twipsy:hide</h4>
+          <p>Hides an elements twipsy.</p>
+          <pre class="prettyprint linenums">$('#element').trigger('twipsy:hide')</pre>
           <h3>Demo</h3>
           <div class="well">
             <p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title='Some title text'>you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
@@ -344,8 +367,16 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
           <h3>Methods</h3>
           <h4>$().popover</h4>
           <p>Initializes popovers for an element collection.</p>
+          <h3>Events</h3>
+          <p>You can manually control popovers by firing events on the controlling element.</p>
+          <h4>popover:show</h4>
+          <p>Reveals an elements popover.</p>
+          <pre class="prettyprint linenums">$('#element').trigger('popover:show')</pre>
+          <h4>popover:hide</h4>
+          <p>Hides an elements popover.</p>
+          <pre class="prettyprint linenums">$('#element').trigger('popover:hide')</pre>
           <h3>Demo</h3>
-          <a href="#" class="btn danger" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover</a>
+          <a href="#" class="btn danger" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
           <script>
             $(function () {
               $("a[rel=popover]").popover({
@@ -376,6 +407,11 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
           <h3>Methods</h3>
           <h4>$().alert</h4>
           <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
+          <h3>Events</h3>
+          <p>You can manually control alerts by firing events on them.</p>
+          <h4>alert:close</h4>
+          <p>Closes an alert.</p>
+          <pre class="prettyprint linenums">$(".alert-message").trigger('alert:close')</pre>
           <h3>Demo</h3>
           <div class="alert-message warning fade in">
             <a class="close" href="#">&times;</a>
diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js
index e27ac64829..4c9c9394d6 100644
--- a/js/bootstrap-alerts.js
+++ b/js/bootstrap-alerts.js
@@ -34,10 +34,11 @@
   var Alert = function ( content ) {
     var that = this
     this.$element = $(content)
-    this.$element.delegate('.close', 'click', function (e) {
-      e.preventDefault()
-      that.close()
-    })
+      .bind('alert:hide', $.proxy(this.close, this))
+      .delegate('.close', 'click', function (e) {
+        e.preventDefault()
+        that.close()
+      })
   }
 
   Alert.prototype = {
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 54cbad4b11..de972a8aa1 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -66,7 +66,7 @@
         .show()
 
       setTimeout(function () {
-        that.$element.addClass('in')
+        that.$element.addClass('in').trigger('modal:shown')
         that.$backdrop && that.$backdrop.addClass('in')
       }, 1)
 
@@ -86,8 +86,10 @@
       this.$element.removeClass('in')
 
       function removeElement () {
-        that.$element.unbind(transitionEnd)
-        that.$element.detach()
+        that.$element
+          .unbind(transitionEnd)
+          .detach()
+          .trigger('modal:hidden')
       }
 
       $.support.transition && this.$element.hasClass('fade') ?

From a8d447582741486e66a6a073015a9e9bd431af29 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Sat, 10 Sep 2011 14:52:45 -0700
Subject: [PATCH 2/2] adds twipsy js to regular index for positioning

---
 bootstrap-1.3.0.css           |  8 +++++-
 bootstrap-1.3.0.min.css       |  3 ++-
 docs/assets/css/docs.css      |  3 ++-
 docs/assets/js/application.js | 47 ++++++++---------------------------
 docs/index.html               | 23 +++--------------
 lib/patterns.less             |  3 +++
 6 files changed, 28 insertions(+), 59 deletions(-)

diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css
index bf117ca81d..3e58427498 100644
--- a/bootstrap-1.3.0.css
+++ b/bootstrap-1.3.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Sep 10 13:17:50 PDT 2011
+ * Date: Sat Sep 10 14:46:06 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -2030,6 +2030,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-opacity: 0.8;
   opacity: 0.8;
 }
+.twipsy.fade.in {
+  filter: alpha(opacity=80);
+  -khtml-opacity: 0.8;
+  -moz-opacity: 0.8;
+  opacity: 0.8;
+}
 .twipsy.above .twipsy-arrow {
   bottom: 0;
   left: 50%;
diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css
index c4427af4fa..5ef9a22c08 100644
--- a/bootstrap-1.3.0.min.css
+++ b/bootstrap-1.3.0.min.css
@@ -280,7 +280,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";}
 .modal-footer:after{clear:both;}
 .modal-footer .btn{margin-left:5px;}
-.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
+.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
 .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
 .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
 .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 536446c234..187fc7984c 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -46,7 +46,7 @@ section > .row {
   font-weight: bold;
 }
 #masthead {
-  margin-top: 40px;
+  padding-top: 40px;
 }
 #masthead h1,
 #masthead p {
@@ -175,6 +175,7 @@ section > .row {
           box-shadow: 0 1px 2px rgba(0,0,0,.075);
 }
 .diagram {
+  height: 140px;
   padding: 4px;
 }
 .mini-layout {
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index db59c79f9c..86eefa89d1 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -42,42 +42,15 @@ $(document).ready(function(){
   // POSITION STATIC TWIPSIES
   // ========================
 
-  $('.twipsies.well a').each(function () {
-    var type = this.title
-      , $anchor = $(this)
-      , $twipsy = $('.twipsy.' + type)
-
-      , twipsy = {
-          width: $twipsy.width() + 10
-        , height: $twipsy.height() + 10
-        }
-
-      , anchor = {
-          position: $anchor.position()
-        , width: $anchor.width()
-        , height: $anchor.height()
-        }
-
-      , offset = {
-          above: {
-            top: anchor.position.top - twipsy.height
-          , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
-          }
-        , below: {
-            top: anchor.position.top + anchor.height
-          , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
-          }
-        , left: {
-            top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
-          , left: anchor.position.left - twipsy.width - 5
-          }
-        , right: {
-            top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
-          , left: anchor.position.left + anchor.width + 5
-          }
-      }
-
-    $twipsy.css(offset[type])
-  });
+  $(".twipsies a").each(function () {
+     $(this)
+      .twipsy({
+        live: false
+      , placement: $(this).attr('title')
+      , trigger: 'manual'
+      , offset: 2
+      })
+      .trigger('twipsy:show')
+    })
 
 });
diff --git a/docs/index.html b/docs/index.html
index 42c548ea3f..224347ca8d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,6 +22,7 @@
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
     <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-twipsy.js"></script>
     <script src="assets/js/application.js"></script>
     <script src="assets/js/application-scrollspy.js"></script>
 
@@ -1356,22 +1357,6 @@
           <p class="muted" style="margin-bottom: 0">
 Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
           </p>
-          <div class="twipsy below">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">below!</div>
-          </div>
-          <div class="twipsy right">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">right!</div>
-          </div>
-          <div class="twipsy left">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">left!</div>
-          </div>
-          <div class="twipsy above">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">above!</div>
-          </div>
         </div>
       </div>
     </div>
@@ -1437,15 +1422,15 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
            </tr>
            <tr>
              <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
-             <td>This plugin is for adding dropdown to the bootstrap nav.</td>
+             <td>This plugin is for adding dropdowns to the bootstrap topbar or tabbed navigations.</td>
            </tr>
            <tr>
              <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
-             <td>This plugin adds quick, dynamic tab and pill functionality.</td>
+             <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
            </tr>
            <tr>
              <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
-             <td>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!</td>
+             <td>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 local title storage!</td>
            </tr>
            <tr>
              <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
diff --git a/lib/patterns.less b/lib/patterns.less
index 0fb7193c2c..3e0f56209b 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -829,6 +829,9 @@ input[type=submit].btn {
   font-size: 11px;
   z-index: 1000;
   .opacity(80);
+  &.fade.in {
+    .opacity(80);
+  }
   &.above .twipsy-arrow   { #popoverArrow > .above(); }
   &.left .twipsy-arrow    { #popoverArrow > .left(); }
   &.below .twipsy-arrow   { #popoverArrow > .below(); }