diff --git a/docs/assets/js/application-scrollspy.js b/docs/assets/js/application-scrollspy.js deleted file mode 100644 index 1f0b7cebe2..0000000000 --- a/docs/assets/js/application-scrollspy.js +++ /dev/null @@ -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); - -}) \ No newline at end of file diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 86eefa89d1..d1c6751ea2 100644 --- a/docs/assets/js/application.js +++ b/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 // ================== diff --git a/docs/index.html b/docs/index.html index 4764edfb52..e19059d242 100644 --- a/docs/index.html +++ b/docs/index.html @@ -23,8 +23,8 @@ + - @@ -1591,6 +1591,10 @@ Lorem ipsum dolar sit amet illo error ipsum verita bootstrap-dropdown.js This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations. + + bootstrap-scrollspy.js + The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. + bootstrap-tabs.js This plugin adds quick, dynamic tab and pill functionality for cycling through local content. @@ -1786,4 +1790,4 @@ Lorem ipsum dolar sit amet illo error ipsum verita - \ No newline at end of file + diff --git a/docs/javascript.html b/docs/javascript.html index 10acbbf5b6..b830e7d64f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -15,12 +15,12 @@ - + @@ -47,6 +47,7 @@
  • Overview
  • Modals
  • Dropdown
    • +
  • ScrollSpy
  • Tabs
  • Twipsy
  • Popover
    • @@ -167,7 +168,7 @@ $('#modal-content') + + +
    +
    +

    ScrollSpy bootstrap-scrollspy.js

    +
    +
    +
    +

    This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.

    + Download +
    +
    +

    Using boostrap-scrollspy.js

    + 
    $('#topbar').dropdown()
    +

    Method

    +

    $().scrollspy

    +

    + Auto activates navigation buttons by users scroll position. +

    + 
    $('body > .topbar').scrollSpy()
    +

    + Note: Topbar anchor tags must have resolvable id targets like <a href="#home">home</a>. +

    +

    Events

    +

    scrollspy:refresh

    +

    The scrollspy caches nav buttons and anchor locations. If you need to update the cache (because you have dynamic content) just trigger the scrollspy:refresh event.

    + 
    $('body > .topbar').trigger('scrollspy:refresh')
    +

    Demo

    +

    Peep the topbar navigation homie!

    + +
    +
    +
    + diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 4c9c9394d6..dbce13466f 100644 --- a/js/bootstrap-alerts.js +++ b/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) diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index fe73e79944..8be8f13c06 100644 --- a/js/bootstrap-dropdown.js +++ b/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 }) }) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index a7ab252ebc..8b21c192d1 100644 --- a/js/bootstrap-modal.js +++ b/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() } } diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 5928fe8caf..4995fe5d89 100644 --- a/js/bootstrap-popover.js +++ b/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 () { diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js new file mode 100644 index 0000000000..2cf487c50f --- /dev/null +++ b/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 ) \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index 029ccc65c3..aaa73644df 100644 --- a/js/bootstrap-tabs.js +++ b/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 ) { diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index ac2f562414..a227af4d28 100644 --- a/js/bootstrap-twipsy.js +++ b/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( $ ) { diff --git a/js/tests/unit/bootstrap-modal.js b/js/tests/unit/bootstrap-modal.js index cfdf4064d3..513d287804 100644 --- a/js/tests/unit/bootstrap-modal.js +++ b/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.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.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.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.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() + }) }) }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-scrollspy.js b/js/tests/unit/bootstrap-scrollspy.js new file mode 100644 index 0000000000..b9b3090620 --- /dev/null +++ b/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 = '
    ' + , $section = $(sectionHTML).append('#qunit-runoff') + , topbarHTML ='
    ' + + '
    ' + + '
    ' + + '

    Bootstrap

    ' + + '' + + '
    ' + + '
    ' + + '
    ' + , $topbar = $(topbarHTML).topbar() + + ok(topbar.find('.active', true) + }) + +}) \ No newline at end of file