Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip

assets/js/application.js

@@ -15,13 +15,11 @@
       offset: navHeight
     })
 
-    // Disable certain links in docs
+    $('[href^=#]').click(function (e) {
-    $('.bs-docs-container [href=#]').click(function (e) {
       e.preventDefault()
     })
 
-    $(document.body).on('click', '[href^=#]', function (e) {
+    $(document.body).on('click', '.bs-sidenav [href^=#]', function (e) {
-
       var $target = $(this.getAttribute('href'))
 
       e.preventDefault() // prevent browser scroll

dist/css/bootstrap.css

@@ -2016,6 +2016,14 @@ input[type="button"].btn-block {
 }
 
 .collapse {
+  display: none;
+}
+
+.collapse.in {
+  display: block;
+}
+
+.collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
@@ -2023,10 +2031,6 @@ input[type="button"].btn-block {
           transition: height 0.35s ease;
 }
 
-.collapse.in {
-  height: auto;
-}
-
 .caret {
   display: inline-block;
   width: 0;
@@ -2939,6 +2943,7 @@ button.close {
     display: none;
   }
   .nav-collapse.collapse {
+    display: block !important;
     height: auto !important;
     overflow: visible !important;
   }

dist/js/bootstrap.js

@@ -53,6 +53,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     $(this).one('webkitTransitionEnd', function () { called = true })
     var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') }
     setTimeout(callback, duration)
+    return this
   }
 
   $(function () {
@@ -532,8 +533,6 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    var scroll    = $.camelCase(['scroll', dimension].join('-'))
     var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
 
     if (actives && actives.length) {
@@ -543,10 +542,32 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
       hasData || actives.data('bs.collapse', null)
     }
 
-    this.$element[dimension](0)
+    var dimension = this.dimension()
-    this.transition('addClass', 'shown.bs.collapse')
 
-    if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
+    this.$element
+      .removeClass('collapse')
+      .addClass('collapsing')
+      [dimension](0)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('in')
+        [dimension]('auto')
+      this.transitioning = 0
+      this.$element.trigger('shown.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
+
+    this.$element
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+      [dimension](this.$element[0][scrollSize])
   }
 
   Collapse.prototype.hide = function () {
@@ -556,42 +577,33 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    this.reset(this.$element[dimension]())
-    this.transition('removeClass', 'hidden.bs.collapse')
-    this.$element[dimension](0)
-  }
-
-  Collapse.prototype.reset = function (size) {
     var dimension = this.dimension()
 
     this.$element
+      [dimension](this.$element[dimension]())
+      [0].offsetHeight
+
+    this.$element
+      .addClass('collapsing')
       .removeClass('collapse')
-      [dimension](size || 'auto')
+      .removeClass('in')
-      [0].offsetWidth
-
-    this.$element[size != null ? 'addClass' : 'removeClass']('collapse')
-
-    return this
-  }
-
-  Collapse.prototype.transition = function (method, completeEvent) {
-    var that     = this
-    var complete = function () {
-      if (completeEvent == 'shown.bs.collapse') that.reset()
-      that.transitioning = 0
-      that.$element.trigger(completeEvent)
-    }
 
     this.transitioning = 1
 
-    this.$element[method]('in')
+    var complete = function () {
-
+      this.transitioning = 0
-    $.support.transition && this.$element.hasClass('collapse') ?
       this.$element
-        .one($.support.transition.end, complete)
+        .trigger('hidden.bs.collapse')
-        .emulateTransitionEnd(350) :
+        .removeClass('collapsing')
-      complete()
+        .addClass('collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    this.$element
+      [dimension](0)
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
   }
 
   Collapse.prototype.toggle = function () {
@@ -1442,6 +1454,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.init('popover', element, options)
   }
 
+  if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
+
   Popover.DEFAULTS = $.extend({} , $.fn.tooltip.Constructor.DEFAULTS, {
     placement: 'right'
   , trigger: 'click'

javascript.html

@@ -856,10 +856,41 @@ $('#example').tooltip(options)
     <h4>.tooltip('destroy')</h4>
     <p>Hides and destroys an element's tooltip.</p>
     {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
+
+    <h3>Events</h3>
+    <table class="table table-bordered table-striped">
+      <thead>
+       <tr>
+         <th style="width: 150px;">Event Type</th>
+         <th>Description</th>
+       </tr>
+      </thead>
+      <tbody>
+       <tr>
+         <td>show</td>
+         <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+       </tr>
+       <tr>
+         <td>shown</td>
+         <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
+       </tr>
+       <tr>
+         <td>hide</td>
+         <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+       </tr>
+       <tr>
+         <td>hidden</td>
+         <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+       </tr>
+      </tbody>
+    </table>
+{% highlight js %}
+$('#myTooltip').on('hidden.bs.tooltip', function () {
+// do something…
+})
+{% endhighlight %}
   </div>
 
-
-
   <!-- Popovers
   ================================================== -->
   <div class="bs-docs-section">
@@ -1046,10 +1077,40 @@ $('#example').tooltip(options)
     <h4>.popover('destroy')</h4>
     <p>Hides and destroys an element's popover.</p>
     {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
+    <h3>Events</h3>
+    <table class="table table-bordered table-striped">
+      <thead>
+       <tr>
+         <th style="width: 150px;">Event Type</th>
+         <th>Description</th>
+       </tr>
+      </thead>
+      <tbody>
+       <tr>
+         <td>show</td>
+         <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+       </tr>
+       <tr>
+         <td>shown</td>
+         <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
+       </tr>
+       <tr>
+         <td>hide</td>
+         <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+       </tr>
+       <tr>
+         <td>hidden</td>
+         <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+       </tr>
+      </tbody>
+    </table>
+{% highlight js %}
+$('#myPopover').on('hidden.bs.popover', function () {
+  // do something…
+})
+{% endhighlight %}
   </div>
 
-
-
   <!-- Alert
   ================================================== -->
   <div class="bs-docs-section">

js/collapse.js

@@ -48,8 +48,6 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    var scroll    = $.camelCase(['scroll', dimension].join('-'))
     var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
 
     if (actives && actives.length) {
@@ -59,10 +57,32 @@
       hasData || actives.data('bs.collapse', null)
     }
 
-    this.$element[dimension](0)
+    var dimension = this.dimension()
-    this.transition('addClass', 'shown.bs.collapse')
 
-    if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
+    this.$element
+      .removeClass('collapse')
+      .addClass('collapsing')
+      [dimension](0)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('in')
+        [dimension]('auto')
+      this.transitioning = 0
+      this.$element.trigger('shown.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
+
+    this.$element
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+      [dimension](this.$element[0][scrollSize])
   }
 
   Collapse.prototype.hide = function () {
@@ -72,42 +92,33 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    this.reset(this.$element[dimension]())
-    this.transition('removeClass', 'hidden.bs.collapse')
-    this.$element[dimension](0)
-  }
-
-  Collapse.prototype.reset = function (size) {
     var dimension = this.dimension()
 
     this.$element
+      [dimension](this.$element[dimension]())
+      [0].offsetHeight
+
+    this.$element
+      .addClass('collapsing')
       .removeClass('collapse')
-      [dimension](size || 'auto')
+      .removeClass('in')
-      [0].offsetWidth
-
-    this.$element[size != null ? 'addClass' : 'removeClass']('collapse')
-
-    return this
-  }
-
-  Collapse.prototype.transition = function (method, completeEvent) {
-    var that     = this
-    var complete = function () {
-      if (completeEvent == 'shown.bs.collapse') that.reset()
-      that.transitioning = 0
-      that.$element.trigger(completeEvent)
-    }
 
     this.transitioning = 1
 
-    this.$element[method]('in')
+    var complete = function () {
-
+      this.transitioning = 0
-    $.support.transition && this.$element.hasClass('collapse') ?
       this.$element
-        .one($.support.transition.end, complete)
+        .trigger('hidden.bs.collapse')
-        .emulateTransitionEnd(350) :
+        .removeClass('collapsing')
-      complete()
+        .addClass('collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    this.$element
+      [dimension](0)
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
   }
 
   Collapse.prototype.toggle = function () {

js/popover.js

@@ -27,6 +27,8 @@
     this.init('popover', element, options)
   }
 
+  if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
+
   Popover.DEFAULTS = $.extend({} , $.fn.tooltip.Constructor.DEFAULTS, {
     placement: 'right'
   , trigger: 'click'

js/transition.js

@@ -46,6 +46,7 @@
     $(this).one('webkitTransitionEnd', function () { called = true })
     var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') }
     setTimeout(callback, duration)
+    return this
   }
 
   $(function () {

less/component-animations.less

@@ -16,12 +16,14 @@
 }
 
 .collapse {
+  display: none;
+  &.in {
+    display: block;
+  }
+}
+.collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
   .transition(height .35s ease);
-
-  &.in {
-    height: auto;
-  }
 }

less/navbar.less

@@ -330,6 +330,7 @@
     display: none;
   }
   .nav-collapse.collapse {
+    display: block !important;
     height: auto !important;
     overflow: visible !important;
   }