https://teironsurf.com/tienda/modules/deotemplate/views/js/lazyload/ls.bgset.js

1/**
2 *  @author    DeoTemplate <[email protected]>
3 *  @copyright by DeoTemplate
4 *  @license   http://deotemplate.com - prestashop template provider
5 */
6
7(function(window, factory) {
8	if ('IntersectionObserver' in window && !deo_lazy_intersection_observer){
9		return false;
10	}
11	var globalInstall = function(){
12		factory(window.lazySizes);
13		window.removeEventListener('lazyunveilread', globalInstall, true);
14	};
15
16	factory = factory.bind(null, window, window.document);
17
18	if(typeof module == 'object' && module.exports){
19		factory(require('lazysizes'));
20	} else if(window.lazySizes) {
21		globalInstall();
22	} else {
23		window.addEventListener('lazyunveilread', globalInstall, true);
24	}
25}(window, function(window, document, lazySizes) {
26	'use strict';
27	if(!window.addEventListener){return;}
28
29	var regWhite = /\s+/g;
30	var regSplitSet = /\s*\|\s+|\s+\|\s*/g;
31	var regSource = /^(.+?)(?:\s+\[\s*(.+?)\s*\])(?:\s+\[\s*(.+?)\s*\])?$/;
32	var regType = /^\s*\(*\s*type\s*:\s*(.+?)\s*\)*\s*$/;
33	var regBgUrlEscape = /\(|\)|'/;
34	var allowedBackgroundSize = {contain: 1, cover: 1};
35	var proxyWidth = function(elem){
36		var width = lazySizes.gW(elem, elem.parentNode);
37
38		if(!elem._lazysizesWidth || width > elem._lazysizesWidth){
39			elem._lazysizesWidth = width;
40		}
41		return elem._lazysizesWidth;
42	};
43	var getBgSize = function(elem){
44		var bgSize;
45
46		bgSize = (getComputedStyle(elem) || {getPropertyValue: function(){}}).getPropertyValue('background-size');
47
48		if(!allowedBackgroundSize[bgSize] && allowedBackgroundSize[elem.style.backgroundSize]){
49			bgSize = elem.style.backgroundSize;
50		}
51
52		return bgSize;
53	};
54	var setTypeOrMedia = function(source, match){
55		if(match){
56			var typeMatch = match.match(regType);
57			if(typeMatch && typeMatch[1]){
58				source.setAttribute('type', typeMatch[1]);
59			} else {
60				source.setAttribute('media', lazySizesConfig.customMedia[match] || match);
61			}
62		}
63	};
64	var createPicture = function(sets, elem, img){
65		var picture = document.createElement('picture');
66		var sizes = elem.getAttribute(lazySizesConfig.sizesAttr);
67		var ratio = elem.getAttribute('data-ratio');
68		var optimumx = elem.getAttribute('data-optimumx');
69
70		if(elem._lazybgset && elem._lazybgset.parentNode == elem){
71			elem.removeChild(elem._lazybgset);
72		}
73
74		Object.defineProperty(img, '_lazybgset', {
75			value: elem,
76			writable: true
77		});
78		Object.defineProperty(elem, '_lazybgset', {
79			value: picture,
80			writable: true
81		});
82
83		sets = sets.replace(regWhite, ' ').split(regSplitSet);
84
85		picture.style.display = 'none';
86		img.className = lazySizesConfig.lazyClass;
87
88		if(sets.length == 1 && !sizes){
89			sizes = 'auto';
90		}
91
92		sets.forEach(function(set){
93			var match;
94			var source = document.createElement('source');
95
96			if(sizes && sizes != 'auto'){
97				source.setAttribute('sizes', sizes);
98			}
99
100			if((match = set.match(regSource))){
101				source.setAttribute(lazySizesConfig.srcsetAttr, match[1]);
102
103				setTypeOrMedia(source, match[2]);
104				setTypeOrMedia(source, match[3]);
105			} else {
106				source.setAttribute(lazySizesConfig.srcsetAttr, set);
107			}
108
109			picture.appendChild(source);
110		});
111
112		if(sizes){
113			img.setAttribute(lazySizesConfig.sizesAttr, sizes);
114			elem.removeAttribute(lazySizesConfig.sizesAttr);
115			elem.removeAttribute('sizes');
116		}
117		if(optimumx){
118			img.setAttribute('data-optimumx', optimumx);
119		}
120		if(ratio) {
121			img.setAttribute('data-ratio', ratio);
122		}
123
124		picture.appendChild(img);
125
126		elem.appendChild(picture);
127	};
128
129	var proxyLoad = function(e){
130		if(!e.target._lazybgset){return;}
131
132		var image = e.target;
133		var elem = image._lazybgset;
134		var bg = image.currentSrc || image.src;
135
136
137		if(bg){
138			var event = lazySizes.fire(elem, 'bgsetproxy', {
139				src: bg,
140				useSrc: regBgUrlEscape.test(bg) ? JSON.stringify(bg) : bg,
141			});
142
143			if(!event.defaultPrevented){
144				elem.style.backgroundImage = 'url(' + event.detail.useSrc + ')';
145			}
146		}
147
148		if(image._lazybgsetLoading){
149			lazySizes.fire(elem, '_lazyloaded', {}, false, true);
150			delete image._lazybgsetLoading;
151		}
152	};
153
154	addEventListener('lazybeforeunveil', function(e){

155		var set, image, elem;
156
157		if(e.defaultPrevented || !(set = e.target.getAttribute('data-bgset'))){return;}
158
159		elem = e.target;
160		image = document.createElement('img');
161
162		image.alt = '';
163
164		image._lazybgsetLoading = true;
165		e.detail.firesLoad = true;
166
167		createPicture(set, elem, image);
168
169		setTimeout(function(){
170			lazySizes.loader.unveil(image);
171
172			lazySizes.rAF(function(){
173				lazySizes.fire(image, '_lazyloaded', {}, true, true);
174				if(image.complete) {
175					proxyLoad({target: image});
176				}
177			});
178		});
179
180	});
181
182	document.addEventListener('load', proxyLoad, true);
183
184	window.addEventListener('lazybeforesizes', function(e){
185		if(e.detail.instance != lazySizes){return;}
186		if(e.target._lazybgset && e.detail.dataAttr){
187			var elem = e.target._lazybgset;
188			var bgSize = getBgSize(elem);
189
190			if(allowedBackgroundSize[bgSize]){
191				e.target._lazysizesParentFit = bgSize;
192
193				lazySizes.rAF(function(){
194					e.target.setAttribute('data-parent-fit', bgSize);
195					if(e.target._lazysizesParentFit){
196						delete e.target._lazysizesParentFit;
197					}
198				});
199			}
200		}
201	}, true);
202
203	document.documentElement.addEventListener('lazybeforesizes', function(e){
204		if(e.defaultPrevented || !e.target._lazybgset || e.detail.instance != lazySizes){return;}
205		e.detail.width = proxyWidth(e.target._lazybgset);
206	});
207}));