-/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.ns('Ext.ux');
-
-Ext.ux.Carousel = Ext.extend(Ext.util.Observable, {
- interval: 3,
- transitionDuration: 1,
- transitionType: 'carousel',
- transitionEasing: 'easeOut',
- itemSelector: 'img',
- activeSlide: 0,
- autoPlay: false,
- showPlayButton: false,
- pauseOnNavigate: false,
- wrap: false,
- freezeOnHover: false,
- navigationOnHover: false,
- hideNavigation: false,
- width: null,
- height: null,
-
- constructor: function(elId, config) {
- config = config || {};
- Ext.apply(this, config);
-
- Ext.ux.Carousel.superclass.constructor.call(this, config);
-
- this.addEvents(
- 'beforeprev',
- 'prev',
- 'beforenext',
- 'next',
- 'change',
- 'play',
- 'pause',
- 'freeze',
- 'unfreeze'
- );
-
- this.el = Ext.get(elId);
- this.slides = this.els = [];
-
- if(this.autoPlay || this.showPlayButton) {
- this.wrap = true;
- };
-
- if(this.autoPlay && typeof config.showPlayButton === 'undefined') {
- this.showPlayButton = true;
- }
-
- this.initMarkup();
- this.initEvents();
-
- if(this.carouselSize > 0) {
- this.refresh();
- }
- },
-
- initMarkup: function() {
- var dh = Ext.DomHelper;
-
- this.carouselSize = 0;
- var items = this.el.select(this.itemSelector);
- this.els.container = dh.append(this.el, {cls: 'ux-carousel-container'}, true);
- this.els.slidesWrap = dh.append(this.els.container, {cls: 'ux-carousel-slides-wrap'}, true);
-
- this.els.navigation = dh.append(this.els.container, {cls: 'ux-carousel-nav'}, true).hide();
- this.els.caption = dh.append(this.els.navigation, {tag: 'h2', cls: 'ux-carousel-caption'}, true);
- this.els.navNext = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-next'}, true);
- if(this.showPlayButton) {
- this.els.navPlay = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-play'}, true)
- }
- this.els.navPrev = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-prev'}, true);
-
- // set the dimensions of the container
- this.slideWidth = this.width || this.el.getWidth(true);
- this.slideHeight = this.height || this.el.getHeight(true);
- this.els.container.setStyle({
- width: this.slideWidth + 'px',
- height: this.slideHeight + 'px'
- });
-
- this.els.caption.setWidth((this.slideWidth - (this.els.navNext.getWidth()*2) - (this.showPlayButton ? this.els.navPlay.getWidth() : 0) - 20) + 'px')
-
- items.appendTo(this.els.slidesWrap).each(function(item) {
- item = item.wrap({cls: 'ux-carousel-slide'});
- this.slides.push(item);
- item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
- }, this);
- this.carouselSize = this.slides.length;
- if(this.navigationOnHover) {
- this.els.navigation.setStyle('top', (-1*this.els.navigation.getHeight()) + 'px');
- }
- this.el.clip();
- },
-
- initEvents: function() {
- this.els.navPrev.on('click', function(ev) {
- ev.preventDefault();
- var target = ev.getTarget();
- target.blur();
- if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
- this.prev();
- }, this);
-
- this.els.navNext.on('click', function(ev) {
- ev.preventDefault();
- var target = ev.getTarget();
- target.blur();
- if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
- this.next();
- }, this);
-
- if(this.showPlayButton) {
- this.els.navPlay.on('click', function(ev){
- ev.preventDefault();
- ev.getTarget().blur();
- if(this.playing) {
- this.pause();
- }
- else {
- this.play();
- }
- }, this);
- };
-
- if(this.freezeOnHover) {
- this.els.container.on('mouseenter', function(){
- if(this.playing) {
- this.fireEvent('freeze', this.slides[this.activeSlide]);
- Ext.TaskMgr.stop(this.playTask);
- }
- }, this);
- this.els.container.on('mouseleave', function(){
- if(this.playing) {
- this.fireEvent('unfreeze', this.slides[this.activeSlide]);
- Ext.TaskMgr.start(this.playTask);
- }
- }, this, {buffer: (this.interval/2)*1000});
- };
-
- if(this.navigationOnHover) {
- this.els.container.on('mouseenter', function(){
- if(!this.navigationShown) {
- this.navigationShown = true;
- this.els.navigation.stopFx(false).shift({
- y: this.els.container.getY(),
- duration: this.transitionDuration
- })
- }
- }, this);
-
- this.els.container.on('mouseleave', function(){
- if(this.navigationShown) {
- this.navigationShown = false;
- this.els.navigation.stopFx(false).shift({
- y: this.els.navigation.getHeight() - this.els.container.getY(),
- duration: this.transitionDuration
- })
- }
- }, this);
- }
-
- if(this.interval && this.autoPlay) {
- this.play();
- };
- },
-
- prev: function() {
- if (this.fireEvent('beforeprev') === false) {
- return;
- }
- if(this.pauseOnNavigate) {
- this.pause();
- }
- this.setSlide(this.activeSlide - 1);
-
- this.fireEvent('prev', this.activeSlide);
- return this;
- },
-
- next: function() {
- if(this.fireEvent('beforenext') === false) {
- return;
- }
- if(this.pauseOnNavigate) {
- this.pause();
- }
- this.setSlide(this.activeSlide + 1);
-
- this.fireEvent('next', this.activeSlide);
- return this;
- },
-
- play: function() {
- if(!this.playing) {
- this.playTask = this.playTask || {
- run: function() {
- this.playing = true;
- this.setSlide(this.activeSlide+1);
- },
- interval: this.interval*1000,
- scope: this
- };
-
- this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask(function() {
- Ext.TaskMgr.start(this.playTask);
- }, this);
-
- this.playTaskBuffer.delay(this.interval*1000);
- this.playing = true;
- if(this.showPlayButton) {
- this.els.navPlay.addClass('ux-carousel-playing');
- }
- this.fireEvent('play');
- }
- return this;
- },
-
- pause: function() {
- if(this.playing) {
- Ext.TaskMgr.stop(this.playTask);
- this.playTaskBuffer.cancel();
- this.playing = false;
- if(this.showPlayButton) {
- this.els.navPlay.removeClass('ux-carousel-playing');
- }
- this.fireEvent('pause');
- }
- return this;
- },
-
- clear: function() {
- this.els.slidesWrap.update('');
- this.slides = [];
- this.carouselSize = 0;
- this.pause();
- return this;
- },
-
- add: function(el, refresh) {
- var item = Ext.fly(el).appendTo(this.els.slidesWrap).wrap({cls: 'ux-carousel-slide'});
- item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
- this.slides.push(item);
- if(refresh) {
- this.refresh();
- }
- return this;
- },
-
- refresh: function() {
- this.carouselSize = this.slides.length;
- this.els.slidesWrap.setWidth((this.slideWidth * this.carouselSize) + 'px');
- if(this.carouselSize > 0) {
- if(!this.hideNavigation) this.els.navigation.show();
- this.activeSlide = 0;
- this.setSlide(0, true);
- }
- return this;
- },
-
- setSlide: function(index, initial) {
- if(!this.wrap && !this.slides[index]) {
- return;
- }
- else if(this.wrap) {
- if(index < 0) {
- index = this.carouselSize-1;
- }
- else if(index > this.carouselSize-1) {
- index = 0;
- }
- }
- if(!this.slides[index]) {
- return;
- }
-
- this.els.caption.update(this.slides[index].child(':first-child', true).title || '');
- var offset = index * this.slideWidth;
- if (!initial) {
- switch (this.transitionType) {
- case 'fade':
- this.slides[index].setOpacity(0);
- this.slides[this.activeSlide].stopFx(false).fadeOut({
- duration: this.transitionDuration / 2,
- callback: function(){
- this.els.slidesWrap.setStyle('left', (-1 * offset) + 'px');
- this.slides[this.activeSlide].setOpacity(1);
- this.slides[index].fadeIn({
- duration: this.transitionDuration / 2
- });
- },
- scope: this
- })
- break;
-
- default:
- var xNew = (-1 * offset) + this.els.container.getX();
- this.els.slidesWrap.stopFx(false);
- this.els.slidesWrap.shift({
- duration: this.transitionDuration,
- x: xNew,
- easing: this.transitionEasing
- });
- break;
- }
- }
- else {
- this.els.slidesWrap.setStyle('left', '0');
- }
-
- this.activeSlide = index;
- this.updateNav();
- this.fireEvent('change', this.slides[index], index);
- },
-
- updateNav: function() {
- this.els.navPrev.removeClass('ux-carousel-nav-disabled');
- this.els.navNext.removeClass('ux-carousel-nav-disabled');
- if(!this.wrap) {
- if(this.activeSlide === 0) {
- this.els.navPrev.addClass('ux-carousel-nav-disabled');
- }
- if(this.activeSlide === this.carouselSize-1) {
- this.els.navNext.addClass('ux-carousel-nav-disabled');
- }
- }
- }
-});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff