git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/js/carousel.js

   1 /* ========================================================================
   2  * Bootstrap: carousel.js v3.0.0
   3  * http://getbootstrap.com/javascript/#carousel
   4  * ========================================================================
   5  * Copyright 2013 Twitter, Inc.
   6  *
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  * http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ======================================================================== */
  19
  20
  21 +function ($) { "use strict";
  22
  23   // CAROUSEL CLASS DEFINITION
  24   // =========================
  25
  26   var Carousel = function (element, options) {
  27     this.$element    = $(element)
  28     this.$indicators = this.$element.find('.carousel-indicators')
  29     this.options     = options
  30     this.paused      =
  31     this.sliding     =
  32     this.interval    =
  33     this.$active     =
  34     this.$items      = null
  35
  36     this.options.pause == 'hover' && this.$element
  37       .on('mouseenter', $.proxy(this.pause, this))
  38       .on('mouseleave', $.proxy(this.cycle, this))
  39   }
  40
  41   Carousel.DEFAULTS = {
  42     interval: 5000
  43   , pause: 'hover'
  44   , wrap: true
  45   }
  46
  47   Carousel.prototype.cycle =  function (e) {
  48     e || (this.paused = false)
  49
  50     this.interval && clearInterval(this.interval)
  51
  52     this.options.interval
  53       && !this.paused
  54       && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
  55
  56     return this
  57   }
  58
  59   Carousel.prototype.getActiveIndex = function () {
  60     this.$active = this.$element.find('.item.active')
  61     this.$items  = this.$active.parent().children()
  62
  63     return this.$items.index(this.$active)
  64   }
  65
  66   Carousel.prototype.to = function (pos) {
  67     var that        = this
  68     var activeIndex = this.getActiveIndex()
  69
  70     if (pos > (this.$items.length - 1) || pos < 0) return
  71
  72     if (this.sliding)       return this.$element.one('slid', function () { that.to(pos) })
  73     if (activeIndex == pos) return this.pause().cycle()
  74
  75     return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
  76   }
  77
  78   Carousel.prototype.pause = function (e) {
  79     e || (this.paused = true)
  80
  81     if (this.$element.find('.next, .prev').length && $.support.transition.end) {
  82       this.$element.trigger($.support.transition.end)
  83       this.cycle(true)
  84     }
  85
  86     this.interval = clearInterval(this.interval)
  87
  88     return this
  89   }
  90
  91   Carousel.prototype.next = function () {
  92     if (this.sliding) return
  93     return this.slide('next')
  94   }
  95
  96   Carousel.prototype.prev = function () {
  97     if (this.sliding) return
  98     return this.slide('prev')
  99   }
 100
 101   Carousel.prototype.slide = function (type, next) {
 102     var $active   = this.$element.find('.item.active')
 103     var $next     = next || $active[type]()
 104     var isCycling = this.interval
 105     var direction = type == 'next' ? 'left' : 'right'
 106     var fallback  = type == 'next' ? 'first' : 'last'
 107     var that      = this
 108
 109     if (!$next.length) {
 110       if (!this.options.wrap) return
 111       $next = this.$element.find('.item')[fallback]()
 112     }
 113
 114     this.sliding = true
 115
 116     isCycling && this.pause()
 117
 118     var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
 119
 120     if ($next.hasClass('active')) return
 121
 122     if (this.$indicators.length) {
 123       this.$indicators.find('.active').removeClass('active')
 124       this.$element.one('slid', function () {
 125         var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
 126         $nextIndicator && $nextIndicator.addClass('active')
 127       })
 128     }
 129
 130     if ($.support.transition && this.$element.hasClass('slide')) {
 131       this.$element.trigger(e)
 132       if (e.isDefaultPrevented()) return
 133       $next.addClass(type)
 134       $next[0].offsetWidth // force reflow
 135       $active.addClass(direction)
 136       $next.addClass(direction)
 137       $active
 138         .one($.support.transition.end, function () {
 139           $next.removeClass([type, direction].join(' ')).addClass('active')
 140           $active.removeClass(['active', direction].join(' '))
 141           that.sliding = false
 142           setTimeout(function () { that.$element.trigger('slid') }, 0)
 143         })
 144         .emulateTransitionEnd(600)
 145     } else {
 146       this.$element.trigger(e)
 147       if (e.isDefaultPrevented()) return
 148       $active.removeClass('active')
 149       $next.addClass('active')
 150       this.sliding = false
 151       this.$element.trigger('slid')
 152     }
 153
 154     isCycling && this.cycle()
 155
 156     return this
 157   }
 158
 159
 160   // CAROUSEL PLUGIN DEFINITION
 161   // ==========================
 162
 163   var old = $.fn.carousel
 164
 165   $.fn.carousel = function (option) {
 166     return this.each(function () {
 167       var $this   = $(this)
 168       var data    = $this.data('bs.carousel')
 169       var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
 170       var action  = typeof option == 'string' ? option : options.slide
 171
 172       if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
 173       if (typeof option == 'number') data.to(option)
 174       else if (action) data[action]()
 175       else if (options.interval) data.pause().cycle()
 176     })
 177   }
 178
 179   $.fn.carousel.Constructor = Carousel
 180
 181
 182   // CAROUSEL NO CONFLICT
 183   // ====================
 184
 185   $.fn.carousel.noConflict = function () {
 186     $.fn.carousel = old
 187     return this
 188   }
 189
 190
 191   // CAROUSEL DATA-API
 192   // =================
 193
 194   $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
 195     var $this   = $(this), href
 196     var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
 197     var options = $.extend({}, $target.data(), $this.data())
 198     var slideIndex = $this.attr('data-slide-to')
 199     if (slideIndex) options.interval = false
 200
 201     $target.carousel(options)
 202
 203     if (slideIndex = $this.attr('data-slide-to')) {
 204       $target.data('bs.carousel').to(slideIndex)
 205     }
 206
 207     e.preventDefault()
 208   })
 209
 210   $(window).on('load', function () {
 211     $('[data-ride="carousel"]').each(function () {
 212       var $carousel = $(this)
 213       $carousel.carousel($carousel.data())
 214     })
 215   })
 216
 217 }(window.jQuery);