%PDF- %PDF-
Direktori : /home/bitrix/www/bitrix/components/bitrix/advertising.banner/templates/bootstrap/ |
Current File : //home/bitrix/www/bitrix/components/bitrix/advertising.banner/templates/bootstrap/bxcarousel.js |
/* ======================================================================== * Bootstrap: carousel.js v3.3.5 * http://getbootstrap.com/javascript/#carousel * ======================================================================== * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * ======================================================================== */ +function () { 'use strict'; if (BX.browser.IsIE() || BX.browser.IsIE11() || !window.CustomEvent) { (function () { function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); } // CAROUSEL CLASS DEFINITION // ========================= var Carousel = function (element, options) { options.pause = options.pause != 'false' ? true : false, options.wrap = options.wrap != 'false' ? true : false, options.interval = options.interval != 'false' ? parseInt(options.interval) : false, options.keyboard = options.keyboard != 'false' ? true : false, this.$element = BX(element) this.$indicators = this.$element.querySelectorAll('.carousel-indicators') this.options = options this.paused = null this.sliding = null this.interval = null this.$active = null this.$items = null this.slidEvent = null this.slideEvent = null this.options.keyboard && BX.bind(this.$element, 'keydown', BX.proxy(this.keydown, this)) if (this.options.pause && !(BX.hasClass(document.documentElement, 'bx-touch'))) { BX.bind(this.$element, 'mouseover', BX.proxy(this.pause, this)) BX.bind(this.$element, 'mouseout', BX.proxy(this.cycle, this)) } } Carousel.VERSION = '3.3.5' Carousel.TRANSITION_DURATION = 600 Carousel.DEFAULTS = { interval: 5000, pause: true, wrap: true, keyboard: true } Carousel.prototype.keydown = function (e) { if (/input|textarea/i.test(e.target.tagName)) return switch (e.which) { case 37: this.prev(); break case 39: this.next(); break default: return } e.preventDefault() } Carousel.prototype.cycle = function (e) { e || (this.paused = false) this.interval && clearInterval(this.interval) this.options.interval && !this.paused && (this.interval = setInterval(BX.proxy(this.next, this), this.options.interval)) return this } Carousel.prototype.getItemIndex = function (item) { this.$items = BX.findChildren(item.parentNode, {className: 'item'}, true) return this.$items.indexOf(item || this.$active) } Carousel.prototype.eq = function (obj, i) { var len = obj.length, j = +i + (i < 0 ? len : 0); return j >= 0 && j < len ? obj[j] : {}; } Carousel.prototype.getItemForDirection = function (direction, active) { var activeIndex = this.getItemIndex(active) var willWrap = (direction == 'prev' && activeIndex === 0) || (direction == 'next' && activeIndex == (this.$items.length - 1)) if (willWrap && !this.options.wrap) return active var delta = direction == 'prev' ? -1 : 1 var itemIndex = (activeIndex + delta) % this.$items.length return this.eq(this.$items, itemIndex) } Carousel.prototype.to = function (pos) { var activeIndex = this.getItemIndex(this.$active = BX.findChild(this.$element.parentNode, {className: 'item active'}, true, false)) if (pos > (this.$items.length - 1) || pos < 0) return //TODO click on indicator when still sliding if (this.sliding) { return false; } if (activeIndex == pos) return this.pause().cycle() return this.slide(pos > activeIndex ? 'next' : 'prev', this.eq(this.$items, pos)) } Carousel.prototype.pause = function (e) { e || (this.paused = true) if (BX.findChildren(this.$element, {className: 'carousel-control'}, true, true).length) { this.cycle(true) } this.interval = clearInterval(this.interval) return this } Carousel.prototype.next = function () { if (this.sliding) return return this.slide('next') } Carousel.prototype.prev = function () { if (this.sliding) return return this.slide('prev') } Carousel.prototype.loadEvents = function () { var $active = BX.findChild(this.$element, {"class" : "item active"}, true, false) || BX.findChild(this.$element, {"class" : "item active"}, true, false) var startSlid = new CustomEvent("slid.bs.carousel", {detail: {curSlide: $active}}); var startSlide = new CustomEvent("slide.bs.carousel", {detail: {curSlide: $active}}); this.$element.dispatchEvent(startSlid) this.$element.dispatchEvent(startSlide) } Carousel.prototype.slide = function (type, next) { var $active = BX.findChild(this.$element, {"class" : "item active"}, true, false) || BX.findChild(this.$element, {"class" : "item active"}, true, false) var $next = next || this.getItemForDirection(type, $active) var isCycling = this.interval var direction = type == 'next' ? 'left' : 'right' var videoActive = BX.findChild($active, {tagName: 'video', className: 'embed-responsive-item'}, true, false) var videoNext = BX.findChild($next, {tagName: 'video', className: 'embed-responsive-item'}, true, false) var ytActive = BX.findChild($active, {tagName: 'iframe', className: 'embed-responsive-item'}, true, false) var ytNext = BX.findChild($next, {tagName: 'iframe', className: 'embed-responsive-item'}, true, false) if (BX.hasClass($next, 'active')) return (this.sliding = false) //register events this.slidEvent = new CustomEvent("slid.bs.carousel", {detail: {curSlide: $next}}); this.slideEvent = new CustomEvent("slide.bs.carousel", {detail: {curSlide: $next}}); this.$element.dispatchEvent(this.slidEvent) this.sliding = true isCycling && this.pause() if (this.$indicators.length) { BX.removeClass(BX.findChild(this.$indicators[0], {className: 'active'}, true, false), 'active') var $nextIndicator = BX.findChildren(this.$indicators[0], {tagName: 'li'}, false, true)[this.getItemIndex($next)] $nextIndicator && BX.addClass($nextIndicator, 'active') } if (BX.hasClass(this.$element, 'slide') && !BX.browser.IsIE()) { var self = this BX.addClass($next, type) $next.offsetWidth // force reflow BX.addClass($active, direction) BX.addClass($next, direction) setTimeout(function() { BX.addClass($next, 'active') BX.removeClass($active, 'active') BX.removeClass($active, direction) BX.removeClass($next, type) BX.removeClass($next, direction) if (self.options.interval && !self.paused){ clearInterval(self.interval); self.cycle(); } self.$element.dispatchEvent(self.slideEvent) //here we go with the slide self.sliding = false }, Carousel.TRANSITION_DURATION + 100 ); } else { BX.removeClass($active, 'active') BX.addClass($next, 'active') this.$element.dispatchEvent(this.slideEvent) this.sliding = false } isCycling && this.cycle() videoActive && videoActive.pause() videoNext && videoNext.play() ytActive && window[ytActive.id] && window[ytActive.id].pauseVideo && window[ytActive.id].pauseVideo() ytNext && window[ytNext.id] && window[ytNext.id].playVideo && window[ytNext.id].playVideo() return this } // CAROUSEL PLUGIN DEFINITION // ========================== function Plugin(option) { function func() { function extend(){ for(var i=1; i<arguments.length; i++) for(var key in arguments[i]) if(arguments[i].hasOwnProperty(key)) arguments[0][key] = arguments[i][key]; return arguments[0]; } var data = this.data ? this.data : undefined var carousel = this.carousel ? this.carousel : undefined var options = extend({}, Carousel.DEFAULTS, data, typeof option == 'object' && option) var action = typeof option == 'string' ? option : options.slide var active if (!carousel) { carousel = this.carousel = new Carousel(this, options) active = BX.findChild(carousel.$element, {"class" : "item active"}, true, false) if (active) carousel.loadEvents() } var vid = BX.findChild(BX.findChild(carousel.$element, {"class" : "item active"}, true, false), {tagName: 'video', className: 'embed-responsive-item'}, true, false) active = active || BX.findChild(carousel.$element, {"class" : "item active"}, true, false) if (vid) vid.play() if (typeof option == 'number') carousel.to(option) else if (action) carousel[action]() else if (options.interval) carousel.pause().cycle() } return func.call(this) } // CAROUSEL DATA-API // ================= var clickHandler = function (e) { var href var id = this.getAttribute('data-target') || (href = this.getAttribute('href')) && href.replace(/.*(?=#[^\s]+$)/, '') if(id && id.length > 1) id = id.substr(1) var $target = BX(id) if (!BX.hasClass($target, 'carousel')) return var options = {slide: this.getAttribute('data-slide')} var slideIndex = this.getAttribute('data-slide-to') if (slideIndex) options.interval = false Plugin.call($target, options) if (slideIndex) { $target.carousel.to(slideIndex) } e.preventDefault() } var initThis = function () { var dataSlide = document.querySelectorAll('[data-slide]'), s for (s in dataSlide) { BX.bind(dataSlide[s], 'click', clickHandler) } var dataSlideTo = document.querySelectorAll('[data-slide-to]'), ss for (ss in dataSlideTo) { BX.bind(dataSlideTo[ss], 'click', clickHandler) } var i, value; function carouselInit() { var $carousel = this $carousel.data = { ride: this.getAttribute('data-ride'), pause: this.getAttribute('data-pause'), wrap: this.getAttribute('data-wrap'), interval: this.getAttribute('data-interval'), keyboard: this.getAttribute('data-keyboard') } Plugin.call($carousel, $carousel.data) } var obj = document.querySelectorAll('[data-ride="carousel"]') for (i in obj) { if (obj.hasOwnProperty(i)) { value = carouselInit.call(obj[i]); } } } if (window.frameCacheVars !== undefined) { BX.addCustomEvent("onFrameDataReceived" , function() { initThis(); }); } else { BX.ready(function() { initThis(); }); } }();