PDA

View Full Version : self rotating carousel plugin



gkatz
5 Dec 2010, 11:38 PM
Hi Guys;
Here is a plugin to make a carousel self rotate.
use it as you please. I am not sure the code is the best (my first plugin) but it seems to work. the only configuration for the plugin is the delay bet between card switches.
plugin code:

Ext.ns('Ext.ux');
Ext.ux.SelfRotatingCarousel = Ext.extend(Ext.util.Observable, {
delay: 3000,
nextCard: function(){
var curIndex = this.hostCmp.getActiveIndex();
var nextIndex = (++curIndex) % this.hostCmp.items.length;
this.hostCmp.setActiveItem(nextIndex);
},
init: function(cmp){
this.hostCmp = cmp;
setInterval ( Ext.createDelegate(this.nextCard,this),this.delay);
}
});
Ext.preg('selfRotatingCarousel',Ext.ux.SelfRotatingCarousel);usage example:

var carousel1 = new Ext.Carousel({
......
plugins: [{ptype:'selfRotatingCarousel',delay: 7000}],
.....
});enjoy

mitchellsimoens
6 Dec 2010, 6:24 AM
You should add start, stop, pause functions to this.

gkatz
6 Dec 2010, 6:33 AM
i don't actually need that functionality but Its a good idea for performance reasons I guess.
thanks.
where should I implement it? if I put the extra methods on the plug-in then it looks kinda wierd doing something like:
var myCarousel;//carousel with plugin
myCarousel.plugins[0].start/stop/pause etc...
so I am not sure it fits the plug-in design. or am I missing something?

mitchellsimoens
6 Dec 2010, 6:49 AM
Plugins add the functions to the component so you don't have to go to the specific plugin like you say. And if you are going to release a plugin, don't be selfish :D Especially when it would be very simple to do.

gkatz
6 Dec 2010, 7:08 AM
:)
I am just trying to understand how to do it right since I am just starting sencha and not a JS guru.
lets take the start method for example:

Ext.xwave.SelfRotatingCarousel = Ext.extend(Ext.util.Observable, {
delay: 3000,
nextCard: function(){
var curIndex = this.hostCmp.getActiveIndex();
var nextIndex = (++curIndex) % this.hostCmp.items.length;
this.hostCmp.setActiveItem(nextIndex);
},
init: function(cmp){
this.hostCmp = cmp;
},
start: function(){
setInterval ( Ext.createDelegate(this.nextCard,this),this.delay);
}
});
i dont understand how I would call the start function. carousel.start() will not work, carousel.plugins[0].start() will. what is the alternative?
thanks in advance.

mitchellsimoens
6 Dec 2010, 7:12 AM
You need to have a constructor function.


Ext.xwave.SelfRotatingCarousel = Ext.extend(Ext.util.Observable, {
delay: 3000,
constructor: fucntion(config) {
config = config || {};
Ext.apply(this, config);
},
init: function(parent){
this.hostCmp = parent;
parent.on("destroy", this.onDestroy, this);
},
onDestroy: function() {
//delete any memory leaks
delete this.hostCmp;
},
nextCard: function(){
var curIndex = this.hostCmp.getActiveIndex();
var nextIndex = (++curIndex) % this.hostCmp.items.length;
this.hostCmp.setActiveItem(nextIndex);
},
start: function(){
setInterval ( Ext.createDelegate(this.nextCard,this),this.delay);
}
});

grgur
12 Dec 2010, 2:28 AM
I think my revision will provide what you guys wanted.
The code is pretty straight forward. All the functions are binded to the carousel, not the plugin.

Almost forgot, thanks to the gkatz for the original code.



Ext.ns('Ext.ux');
Ext.ux.SelfRotatingCarousel = Ext.extend(Ext.util.Observable, {
delay: 3000,
init: function(parent) {
Ext.apply(parent, {
rotorDelay: this.delay,
rotorNextCard: function(){
if (!this.isVisible()) return;
var curIndex = this.getActiveIndex();
var nextIndex = (++curIndex) % this.items.length;
this.setActiveItem(nextIndex);
},
rotorStart: function() {
this.rotorInterval = setInterval ( Ext.createDelegate(this.rotorNextCard,this),this.rotorDelay);
if (!this.rotorStarted) this.rotorStarted = true;
},
rotorStop: function() {
this.rotorStarted = false;
clearInterval(this.rotorInterval);
},
rotorReset: function(restart) {
this.setActiveItem(0);
if (restart && !this.rotorStarted) this.rotorStart();
}
});
parent.on('deactivate', parent.rotorStop, parent);
parent.on('activate',parent.rotorStart,parent);
}
});
Ext.preg('selfRotatingCarousel',Ext.ux.SelfRotatingCarousel);

gkatz
11 Jan 2011, 1:39 AM
here is the version I curretnly use. small changes are start/stop functionality and autoStart property


Ext.ns('Ext.ux');
Ext.ux.SelfRotatingCarousel = Ext.extend(Ext.util.Observable, {
delay: 3000,
autoStart: false,
nextCard: function(){
var curIndex = this.hostCmp.getActiveIndex();
var nextIndex = (++curIndex) % this.hostCmp.items.length;
this.hostCmp.setActiveItem(nextIndex);
},
init: function(cmp){
this.hostCmp = cmp;
if(this.autoStart){
this.start();
}
this.hostCmp.startRotate = Ext.createDelegate(this.start,this);
this.hostCmp.stopRotate = Ext.createDelegate(this.stop,this);
},
start: function(){
this.theInterval = setInterval ( Ext.createDelegate(this.nextCard,this),this.delay);
},
stop: function(){
clearInterval(this.theInterval);
}
});
Ext.preg('selfRotatingCarousel',Ext.ux.SelfRotatingCarousel);

ganchan
21 Feb 2011, 1:03 AM
hi, this is very simple but good plugin that i'm using on an ipad for a gallery, i'm not a good programmer, but i'd like to implement a function that pause the rotating carousel when you scroll the photos directly, that restart after a wile if you stop scrolling. very simple i hope. if there are any suggestions i would appreciate.
G.

e-mike
17 Feb 2012, 1:09 AM
http://www.sencha.com/forum/showthread.php?150218-image-slide-show-with-carousel-in-sencha-touch-randomly&p=736309&viewfull=1#post736309