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