add bootstrap-scrollspy

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">

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 -->
@@ -46,6 +46,7 @@
           <ul>
             <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>
@@ -152,7 +153,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">
@@ -213,6 +214,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-modal.js

@@ -59,6 +59,7 @@
       this.isShown = true
 
       _.escape.call(this)
+
       _.backdrop.call(this, function () {
         that.$element
           .appendTo(document.body)
@@ -133,6 +134,8 @@
         $.support.transition && this.$element.hasClass('fade')?
           this.$backdrop.one(transitionEnd, removeElement) :
           removeElement()
+      } else {
+        callback()
       }
     }
 

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/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")
+        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")
+        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")
+        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")
+        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)
+      })
+
+})