https://www.blockenstock.fr/javascript/slider.js

1(function () {
2	var requestAF;
3	function starter(f) {
4		if (window.oxLoaded)
5			window.setTimeout(f, 0);
6		else if (window.addEventListener)
7			window.addEventListener("DOMContentLoaded", f, false);
8		else if (window.attachEvent)
9			window.attachEvent("onload", f);
10	}
11	function setProperty(obj, key, value) {
12		switch (key) {
13			case 'opacity':
14				if ('opacity' in obj.style)
15					obj.style.opacity = value;
16				else if (obj.filters) {
17					obj.style.zoom = 1;
18					obj.style.filter = "alpha(opacity=" + parseInt(value * 100) + ")";
19				}
20				break;
21			default:
22				if (key in obj.style)
23					obj.style[key] = value;
24		}
25	}
26	function setProperties(obj, css, state) {
27		for (var key in css.from) {
28			var value = css.from[key] + (css.to[key] - css.from[key]) / 100 * state;
29			css.after && css.after[key] && (value += css.after[key]);
30			css.before && css.before[key] && (value = css.before[key] + value);
31			setProperty(obj, key, value);
32		}
33	}
34	function addClass(node, className) {
35		if (!node) return;
36		node.className += ((node.className) ? ' ' : '') + className;
37	}
38	function removeClass(node, className) {
39		if (!node) return;
40		node.className = node.className.replace(new RegExp('\s?' + className, 'g'), '');
41	}
42	function hasClass(node, className) {
43		if (!node) return false;
44		return ((' ' + node.className + ' ').indexOf(' ' + className + ' ') >= 0);
45	}
46	function requestAnimationFrame(callBack) {
47		if (requestAF) requestAF(callBack);
48		else window.setTimeout(callBack, 1000 / 60);
49	};
50	function addEventListener(obj, evt, f) {
51		if (window.addEventListener)
52			obj.addEventListener(evt, f, false);
53		else if (window.attachEvent)
54			obj.attachEvent("on" + evt, f);
55	}
56	function querySelectorAll(r, ctx) {
57		if (document.querySelectorAll)
58			return ctx.querySelectorAll(r);
59		if (!document.createStyleSheet)
60			return false;
61		var s = document.createStyleSheet(),
62		a = ctx.all, c = [],
63		r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
64		for (var i = r.length; i--; ) {
65			s.addRule(r[i], 'k:v');
66			for (var j = a.length; j--; )
67				a[j].currentStyle.k && c.push(a[j]);
68			s.removeRule(0);
69		}
70		return c;
71	}
72	function changeBackgroundColor(node, oldOne, newOne) {
73		if (oldOne) node.style.removeProperty('background-color');
74		if (newOne) node.style.backgroundColor = newOne;
75	}
76
77	var sliderHandleActiveClass = 'ox-slider-handle-active',
78		ease = {
79			quadratic: function (t, b, c, d) {
80				t /= d;
81				return c * t * t + b;
82			},
83			linear: function (t, b, c, d) {
84				return c * t / d + b;
85			},
86			cubic: function (t, b, c, d) {
87				t /= d;
88				return c * t * t * t + b;
89			}
90		},
91		effects = {
92			shade: {
93				from: {
94					opacity: 0,
95					top: 0,
96					left: 0
97				},
98				to: {
99					opacity: 1,
100					top: 0,
101					left: 0
102				}
103			},
104			right: {
105				from: {
106					opacity: 1,
107					left: 100,
108					top: 0
109				},
110				to: {
111					opacity: 1,
112					left: 0,
113					top: 0
114				},
115				after: {
116					left: '%'
117				}
118			},
119			left: {
120				from: {
121					opacity: 1,
122					left: -100,
123					top: 0
124				},
125				to: {
126					opacity: 1,
127					left: 0,
128					top: 0
129				},
130				after: {
131					left: '%'
132				}
133			},
134			bottom: {
135				from: {
136					opacity: 1,
137					left: 0,
138					top: 100
139				},
140				to: {
141					opacity: 1,
142					left: 0,
143					top: 0
144				},
145				after: {
146					top: '%'
147				}
148			},
149			top: {
150				from: {
151					opacity: 1,
152					left: 0,
153					top: -100
154				},
155				to: {
156					opacity: 1,
157					left: 0,
158					top: 0
159				},
160				after: {
161					top: '%'
162				}
163			},
164			rotate: {
165				from: {
166					opacity: 0,
167					left: 0,
168					top: 0,
169					transform: 180
170				},
171				to: {
172					opacity: 1,
173					left: 0,
174					top: 0,
175					transform: 0
176				},
177				before: {
178					transform: 'rotatey('
179				},
180				after: {
181					transform: 'deg)'
182				}
183			}
184		};
185
186	function OxSlideShow(slider, options) {
187		this.slider = slider;
188		this.labelList = [];
189		this.tabList = [];
190
191		this.rate = options.rate || 3;
192		this.time = options.time || 5;
193		this.ease = options.ease || ease.linear;
194		this.cssOut = options.cssOut || effects.shade;
195		this.cssIn = options.cssIn || this.cssOut;
196		this.previewMode = options.previewMode || false;
197
198		this.checkAttributes();
199
200		this.time *= 1000;
201
202		this.addSlides();
203		this.buildSlides();
204		this.initSlides();
205	}
206
207	OxSlideShow.prototype.checkAttributes = function () {
208		var rateAttr = this.slider.getAttribute('data-rate'),
209			timeAttr = this.slider.getAttribute('data-time'),
210			easeAttr = this.slider.getAttribute('data-ease'),
211			cssInAttr = this.slider.getAttribute('data-cssIn'),
212			cssOutAttr = this.slider.getAttribute('data-cssOut'),
213			activeColorAttr = this.slider.getAttribute('data-activeColor'),
214			defaultColorAttr = this.slider.getAttribute('data-defaultColor');
215
216		rateAttr = parseInt(rateAttr, 10);
217		if (!isNaN(rateAttr) && rateAttr > 0) this.rate = rateAttr;
218		timeAttr = parseFloat(timeAttr);
219		if (!isNaN(timeAttr) && timeAttr > 0) this.time = timeAttr;
220		if (easeAttr && ease[easeAttr]) this.ease = ease[easeAttr];
221		if (cssInAttr && effects[cssInAttr]) this.cssIn = effects[cssInAttr];
222		if (cssOutAttr && effects[cssOutAttr]) this.cssOut = effects[cssOutAttr];
223
224		if (activeColorAttr) this.activeColor = activeColorAttr;
225		if (defaultColorAttr) this.defaultColor = defaultColorAttr;
226	};
227
228	OxSlideShow.prototype.addSlides = function () {
229		this.tabsContainer = querySelectorAll('.ox-slider-pages', this.slider)[0];
230		var anchors = querySelectorAll('.ox-slider-handle-link', this.slider);
231		for (var i = 0, len = anchors.length; i < len; i++) {
232			this.labelList.push(anchors[i]);
233			if (!this.previewMode) {

234				changeBackgroundColor(anchors[i], true, i == 0 ? this.activeColor : this.defaultColor);
235				addEventListener(anchors[i], 'click', createSliderHandleLinkHandler(this, i));
236			}
237		}
238	};
239
240	function createSliderHandleLinkHandler(slider, handleIdx) {
241		return function (evt) {
242			slider.nextSlide(handleIdx);
243			evt.stopPropagation && evt.stopPropagation();
244		};
245	}
246
247	OxSlideShow.prototype.buildSlides = function () {
248		var self = this;
249
250		function hover(evt) {
251			self.dontMove = true;
252			//console.log('hover self.dontMove = true');
253		}
254
255		function leave(evt) {
256			if (!hasClass(evt.relatedTarget, 'ox-slider-handle-link')) {
257				self.dontMove = false;
258				//console.log('hover self.dontMove = false');
259			}
260		}
261
262		var pages = querySelectorAll('.ox-slider-page', this.slider);
263		for (var idx = 0, len = pages.length; idx < len; idx++) {
264			var div = pages[idx];
265
266			//ASK NF! div.style.position = 'absolute';
267
268			this.tabList.push(div);
269
270			if (!this.previewMode) {
271				addEventListener(div, 'mouseover', hover);
272				addEventListener(div, 'mouseout', leave);
273			}
274		}
275		//console.log('OxSlideShow.prototype.buildSlides');
276		return true;
277	};
278	OxSlideShow.prototype.initSlides = function () {
279		this.dontMove = false;
280
281		this.position = 0;
282		if (this.previewMode) {
283			for (var idx = 0, len = this.labelList.length; idx < len; idx++) {
284				active = false;
285				if (hasClass(this.labelList[idx].parentNode, sliderHandleActiveClass)) {
286					this.position = idx;
287					active = true;
288				}
289				changeBackgroundColor(this.labelList[idx], true, active ? this.activeColor : this.defaultColor);
290			}
291		} else {
292			var activeHandle = querySelectorAll('.' + sliderHandleActiveClass, this.slider);
293			if (activeHandle && activeHandle.length) removeClass(activeHandle[0], sliderHandleActiveClass);
294			addClass(this.labelList[this.position].parentNode, sliderHandleActiveClass);
295		}
296
297		var s = this.tabList[this.position];
298		//ASK NF! setProperties(s, this.cssIn, 100);
299		//ASK NF! s.style.position = 'relative';
300		//ASK NF! s.style.display = 'block';
301
302		this.startAutoSlide();
303		//console.log('OxSlideShow.prototype.initSlides');
304		return true;
305	};
306	OxSlideShow.prototype.startAutoSlide = function () {
307		var self = this;
308		if (!this.tabMode && !this.previewMode) {
309			if (this.timer) {
310				clearTimeout(this.timer);
311				this.timer = 0;
312			}
313			this.timer = setTimeout(function () {
314				self.autoSlide();
315			}, this.time);
316		}
317	};
318	OxSlideShow.prototype.autoSlide = function () {
319		this.startAutoSlide();
320		this.nextSlide();
321		//console.log('OxSlideShow.prototype.autoSlide');
322	};
323	OxSlideShow.prototype.next = function (id) {
324		this.nextSlide();
325		return this.position;
326	}
327	OxSlideShow.prototype.previous = function (id) {
328		var position = this.position;
329		this.nextSlide(position > 0 ? --position : this.tabList.length - 1);
330		return this.position;
331	}
332	OxSlideShow.prototype.nextSlide = function (id, animation) {
333		var useNextSlide = (typeof (id) === 'undefined');
334		//console.log('nextSlide useNextSlide', useNextSlide, 'id', id);
335		if (this.dontMove && useNextSlide)
336			return;
337		this.previous = this.position;
338		this.position = useNextSlide ? (++this.position % this.tabList.length) : id;
339
340		if (this.previous === this.position)
341			return;
342
343		if (!useNextSlide) this.startAutoSlide();
344
345		var p, j, self = this,
346			i = 0,
347			reset,
348			rate = this.rate,
349			cssOut = this.cssOut,
350			cssIn = this.cssIn;
351
352		removeClass(this.labelList[this.previous].parentNode, sliderHandleActiveClass);
353		changeBackgroundColor(this.labelList[this.previous], this.activeColor, this.defaultColor);
354
355		addClass(this.labelList[this.position].parentNode, sliderHandleActiveClass);
356		changeBackgroundColor(this.labelList[this.position], this.defaultColor, this.activeColor);
357
358		var n = this.tabList[this.position];
359
360		var previousStyle, nOldStyle, pOldStyle;
361
362		p = this.tabList[this.previous];
363
364		if (this.previewMode) {
365			previousStyle = this.slider.getAttribute('style') || '';
366			this.slider.style.overflow = 'hidden';
367			nOldStyle = n.getAttribute('style') || '';
368			pOldStyle = p.getAttribute('style') || '';
369		}
370
371		setProperties(p, cssOut, 0);
372		p.style.zIndex = 1;
373		p.style.position = 'relative';
374		//console.log('cssOut', cssOut);
375		if (cssOut === effects.top || cssOut === effects.bottom || cssIn === effects.top || cssIn === effects.bottom) {
376			var height = p.style.height;
377			//console.log('height', height);
378			if (!height) {
379				var rect = p.getBoundingClientRect();
380				height = (rect.height || rect.bottom - rect.top) + 'px';
381			}
382			if (height) {
383				reset = p.parentNode;
384				reset.style.height = height;
385			}
386		}
387
388		n.style.position = (p) ? 'absolute' : 'relative';
389		setProperties(n, cssIn, 100);
390		n.style.display = 'block';
391		n.style.zIndex = 2;
392
393		if (animation == false) {
394			i = 100;
395		}
396		showNext();
397
398		function showNext() {
399			i += rate;
400			j = self.ease(i, 0, 100, 100);
401
402			setProperties(n, cssIn, j);
403			setProperties(p, cssOut, 100 - j);
404			if (i <= 100)
405				requestAnimationFrame(showNext);
406			else
407				end();
408		}
409		function restoreStyle(node, style) {
410			if (style && style.length) node.setAttribute('style', style);
411			else node.removeAttribute('style');
412		}
413
414		function end() {
415			setProperties(n, cssIn, 100);
416
417			if (reset) reset.style.removeProperty('height');
418
419			p.filters && p.style.removeAttribute('filter');
420			n.filters && n.style.removeAttribute('filter');
421
422			n.style.position = 'relative';
423			p.style.position = 'absolute';
424
425			if (self.previewMode) {
426				restoreStyle(self.slider, previousStyle);
427				restoreStyle(n, nOldStyle);
428				restoreStyle(p, pOldStyle);
429				n.style.display = 'block';
430			}
431			p.style.display = 'none';
432		}
433
434		return true;
435	};
436
437	if (window.oxWebBlockEditor) window.OxSlideShow = OxSlideShow;
438	else

439		starter(function () {
440			var sliders = querySelectorAll('.ox-slider', document),
441				options = {
442					time: 5,
443					rate: 3,
444					tabMode: false,
445					cssIn: effects.shade,
446					cssOut: effects.shade,
447					ease: ease.linear
448				};
449			requestAF = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
450			for (var idx = 0, len = sliders.length; idx < len; idx++) {
451				var slideShow = new OxSlideShow(sliders[idx], options);
452			}
453			window.oxLoaded = true;
454		});
455})();