https://www.saint-loup.eu/public/js/modules/balise_slide.js

1var Slide = function(el){
2	this._el = $(el);
3	this._timeOut;
4	this._cptSlide = 0;
5	this._numSlide = this._el.getElements(".slide").length;
6	
7	var duration = this._el.get('data-duration');
8	this._el.getElements(".slide").set("morph", {duration: duration ? duration : 1500});
9	
10	maxSlideHeight = 0;
11	maxSlideHeightIndex = 1;
12	
13	this._el.getElements(".slide").each(function(item, index){
14		$(item).setStyle('position', 'absolute');
15		$(item).addClass('Cslide' + (index+1));
16		if(maxSlideHeight < jQuery(item).height()) {
17			maxSlideHeight = jQuery(item).height();
18			maxSlideHeightIndex = (index+1);
19		}
20	});
21	if(this._el.getElement(".slide.Cslide"+maxSlideHeightIndex)){
22		this._el.getElement(".slide.Cslide"+maxSlideHeightIndex).setStyle('position', 'relative');
23	}
24
25	this._tempo = this._el.get('data-tempo') ? this._el.get('data-tempo') : 5000;
26	
27	if(this._numSlide>0){
28		this._tempoSlide();
29		this._activeControl();
30		this._changeSlide(1);
31	}
32}
33
34Slide.prototype = {	
35	_stop:function(){
36		clearTimeout(this._timeOut);
37	},
38	_play:function(){
39		this._stop();
40		this._timeOut = setTimeout(this._tempoSlide.bind(this), this._tempo);
41		
42	},
43	_tempoSlide:function(){
44		this._nextSlide();
45		this._commandPlay();
46	},
47	_previousSlide:function(){
48		this._cptSlide--;
49		if(this._cptSlide < 1) this._cptSlide = this._numSlide;
50		this._changeSlide(this._cptSlide);
51	},
52	_nextSlide:function(){
53		this._cptSlide++;
54		if(this._cptSlide > this._numSlide) this._cptSlide = 1;
55		this._changeSlide(this._cptSlide);
56	},
57	_changeSlide:function(id){
58		this._el.getElements(".slide").morph({"opacity":0});
59		this._el.getElements(".slide").setStyle("z-index", "1");
60		if(this._el.getElement(".slide.Cslide"+id)){
61			this._el.getElement(".slide.Cslide"+id).morph({"opacity":1});
62			this._el.getElement(".slide.Cslide"+id).setStyle("z-index", "50");
63		}
64		this._selectPuce(id);
65		this._switchLegend(id);
66	},
67	_switchSlide:function(id){
68		this._el.getElements(".slide").setStyles({"opacity":0, "z-index":"1"});
69		if(this._el.getElement(".slide.Cslide"+id)){
70			this._el.getElement(".slide.Cslide"+id).setStyles({"opacity":1, "z-index": "50"});
71		}
72		this._selectPuce(id);
73		this._switchLegend(id);
74	},
75	_switchLegend:function(id){
76		if(this._el.getElement(".slide.Cslide"+id)){
77			if(this._el.getElement('.label-current-img')){
78				legende = this._el.getElement(".slide.Cslide"+id).get('data-legend');
79				if(this._el.getElement('.label-current-img'))
80					this._el.getElement('.label-current-img').set('html',legende);
81			}
82		}
83	},
84	_selectPuce:function(id){
85		this._el.getElements(".puce").removeClass("selected");
86		if(this._el.getElement(".pucenum"+id)){
87			this._el.getElement(".pucenum"+id).addClass("selected");
88		}
89	},
90	_commandPlay: function(){
91		this._el.getElements(".commandStop").removeClass("selected");
92		this._play();
93		this._el.getElements(".commandPlay").addClass("selected");
94	},
95	_commandStop: function(){
96		this._el.getElements(".commandPlay").removeClass("selected");
97		this._stop();
98		this._el.getElements(".commandStop").addClass("selected");
99	},
100	_commandPrevious: function(){
101		this._previousSlide();
102		this._commandStop();
103	},
104	_commandNext: function(){
105		this._nextSlide();
106		this._commandStop();
107	},
108	_activeControl:function(){
109		// Puces 
110		this._el.getElements(".puces .puce").each(function(item, index){
111			$(item).addEvent("click", function(index){
112				this._cptSlide = index+1;
113				this._switchSlide(this._cptSlide);
114				this._commandPlay();
115			}.bind(this, index));
116		}.bind(this));
117		
118		// Commandes
119		this._el.getElements(".commandPrevious").addEvent("click", function(){
120			this._commandPrevious();
121		}.bind(this));
122		this._el.getElements(".commandNext").addEvent("click", function(){
123			this._commandNext();
124		}.bind(this));
125		this._el.getElements(".commandPlay").addEvent("click", function(){
126			this._commandPlay();
127		}.bind(this));
128		this._el.getElements(".commandStop").addEvent("click", function(){
129			this._commandStop();
130		}.bind(this));
131	}
132}
133
134$(window).addEvent("load", function(){	
135	var slides = $$(".balise_slide");
136	slides.each(function(item, index){
137    	var slide = new Slide(item);
138    });
139});