https://lissac09.fr/media/plg_system_imageeffectck/js/imageeffectck.js

1/**
2 * copyright	Copyright (C) 2015 Cedric KEIFLIN alias ced1870
3 * http://www.joomlack.fr
4 * http://www.template-creator.com
5 * license		GNU/GPL
6 * Image Effect CK
7 * @version 1.1.2
8 **/
9
10(function($) {
11	var ImageEffectck = function() {
12		// var image.wrap;
13		$("img[class^='effectck'], img.fadeck, img.edafck, img.puffck").each(function(i, image) {
14			// do only if the image is not yet wrapped
15			if (! $(image).parent().is('figure')) {
16
17			var w = $(image).attr('width');
18			var fl = $(image).css('float');
19
20			$(image).wrap('<figure class="imageeffectck ' + $(image).attr('class') + '"><div class="imageeffectck_img"></div></div>');
21			image.wrap = $(image).parent().parent();
22			image.wrapinner = $(image).parent();
23
24			var props = Array('border-top-left-radius'
25			, 'border-top-right-radius'
26			, 'border-bottom-left-radius'
27			, 'border-bottom-right-radius'
28			, 'float'
29			);
30
31			for (i=0;i<props.length;i++) {
32				catchCssProperty(image, props[i]);
33			}
34
35			// fix for Chrome
36			if (parseInt(w) > 0) {
37				image.wrap.width(w).css('max-width', '100%');
38			} else if ($(image).attr('class').match(/circle/)) {
39				image.wrap.width(500);
40//				console.log('Image Effect CK message : default width set, missing on image : ');
41//				console.log(image);
42			}
43			// if (fl) image.wrap.css('float', fl);
44
45			// get the the text from the image title
46			var imgtitle, txt_title, txt_desc;
47			if (imgtitle = $(image).attr('title')) {
48				imgtitle = imgtitle.split('::');
49				if (imgtitle.length >= 1) {
50					txt_title = imgtitle[0];
51				}
52				if (imgtitle.length >= 2) {
53					txt_desc = imgtitle[1];
54				}
55			}
56
57			// remove the attribute on the image to avoid conflicts
58			$(image).attr('class', '')
59					.attr('width', '')
60					.attr('height', '')
61					.attr('title', '')
62					.css('float', '');
63
64			// create the final code
65			image.wrapinner.append('<figcaption>'
66					+'<div>'
67						+ ( txt_title ? '<div class="imageeffectck_title">' + txt_title + '</div>' : '' )
68						+ ( txt_desc ? '<div class="imageeffectck_desc">' + txt_desc + '</div>' : '' )
69						// + ( $(image).attr('href', '') ? '<a href="' + $(image).attr('href') + '"></a>' : '' ) // il faut d�tecter parent ancre >> pas besoin l'ancre s'applique sur figure
70					+'</div>'
71					+'</figcaption>')
72			}
73
74			// for mobile only, allow the 1st tap to show the effect, 2nd tap to open the link
75			// check if there is a link on the figure
76			if (image.wrap.parents('a').length) {
77				image.wrap.parents('a')[0].addEventListener("touchstart", touchStart, false);
78
79				// initialize the data if we click outside
80				image.wrap.parent('a').on('mouseleave', (function(e) {
81					$(this).data('touch', '0');
82				}));
83			}
84			// add interaction on touch device
85			image.wrap[0].addEventListener("touchstart", touchStartImage, false);
86		});
87
88		// add interaction on touch outside
89		$(window).on("click", function(event){
90			var shallclose = true;
91			$("figure.imageeffectck").each(function() {
92				var $this = $(this);
93				if ( 
94					$this.has(event.target).length == 0 //checks if descendants of submenu was clicked
95					&&
96					!$this.is(event.target) //checks if the submenu itself was clicked
97					){
98					// is outside
99					// shallclose = true;
100				} else {
101					// is inside one of the mobile menus, do nothing
102					shallclose = false;;
103				}
104				if (shallclose) {
105					$this.removeClass('hover');
106					$this.data('touch', '0');
107				}
108			});
109		});
110
111		/**
112		 * Catch the tap event on touch device
113		 * 
114		 * @param {type} event
115		 * @returns void
116		 */
117		function touchStart(event) {
118			if (! $(this).attr('rel')) {
119				if ($(this).data('touch') !== '1') {
120					$(this).data('href', $(this).attr('href'));
121					$(this).removeAttr('href');
122					$(this).data('touch', '1');
123				} else {
124					$(this).attr('href', $(this).data('href'));
125					$(this).data('touch', '0');
126				}
127			}
128		}
129
130		/**
131		 * Catch the tap event on touch device
132		 * 
133		 * @param {type} event
134		 * @returns void
135		 */
136		function touchStartImage(event) {
137			if ($(this).data('touch') === '1') {
138				$(this).removeClass('hover');
139				$(this).data('touch', '0');
140			} else {
141				$(this).addClass('hover');
142				$(this).data('touch', '1');
143			}
144		}
145
146		/**
147		 * Catch the css of the image and apply it to the figure
148		 * 
149		 * @param {type} image
150		 * @param {type} prop
151		 * @returns {undefined}
152		 */
153		function catchCssProperty(image, prop) {
154			var v = $(image).css(prop);
155			if (parseInt(v)) {
156				$(image).css(prop, '');

157				$(image.wrap).css(prop, v);
158			}
159		}
160	}
161	window.ImageEffectck = ImageEffectck;
162})(jQuery);
163
164// autoloader
165jQuery(document).ready(function(){
166	new ImageEffectck();
167});