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">
@@ -1519,7 +1519,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
        <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
      </div>
      <div class="span12">
-       <h2>Getting started</h2>       
+       <h2>Getting started</h2>
        <p>We've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with either <a href="http://jquery.com/" target="_blank">jQuery</a> or <a href="http://ender.no.de" target="_blank">Ender</a>, but we encourage you to extend and modify them to fit your development needs!</p>
        <h2>Do I need javascript?</h2>
        <p>The short answer is <strong>no</strong>... of course not! However, for those who need it, we've provided the plugins below to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality right away! For more information on these plugins and to see demos of them in action, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>

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