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

docs/assets/js/application-scrollspy.js

@@ -1,39 +0,0 @@
-// scroll spy logic
-// ================
-$(function () {
-
-  var activeTarget,
-     position = {},
-     $window = $(window),
-     nav = $('body > .topbar li a'),
-     targets = nav.map(function () {
-       return $(this).attr('href');
-     }),
-     offsets = $.map(targets, function (id) {
-       return $(id).offset().top;
-     });
-
-  function setButton(id) {
-   nav.parent("li").removeClass('active');
-   $(nav[$.inArray(id, targets)]).parent("li").addClass('active');
-  }
-
-  function processScroll(e) {
-   var scrollTop = $window.scrollTop() + 10, i;
-   for (i = offsets.length; i--;) {
-     if (activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
-       activeTarget = targets[i];
-       setButton(activeTarget);
-     }
-   }
-  }
-
-  nav.click(function () {
-   processScroll();
-  });
-
-  processScroll();
-
-  $window.scroll(processScroll);
-
-})

docs/assets/js/application.js

@@ -6,6 +6,12 @@ $(document).ready(function(){
   $('body').dropdown() // catch any dropdowns on the page
 
 
+  // Scrollspy
+  // =========
+
+  $('body > .topbar').scrollSpy()
+
+
   // table sort example
   // ==================
 

docs/index.html

@@ -23,8 +23,8 @@
     <script>$(function () { prettyPrint() })</script>
     <script src="../js/bootstrap-dropdown.js"></script>
     <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="assets/js/application.js"></script>
-    <script src="assets/js/application-scrollspy.js"></script>
 
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="images/favicon.ico">
@@ -1591,6 +1591,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
              <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
              <td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
            </tr>
+           <tr>
+             <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
+             <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
+           </tr>
            <tr>
              <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
              <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
@@ -1786,4 +1790,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
     </footer>
 
   </body>
-</html>
+</html>

docs/javascript.html

@@ -15,12 +15,12 @@
     <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
-    <script src="assets/js/application-scrollspy.js"></script>
     <script src="../js/bootstrap-modal.js"></script>
     <script src="../js/bootstrap-alerts.js"></script>
     <script src="../js/bootstrap-twipsy.js"></script>
     <script src="../js/bootstrap-popover.js"></script>
     <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="../js/bootstrap-tabs.js"></script>
 
     <!-- Le styles -->
@@ -47,6 +47,7 @@
             <li><a href="#overview">Overview</a></li>
             <li><a href="#modal">Modals</a></li>
             <li><a href="#dropdown">Dropdown</a></li>
+            <li><a href="#scrollspy">ScrollSpy</a></li>
             <li><a href="#tabs">Tabs</a></li>
             <li><a href="#twipsy">Twipsy</a></li>
             <li><a href="#popover">Popover</a></li>
@@ -167,7 +168,7 @@ $('#modal-content')
 
     <section id="dropdown">
       <div class="page-header">
-        <h1>Drop Down <small>bootstrap-dropdown.js</small></h1>
+        <h1>Dropdown <small>bootstrap-dropdown.js</small></h1>
       </div>
       <div class="row">
         <div class="span4 columns">
@@ -228,6 +229,43 @@ $('#modal-content')
       </div>
     </section>
 
+   <!-- ScrollSpy
+    ================================================== -->
+
+    <section id="scrollspy">
+      <div class="page-header">
+        <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p>
+          <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using boostrap-scrollspy.js</h2>
+          <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
+          <h3>Method</h3>
+          <h4>$().scrollspy</h4>
+          <p>
+          Auto activates navigation buttons by users scroll position.
+          </p>
+          <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre>
+          <p>
+            <strong>Note:</strong> Topbar anchor tags must have resolvable id targets like <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code>.
+          </p>
+          <h3>Events</h3>
+          <h4>scrollspy:refresh</h4>
+          <p>The scrollspy caches nav buttons and anchor locations. If you need to update the cache (because you have dynamic content) just trigger the <code>scrollspy:refresh</code> event.</p>
+          <pre class="prettyprint linenums">$('body > .topbar').trigger('scrollspy:refresh')</pre>
+          <h3>Demo</h3>
+          <p>Peep the topbar navigation homie!</p>
+          <script>$(function () {
+            $('body > .topbar').scrollSpy()
+          })</script>
+        </div>
+      </div>
+    </section>
+
     <!-- Tabs
     ================================================== -->
 

js/bootstrap-alerts.js

@@ -1,3 +1,23 @@
+/* ==========================================================
+ * bootstrap-alerts.js
+ * 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( $ ){
 
   /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)

js/bootstrap-dropdown.js

@@ -1,7 +1,24 @@
-(function( $ ){
+/* ============================================================
+ * bootstrap-dropdown.js
+ * http://twitter.github.com/bootstrap/javascript.html#dropdown
+ * ============================================================
+ * 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.
+ * ============================================================ */
 
- /* DROPDOWN PLUGIN DEFINITION
-  * ========================== */
+
+(function( $ ){
 
   var selector = 'a.menu, .dropdown-toggle'
 
@@ -13,11 +30,17 @@
     $('body').bind("click", clearMenus)
   })
 
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
   $.fn.dropdown = function ( options ) {
     return this.each(function () {
       $(this).delegate(selector, 'click', function (e) {
+        var li = $(this).parent('li')
+          , isActive = li.hasClass('open')
+
         clearMenus()
-        $(this).parent('li').toggleClass('open')
+        !isActive && li.toggleClass('open')
         return false
       })
     })

js/bootstrap-modal.js

@@ -1,3 +1,23 @@
+/* =========================================================
+ * bootstrap-modal.js
+ * http://twitter.github.com/bootstrap/javascript.html#modal
+ * =========================================================
+ * 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( $ ){
 
  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
@@ -59,6 +79,7 @@
       this.isShown = true
 
       _.escape.call(this)
+
       _.backdrop.call(this, function () {
         that.$element
           .appendTo(document.body)
@@ -133,6 +154,8 @@
         $.support.transition && this.$element.hasClass('fade')?
           this.$backdrop.one(transitionEnd, removeElement) :
           removeElement()
+      } else {
+        callback()
       }
     }
 

js/bootstrap-popover.js

@@ -1,17 +1,34 @@
- /* EXTENDS BOOTSTRAP-TWIPSY.js
-    =========================== */
+/* ===========================================================
+ * bootstrap-popover.js
+ * http://twitter.github.com/bootstrap/javascript.html#popover
+ * ===========================================================
+ * 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( $ ) {
 
- /* POPOVER PUBLIC CLASS DEFINITION
-  * ============================== */
-
   var Popover = function ( element, options ) {
     this.$element = $(element)
     this.options = options
     this.enabled = true
   }
 
+  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
+     ========================================= */
+
   Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
 
     setContent: function () {

js/bootstrap-scrollspy.js

@@ -0,0 +1,88 @@
+/* =============================================================
+ * bootstrap-scrollspy.js
+ * http://twitter.github.com/bootstrap/javascript.html#scrollspy
+ * =============================================================
+ * 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 ( $ ) {
+
+  var $window = $(window)
+
+  function ScrollSpy( topbar ) {
+    var processScroll = $.proxy(this.processScroll, this)
+    this.$topbar = $(topbar)
+    this.setup()
+    this.$topbar
+      .delegate('li > a', 'click', processScroll)
+      .bind('topbar:refresh', $.proxy(this.setup, this))
+    $window.scroll(processScroll)
+    this.processScroll()
+  }
+
+  ScrollSpy.prototype = {
+
+      setup: function () {
+        this.targets = this.$topbar.find('li > a').map(function () {
+          var href = $(this).attr('href')
+          return /^#\w/.test(href) && $(href).length ? href : null
+        })
+
+        this.offsets = $.map(this.targets, function (id) {
+          return $(id).offset().top
+        })
+      }
+
+    , processScroll: function () {
+        var scrollTop = $window.scrollTop() + 10
+          , offsets = this.offsets
+          , targets = this.targets
+          , activeTarget = this.activeTarget
+          , i
+
+        for (i = offsets.length; i--;) {
+          activeTarget != targets[i]
+            && scrollTop >= offsets[i]
+            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
+            && this.activateButton( targets[i] )
+        }
+      }
+
+    , activateButton: function (target) {
+        this.activeTarget = target
+
+        this.$topbar
+          .find('.active')
+          .removeClass('active')
+
+        this.$topbar
+          .find('a[href=' + target + ']')
+          .parent('li')
+          .addClass('active')
+      }
+
+  }
+
+  /* SCROLLSPY PLUGIN DEFINITION
+   * =========================== */
+
+  $.fn.scrollSpy = function() {
+    return this.each(function () {
+      new ScrollSpy(this)
+    })
+  }
+
+}( jQuery || ender )

js/bootstrap-tabs.js

@@ -1,3 +1,23 @@
+/* ========================================================
+ * bootstrap-tabs.js
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * 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( $ ){
 
   function activate ( element, container ) {

js/bootstrap-twipsy.js

@@ -1,4 +1,23 @@
-/* Adapted from the original jQuery.tipsy by Jason Frame */
+/* ==========================================================
+ * bootstrap-twipsy.js
+ * http://twitter.github.com/bootstrap/javascript.html#twipsy
+ * Adapted from the original jQuery.tipsy by Jason Frame
+ * ==========================================================
+ * 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( $ ) {
 

js/tests/unit/bootstrap-modal.js

@@ -17,40 +17,70 @@ $(function () {
       })
 
       test("should insert into dom when modal:show event is called", function () {
+        stop()
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
-        div.modal().trigger("modal:show")
-        ok($('#modal-test').length, 'modal insterted into dom')
-        div.remove()
+        div
+          .modal()
+          .trigger("modal:show")
+          .bind("modal:shown", function () {
+            ok($('#modal-test').length, 'modal insterted into dom')
+            start()
+            div.remove()
+          })
       })
 
-      test("should remove from dom when close is called", function () {
+      test("should remove from dom when modal:hide is called", function () {
+        stop()
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
-        div.modal().trigger("modal:show")
-        ok($('#modal-test').length, 'modal insterted into dom')
-        div.trigger("modal:hide")
-        ok(!$('#modal-test').length, 'modal removed from dom')
-        div.remove()
+        div
+          .modal()
+          .trigger("modal:show")
+          .bind("modal:shown", function () {
+            ok($('#modal-test').length, 'modal insterted into dom')
+            div.trigger("modal:hide")
+          })
+          .bind("modal:hidden", function() {
+            ok(!$('#modal-test').length, 'modal removed from dom')
+            start()
+            div.remove()
+          })
       })
 
       test("should toggle when toggle is called", function () {
+        stop()
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
-        div.modal().trigger("modal:toggle")
-        ok($('#modal-test').length, 'modal insterted into dom')
-        div.trigger("modal:toggle")
-        ok(!$('#modal-test').length, 'modal removed from dom')
-        div.remove()
+        div
+          .modal()
+          .trigger("modal:toggle")
+          .bind("modal:shown", function () {
+            ok($('#modal-test').length, 'modal insterted into dom')
+            div.trigger("modal:toggle")
+          })
+          .bind("modal:hidden", function() {
+            ok(!$('#modal-test').length, 'modal removed from dom')
+            start()
+            div.remove()
+          })
       })
 
       test("should remove from dom when click .close", function () {
+        stop()
         $.support.transition = false
         var div = $("<div id='modal-test'><span class='close'></span></div>")
-        div.modal().trigger("modal:toggle")
-        ok($('#modal-test').length, 'modal insterted into dom')
-        div.find('.close').click()
-        ok(!$('#modal-test').length, 'modal removed from dom')
-        div.remove()
+        div
+          .modal()
+          .trigger("modal:toggle")
+          .bind("modal:shown", function () {
+            ok($('#modal-test').length, 'modal insterted into dom')
+            div.find('.close').click()
+          })
+          .bind("modal:hidden", function() {
+            ok(!$('#modal-test').length, 'modal removed from dom')
+            start()
+            div.remove()
+          })
       })
 })

js/tests/unit/bootstrap-scrollspy.js

@@ -0,0 +1,31 @@
+$(function () {
+
+    module("bootstrap-scrollspy")
+
+      test("should be defined on jquery object", function () {
+        ok($(document.body).scrollspy, 'scrollspy method is defined')
+      })
+
+      test("should return element", function () {
+        ok($(document.body).scrollspy()[0] == document.body, 'document.body returned')
+      })
+
+      test("should switch active class on scroll", function () {
+        var sectionHTML = '<div id="masthead"></div>'
+          , $section = $(sectionHTML).append('#qunit-runoff')
+          , topbarHTML ='<div class="topbar">'
+          + '<div class="topbar-inner">'
+          + '<div class="container">'
+          + '<h3><a href="#">Bootstrap</a></h3>'
+          + '<ul class="nav">'
+          + '<li><a href="#masthead">Overview</a></li>'
+          + '</ul>'
+          + '</div>'
+          + '</div>'
+          + '</div>'
+          , $topbar = $(topbarHTML).topbar()
+
+        ok(topbar.find('.active', true)
+      })
+
+})