From dc628c9115b74e49940c0cc200a8914232c9d2a2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 30 Nov 2011 22:05:09 -0800 Subject: start of carousel --- js/bootstrap-carousel.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 js/bootstrap-carousel.js (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js new file mode 100644 index 000000000..9513b4cd2 --- /dev/null +++ b/js/bootstrap-carousel.js @@ -0,0 +1,59 @@ +/* ========================================================== + * bootstrap-carousel.js v2.0.0 + * 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( $ ){ + + "use strict" + + /* CAROUSEL CLASS DEFINITION + * ========================= */ + + var Carousel = function ( el ) { + $(el).delegate(dismiss, 'click', this.close) + } + + Carousel.prototype = { + + } + + + /* CAROUSEL PLUGIN DEFINITION + * ========================== */ + + $.fn.carousel = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('alert') + if (!data) $this.data('alert', (data = new Alert(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + $.fn.carousel.Carousel = Carousel + + + /* CAROUSEL DATA-API + * ================= */ + + // $(function () { + // $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) + // }) + +}( window.jQuery || window.ender ) \ No newline at end of file -- cgit v1.2.3 From 1ef5fa7d6b4e50230c0c12919b0a06a9a2ac07f1 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 20 Dec 2011 18:02:47 -0800 Subject: giant refactor - all spec passing again... --- js/bootstrap-carousel.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 9513b4cd2..e2b36884b 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -25,8 +25,8 @@ /* CAROUSEL CLASS DEFINITION * ========================= */ - var Carousel = function ( el ) { - $(el).delegate(dismiss, 'click', this.close) + var Carousel = function () { + } Carousel.prototype = { @@ -40,20 +40,12 @@ $.fn.carousel = function ( option ) { return this.each(function () { var $this = $(this) - , data = $this.data('alert') - if (!data) $this.data('alert', (data = new Alert(this))) + , data = $this.data('carousel') + if (!data) $this.data('carousel', (data = new Carousel(this))) if (typeof option == 'string') data[option].call($this) }) } $.fn.carousel.Carousel = Carousel - - /* CAROUSEL DATA-API - * ================= */ - - // $(function () { - // $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) - // }) - -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file -- cgit v1.2.3 From f72a94ae2879ebfc5206dd40d5db175e13113850 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 20 Dec 2011 23:28:48 -0800 Subject: update more readme changes - introduce target specificty convention to more plugins --- js/bootstrap-carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index e2b36884b..ed4b8f3fa 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -46,6 +46,6 @@ }) } - $.fn.carousel.Carousel = Carousel + $.fn.carousel.Constructor = Carousel }( window.jQuery ) \ No newline at end of file -- cgit v1.2.3 From 2d092dfeea969d82bc55a153c6a597a3e87a0a03 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 16:04:01 -0800 Subject: start playing with carousel stuff --- js/bootstrap-carousel.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index ed4b8f3fa..2e1fde11a 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -25,12 +25,29 @@ /* CAROUSEL CLASS DEFINITION * ========================= */ - var Carousel = function () { - + var Carousel = function (element) { + this.$element = $(element) + this.cycle() } Carousel.prototype = { + cycle: function () { + this.interval = setInterval($.proxy(this.right, this), 500) + } + + , pause: function () { + clearInterval(this.interval) + } + + , right: function () { + + } + + , left: function () { + + } + } -- cgit v1.2.3 From 3fb6f6ee8670acff0c681c621b87a06a087f94be Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 22:30:57 -0800 Subject: basic carousel implementation --- js/bootstrap-carousel.js | 48 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 6 deletions(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 2e1fde11a..2099b372c 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -27,25 +27,48 @@ var Carousel = function (element) { this.$element = $(element) - this.cycle() } Carousel.prototype = { cycle: function () { - this.interval = setInterval($.proxy(this.right, this), 500) + this.interval = setInterval($.proxy(this.next, this), 5000) } , pause: function () { clearInterval(this.interval) } - , right: function () { - + , next: function () { + this.slide('next') } - , left: function () { + , prev: function () { + this.slide('prev') + } + , slide: function (type) { + var $active = this.$element.find('.active') + , $next = $active[type]() + , direction = type == 'next' ? 'left' : 'right' + , fallback = type == 'next' ? 'first' : 'last' + , that = this + + $next = $next.length ? $next : this.$element.find('.item')[fallback]() + + if (!$.support.transition && this.$element.hasClass('slide')) { + $active.removeClass('active') + $next.addClass('active') + } else { + $next.addClass(type) + $next[0].offsetWidth // force reflow + $active.addClass(direction) + $next.addClass(direction) + this.$element.one($.support.transition.end, function () { + $next.removeClass([type, direction].join(' ')).addClass('active') + $active.removeClass(['active', direction].join(' ')) + }) + } } } @@ -59,10 +82,23 @@ var $this = $(this) , data = $this.data('carousel') if (!data) $this.data('carousel', (data = new Carousel(this))) - if (typeof option == 'string') data[option].call($this) + if (typeof option == 'string') data[option]() }) } $.fn.carousel.Constructor = Carousel + + /* CAROUSEL DATA-API + * ================= */ + + $(function () { + $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { + var $this = $(this) + , $target = $($this.attr('data-target') || $this.attr('href')) + + $target.carousel($this.attr('data-slide')) + }) + }) + }( window.jQuery ) \ No newline at end of file -- cgit v1.2.3 From e89618a47f768eddf47164f89176e172b5c2972d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 22:55:51 -0800 Subject: clean up options implementation for carousel --- js/bootstrap-carousel.js | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 2099b372c..5e37b0f60 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -25,35 +25,42 @@ /* CAROUSEL CLASS DEFINITION * ========================= */ - var Carousel = function (element) { + var Carousel = function (element, options) { this.$element = $(element) + this.options = $.extend({}, $.fn.carousel.defaults, options) + this.options.slide && this.slide(this.options.slide) } Carousel.prototype = { cycle: function () { this.interval = setInterval($.proxy(this.next, this), 5000) + return this } , pause: function () { clearInterval(this.interval) + return this } , next: function () { - this.slide('next') + return this.slide('next') } , prev: function () { - this.slide('prev') + return this.slide('prev') } , slide: function (type) { var $active = this.$element.find('.active') , $next = $active[type]() + , isCycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , that = this + isCycling && this.pause() + $next = $next.length ? $next : this.$element.find('.item')[fallback]() if (!$.support.transition && this.$element.hasClass('slide')) { @@ -69,6 +76,10 @@ $active.removeClass(['active', direction].join(' ')) }) } + + isCycling && this.cycle() + + return this } } @@ -81,11 +92,17 @@ return this.each(function () { var $this = $(this) , data = $this.data('carousel') - if (!data) $this.data('carousel', (data = new Carousel(this))) - if (typeof option == 'string') data[option]() + , options = typeof option == 'object' && option + if (!data) $this.data('carousel', (data = new Carousel(this, options))) + if (typeof option == 'string' || (option = options.slide)) data[option]() + else data.cycle() }) } + $.fn.carousel.defaults = { + interval: 5000 + } + $.fn.carousel.Constructor = Carousel @@ -96,8 +113,8 @@ $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { var $this = $(this) , $target = $($this.attr('data-target') || $this.attr('href')) - - $target.carousel($this.attr('data-slide')) + , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) + $target.carousel(options) }) }) -- cgit v1.2.3 From 5661855be3da81f0a46bd99c7522a93f01706289 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 22:57:04 -0800 Subject: actuall use interval option :P --- js/bootstrap-carousel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 5e37b0f60..fa5247c97 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -34,7 +34,7 @@ Carousel.prototype = { cycle: function () { - this.interval = setInterval($.proxy(this.next, this), 5000) + this.interval = setInterval($.proxy(this.next, this), this.options.interval) return this } @@ -100,7 +100,7 @@ } $.fn.carousel.defaults = { - interval: 5000 + interval: 5000 } $.fn.carousel.Constructor = Carousel -- cgit v1.2.3 From f83240a8f93349c93582a96c4f4a7541388d6a80 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 8 Jan 2012 13:39:27 -0800 Subject: add slide and slid events + disable sliding during slide --- js/bootstrap-carousel.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index fa5247c97..c49f89ad8 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -44,10 +44,12 @@ } , next: function () { + if (this.sliding) return return this.slide('next') } , prev: function () { + if (this.sliding) return return this.slide('prev') } @@ -59,21 +61,29 @@ , fallback = type == 'next' ? 'first' : 'last' , that = this + this.sliding = true + isCycling && this.pause() $next = $next.length ? $next : this.$element.find('.item')[fallback]() if (!$.support.transition && this.$element.hasClass('slide')) { + this.$element.trigger('slide') $active.removeClass('active') $next.addClass('active') + this.$element.trigger('slid') + this.sliding = false } else { $next.addClass(type) $next[0].offsetWidth // force reflow $active.addClass(direction) $next.addClass(direction) + this.$element.trigger('slide') this.$element.one($.support.transition.end, function () { $next.removeClass([type, direction].join(' ')).addClass('active') $active.removeClass(['active', direction].join(' ')) + that.$element.trigger('slid') + that.sliding = false }) } -- cgit v1.2.3 From 16eccc43d9fa6317818b5d1621d0477150214488 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 23:28:48 -0800 Subject: dates updated to 2012 --- js/bootstrap-carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index c49f89ad8..f2d5110a4 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -2,7 +2,7 @@ * bootstrap-carousel.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. -- cgit v1.2.3 From 373a54187ed5d1f5d00d725e6ef6b84d506f07a8 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 21 Jan 2012 23:02:29 -0800 Subject: add ability to cycle carousel to a particular frame --- js/bootstrap-carousel.js | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index f2d5110a4..4e12e31b5 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -38,6 +38,27 @@ return this } + , to: function (pos) { + var $active = this.$element.find('.active') + , children = $active.parent().children() + , activePos = children.index($active) + , that = this + + if (pos > (children.length - 1) || pos < 0) return + + if (this.sliding) { + return this.$element.one('slid', function () { + that.to(pos) + }) + } + + if (activePos == pos) { + return this.pause().cycle() + } + + return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) + } + , pause: function () { clearInterval(this.interval) return this @@ -53,9 +74,9 @@ return this.slide('prev') } - , slide: function (type) { + , slide: function (type, next) { var $active = this.$element.find('.active') - , $next = $active[type]() + , $next = next || $active[type]() , isCycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' @@ -71,8 +92,8 @@ this.$element.trigger('slide') $active.removeClass('active') $next.addClass('active') - this.$element.trigger('slid') this.sliding = false + this.$element.trigger('slid') } else { $next.addClass(type) $next[0].offsetWidth // force reflow @@ -82,8 +103,8 @@ this.$element.one($.support.transition.end, function () { $next.removeClass([type, direction].join(' ')).addClass('active') $active.removeClass(['active', direction].join(' ')) - that.$element.trigger('slid') that.sliding = false + setTimeout(function () { that.$element.trigger('slid') }, 0) }) } @@ -104,7 +125,8 @@ , data = $this.data('carousel') , options = typeof option == 'object' && option if (!data) $this.data('carousel', (data = new Carousel(this, options))) - if (typeof option == 'string' || (option = options.slide)) data[option]() + if (typeof option == 'number') data.to(option) + else if (typeof option == 'string' || (option = options.slide)) data[option]() else data.cycle() }) } -- cgit v1.2.3 From 84a8aa1beac447cbbe77983730f7590fc955b312 Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Tue, 24 Jan 2012 11:08:03 -0800 Subject: 2.0-wip: fix js heads --- js/bootstrap-carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 4e12e31b5..3262f0cab 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -1,6 +1,6 @@ /* ========================================================== * bootstrap-carousel.js v2.0.0 - * http://twitter.github.com/bootstrap/javascript.html#alerts + * http://twitter.github.com/bootstrap/javascript.html#carousel * ========================================================== * Copyright 2012 Twitter, Inc. * -- cgit v1.2.3 From 319b65e64b6882ad2184f398f1763543cfa48a16 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 25 Jan 2012 11:49:00 -0800 Subject: prevent default --- js/bootstrap-carousel.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 3262f0cab..500c7da7f 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -147,6 +147,7 @@ , $target = $($this.attr('data-target') || $this.attr('href')) , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) $target.carousel(options) + e.preventDefault() }) }) -- cgit v1.2.3 From 5844aa550d5a2d22d527d80cfa42443914d28c1f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 15:00:59 -0800 Subject: consistent new lines at ends of files --- js/bootstrap-carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 500c7da7f..47d832c82 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -151,4 +151,4 @@ }) }) -}( window.jQuery ) \ No newline at end of file +}( window.jQuery ) -- cgit v1.2.3 From e61164e67a048c20c512e99335e3adfcc3b63604 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 28 Jan 2012 01:35:13 -0800 Subject: all unit tests passing in ie7 --- js/bootstrap-carousel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/bootstrap-carousel.js') diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 47d832c82..2f47edb8d 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -143,8 +143,8 @@ $(function () { $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { - var $this = $(this) - , $target = $($this.attr('data-target') || $this.attr('href')) + var $this = $(this), href + , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) $target.carousel(options) e.preventDefault() -- cgit v1.2.3