-
Notifications
You must be signed in to change notification settings - Fork 3
/
_class.noobSlide.js
245 lines (227 loc) · 7.21 KB
/
_class.noobSlide.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
/*
Author:
luistar15, <leo020588 [at] gmail.com>
Rainer Ilgen <[email protected]> Extention for Fading
License:
MIT License
Class
noobSlide (rev.03-11-10)
noobSlide Extention for Fading (rev. 23-10-08)
Arguments:
Parameters - see Parameters below
Parameters:
box: dom element | required
items: dom collection | required
size: int | item size (px) | default: 240
mode: string | 'horizontal', 'vertical' | default: 'horizontal'
fade: boolean | default: false
addButtons:{
previous: single dom element OR dom collection| default: null
next: single dom element OR dom collection | default: null
play: single dom element OR dom collection | default: null
playback: single dom element OR dom collection | default: null
stop: single dom element OR dom collection | default: null
}
button_event: string | event type | default: 'click'
handles: dom collection | default: null
handle_event: string | event type| default: 'click'
fxOptions: object | Fx.Tween options | default: {duration:500,wait:false}
interval: int | for periodical | default: 5000
autoPlay: boolean | default: false
onWalk: event | pass arguments: currentItem, currentHandle | default: null
startItem: int | default: 0
Properties:
box: dom element
items: dom collection
size: int
mode: string
fade: boolean
buttons: object
button_event: string
handles: dom collection
handle_event: string
previousIndex: int
nextIndex: int
fx: Fx.Tween instance
interval: int
autoPlay: boolean
onWalk: function
Methods:
previous(manual): walk to previous item
manual: bolean | default:false
next(manual): walk to next item
manual: bolean | default:false
play (interval,direction,wait): auto walk items
interval: int | required
direction: string | "previous" or "next" | required
wait: boolean | required
stop(): stop auto walk
walk(item,manual,noFx): walk to item
item: int | required
manual: bolean | default:false
noFx: boolean | default:false
addHandleButtons(handles):
handles: dom collection | required
addActionButtons(action,buttons):
action: string | "previous", "next", "play", "playback", "stop" | required
buttons: dom collection | required
Requires:
mootools 1.2 core
*/
var noobSlide = new Class({
initialize: function(params){
this.items = params.items;
this.mode = params.mode || 'horizontal';
this.fade = params.fade || false;
this.modes = {horizontal:['left','width'], vertical:['top','height']};
this.size = params.size || 240;
this.box = params.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');
this.button_event = params.button_event || 'click';
this.handle_event = params.handle_event || 'click';
this.onWalk = params.onWalk || null;
this.currentIndex = null;
this.previousIndex = null;
this.nextIndex = null;
this.interval = params.interval || 5000;
this.autoPlay = params.autoPlay || false;
this._play = null;
this.handles = params.handles || null;
if(this.handles){
this.addHandleButtons(this.handles);
}
this.buttons = {
previous: [],
next: [],
play: [],
playback: [],
stop: []
};
if(params.addButtons){
for(var action in params.addButtons){
this.addActionButtons(action, $type(params.addButtons[action])=='array' ? params.addButtons[action] : [params.addButtons[action]]);
}
}
if(this.fade)
{
//Prepare Fading
this.orderItems()
this.fading((params.startItem||0),true,true);
}
else
{
//original Sliding
this.fx = new Fx.Tween(this.box,$extend((params.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));
this.walk((params.startItem||0),true,true);
}
},
//new function for Ordering the Items for Fading
orderItems: function() {
for(i=0;i<this.items.length;i++)
{
this.items[i].setStyle('position', 'absolute')
this.items[i].setStyle('left', '0px');
this.items[i].setStyle('z-index', i+1);
if(i>0)
{
this.items[i].fade('out');
}
}
},
addHandleButtons: function(handles){
for(var i=0;i<handles.length;i++){
if(this.fade)
{
handles[i].addEvent(this.handle_event,this.fading.pass([i,true],this));
}
else
{
handles[i].addEvent(this.handle_event,this.walk.pass([i,true],this));
}
}
},
addActionButtons: function(action,buttons){
for(var i=0; i<buttons.length; i++){
switch(action){
case 'previous': buttons[i].addEvent(this.button_event,this.previous.pass([true],this)); break;
case 'next': buttons[i].addEvent(this.button_event,this.next.pass([true],this)); break;
case 'play': buttons[i].addEvent(this.button_event,this.play.pass([this.interval,'next',false],this)); break;
case 'playback': buttons[i].addEvent(this.button_event,this.play.pass([this.interval,'previous',false],this)); break;
case 'stop': buttons[i].addEvent(this.button_event,this.stop.create({bind:this})); break;
}
this.buttons[action].push(buttons[i]);
}
},
previous: function(manual){
if(this.fade)
{
this.fading((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1),manual);
}
else
{
this.walk((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1),manual);
}
},
next: function(manual){
if(this.fade)
{
this.fading((this.currentIndex<this.items.length-1 ? this.currentIndex+1 : 0),manual);
}
else
{
this.walk((this.currentIndex<this.items.length-1 ? this.currentIndex+1 : 0),manual);
}
},
play: function(interval,direction,wait){
this.stop();
if(!wait){
this[direction](false);
}
this._play = this[direction].periodical(interval,this,[false]);
},
stop: function(){
$clear(this._play);
},
walk: function(item,manual,noFx){
if(item!=this.currentIndex){
this.currentIndex=item;
this.previousIndex = this.currentIndex + (this.currentIndex>0 ? -1 : this.items.length-1);
this.nextIndex = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);
if(manual){
this.stop();
}
if(noFx){
this.fx.cancel().set((this.size*-this.currentIndex)+'px');
}else{
this.fx.start(this.size*-this.currentIndex);
}
if(manual && this.autoPlay){
this.play(this.interval,'next',true);
}
if(this.onWalk){
this.onWalk((this.items[this.currentIndex] || null), (this.handles && this.handles[this.currentIndex] ? this.handles[this.currentIndex] : null));
}
}
},
//Fading
fading: function(item,manual,noFx){
if(item!=this.currentIndex){
this.lastIndex=this.currentIndex;
this.currentIndex=item;
this.previousIndex = this.currentIndex + (this.currentIndex>0 ? -1 : this.items.length-1);
this.nextIndex = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);
if(manual){
this.stop();
}
if(!noFx){
this.items[this.lastIndex].fade('out');
this.items[this.currentIndex].fade('in');
}
if(manual && this.autoPlay){
this.play(this.interval,'next',true);
}
if(this.onWalk){
this.onWalk((this.items[this.currentIndex] || null), (this.handles && this.handles[this.currentIndex] ? this.handles[this.currentIndex] : null));
}
}
}
});