https://www.difulvioracing.it/log/modules/mod_lofarticlesslideshow/assets/mod_lofarticlesslideshow_jl15x.js

1/**
2
3 * @version		$Id:  $Revision
4
5 * @package		mootool
6
7 * @subpackage	lofslidernews
8
9 * @copyright	Copyright (C) JAN 2010 LandOfCoder.com <@emai:[email protected]>. All rights reserved.
10
11 * @website     http://landofcoder.com
12
13 * @license		This plugin is dual-licensed under the GNU General Public License and the MIT License 
14
15 */
16
17 Element.Events.extend({
18
19	'wheelup': {
20
21		type: Element.Events.mousewheel.type,
22
23		map: function(event){
24
25			event = new Event(event);
26
27			if (event.wheel >= 0) this.fireEvent('wheelup', event)
28
29		}
30
31	},
32
33	'wheeldown': {
34
35		type: Element.Events.mousewheel.type,
36
37		map: function(event){
38
39			event = new Event(event);
40
41			if (event.wheel <= 0) this.fireEvent('wheeldown', event)
42
43		}
44
45	}
46
47});
48
49 ////
50
51if( typeof(LofSlideshow) == 'undefined' ){
52
53	var LofSlideshow = new Class( {
54
55		initialize:function( eMain, eNavigator, eNavOuter, options ){
56
57			this.setting = Object.extend({
58
59				autoStart			: true,
60
61				descStyle	    	: 'sliding',
62
63				mainItemSelector    : 'div.lof-main-item',
64
65				navSelector  		: 'li' ,
66
67				navigatorEvent		: 'click',
68
69				interval	  	 	:  2000,
70
71				auto			    : false,
72
73				navItemsDisplay		: 3,
74
75				startItem			: 0,
76
77				navItemHeight		: 100,
78
79				navItemWidth 		: 310
80
81			}, options || {} );
82
83			this.currentNo  = 0;
84
85			this.nextNo     = null;
86
87			this.previousNo = null;
88
89			this.fxItems	= [];	
90
91			this.minSize 	= 0;
92
93			if( $defined(eMain) ){
94
95				this.slides	   = eMain.getElements( this.setting.mainItemSelector );
96
97				this.maxWidth  = eMain.getStyle('width').toInt();
98
99
100
101				this.maxHeight = eMain.getStyle('height').toInt();
102
103				this.styleMode = this.__getStyleMode();  
104
105				var fx =  Object.extend({waiting:false}, this.setting.fxObject );
106
107				this.slides.each( function(item, index) {
108
109					item.setStyles( eval('({"'+this.styleMode[0]+'": index * this.maxSize,"'+this.styleMode[1]+'":Math.abs(this.maxSize),"display" : "block"})') );		
110
111					this.fxItems[index] = new Fx.Styles( item,  fx );
112
113				}.bind(this) );
114
115				if( this.styleMode[0] == 'opacity' || this.styleMode[0] =='z-index' ){
116
117					this.slides[0].setStyle(this.styleMode[0],'1');
118
119				}
120
121
122
123				eMain.addEvents( { 'mouseenter' : this.stop.bind(this),
124
125							   	   'mouseleave' :function(e){ 
126
127								    if(  this.setting.auto ){
128
129										this.play( this.setting.interval,'next', true );
130
131									} }.bind(this) } );
132
133			}
134
135			if( $defined(eNavigator) && $defined(eNavOuter) ){
136
137				this.navigatorItems = eNavigator.getElements( this.setting.navSelector );
138
139				if( this.setting.navItemsDisplay > this.navigatorItems.length ){
140
141					this.setting.navItemsDisplay = this.navigatorItems.length;	
142
143				}
144
145				eNavOuter.setStyles( {'height':this.setting.navItemsDisplay*this.setting.navItemHeight,
146
147								   'width':this.setting.navItemWidth});
148
149				
150
151
152
153				
154
155				this.navigatorFx = new Fx.Style( eNavigator, 'top',
156
157												{transition:Fx.Transitions.Quad.easeInOut,duration:800} );
158
159				 if(  this.setting.auto ){
160
161					this.registerMousewheelHandler( eNavigator ); // allow to use the srcoll
162
163				 }
164
165				this.navigatorItems.each( function(item,index) {
166
167					item.addEvent( this.setting.navigatorEvent, function(){													 
168
169						this.jumping( index, true );
170
171						this.setNavActive( index, item );	
172
173					}.bind(this) ); 
174
175						item.setStyles( { 'height':this.setting.navItemHeight,
176
177									  	  'width'  : this.setting.navItemWidth} );		
178
179				}.bind(this) );
180
181				this.setNavActive( 0 );
182
183			}
184
185		},
186
187		navivationAnimate:function( currentIndex ) { 
188
189			if (currentIndex <= this.setting.startItem 
190
191				|| currentIndex - this.setting.startItem >= this.setting.navItemsDisplay-1) {
192
193					this.setting.startItem = currentIndex - this.setting.navItemsDisplay+2;
194
195					if (this.setting.startItem < 0) this.setting.startItem = 0;
196
197					if (this.setting.startItem >this.slides.length-this.setting.navItemsDisplay) {
198
199						this.setting.startItem = this.slides.length-this.setting.navItemsDisplay;
200
201					}
202
203			}		
204
205			this.navigatorFx.stop().start( -this.setting.startItem*this.setting.navItemHeight );	
206
207		},
208
209		setNavActive:function( index, item ){
210
211			if( $defined(this.navigatorItems) ){ 
212
213				this.navigatorItems.removeClass('active');
214
215				this.navigatorItems[index].addClass('active');	
216
217				this.navivationAnimate( this.currentNo );	
218
219			}
220
221		},
222
223		__getStyleMode:function(){
224
225			switch( this.setting.direction ){
226

227				case 'opacity': this.maxSize=0; this.minSize=1; return ['opacity','opacity'];
228
229				case 'vrup':    this.maxSize=this.maxHeight;    return ['top','height'];
230
231				case 'vrdown':  this.maxSize=-this.maxHeight;   return ['top','height'];
232
233				case 'hrright': this.maxSize=-this.maxWidth;    return ['left','width'];
234
235				case 'hrleft':
236
237				default: this.maxSize=this.maxWidth; return ['left','width'];
238
239			}
240
241		},
242
243		registerMousewheelHandler:function( element ){ 
244
245			element.addEvents({
246
247				'wheelup': function(e) {
248
249					
250
251					e = new Event(e).stop(); 
252
253						this.previous(true);
254
255				}.bind(this),
256
257			 
258
259				'wheeldown': function(e) {
260
261					e = new Event(e).stop();
262
263				
264
265					this.next(true);
266
267				}.bind(this)
268
269			} );
270
271		},
272
273		registerButtonsControl:function( eventHandler, objects, isHover ){
274
275			if( $defined(objects) && this.slides.length > 1 ){
276
277				for( var action in objects ){ 
278
279					if( $defined(this[action.toString()])  && $defined(objects[action]) ){
280
281						objects[action].addEvent( eventHandler, this[action.toString()].bind(this, [true]) );
282
283					}
284
285				}
286
287			}
288
289			return this;	
290
291		},
292
293		start:function( isStart, obj ){
294
295			this.setting.auto = isStart;
296
297			// if use the preload image.
298
299			if( obj ) {
300
301				this.preloadImages( this.onComplete(obj) );
302
303			} else {
304
305				if( this.setting.auto && this.slides.length > 1 ){
306
307						this.play( this.setting.interval,'next', true );}	
308
309			}
310
311		},
312
313		onComplete:function( obj ){
314
315			(function(){																
316
317					new Fx.Style( obj ,'opacity',{ transition:Fx.Transitions.Quad.easeInOut,
318
319														 duration:800} ).start(1,0)}).delay(600);
320
321			if( this.setting.auto && this.slides.length > 1 ){
322
323				this.play( this.setting.interval,'next', true );}	
324
325			
326
327		},
328
329		preloadImages:function( _options ){
330
331			var options=Object.extend({
332
333									  onComplete:function(){},
334
335									  onProgress:function(){}
336
337									  },_options||{});
338
339			var loaded=[];
340
341			var counter=0;
342
343			var self = this;
344
345			this.slides.getElements('img').each( function(image, index){
346
347				if( !image.complete ){				  
348
349					image.onload =function(){
350
351						count++;
352
353						if( count >= images.length ){
354
355							self.onComplete();
356
357						}
358
359					}
360
361					image.onerror =function(){ 
362
363						count++;
364
365						if( count >= images.length ){
366
367							self.onComplete();
368
369						}	
370
371					}
372
373				}else {
374
375					count++;
376
377					if( count >= images.length ){
378
379						self.onComplete();
380
381					}	
382
383				}
384
385			} );
386
387				
388
389		},
390
391		onProcessing:function( manual, start, end ){			
392
393			this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
394
395			this.nextNo 	= this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);				
396
397			return this;
398
399		},
400
401		finishFx:function( manual ){
402
403			if( manual ) this.stop();
404
405			if( manual && this.setting.auto ){ 
406
407				this.setNavActive( this.currentNo );	
408
409				this.play( this.setting.interval,'next', true );
410
411			}		
412
413		},
414
415		getObjectDirection:function( start, end ){
416
417			return eval("({'"+this.styleMode[0]+"':["+start+", "+end+"]})");	
418
419		},
420
421		fxStart:function( index, obj ){
422
423			this.fxItems[index].stop().start( obj );
424
425			return this;
426
427		},
428
429		jumping:function( no, manual ){
430
431			this.stop();
432
433			if( this.currentNo == no ) return;		
434
435			this.onProcessing( null, manual, 0, this.maxSize )
436
437				.fxStart( no, this.getObjectDirection(this.maxSize , this.minSize) )
438
439				.fxStart( this.currentNo, this.getObjectDirection(this.minSize,  -this.maxSize) )
440
441				.finishFx( manual );	
442
443				this.currentNo  = no;
444
445		},
446
447		next:function( manual , item){
448
449			this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);	
450
451			this.onProcessing( item, manual, 0, this.maxSize )
452
453				.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ,this.minSize) )
454
455				.fxStart( this.previousNo, this.getObjectDirection(this.minSize, -this.maxSize) )
456
457				.finishFx( manual );
458
459		},
460
461		previous:function( manual, item ){
462
463			this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
464
465			this.onProcessing( item, manual, -this.maxWidth, this.minSize )
466
467				.fxStart( this.nextNo, this.getObjectDirection(this.minSize, this.maxSize) )
468
469				.fxStart( this.currentNo,  this.getObjectDirection(-this.maxSize, this.minSize) )
470
471				.finishFx( manual	);			
472
473		},
474
475		play:function( delay, direction, wait ){
476
477			this.stop(); 
478
479			if(!wait){ this[direction](false); }
480
481			this.isRun = this[direction].periodical(delay,this,true);
482
483		},stop:function(){; $clear(this.isRun ); }
484
485	} );
486
487}
488