https://www.evolutionplus.ch/w3/js/dunebox_v2/dunebox_v2.js

1/*
2 * DuneBox V2
3 *
4 */
5$.fn.duneBoxV2 = function (options) {
6	"use strict";
7	options = options || {};
8
9	return this.each(function () {
10		var that = $(this);
11
12		// if ( !that.hasAttr("data-duneBoxBind") ) {
13			that.attr("data-duneBoxBind", 1);
14			that.click(function (e) {
15				e.preventDefault();
16				e.stopPropagation();
17
18				$.duneBoxV2.open(that.attr("href"),options,that);
19			});
20		// }
21
22	});
23};
24
25$.duneBoxV2 = {
26
27	currentIncrement: 0,
28	domStructureDefault : 	"<div class='dunebox-v2'>" +
29								"<div class='dunebox-controls'>" +
30								"	<div class='dunebox-controls-close'><button data-dunebox-action='close'><i class='fa fa-2x fa-window-close' aria-hidden='true'></i></button></div>" +
31								"</div>" +
32								"<div class='dunebox-title' data-dunebox-title></div>" +
33								"<div class='dunebox-content' data-dunebox-content></div>" +
34							"</div>",
35
36	/**
37	 * Open duneBox
38	 * @param href Href, or elementSelector or image ...
39	 * @param options
40	 * @param button Used in internal process
41	 */
42	open: function (href,options,button) {
43		if (button.data('dunebox-opening')) {
44			return;
45		}
46
47		button.data('dunebox-opening', true);
48
49		$.duneBoxV2.currentIncrement++;
50
51		$.duneBoxV2.getOptions(href,options,button).done(function (options) {
52
53			button.data('dunebox-opening', false);
54
55			var goToPrevious = function () {
56				$('button[data-dunebox-gallery-action="previous"]').click();
57			};
58
59			var goToNext = function () {
60				$('button[data-dunebox-gallery-action="next"]').click();
61			};
62
63			var checkForImgResize = function() {
64				if( $.duneBoxV2.isFor(button) === "mobile" ) {
65					$(elem).find('[data-dunebox-gallery-controls]').addClass("isMinified");
66				}
67			};
68
69			var generateGalleryVignettes = function (options) {
70
71				/* DISABLE THE DRAG ON IMG */
72				$('.dunebox-v2 img').on('dragstart', function(event) { event.preventDefault(); });
73
74				var imgWidth 	= $("div.dunebox-image img").width();
75				var imgHeight 	= $("div.dunebox-image img").height();
76
77				$('button[data-dunebox-gallery-action="previous"]').click();
78
79
80				$("div.dunebox-image").append( "<map name='imageAreas'><area shape='rect' coords='0,0,"+(imgWidth/2)+","+imgHeight+"' alt='Previous' class='area_previous'><area shape='rect' coords='"+(imgWidth/2)+",0,"+imgWidth+","+imgHeight+"' alt='Next' class='area_next'></map>" );
81
82				$(".dunebox-v2").append("<div data-dunebox-gallery-controls></div>");
83
84				$("[data-dunebox-gallery-controls]").append('<div data-dunebox-gallery-controls-left><button class="" data-dunebox-gallery-action="previous"><i class="fa fa-2x fa-arrow-left" aria-hidden="true"></i></button></div>');
85				$("[data-dunebox-gallery-controls]").append('<div data-dunebox-gallery-miniatures><div data-dunebox-gallery-miniatures-content></div></div>');
86				$("[data-dunebox-gallery-controls]").append('<div data-dunebox-gallery-controls-right><button class="" data-dunebox-gallery-action="next"><i class="fa fa-2x fa-arrow-right" aria-hidden="true"></i></button></div>');
87
88				var UrlAlreadyFound = [];
89				var getOptionsIndex = 0;
90				var getOptionsMaxIndex = $('[data-dunebox-gallery="'+options.gallery+'"], [gal="'+options.gallery+'"]').length;
91
92				$('[data-dunebox-gallery="'+options.gallery+'"], [gal="'+options.gallery+'"]').each(function (index) {
93					if(UrlAlreadyFound.indexOf($(this).attr('href'),0)<0) {
94						UrlAlreadyFound.push($(this).attr('href'));
95
96						var classToAdd = "";
97
98						$('[data-dunebox-gallery-miniatures-content]').append("<div data-dunebox-gallery-element data-dunebox-gallery-element-index='"+(index+1)+"'></div>");
99						$.duneBoxV2.getOptions( $(this).attr('href') ).done(function (optionsElement) {
100							if (optionsElement.imageContent) {
101								if (optionsElement.imageContent.src === options.imageContent.src) {
102									classToAdd = "active";
103								}
104								$('[data-dunebox-gallery-element-index="'+(index+1)+'"]').append(optionsElement.imageContent).addClass(classToAdd);
105							}
106							getOptionsIndex++;
107
108							if (getOptionsIndex === getOptionsMaxIndex) {
109								// Recalc index pour éviter les trous
110								$("[data-dunebox-gallery-element-index]").each(function (key, value) {
111									$(this).attr("data-dunebox-gallery-element-index", key+1);
112								});
113							}
114						});
115					} else {
116						getOptionsMaxIndex--;
117					}
118				});
119

120				elem.find("[data-dunebox-gallery-element]").off("click").click(function (e) {
121					e.preventDefault();
122					e.stopPropagation();
123
124					$('[data-dunebox-gallery-element]').removeClass("active");
125					var href = $(this).find('img').attr('src');
126					$('[data-dunebox-content] .dunebox-image img').attr("src", href).load(function () {
127						// checkIfPortrait(this, options);
128						checkForImgResize();
129					});
130					$(this).addClass('active');
131				});
132
133				if ( elem.find('[data-dunebox-gallery-controls]').length ) {
134					elem.find("[data-dunebox-gallery-action]").off("click").click(function (e) {
135						e.preventDefault();
136						e.stopPropagation();
137
138						var actualPicture 	= parseInt($("[data-dunebox-gallery-element].active").attr("data-dunebox-gallery-element-index"));
139						var totalPicture	= parseInt($("[data-dunebox-gallery-element]").length);
140						var href 			= "";
141
142
143						var containerWidth = elem.find('[data-dunebox-gallery-miniatures-content]').width();
144
145						var divOffsetLeft 	= elem.find('[data-dunebox-gallery-element-index="'+actualPicture+'"]').offset().left;
146						var divWidth 		= elem.find('[data-dunebox-gallery-element-index="'+actualPicture+'"]').outerWidth();
147
148						$('[data-dunebox-gallery-element]').removeClass("active");
149
150						if ( $(this).attr("data-dunebox-gallery-action") === "next" && actualPicture === totalPicture ) {
151
152							elem.find('[data-dunebox-gallery-miniatures-content]').animate({
153								scrollLeft: "-=30000000000px"
154							});
155
156							/* MOVE TO THE FIRST */
157							href = elem.find('[data-dunebox-gallery-element-index="1"] img').attr("src");
158							elem.find('[data-dunebox-gallery-element-index="1"]').addClass("active");
159
160						}else if ( $(this).attr("data-dunebox-gallery-action") === "previous" && actualPicture === 1) {
161
162							elem.find('[data-dunebox-gallery-miniatures-content]').animate({
163								scrollLeft: "+=30000000000px"
164							});
165
166							/* MOVE TO THE LAST */
167							href = elem.find('[data-dunebox-gallery-element-index="'+totalPicture+'"] img').attr("src");
168							elem.find('[data-dunebox-gallery-element-index="'+totalPicture+'"]').addClass("active");
169
170						}else {
171							if ( $(this).attr("data-dunebox-gallery-action") === "next" ) {
172								divOffsetLeft 	= elem.find('[data-dunebox-gallery-element-index="'+(actualPicture+1)+'"]').offset().left;
173								href = elem.find('[data-dunebox-gallery-element-index="'+(actualPicture+1)+'"] img').attr("src");
174								elem.find('[data-dunebox-gallery-element-index="'+(actualPicture+1)+'"]').addClass("active");
175							}else if ( $(this).attr("data-dunebox-gallery-action") === "previous" ) {
176								divOffsetLeft 	= elem.find('[data-dunebox-gallery-element-index="'+(actualPicture-1)+'"]').offset().left;
177								href = elem.find('[data-dunebox-gallery-element-index="'+(actualPicture-1)+'"] img').attr("src");
178								elem.find('[data-dunebox-gallery-element-index="'+(actualPicture-1)+'"]').addClass("active");
179							}
180
181							if ( (divOffsetLeft) < (divWidth + 100) ) {
182								elem.find('[data-dunebox-gallery-miniatures-content]').animate({
183									scrollLeft: "-=" + divWidth + "px"
184								})
185							}else if ( (divOffsetLeft) > containerWidth - 100 ) {
186								elem.find('[data-dunebox-gallery-miniatures-content]').animate({
187									scrollLeft: "+=" + divWidth + "px"
188								});
189							}
190						}
191
192
193
194						$('[data-dunebox-content] .dunebox-image img').attr("src", href).load(function () {
195							// checkIfPortrait(this, options);
196							checkForImgResize();
197						});
198					});
199
200					$('body').off("keydown").on("keydown", function (e) {
201						if ( e.which === 39) {
202							e.preventDefault();
203							e.stopPropagation();
204							/* DROITE */
205							$("[data-dunebox-gallery-action='next']").click();
206						}else if ( e.which === 37 ) {
207							e.preventDefault();
208							e.stopPropagation();
209							/* GAUCHE */
210							$("[data-dunebox-gallery-action='previous']").click();
211						}else if ( e.which === 27 ) {
212							e.preventDefault();
213							e.stopPropagation();
214							/* ESCAPE */
215							$.duneBoxV2.close($.duneBoxV2.currentIncrement, options);
216						}else {
217							return true;
218						}
219					});
220
221					$(window).resize(function () {
222						checkForImgResize(elem, options);
223					});
224				}
225
226				elem.find("[data-dunebox-content] .dunebox-image").hammer().on("swipeleft swiperight", function(e) {
227					e.preventDefault();
228					e.stopPropagation();
229					if (e.type === "swipeleft") {
230						$('button[data-dunebox-gallery-action="next"]').click();
231					}else if (e.type === "swiperight") {
232						$('button[data-dunebox-gallery-action="previous"]').click();
233					}
234				});
235
236				elem.find("[data-dunebox-content]").on('click', function (e) {
237					e.preventDefault();
238					e.stopPropagation();
239					if (e.target.className === "dunebox-content") {
240						$.duneBoxV2.close($.duneBoxV2.currentIncrement, options);
241					}
242
243				});
244
245				elem.find("[data-dunebox-content] .dunebox-image map[name='imageAreas'] area").on('click', function (e) {
246					e.preventDefault();
247					e.stopPropagation();
248
249					if ( $(this).hasClass("area_previous") ) {
250						$('button[data-dunebox-gallery-action="previous"]').click();
251					}else if( $(this).hasClass('area_next') ) {
252						$('button[data-dunebox-gallery-action="next"]').click();
253					}
254
255				});
256
257				$(window).on('orientationchange', function () {
258					checkForImgResize();
259				});
260
261			};
262
263			function disableScrolling(){
264				var x=window.scrollX;
265				var y=window.scrollY;
266				window.onscroll=function(){
267					if ($(".dunebox-v2").length) {
268						window.scrollTo(x, y);
269					}
270				};
271			}
272
273			var elem = null;
274			var defaultCssForMobile = {};
275			var defaultCssForDesktop = {};
276			var actualCss = null;
277
278
279			/* CHARGEMENT DE LA DUNEBOX */
280
281			/* BLOCK SURCHARGE DES ELEMENTS CSS PRESENTS DANS LA CONFIG */
282			actualCss = defaultCssForMobile;
283			actualCss["z-index"] = options.zindex;
284			/* END BLOCK */
285
286			elem = $(options.domStructureMobile);
287
288
289			elem.addClass("duneBox-" + $.duneBoxV2.isFor(button));
290
291			elem.attr("data-dunebox-id", $.duneBoxV2.currentIncrement);
292
293			elem.css(actualCss).fadeIn(parseInt(options.openAnimationSpeed));
294
295			disableScrolling();
296
297			$(options.appendTo).append(elem);
298
299			if (options.title) {
300				elem.find("[data-dunebox-title]").html("<h1>"+options.title+"</h1>").show();
301			}else {
302				elem.find("[data-dunebox-title]").html("").hide();
303			}
304
305
306			if (options.gallery) {
307
308				/**
309				 * 0 - Applique un ID aux images
310				 * 1 - Charge l'image en cours
311				 * 2 - Charge les vignettes
312				 * 3 - Evénements clic sur next et previous, recharge le bloc avec la prochaine image
313				 */
314

315				$("[data-dunebox-content]").append('<div class="dunebox-image"></div>');
316				$("div.dunebox-image").append( $(options.imageContent) ).load(function () {
317					// checkIfPortrait(this, options);
318					checkForImgResize();
319				});
320				$("div.dunebox-image img").attr( "usemap", "#imageAreas" );
321
322				generateGalleryVignettes(options);
323
324				checkForImgResize();
325
326			}else {
327				if ( options.type === "ajax" ) {
328
329				}else if ( options.type === "iframe" ) {
330
331				}else if ( options.type === "image" ) {
332					$("[data-dunebox-content]").append('<div class="dunebox-image"></div>');
333					$("div.dunebox-image").append( $(options.imageContent) ).find('img').css("width", "100%");
334				}else if ( options.type === "div" ) {
335
336				}else if ( options.type === "html" ) {
337
338				}
339			}
340
341			if (elem && elem.length) {
342				/* EVENT FOR CLOSE */
343				elem.find("[data-dunebox-action='close']").off("click").click(function (e) {
344					e.preventDefault();
345					e.stopPropagation();
346					$.duneBoxV2.close($.duneBoxV2.currentIncrement, options);
347				});
348			}
349		});
350	},
351
352	/**
353	 * Close the selected duneBox
354	 * @param duneboxId
355	 * @param options
356	 */
357	close: function (duneboxId, options) {
358		options = $.duneBoxV2.getOptions(null, options);
359		$('[data-dunebox-id="'+duneboxId+'"]').fadeOut(options.closeAnimationSpeed, function () {
360			$(this).remove();
361		});
362		$('body').off("keydown");
363	},
364
365	resize: function () {
366		$("[data-dunebox-id]").each(function () {
367			/* TAILLE DE LA FENETRE ACTUELLE */
368			var width 	= $(window).innerWidth(true);
369			var height	= $(window).innerHeight(true);
370
371			var isFor = $.duneBoxV2.isFor();
372
373			$(this).css({
374				'width' : width,
375				'height' : height,
376			});
377		});
378	},
379
380
381	isFor : function () {
382		var windowsWidth 	= $(window).width();
383		var windowsHeight 	= $(window).height();
384
385		// return "mobile";
386
387		/* TODO: AJOUTER AVEC USER AGENT */
388		if (!$(".duneBox-desktop").length && (windowsWidth < 800 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
389			return "mobile";
390		}else {
391			return "desktop";
392		}
393	},
394
395	/**
396	 * Return all options with default ...
397	 * @param href
398	 * @param options
399	 * @param button
400	 * @returns {jQuery|any|{}}
401	 */
402	getOptions: function (href,options,button) {
403		var Deferred = new $.Deferred();
404
405		var dataKeywords 	= "data-dunebox-";
406		var ret = $.extend(true, {
407			zindex				: 1000 + $.duneBoxV2.currentIncrement,
408			appendTo			: "body",
409			gallery				: null,
410			backgroundDismiss	: true,
411			domStructureDesktop	: $.duneBoxV2.domStructureDefault,
412			domStructureMobile	: $.duneBoxV2.domStructureDefault,
413			contentAppendTo		: ".dunebox-content",	/* DATA ATTR ? */
414			openAnimation		: "fadeIn",
415			openAnimationSpeed	: "400",
416			closeAnimation		: "fadeOut",
417			closeAnimationSpeed	: "400",
418			type				: "iframe",
419			title				: "",
420			onOpen				: function () {},		/* TODO: Gérer dans la création */
421			onClose				: function () {},		/* TODO: Gérer dans la création */
422			onOpenBefore		: function () {},		/* TODO: Gérer dans la création */
423			onContentReady		: function () {},		/* TODO: Gérer dans la création */
424		}, options);
425
426		if (href ) {
427
428			/**
429			 * Check if string is HTML
430			 * @param href
431			 * @returns {*|boolean}
432			 */
433			var isHtml = function (href) {
434				return /^<.*?>$/.test(href) && !!$(href)[0];
435			};
436
437			/**
438			 * Check if string is URL
439			 * @param href
440			 * @returns {*|boolean}
441			 */
442			var isUrl = function (href) {
443				return /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(href);
444			};
445
446			var mergeOptionsWithDataAttr = function (button) {
447				var attrOptions = {};
448				$.each(button.get(0).attributes, function (key, value) {
449					var keyReturn = "";
450					if (value.name.substr(0, dataKeywords.length) === dataKeywords) {
451						var keys = value.name.substr(dataKeywords.length).split('-');
452						$.each(keys, function (index,part) {
453							if (index === 0) {
454								keyReturn += part;
455							}else {
456								keyReturn += part[0].toUpperCase() + part.slice(1);
457							}
458						});
459						attrOptions[keyReturn] = value.value
460					}
461				});
462
463				return attrOptions;
464			};
465
466			/* TESTER SI PHOTOS DEPUIS DUNE */
467
468			var image 		= new Image();
469			image.loaded 	= 0;
470			image.src 		= href;
471			image.onload 	= function () {

472				ret.type 			= "image";
473				ret.imageContent 	= this;
474				if (button && button.length) {
475					var attrOptions = mergeOptionsWithDataAttr(button);
476					ret = $.extend(true, ret, attrOptions);
477
478					ret.naturalWidth 	= image.naturalWidth;
479					ret.naturalHeight 	= image.naturalHeight;
480
481					/* ** ** BLOCK RETRO DUNEBOX-V1 ** ** */
482					if (button.get(0).attributes.gal) {
483						ret.gallery = button.get(0).attributes.gal["value"];
484					}
485					/* ** ** ** ** END BLOCK ** ** ** ** */
486				}
487				Deferred.resolve(ret);
488			};
489			image.onerror	= function () {
490
491				if (href.substr(0,1) === "." || href.substr(0,1) === "#") {
492					ret.type = 'div';
493				}else if ( isHtml(href) ) {
494					ret.type = 'html';
495				}else if ( isUrl(href) ) {
496					ret.type = "iframe";
497				}else {
498					ret.type = 'error';
499				}
500
501				if (button && button.length) {
502					var attrOptions = mergeOptionsWithDataAttr(button);
503					ret = $.extend(true, ret, attrOptions);
504
505					/* ** ** BLOCK RETRO DUNEBOX-V1 ** ** */
506					if (button.get(0).attributes.gal) {
507						ret.gallery = button.get(0).attributes.gal["value"];
508					}
509					/* ** ** ** ** END BLOCK ** ** ** ** */
510				}
511				Deferred.resolve(ret);
512			};
513
514		}
515
516		return Deferred.promise();
517	}
518};