diff --git a/Resources/Private/Javascripts/lazysizes.min.js b/Resources/Private/Javascripts/lazysizes.min.js deleted file mode 100644 index b204dfa..0000000 --- a/Resources/Private/Javascripts/lazysizes.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! lazysizes - v4.0.2 */ -!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d,e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent("CustomEvent");return e||(e={}),e.instance=c,h.initCustomEvent(d,!f,!g,e),a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?e({reevaluate:!0,elements:[b]}):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c49?function(){m(h,{timeout:g}),g!==d.ricTimeout&&(g=d.ricTimeout)}:A(function(){k(h)},!0);return function(a){var d;(a=a===!0)&&(g=33),b||(b=!0,d=e-(f.now()-c),0>d&&(d=0),a||9>d?i():k(i,d))}},C=function(a){var b,c,d=99,e=function(){b=null,a()},g=function(){var a=f.now()-c;d>a?k(g,d-a):(m||e)(e)};return function(){c=f.now(),b||(b=k(g,d))}};!function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b]);a.lazySizesConfig=d,k(function(){d.init&&F()})}();var D=function(){var g,l,m,o,p,y,D,F,G,H,I,J,K,L,M=/^img$/i,N=/^iframe$/i,O="onscroll"in a&&!/glebot/.test(navigator.userAgent),P=0,Q=0,R=0,S=-1,T=function(a){R--,a&&a.target&&u(a.target,T),(!a||0>R||!a.target)&&(R=0)},U=function(a,c){var d,f=a,g="hidden"==x(b.body,"visibility")||"hidden"!=x(a,"visibility");for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=e;)g=(x(f,"opacity")||1)>0,g&&"visible"!=x(f,"overflow")&&(d=f.getBoundingClientRect(),g=H>d.left&&Gd.top-1&&FR&&(a=r.length)){f=0,S++,null==K&&("expand"in d||(d.expand=e.clientHeight>500&&e.clientWidth>500?500:370),J=d.expand,K=J*d.expFactor),K>Q&&1>R&&S>2&&o>2&&!b.hidden?(Q=K,S=0):Q=o>1&&S>1&&6>R?J:P;for(;a>f;f++)if(r[f]&&!r[f]._lazyRace)if(O)if((p=r[f][i]("data-expand"))&&(m=1*p)||(m=Q),q!==m&&(y=innerWidth+m*L,D=innerHeight+m,n=-1*m,q=m),h=r[f].getBoundingClientRect(),(I=h.bottom)>=n&&(F=h.top)<=D&&(H=h.right)>=n*L&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||"hidden"!=x(r[f],"visibility"))&&(l&&3>R&&!p&&(3>o||4>S)||U(r[f],m))){if(ba(r[f]),k=!0,R>9)break}else!k&&l&&!j&&4>R&&4>S&&o>2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||"auto"!=r[f][i](d.sizesAttr)))&&(j=g[0]||r[f]);else ba(r[f]);j&&!k&&ba(j)}},W=B(V),X=function(a){s(a.target,d.loadedClass),t(a.target,d.loadingClass),u(a.target,Z),v(a.target,"lazyloaded")},Y=A(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,c=a[i](d.srcsetAttr);(b=d.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},aa=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute("sizes",e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),o={target:a},p&&(u(a,T,!0),clearTimeout(m),m=k(T,2500),s(a,d.loadingClass),u(a,Z,!0)),l&&q.call(j.getElementsByTagName("source"),_),h?a.setAttribute("srcset",h):g&&!l&&(N.test(a.nodeName)?$(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){(!p||a.complete&&a.naturalWidth>1)&&(p?T(o):R--,X(o))},!0)}),ba=function(a){var b,c=M.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i]("sizes")),f="auto"==e;(!f&&l||!c||!a[i]("src")&&!a.srcset||a.complete||r(a,d.errorClass)||!r(a,d.lazyClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,R++,aa(a,b,f,e,c))},ca=function(){if(!l){if(f.now()-p<999)return void k(ca,999);var a=C(function(){d.loadMode=3,W()});l=!0,d.loadMode=3,W(),j("scroll",function(){3==d.loadMode&&(d.loadMode=2),a()},!0)}};return{_:function(){p=f.now(),c.elements=b.getElementsByClassName(d.lazyClass),g=b.getElementsByClassName(d.lazyClass+" "+d.preloadClass),L=d.hFac,j("scroll",W,!0),j("resize",W,!0),a.MutationObserver?new MutationObserver(W).observe(e,{childList:!0,subtree:!0,attributes:!0}):(e[h]("DOMNodeInserted",W,!0),e[h]("DOMAttrModified",W,!0),setInterval(W,999)),j("hashchange",W,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b[h](a,W,!0)}),/d$|^c/.test(b.readyState)?ca():(j("load",ca),b[h]("DOMContentLoaded",W),k(ca,2e4)),c.elements.length?(V(),z._lsFlush()):W()},checkElems:W,unveil:ba}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),n.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;g>f;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||w(a,c.detail)}),e=function(a,b,d){var e,f=a.parentNode;f&&(d=y(a,f,d),e=v(a,"lazybeforesizes",{width:d,dataAttr:!!b}),e.defaultPrevented||(d=e.detail.width,d&&d!==a._lazysizesWidth&&c(a,f,e,d)))},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)e(a[b])},g=C(f);return{_:function(){a=b.getElementsByClassName(d.autosizesClass),j("resize",g)},checkElems:g,updateElem:e}}(),F=function(){F.i||(F.i=!0,E._(),D._())};return c={cfg:d,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}}}); \ No newline at end of file diff --git a/Resources/Private/Javascripts/lazysizes/lazysizes.js b/Resources/Private/Javascripts/lazysizes/lazysizes.js new file mode 100644 index 0000000..de0354d --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/lazysizes.js @@ -0,0 +1,736 @@ +(function(window, factory) { + var lazySizes = factory(window, window.document); + window.lazySizes = lazySizes; + if(typeof module == 'object' && module.exports){ + module.exports = lazySizes; + } +}(typeof window != 'undefined' ? + window : {}, function l(window, document) { + 'use strict'; + /*jshint eqnull:true */ + + var lazysizes, lazySizesCfg; + + (function(){ + var prop; + + var lazySizesDefaults = { + lazyClass: 'lazyload', + loadedClass: 'lazyloaded', + loadingClass: 'lazyloading', + preloadClass: 'lazypreload', + errorClass: 'lazyerror', + //strictClass: 'lazystrict', + autosizesClass: 'lazyautosizes', + srcAttr: 'data-src', + srcsetAttr: 'data-srcset', + sizesAttr: 'data-sizes', + //preloadAfterLoad: false, + minSize: 40, + customMedia: {}, + init: true, + expFactor: 1.5, + hFac: 0.8, + loadMode: 2, + loadHidden: true, + ricTimeout: 0, + throttleDelay: 125, + }; + + lazySizesCfg = window.lazySizesConfig || window.lazysizesConfig || {}; + + for(prop in lazySizesDefaults){ + if(!(prop in lazySizesCfg)){ + lazySizesCfg[prop] = lazySizesDefaults[prop]; + } + } + })(); + + if (!document || !document.getElementsByClassName) { + return { + init: function () {}, + cfg: lazySizesCfg, + noSupport: true, + }; + } + + var docElem = document.documentElement; + + var Date = window.Date; + + var supportPicture = window.HTMLPictureElement; + + var _addEventListener = 'addEventListener'; + + var _getAttribute = 'getAttribute'; + + var addEventListener = window[_addEventListener]; + + var setTimeout = window.setTimeout; + + var requestAnimationFrame = window.requestAnimationFrame || setTimeout; + + var requestIdleCallback = window.requestIdleCallback; + + var regPicture = /^picture$/i; + + var loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded']; + + var regClassCache = {}; + + var forEach = Array.prototype.forEach; + + var hasClass = function(ele, cls) { + if(!regClassCache[cls]){ + regClassCache[cls] = new RegExp('(\\s|^)'+cls+'(\\s|$)'); + } + return regClassCache[cls].test(ele[_getAttribute]('class') || '') && regClassCache[cls]; + }; + + var addClass = function(ele, cls) { + if (!hasClass(ele, cls)){ + ele.setAttribute('class', (ele[_getAttribute]('class') || '').trim() + ' ' + cls); + } + }; + + var removeClass = function(ele, cls) { + var reg; + if ((reg = hasClass(ele,cls))) { + ele.setAttribute('class', (ele[_getAttribute]('class') || '').replace(reg, ' ')); + } + }; + + var addRemoveLoadEvents = function(dom, fn, add){ + var action = add ? _addEventListener : 'removeEventListener'; + if(add){ + addRemoveLoadEvents(dom, fn); + } + loadEvents.forEach(function(evt){ + dom[action](evt, fn); + }); + }; + + var triggerEvent = function(elem, name, detail, noBubbles, noCancelable){ + var event = document.createEvent('Event'); + + if(!detail){ + detail = {}; + } + + detail.instance = lazysizes; + + event.initEvent(name, !noBubbles, !noCancelable); + + event.detail = detail; + + elem.dispatchEvent(event); + return event; + }; + + var updatePolyfill = function (el, full){ + var polyfill; + if( !supportPicture && ( polyfill = (window.picturefill || lazySizesCfg.pf) ) ){ + if(full && full.src && !el[_getAttribute]('srcset')){ + el.setAttribute('srcset', full.src); + } + polyfill({reevaluate: true, elements: [el]}); + } else if(full && full.src){ + el.src = full.src; + } + }; + + var getCSS = function (elem, style){ + return (getComputedStyle(elem, null) || {})[style]; + }; + + var getWidth = function(elem, parent, width){ + width = width || elem.offsetWidth; + + while(width < lazySizesCfg.minSize && parent && !elem._lazysizesWidth){ + width = parent.offsetWidth; + parent = parent.parentNode; + } + + return width; + }; + + var rAF = (function(){ + var running, waiting; + var firstFns = []; + var secondFns = []; + var fns = firstFns; + + var run = function(){ + var runFns = fns; + + fns = firstFns.length ? secondFns : firstFns; + + running = true; + waiting = false; + + while(runFns.length){ + runFns.shift()(); + } + + running = false; + }; + + var rafBatch = function(fn, queue){ + if(running && !queue){ + fn.apply(this, arguments); + } else { + fns.push(fn); + + if(!waiting){ + waiting = true; + (document.hidden ? setTimeout : requestAnimationFrame)(run); + } + } + }; + + rafBatch._lsFlush = run; + + return rafBatch; + })(); + + var rAFIt = function(fn, simple){ + return simple ? + function() { + rAF(fn); + } : + function(){ + var that = this; + var args = arguments; + rAF(function(){ + fn.apply(that, args); + }); + } + ; + }; + + var throttle = function(fn){ + var running; + var lastTime = 0; + var gDelay = lazySizesCfg.throttleDelay; + var rICTimeout = lazySizesCfg.ricTimeout; + var run = function(){ + running = false; + lastTime = Date.now(); + fn(); + }; + var idleCallback = requestIdleCallback && rICTimeout > 49 ? + function(){ + requestIdleCallback(run, {timeout: rICTimeout}); + + if(rICTimeout !== lazySizesCfg.ricTimeout){ + rICTimeout = lazySizesCfg.ricTimeout; + } + } : + rAFIt(function(){ + setTimeout(run); + }, true) + ; + + return function(isPriority){ + var delay; + + if((isPriority = isPriority === true)){ + rICTimeout = 33; + } + + if(running){ + return; + } + + running = true; + + delay = gDelay - (Date.now() - lastTime); + + if(delay < 0){ + delay = 0; + } + + if(isPriority || delay < 9){ + idleCallback(); + } else { + setTimeout(idleCallback, delay); + } + }; + }; + + //based on http://modernjavascript.blogspot.de/2013/08/building-better-debounce.html + var debounce = function(func) { + var timeout, timestamp; + var wait = 99; + var run = function(){ + timeout = null; + func(); + }; + var later = function() { + var last = Date.now() - timestamp; + + if (last < wait) { + setTimeout(later, wait - last); + } else { + (requestIdleCallback || run)(run); + } + }; + + return function() { + timestamp = Date.now(); + + if (!timeout) { + timeout = setTimeout(later, wait); + } + }; + }; + + var loader = (function(){ + var preloadElems, isCompleted, resetPreloadingTimer, loadMode, started; + + var eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden; + + var regImg = /^img$/i; + var regIframe = /^iframe$/i; + + var supportScroll = ('onscroll' in window) && !(/(gle|ing)bot/.test(navigator.userAgent)); + + var shrinkExpand = 0; + var currentExpand = 0; + + var isLoading = 0; + var lowRuns = -1; + + var resetPreloading = function(e){ + isLoading--; + if(!e || isLoading < 0 || !e.target){ + isLoading = 0; + } + }; + + var isVisible = function (elem) { + if (isBodyHidden == null) { + isBodyHidden = getCSS(document.body, 'visibility') == 'hidden'; + } + + return isBodyHidden || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden'); + }; + + var isNestedVisible = function(elem, elemExpand){ + var outerRect; + var parent = elem; + var visible = isVisible(elem); + + eLtop -= elemExpand; + eLbottom += elemExpand; + eLleft -= elemExpand; + eLright += elemExpand; + + while(visible && (parent = parent.offsetParent) && parent != document.body && parent != docElem){ + visible = ((getCSS(parent, 'opacity') || 1) > 0); + + if(visible && getCSS(parent, 'overflow') != 'visible'){ + outerRect = parent.getBoundingClientRect(); + visible = eLright > outerRect.left && + eLleft < outerRect.right && + eLbottom > outerRect.top - 1 && + eLtop < outerRect.bottom + 1 + ; + } + } + + return visible; + }; + + var checkElements = function() { + var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, + beforeExpandVal, defaultExpand, preloadExpand, hFac; + var lazyloadElems = lazysizes.elements; + + if((loadMode = lazySizesCfg.loadMode) && isLoading < 8 && (eLlen = lazyloadElems.length)){ + + i = 0; + + lowRuns++; + + for(; i < eLlen; i++){ + + if(!lazyloadElems[i] || lazyloadElems[i]._lazyRace){continue;} + + if(!supportScroll || (lazysizes.prematureUnveil && lazysizes.prematureUnveil(lazyloadElems[i]))){unveilElement(lazyloadElems[i]);continue;} + + if(!(elemExpandVal = lazyloadElems[i][_getAttribute]('data-expand')) || !(elemExpand = elemExpandVal * 1)){ + elemExpand = currentExpand; + } + + if (!defaultExpand) { + defaultExpand = (!lazySizesCfg.expand || lazySizesCfg.expand < 1) ? + docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370 : + lazySizesCfg.expand; + + lazysizes._defEx = defaultExpand; + + preloadExpand = defaultExpand * lazySizesCfg.expFactor; + hFac = lazySizesCfg.hFac; + isBodyHidden = null; + + if(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden){ + currentExpand = preloadExpand; + lowRuns = 0; + } else if(loadMode > 1 && lowRuns > 1 && isLoading < 6){ + currentExpand = defaultExpand; + } else { + currentExpand = shrinkExpand; + } + } + + if(beforeExpandVal !== elemExpand){ + eLvW = innerWidth + (elemExpand * hFac); + elvH = innerHeight + elemExpand; + elemNegativeExpand = elemExpand * -1; + beforeExpandVal = elemExpand; + } + + rect = lazyloadElems[i].getBoundingClientRect(); + + if ((eLbottom = rect.bottom) >= elemNegativeExpand && + (eLtop = rect.top) <= elvH && + (eLright = rect.right) >= elemNegativeExpand * hFac && + (eLleft = rect.left) <= eLvW && + (eLbottom || eLright || eLleft || eLtop) && + (lazySizesCfg.loadHidden || isVisible(lazyloadElems[i])) && + ((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){ + unveilElement(lazyloadElems[i]); + loadedSomething = true; + if(isLoading > 9){break;} + } else if(!loadedSomething && isCompleted && !autoLoadElem && + isLoading < 4 && lowRuns < 4 && loadMode > 2 && + (preloadElems[0] || lazySizesCfg.preloadAfterLoad) && + (preloadElems[0] || (!elemExpandVal && ((eLbottom || eLright || eLleft || eLtop) || lazyloadElems[i][_getAttribute](lazySizesCfg.sizesAttr) != 'auto')))){ + autoLoadElem = preloadElems[0] || lazyloadElems[i]; + } + } + + if(autoLoadElem && !loadedSomething){ + unveilElement(autoLoadElem); + } + } + }; + + var throttledCheckElements = throttle(checkElements); + + var switchLoadingClass = function(e){ + var elem = e.target; + + if (elem._lazyCache) { + delete elem._lazyCache; + return; + } + + resetPreloading(e); + addClass(elem, lazySizesCfg.loadedClass); + removeClass(elem, lazySizesCfg.loadingClass); + addRemoveLoadEvents(elem, rafSwitchLoadingClass); + triggerEvent(elem, 'lazyloaded'); + }; + var rafedSwitchLoadingClass = rAFIt(switchLoadingClass); + var rafSwitchLoadingClass = function(e){ + rafedSwitchLoadingClass({target: e.target}); + }; + + var changeIframeSrc = function(elem, src){ + try { + elem.contentWindow.location.replace(src); + } catch(e){ + elem.src = src; + } + }; + + var handleSources = function(source){ + var customMedia; + + var sourceSrcset = source[_getAttribute](lazySizesCfg.srcsetAttr); + + if( (customMedia = lazySizesCfg.customMedia[source[_getAttribute]('data-media') || source[_getAttribute]('media')]) ){ + source.setAttribute('media', customMedia); + } + + if(sourceSrcset){ + source.setAttribute('srcset', sourceSrcset); + } + }; + + var lazyUnveil = rAFIt(function (elem, detail, isAuto, sizes, isImg){ + var src, srcset, parent, isPicture, event, firesLoad; + + if(!(event = triggerEvent(elem, 'lazybeforeunveil', detail)).defaultPrevented){ + + if(sizes){ + if(isAuto){ + addClass(elem, lazySizesCfg.autosizesClass); + } else { + elem.setAttribute('sizes', sizes); + } + } + + srcset = elem[_getAttribute](lazySizesCfg.srcsetAttr); + src = elem[_getAttribute](lazySizesCfg.srcAttr); + + if(isImg) { + parent = elem.parentNode; + isPicture = parent && regPicture.test(parent.nodeName || ''); + } + + firesLoad = detail.firesLoad || (('src' in elem) && (srcset || src || isPicture)); + + event = {target: elem}; + + addClass(elem, lazySizesCfg.loadingClass); + + if(firesLoad){ + clearTimeout(resetPreloadingTimer); + resetPreloadingTimer = setTimeout(resetPreloading, 2500); + addRemoveLoadEvents(elem, rafSwitchLoadingClass, true); + } + + if(isPicture){ + forEach.call(parent.getElementsByTagName('source'), handleSources); + } + + if(srcset){ + elem.setAttribute('srcset', srcset); + } else if(src && !isPicture){ + if(regIframe.test(elem.nodeName)){ + changeIframeSrc(elem, src); + } else { + elem.src = src; + } + } + + if(isImg && (srcset || isPicture)){ + updatePolyfill(elem, {src: src}); + } + } + + if(elem._lazyRace){ + delete elem._lazyRace; + } + removeClass(elem, lazySizesCfg.lazyClass); + + rAF(function(){ + // Part of this can be removed as soon as this fix is older: https://bugs.chromium.org/p/chromium/issues/detail?id=7731 (2015) + var isLoaded = elem.complete && elem.naturalWidth > 1; + + if( !firesLoad || isLoaded){ + if (isLoaded) { + addClass(elem, 'ls-is-cached'); + } + switchLoadingClass(event); + elem._lazyCache = true; + setTimeout(function(){ + if ('_lazyCache' in elem) { + delete elem._lazyCache; + } + }, 9); + } + if (elem.loading == 'lazy') { + isLoading--; + } + }, true); + }); + + var unveilElement = function (elem){ + if (elem._lazyRace) {return;} + var detail; + + var isImg = regImg.test(elem.nodeName); + + //allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw") + var sizes = isImg && (elem[_getAttribute](lazySizesCfg.sizesAttr) || elem[_getAttribute]('sizes')); + var isAuto = sizes == 'auto'; + + if( (isAuto || !isCompleted) && isImg && (elem[_getAttribute]('src') || elem.srcset) && !elem.complete && !hasClass(elem, lazySizesCfg.errorClass) && hasClass(elem, lazySizesCfg.lazyClass)){return;} + + detail = triggerEvent(elem, 'lazyunveilread').detail; + + if(isAuto){ + autoSizer.updateElem(elem, true, elem.offsetWidth); + } + + elem._lazyRace = true; + isLoading++; + + lazyUnveil(elem, detail, isAuto, sizes, isImg); + }; + + var afterScroll = debounce(function(){ + lazySizesCfg.loadMode = 3; + throttledCheckElements(); + }); + + var altLoadmodeScrollListner = function(){ + if(lazySizesCfg.loadMode == 3){ + lazySizesCfg.loadMode = 2; + } + afterScroll(); + }; + + var onload = function(){ + if(isCompleted){return;} + if(Date.now() - started < 999){ + setTimeout(onload, 999); + return; + } + + + isCompleted = true; + + lazySizesCfg.loadMode = 3; + + throttledCheckElements(); + + addEventListener('scroll', altLoadmodeScrollListner, true); + }; + + return { + _: function(){ + started = Date.now(); + + lazysizes.elements = document.getElementsByClassName(lazySizesCfg.lazyClass); + preloadElems = document.getElementsByClassName(lazySizesCfg.lazyClass + ' ' + lazySizesCfg.preloadClass); + + addEventListener('scroll', throttledCheckElements, true); + + addEventListener('resize', throttledCheckElements, true); + + if(window.MutationObserver){ + new MutationObserver( throttledCheckElements ).observe( docElem, {childList: true, subtree: true, attributes: true} ); + } else { + docElem[_addEventListener]('DOMNodeInserted', throttledCheckElements, true); + docElem[_addEventListener]('DOMAttrModified', throttledCheckElements, true); + setInterval(throttledCheckElements, 999); + } + + addEventListener('hashchange', throttledCheckElements, true); + + //, 'fullscreenchange' + ['focus', 'mouseover', 'click', 'load', 'transitionend', 'animationend'].forEach(function(name){ + document[_addEventListener](name, throttledCheckElements, true); + }); + + if((/d$|^c/.test(document.readyState))){ + onload(); + } else { + addEventListener('load', onload); + document[_addEventListener]('DOMContentLoaded', throttledCheckElements); + setTimeout(onload, 20000); + } + + if(lazysizes.elements.length){ + checkElements(); + rAF._lsFlush(); + } else { + throttledCheckElements(); + } + }, + checkElems: throttledCheckElements, + unveil: unveilElement, + _aLSL: altLoadmodeScrollListner, + }; + })(); + + + var autoSizer = (function(){ + var autosizesElems; + + var sizeElement = rAFIt(function(elem, parent, event, width){ + var sources, i, len; + elem._lazysizesWidth = width; + width += 'px'; + + elem.setAttribute('sizes', width); + + if(regPicture.test(parent.nodeName || '')){ + sources = parent.getElementsByTagName('source'); + for(i = 0, len = sources.length; i < len; i++){ + sources[i].setAttribute('sizes', width); + } + } + + if(!event.detail.dataAttr){ + updatePolyfill(elem, event.detail); + } + }); + var getSizeElement = function (elem, dataAttr, width){ + var event; + var parent = elem.parentNode; + + if(parent){ + width = getWidth(elem, parent, width); + event = triggerEvent(elem, 'lazybeforesizes', {width: width, dataAttr: !!dataAttr}); + + if(!event.defaultPrevented){ + width = event.detail.width; + + if(width && width !== elem._lazysizesWidth){ + sizeElement(elem, parent, event, width); + } + } + } + }; + + var updateElementsSizes = function(){ + var i; + var len = autosizesElems.length; + if(len){ + i = 0; + + for(; i < len; i++){ + getSizeElement(autosizesElems[i]); + } + } + }; + + var debouncedUpdateElementsSizes = debounce(updateElementsSizes); + + return { + _: function(){ + autosizesElems = document.getElementsByClassName(lazySizesCfg.autosizesClass); + addEventListener('resize', debouncedUpdateElementsSizes); + }, + checkElems: debouncedUpdateElementsSizes, + updateElem: getSizeElement + }; + })(); + + var init = function(){ + if(!init.i && document.getElementsByClassName){ + init.i = true; + autoSizer._(); + loader._(); + } + }; + + setTimeout(function(){ + if(lazySizesCfg.init){ + init(); + } + }); + + lazysizes = { + cfg: lazySizesCfg, + autoSizer: autoSizer, + loader: loader, + init: init, + uP: updatePolyfill, + aC: addClass, + rC: removeClass, + hC: hasClass, + fire: triggerEvent, + gW: getWidth, + rAF: rAF, + }; + + return lazysizes; +} +)); diff --git a/Resources/Private/Javascripts/lazysizes/lazysizes.min.js b/Resources/Private/Javascripts/lazysizes/lazysizes.min.js new file mode 100644 index 0000000..b838b74 --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/lazysizes.min.js @@ -0,0 +1,2 @@ +/*! lazysizes - v5.1.1 */ +!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}("undefined"!=typeof window?window:{},function(a,b){"use strict";var c,d;if(function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b])}(),!b||!b.getElementsByClassName)return{init:function(){},cfg:d,noSupport:!0};var e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent("Event");return e||(e={}),e.instance=c,h.initEvent(d,!f,!g),h.detail=e,a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?(c&&c.src&&!b[i]("srcset")&&b.setAttribute("srcset",c.src),e({reevaluate:!0,elements:[b]})):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c49?function(){m(h,{timeout:g}),g!==d.ricTimeout&&(g=d.ricTimeout)}:A(function(){k(h)},!0);return function(a){var d;(a=!0===a)&&(g=33),b||(b=!0,d=e-(f.now()-c),d<0&&(d=0),a||d<9?i():k(i,d))}},C=function(a){var b,c,d=99,e=function(){b=null,a()},g=function(){var a=f.now()-c;a0)&&"visible"!=x(f,"overflow")&&(d=f.getBoundingClientRect(),g=H>d.left&&Gd.top-1&&F500&&e.clientWidth>500?500:370:d.expand,c._defEx=r,s=r*d.expFactor,t=d.hFac,J=null,O2&&o>2&&!b.hidden?(O=s,Q=0):O=o>1&&Q>1&&P<6?r:N),q!==m&&(y=innerWidth+m*t,D=innerHeight+m,n=-1*m,q=m),h=u[f].getBoundingClientRect(),(I=h.bottom)>=n&&(F=h.top)<=D&&(H=h.right)>=n*t&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||S(u[f]))&&(l&&P<3&&!p&&(o<3||Q<4)||T(u[f],m))){if(aa(u[f]),k=!0,P>9)break}else!k&&l&&!j&&P<4&&Q<4&&o>2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||"auto"!=u[f][i](d.sizesAttr)))&&(j=g[0]||u[f]);j&&!k&&aa(j)}},V=B(U),W=function(a){var b=a.target;if(b._lazyCache)return void delete b._lazyCache;R(a),s(b,d.loadedClass),t(b,d.loadingClass),u(b,Y),v(b,"lazyloaded")},X=A(W),Y=function(a){X({target:a.target})},Z=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},$=function(a){var b,c=a[i](d.srcsetAttr);(b=d.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},_=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute("sizes",e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),o={target:a},s(a,d.loadingClass),p&&(clearTimeout(m),m=k(R,2500),u(a,Y,!0)),l&&q.call(j.getElementsByTagName("source"),$),h?a.setAttribute("srcset",h):g&&!l&&(L.test(a.nodeName)?Z(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){var b=a.complete&&a.naturalWidth>1;p&&!b||(b&&s(a,"ls-is-cached"),W(o),a._lazyCache=!0,k(function(){"_lazyCache"in a&&delete a._lazyCache},9)),"lazy"==a.loading&&P--},!0)}),aa=function(a){if(!a._lazyRace){var b,c=K.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i]("sizes")),f="auto"==e;(!f&&l||!c||!a[i]("src")&&!a.srcset||a.complete||r(a,d.errorClass)||!r(a,d.lazyClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,P++,_(a,b,f,e,c))}},ba=C(function(){d.loadMode=3,V()}),ca=function(){3==d.loadMode&&(d.loadMode=2),ba()},da=function(){if(!l){if(f.now()-p<999)return void k(da,999);l=!0,d.loadMode=3,V(),j("scroll",ca,!0)}};return{_:function(){p=f.now(),c.elements=b.getElementsByClassName(d.lazyClass),g=b.getElementsByClassName(d.lazyClass+" "+d.preloadClass),j("scroll",V,!0),j("resize",V,!0),a.MutationObserver?new MutationObserver(V).observe(e,{childList:!0,subtree:!0,attributes:!0}):(e[h]("DOMNodeInserted",V,!0),e[h]("DOMAttrModified",V,!0),setInterval(V,999)),j("hashchange",V,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(a){b[h](a,V,!0)}),/d$|^c/.test(b.readyState)?da():(j("load",da),b[h]("DOMContentLoaded",V),k(da,2e4)),c.elements.length?(U(),z._lsFlush()):V()},checkElems:V,unveil:aa,_aLSL:ca}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),n.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;f + function loadJS(u){var r=document.getElementsByTagName("script")[0],s=document.createElement("script");s.src=u;r.parentNode.insertBefore(s,r);} + + if(!window.HTMLPictureElement || !('sizes' in document.createElement('img'))){ + loadJS("ls.respimg.min.js"); + } + + + + + + + +
+ +
+``` + +The bgset also supports art direction through multiple media query sets. To use this feature each set has to be separated using the ``" | "`` signs and the media query has to be added at the end of the set inside of square brackets. + +Also the ``customMedia`` option can be used to separate the media queries implementation from the markup. + +```html + + +
+ +
+ +
+``` + +Of course also resolution switching and art direction can be combined: + +```html +
+``` + +Here you find a [small bgset demo](http://jsfiddle.net/trixta/bfqqnosp/embedded/result/). + +**Note: In case you use this plugin with ``background-size: cover|contain`` and the ``data-sizes="auto"`` feature, we recommend to also use the [parent-fit extension](../parent-fit/) to calculate the right ``sizes`` attribute for you. See also the following [demo](http://jsfiddle.net/trixta/w96o9xm5/). In these cases the [object-fit polyfill plugin](../object-fit) should be a better option than bgset.** diff --git a/Resources/Private/Javascripts/lazysizes/plugins/bgset/ls.bgset.js b/Resources/Private/Javascripts/lazysizes/plugins/bgset/ls.bgset.js new file mode 100644 index 0000000..d4f3a69 --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/bgset/ls.bgset.js @@ -0,0 +1,199 @@ +(function(window, factory) { + var globalInstall = function(){ + factory(window.lazySizes); + window.removeEventListener('lazyunveilread', globalInstall, true); + }; + + factory = factory.bind(null, window, window.document); + + if(typeof module == 'object' && module.exports){ + factory(require('lazysizes')); + } else if(window.lazySizes) { + globalInstall(); + } else { + window.addEventListener('lazyunveilread', globalInstall, true); + } +}(window, function(window, document, lazySizes) { + 'use strict'; + if(!window.addEventListener){return;} + + var lazySizesCfg = lazySizes.cfg; + var regWhite = /\s+/g; + var regSplitSet = /\s*\|\s+|\s+\|\s*/g; + var regSource = /^(.+?)(?:\s+\[\s*(.+?)\s*\])(?:\s+\[\s*(.+?)\s*\])?$/; + var regType = /^\s*\(*\s*type\s*:\s*(.+?)\s*\)*\s*$/; + var regBgUrlEscape = /\(|\)|'/; + var allowedBackgroundSize = {contain: 1, cover: 1}; + var proxyWidth = function(elem){ + var width = lazySizes.gW(elem, elem.parentNode); + + if(!elem._lazysizesWidth || width > elem._lazysizesWidth){ + elem._lazysizesWidth = width; + } + return elem._lazysizesWidth; + }; + var getBgSize = function(elem){ + var bgSize; + + bgSize = (getComputedStyle(elem) || {getPropertyValue: function(){}}).getPropertyValue('background-size'); + + if(!allowedBackgroundSize[bgSize] && allowedBackgroundSize[elem.style.backgroundSize]){ + bgSize = elem.style.backgroundSize; + } + + return bgSize; + }; + var setTypeOrMedia = function(source, match){ + if(match){ + var typeMatch = match.match(regType); + if(typeMatch && typeMatch[1]){ + source.setAttribute('type', typeMatch[1]); + } else { + source.setAttribute('media', lazySizesCfg.customMedia[match] || match); + } + } + }; + var createPicture = function(sets, elem, img){ + var picture = document.createElement('picture'); + var sizes = elem.getAttribute(lazySizesCfg.sizesAttr); + var ratio = elem.getAttribute('data-ratio'); + var optimumx = elem.getAttribute('data-optimumx'); + + if(elem._lazybgset && elem._lazybgset.parentNode == elem){ + elem.removeChild(elem._lazybgset); + } + + Object.defineProperty(img, '_lazybgset', { + value: elem, + writable: true + }); + Object.defineProperty(elem, '_lazybgset', { + value: picture, + writable: true + }); + + sets = sets.replace(regWhite, ' ').split(regSplitSet); + + picture.style.display = 'none'; + img.className = lazySizesCfg.lazyClass; + + if(sets.length == 1 && !sizes){ + sizes = 'auto'; + } + + sets.forEach(function(set){ + var match; + var source = document.createElement('source'); + + if(sizes && sizes != 'auto'){ + source.setAttribute('sizes', sizes); + } + + if((match = set.match(regSource))){ + source.setAttribute(lazySizesCfg.srcsetAttr, match[1]); + + setTypeOrMedia(source, match[2]); + setTypeOrMedia(source, match[3]); + } else { + source.setAttribute(lazySizesCfg.srcsetAttr, set); + } + + picture.appendChild(source); + }); + + if(sizes){ + img.setAttribute(lazySizesCfg.sizesAttr, sizes); + elem.removeAttribute(lazySizesCfg.sizesAttr); + elem.removeAttribute('sizes'); + } + if(optimumx){ + img.setAttribute('data-optimumx', optimumx); + } + if(ratio) { + img.setAttribute('data-ratio', ratio); + } + + picture.appendChild(img); + + elem.appendChild(picture); + }; + + var proxyLoad = function(e){ + if(!e.target._lazybgset){return;} + + var image = e.target; + var elem = image._lazybgset; + var bg = image.currentSrc || image.src; + + + if(bg){ + var event = lazySizes.fire(elem, 'bgsetproxy', { + src: bg, + useSrc: regBgUrlEscape.test(bg) ? JSON.stringify(bg) : bg, + }); + + if(!event.defaultPrevented){ + elem.style.backgroundImage = 'url(' + event.detail.useSrc + ')'; + } + } + + if(image._lazybgsetLoading){ + lazySizes.fire(elem, '_lazyloaded', {}, false, true); + delete image._lazybgsetLoading; + } + }; + + addEventListener('lazybeforeunveil', function(e){ + var set, image, elem; + + if(e.defaultPrevented || !(set = e.target.getAttribute('data-bgset'))){return;} + + elem = e.target; + image = document.createElement('img'); + + image.alt = ''; + + image._lazybgsetLoading = true; + e.detail.firesLoad = true; + + createPicture(set, elem, image); + + setTimeout(function(){ + lazySizes.loader.unveil(image); + + lazySizes.rAF(function(){ + lazySizes.fire(image, '_lazyloaded', {}, true, true); + if(image.complete) { + proxyLoad({target: image}); + } + }); + }); + + }); + + document.addEventListener('load', proxyLoad, true); + + window.addEventListener('lazybeforesizes', function(e){ + if(e.detail.instance != lazySizes){return;} + if(e.target._lazybgset && e.detail.dataAttr){ + var elem = e.target._lazybgset; + var bgSize = getBgSize(elem); + + if(allowedBackgroundSize[bgSize]){ + e.target._lazysizesParentFit = bgSize; + + lazySizes.rAF(function(){ + e.target.setAttribute('data-parent-fit', bgSize); + if(e.target._lazysizesParentFit){ + delete e.target._lazysizesParentFit; + } + }); + } + } + }, true); + + document.documentElement.addEventListener('lazybeforesizes', function(e){ + if(e.defaultPrevented || !e.target._lazybgset || e.detail.instance != lazySizes){return;} + e.detail.width = proxyWidth(e.target._lazybgset); + }); +})); diff --git a/Resources/Private/Javascripts/lazysizes/plugins/bgset/ls.bgset.min.js b/Resources/Private/Javascripts/lazysizes/plugins/bgset/ls.bgset.min.js new file mode 100644 index 0000000..77e49ca --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/bgset/ls.bgset.min.js @@ -0,0 +1,2 @@ +/*! lazysizes - v5.1.1 */ +!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";if(a.addEventListener){var d=c.cfg,e=/\s+/g,f=/\s*\|\s+|\s+\|\s*/g,g=/^(.+?)(?:\s+\[\s*(.+?)\s*\])(?:\s+\[\s*(.+?)\s*\])?$/,h=/^\s*\(*\s*type\s*:\s*(.+?)\s*\)*\s*$/,i=/\(|\)|'/,j={contain:1,cover:1},k=function(a){var b=c.gW(a,a.parentNode);return(!a._lazysizesWidth||b>a._lazysizesWidth)&&(a._lazysizesWidth=b),a._lazysizesWidth},l=function(a){var b;return b=(getComputedStyle(a)||{getPropertyValue:function(){}}).getPropertyValue("background-size"),!j[b]&&j[a.style.backgroundSize]&&(b=a.style.backgroundSize),b},m=function(a,b){if(b){var c=b.match(h);c&&c[1]?a.setAttribute("type",c[1]):a.setAttribute("media",d.customMedia[b]||b)}},n=function(a,c,h){var i=b.createElement("picture"),j=c.getAttribute(d.sizesAttr),k=c.getAttribute("data-ratio"),l=c.getAttribute("data-optimumx");c._lazybgset&&c._lazybgset.parentNode==c&&c.removeChild(c._lazybgset),Object.defineProperty(h,"_lazybgset",{value:c,writable:!0}),Object.defineProperty(c,"_lazybgset",{value:i,writable:!0}),a=a.replace(e," ").split(f),i.style.display="none",h.className=d.lazyClass,1!=a.length||j||(j="auto"),a.forEach(function(a){var c,e=b.createElement("source");j&&"auto"!=j&&e.setAttribute("sizes",j),(c=a.match(g))?(e.setAttribute(d.srcsetAttr,c[1]),m(e,c[2]),m(e,c[3])):e.setAttribute(d.srcsetAttr,a),i.appendChild(e)}),j&&(h.setAttribute(d.sizesAttr,j),c.removeAttribute(d.sizesAttr),c.removeAttribute("sizes")),l&&h.setAttribute("data-optimumx",l),k&&h.setAttribute("data-ratio",k),i.appendChild(h),c.appendChild(i)},o=function(a){if(a.target._lazybgset){var b=a.target,d=b._lazybgset,e=b.currentSrc||b.src;if(e){var f=c.fire(d,"bgsetproxy",{src:e,useSrc:i.test(e)?JSON.stringify(e):e});f.defaultPrevented||(d.style.backgroundImage="url("+f.detail.useSrc+")")}b._lazybgsetLoading&&(c.fire(d,"_lazyloaded",{},!1,!0),delete b._lazybgsetLoading)}};addEventListener("lazybeforeunveil",function(a){var d,e,f;!a.defaultPrevented&&(d=a.target.getAttribute("data-bgset"))&&(f=a.target,e=b.createElement("img"),e.alt="",e._lazybgsetLoading=!0,a.detail.firesLoad=!0,n(d,f,e),setTimeout(function(){c.loader.unveil(e),c.rAF(function(){c.fire(e,"_lazyloaded",{},!0,!0),e.complete&&o({target:e})})}))}),b.addEventListener("load",o,!0),a.addEventListener("lazybeforesizes",function(a){if(a.detail.instance==c&&a.target._lazybgset&&a.detail.dataAttr){var b=a.target._lazybgset,d=l(b);j[d]&&(a.target._lazysizesParentFit=d,c.rAF(function(){a.target.setAttribute("data-parent-fit",d),a.target._lazysizesParentFit&&delete a.target._lazysizesParentFit}))}},!0),b.documentElement.addEventListener("lazybeforesizes",function(a){!a.defaultPrevented&&a.target._lazybgset&&a.detail.instance==c&&(a.detail.width=k(a.target._lazybgset))})}}); \ No newline at end of file diff --git a/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/README.md b/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/README.md new file mode 100644 index 0000000..d44139a --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/README.md @@ -0,0 +1,87 @@ +# lazySizes parent fit extension + +The parent fit plugin extends the ``data-sizes="auto"`` feature to also calculate the right ``sizes`` for ``object-fit: contain|cover`` image elements as also **height** ( and width) constrained image elements in general. + +## Usage + +```js +// never try to import *.min.js files +import lazySizes from 'lazysizes'; +import 'lazysizes/plugins/parent-fit/ls.parent-fit'; +``` + +For this to work properly the physical aspect-ratio of the image candidates need to be calculable. To do so either a `data-aspectratio` attribute has to be provided on the `source`/`img` element(s) or through `width` and `height` content attributes or at least one of the image candidates inside the ``srcset`` attribute also need to include a **h** (height) descriptor. (MS Edge has problems to read image candidates using the h descriptor, which is fixed by the [respimg polyfill](../respimg)) + +### object-fit: contain|cover usage + +Simply include this plugin, combine your width descriptors with height descriptors and use ``object-fit``. (To get object-fit support into IE9-11 use the [object-fit polyfill](../object-fit).) + +```html + + + + + + + + + + + +``` + + + +### [data-parent-fit="contain|cover|width"] usage + +This plugin also supports calculating height and width constrained images based on a parent element. + +To do so include this plugin, combine your width descriptors with height descriptors and add the attribute ``data-parent-fit`` with either ``"contain"`` or ``"cover"`` as the keyword. + +```html +
+ +
+``` + +In case the *width* keyword is used, lazySizes simply takes the width of the parent container instead of the ``img`` element itself. In this case a **h** descriptor isn't necessary. + +### [data-parent-container="html|.my-image-container"] +Normally the next closest parent that is not a `picture` element is used as the parent (i.e.: `:not(picture)`). This can be changed using the `data-parent-container` option. It takes any simple selector. If you want to use the viewport as the parent simply add `html`. + +As a special keyword the value `self` can be used to signalize, that image itself should be taken. + +### Controlling `data-parent-fit` and `data-parent-container` with CSS +These option can also be set via CSS by abusing the `font-family` property. + +The `data-parent-fit` option is called here `parent-fit` and `data-parent-container` is called `parent-container`: + +```css +img.my-image { + font-family: parent-container: html; parent-fit: contain; +} +``` + +**Note: This plugin should be also added, if you use the [bgset plugin](../bgset/) in combination with ``data-sizes="auto"`` and ``background-size: cover|contain`` and it is also the base of the [object-fit polyfill plugin](../object-fit).** diff --git a/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.js b/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.js new file mode 100644 index 0000000..9521961 --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.js @@ -0,0 +1,172 @@ +(function(window, factory) { + if(!window) {return;} + var globalInstall = function(){ + factory(window.lazySizes); + window.removeEventListener('lazyunveilread', globalInstall, true); + }; + + factory = factory.bind(null, window, window.document); + + if(typeof module == 'object' && module.exports){ + factory(require('lazysizes')); + } else if(window.lazySizes) { + globalInstall(); + } else { + window.addEventListener('lazyunveilread', globalInstall, true); + } +}(typeof window != 'undefined' ? + window : 0, function(window, document, lazySizes) { + 'use strict'; + + if(!window.addEventListener){return;} + + var regDescriptors = /\s+(\d+)(w|h)\s+(\d+)(w|h)/; + var regCssFit = /parent-fit["']*\s*:\s*["']*(contain|cover|width)/; + var regCssObject = /parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/; + var regPicture = /^picture$/i; + var cfg = lazySizes.cfg; + + var getCSS = function (elem){ + return (getComputedStyle(elem, null) || {}); + }; + + var parentFit = { + + getParent: function(element, parentSel){ + var parent = element; + var parentNode = element.parentNode; + + if((!parentSel || parentSel == 'prev') && parentNode && regPicture.test(parentNode.nodeName || '')){ + parentNode = parentNode.parentNode; + } + + if(parentSel != 'self'){ + if(parentSel == 'prev'){ + parent = element.previousElementSibling; + } else if(parentSel && (parentNode.closest || window.jQuery)){ + parent = (parentNode.closest ? + parentNode.closest(parentSel) : + jQuery(parentNode).closest(parentSel)[0]) || + parentNode + ; + } else { + parent = parentNode; + } + } + + return parent; + }, + + getFit: function(element){ + var tmpMatch, parentObj; + var css = getCSS(element); + var content = css.content || css.fontFamily; + var obj = { + fit: element._lazysizesParentFit || element.getAttribute('data-parent-fit') + }; + + if(!obj.fit && content && (tmpMatch = content.match(regCssFit))){ + obj.fit = tmpMatch[1]; + } + + if(obj.fit){ + parentObj = element._lazysizesParentContainer || element.getAttribute('data-parent-container'); + + if(!parentObj && content && (tmpMatch = content.match(regCssObject))){ + parentObj = tmpMatch[1]; + } + + obj.parent = parentFit.getParent(element, parentObj); + + + } else { + obj.fit = css.objectFit; + } + + return obj; + }, + + getImageRatio: function(element){ + var i, srcset, media, ratio, match, width, height; + var parent = element.parentNode; + var elements = parent && regPicture.test(parent.nodeName || '') ? + parent.querySelectorAll('source, img') : + [element] + ; + + for(i = 0; i < elements.length; i++){ + element = elements[i]; + srcset = element.getAttribute(cfg.srcsetAttr) || element.getAttribute('srcset') || element.getAttribute('data-pfsrcset') || element.getAttribute('data-risrcset') || ''; + media = element._lsMedia || element.getAttribute('media'); + media = cfg.customMedia[element.getAttribute('data-media') || media] || media; + + if(srcset && (!media || (window.matchMedia && matchMedia(media) || {}).matches )){ + ratio = parseFloat(element.getAttribute('data-aspectratio')); + + if (!ratio) { + match = srcset.match(regDescriptors); + + if (match) { + if(match[2] == 'w'){ + width = match[1]; + height = match[3]; + } else { + width = match[3]; + height = match[1]; + } + } else { + width = element.getAttribute('width'); + height = element.getAttribute('height'); + } + + ratio = width / height; + } + + break; + } + } + + return ratio; + }, + + calculateSize: function(element, width){ + var displayRatio, height, imageRatio, retWidth; + var fitObj = this.getFit(element); + var fit = fitObj.fit; + var fitElem = fitObj.parent; + + if(fit != 'width' && ((fit != 'contain' && fit != 'cover') || !(imageRatio = this.getImageRatio(element)))){ + return width; + } + + if(fitElem){ + width = fitElem.clientWidth; + } else { + fitElem = element; + } + + retWidth = width; + + if(fit == 'width'){ + retWidth = width; + } else { + height = fitElem.clientHeight; + + if((displayRatio = width / height) && ((fit == 'cover' && displayRatio < imageRatio) || (fit == 'contain' && displayRatio > imageRatio))){ + retWidth = width * (imageRatio / displayRatio); + } + } + + return retWidth; + } + }; + + lazySizes.parentFit = parentFit; + + document.addEventListener('lazybeforesizes', function(e){ + if(e.defaultPrevented || e.detail.instance != lazySizes){return;} + + var element = e.target; + e.detail.width = parentFit.calculateSize(element, e.detail.width); + }); +})); diff --git a/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.min.js b/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.min.js new file mode 100644 index 0000000..fb63d25 --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.min.js @@ -0,0 +1,2 @@ +/*! lazysizes - v5.1.1 */ +!function(a,b){if(a){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}}("undefined"!=typeof window?window:0,function(a,b,c){"use strict";if(a.addEventListener){var d=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,e=/parent-fit["']*\s*:\s*["']*(contain|cover|width)/,f=/parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/,g=/^picture$/i,h=c.cfg,i=function(a){return getComputedStyle(a,null)||{}},j={getParent:function(b,c){var d=b,e=b.parentNode;return c&&"prev"!=c||!e||!g.test(e.nodeName||"")||(e=e.parentNode),"self"!=c&&(d="prev"==c?b.previousElementSibling:c&&(e.closest||a.jQuery)?(e.closest?e.closest(c):jQuery(e).closest(c)[0])||e:e),d},getFit:function(a){var b,c,d=i(a),g=d.content||d.fontFamily,h={fit:a._lazysizesParentFit||a.getAttribute("data-parent-fit")};return!h.fit&&g&&(b=g.match(e))&&(h.fit=b[1]),h.fit?(c=a._lazysizesParentContainer||a.getAttribute("data-parent-container"),!c&&g&&(b=g.match(f))&&(c=b[1]),h.parent=j.getParent(a,c)):h.fit=d.objectFit,h},getImageRatio:function(b){var c,e,f,i,j,k,l,m=b.parentNode,n=m&&g.test(m.nodeName||"")?m.querySelectorAll("source, img"):[b];for(c=0;ce)&&(f=b*(e/c))),f):b}};c.parentFit=j,b.addEventListener("lazybeforesizes",function(a){if(!a.defaultPrevented&&a.detail.instance==c){var b=a.target;a.detail.width=j.calculateSize(b,a.detail.width)}})}}); \ No newline at end of file diff --git a/Resources/Private/Javascripts/lazysizes/plugins/respimg/README.md b/Resources/Private/Javascripts/lazysizes/plugins/respimg/README.md new file mode 100644 index 0000000..661af21 --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/respimg/README.md @@ -0,0 +1,114 @@ +# lazysizes respimg polyfill extension + +While [picturefill](https://github.com/scottjehl/picturefill) are full functional responsive images polyfills, the lazySizes respimg polyfill extension is only a partial polyfill, which supports only the most important subset of the native responsive images standard and only in conjunction with the lazySizes core script. + +As a result it is an extreme fast and lightweight plugin. + + +```js +// never try to import *.min.js files +import lazySizes from 'lazysizes'; +import 'lazysizes/plugins/respimg/ls.respimg'; +``` + +## constrained Markup support + +This plugin supports both art directed responsive images using the ``picture`` element as also resolution switching based on ``data-srcset`` using the width descriptor (and of course the combination of both). + +### What is *not* supported: + +- The use of explicit density descriptors (**x** descriptor) are not supported (This should not be a problem, because all use cases of the density descriptor can always also be substituted with a width descriptor). +- If ``data-srcset`` with width descriptors (**w** descriptor) are used either the ``data-sizes="auto"`` feature has to be used or the ``sizes`` value has to consist of just one source size value with the CSS *px* unit. +- If picture is used the ``img`` element should not have a ``srcset``/``data-srcset`` attribute, instead the last ``source`` element should/can be used without a ``media`` and ``type`` attribute. +- The use of the ``source[type]`` attribute is not automatically supported, but can be manually added by overriding the ``lazySizesConfig.supportsType`` option callback function. +- The use of the ``source[media]`` is supported for all browsers, which [do support ``matchMedia``](http://caniuse.com/#search=matchMedia). To add full support for IE9 and other legacy browsers a [``window.matchMedia`` polyfill](https://github.com/paulirish/matchMedia.js/) or ``Modernizr.mq`` (Modernizr Media Queries) can be used. + + +### What is *fully* supported + +Aside from above mentioned constraints everything else is fully supported. Here are some practical examples of fully supported responsive images: + +```html + + + + + + + + + + + + + + + image with artdirection + + + + + + + + + + + image with artdirection + + + + +``` + +### Tip: Using/Generating more complex dynamic ``sizes`` + +As explained above this partial polyfill only accepts one value for ``sizes`` using only the *px* length. Due to the fact, that also ``data-sizes="auto"`` is supported the ``lazybeforesizes`` event can be used to dynamically change/add different ``sizes``: + +```js +document.addEventListener('lazybeforesizes', function(e){ + //calculate the size as a number + e.detail.width = yourCalculation(e.target) || e.detail.width; +}); +``` diff --git a/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.js b/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.js new file mode 100644 index 0000000..4fdcb45 --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.js @@ -0,0 +1,309 @@ +(function(window, factory) { + if(!window) {return;} + var globalInstall = function(){ + factory(window.lazySizes); + window.removeEventListener('lazyunveilread', globalInstall, true); + }; + + factory = factory.bind(null, window, window.document); + + if(typeof module == 'object' && module.exports){ + factory(require('lazysizes')); + } else if(window.lazySizes) { + globalInstall(); + } else { + window.addEventListener('lazyunveilread', globalInstall, true); + } +}(typeof window != 'undefined' ? + window : 0, function(window, document, lazySizes) { + /*jshint eqnull:true */ + 'use strict'; + var polyfill; + var lazySizesCfg = lazySizes.cfg; + var img = document.createElement('img'); + var supportSrcset = ('sizes' in img) && ('srcset' in img); + var regHDesc = /\s+\d+h/g; + var fixEdgeHDescriptor = (function(){ + var regDescriptors = /\s+(\d+)(w|h)\s+(\d+)(w|h)/; + var forEach = Array.prototype.forEach; + + return function(){ + var img = document.createElement('img'); + var removeHDescriptors = function(source){ + var ratio, match; + var srcset = source.getAttribute(lazySizesCfg.srcsetAttr); + if(srcset){ + if((match = srcset.match(regDescriptors))){ + if(match[2] == 'w'){ + ratio = match[1] / match[3]; + } else { + ratio = match[3] / match[1]; + } + + if(ratio){ + source.setAttribute('data-aspectratio', ratio); + } + source.setAttribute(lazySizesCfg.srcsetAttr, srcset.replace(regHDesc, '')); + } + } + }; + var handler = function(e){ + if(e.detail.instance != lazySizes){return;} + var picture = e.target.parentNode; + + if(picture && picture.nodeName == 'PICTURE'){ + forEach.call(picture.getElementsByTagName('source'), removeHDescriptors); + } + removeHDescriptors(e.target); + }; + + var test = function(){ + if(!!img.currentSrc){ + document.removeEventListener('lazybeforeunveil', handler); + } + }; + + document.addEventListener('lazybeforeunveil', handler); + + img.onload = test; + img.onerror = test; + + img.srcset = 'data:,a 1w 1h'; + + if(img.complete){ + test(); + } + }; + })(); + + if(!lazySizesCfg.supportsType){ + lazySizesCfg.supportsType = function(type/*, elem*/){ + return !type; + }; + } + + if (window.HTMLPictureElement && supportSrcset) { + if(!lazySizes.hasHDescriptorFix && document.msElementsFromPoint){ + lazySizes.hasHDescriptorFix = true; + fixEdgeHDescriptor(); + } + return; + } + + if(window.picturefill || lazySizesCfg.pf){return;} + + lazySizesCfg.pf = function(options){ + var i, len; + if(window.picturefill){return;} + for(i = 0, len = options.elements.length; i < len; i++){ + polyfill(options.elements[i]); + } + }; + + // partial polyfill + polyfill = (function(){ + var ascendingSort = function( a, b ) { + return a.w - b.w; + }; + var regPxLength = /^\s*\d+\.*\d*px\s*$/; + var reduceCandidate = function (srces) { + var lowerCandidate, bonusFactor; + var len = srces.length; + var candidate = srces[len -1]; + var i = 0; + + for(i; i < len;i++){ + candidate = srces[i]; + candidate.d = candidate.w / srces.w; + + if(candidate.d >= srces.d){ + if(!candidate.cached && (lowerCandidate = srces[i - 1]) && + lowerCandidate.d > srces.d - (0.13 * Math.pow(srces.d, 2.2))){ + + bonusFactor = Math.pow(lowerCandidate.d - 0.6, 1.6); + + if(lowerCandidate.cached) { + lowerCandidate.d += 0.15 * bonusFactor; + } + + if(lowerCandidate.d + ((candidate.d - srces.d) * bonusFactor) > srces.d){ + candidate = lowerCandidate; + } + } + break; + } + } + return candidate; + }; + + var parseWsrcset = (function(){ + var candidates; + var regWCandidates = /(([^,\s].[^\s]+)\s+(\d+)w)/g; + var regMultiple = /\s/; + var addCandidate = function(match, candidate, url, wDescriptor){ + candidates.push({ + c: candidate, + u: url, + w: wDescriptor * 1 + }); + }; + + return function(input){ + candidates = []; + input = input.trim(); + input + .replace(regHDesc, '') + .replace(regWCandidates, addCandidate) + ; + + if(!candidates.length && input && !regMultiple.test(input)){ + candidates.push({ + c: input, + u: input, + w: 99 + }); + } + + return candidates; + }; + })(); + + var runMatchMedia = function(){ + if(runMatchMedia.init){return;} + + runMatchMedia.init = true; + addEventListener('resize', (function(){ + var timer; + var matchMediaElems = document.getElementsByClassName('lazymatchmedia'); + var run = function(){ + var i, len; + for(i = 0, len = matchMediaElems.length; i < len; i++){ + polyfill(matchMediaElems[i]); + } + }; + + return function(){ + clearTimeout(timer); + timer = setTimeout(run, 66); + }; + })()); + }; + + var createSrcset = function(elem, isImage){ + var parsedSet; + var srcSet = elem.getAttribute('srcset') || elem.getAttribute(lazySizesCfg.srcsetAttr); + + if(!srcSet && isImage){ + srcSet = !elem._lazypolyfill ? + (elem.getAttribute(lazySizesCfg.srcAttr) || elem.getAttribute('src')) : + elem._lazypolyfill._set + ; + } + + if(!elem._lazypolyfill || elem._lazypolyfill._set != srcSet){ + + parsedSet = parseWsrcset( srcSet || '' ); + if(isImage && elem.parentNode){ + parsedSet.isPicture = elem.parentNode.nodeName.toUpperCase() == 'PICTURE'; + + if(parsedSet.isPicture){ + if(window.matchMedia){ + lazySizes.aC(elem, 'lazymatchmedia'); + runMatchMedia(); + } + } + } + + parsedSet._set = srcSet; + Object.defineProperty(elem, '_lazypolyfill', { + value: parsedSet, + writable: true + }); + } + }; + + var getX = function(elem){ + var dpr = window.devicePixelRatio || 1; + var optimum = lazySizes.getX && lazySizes.getX(elem); + return Math.min(optimum || dpr, 2.5, dpr); + }; + + var matchesMedia = function(media){ + if(window.matchMedia){ + matchesMedia = function(media){ + return !media || (matchMedia(media) || {}).matches; + }; + } else { + return !media; + } + + return matchesMedia(media); + }; + + var getCandidate = function(elem){ + var sources, i, len, media, source, srces, src, width; + + source = elem; + createSrcset(source, true); + srces = source._lazypolyfill; + + if(srces.isPicture){ + for(i = 0, sources = elem.parentNode.getElementsByTagName('source'), len = sources.length; i < len; i++){ + if( lazySizesCfg.supportsType(sources[i].getAttribute('type'), elem) && matchesMedia( sources[i].getAttribute('media')) ){ + source = sources[i]; + createSrcset(source); + srces = source._lazypolyfill; + break; + } + } + } + + if(srces.length > 1){ + width = source.getAttribute('sizes') || ''; + width = regPxLength.test(width) && parseInt(width, 10) || lazySizes.gW(elem, elem.parentNode); + srces.d = getX(elem); + if(!srces.src || !srces.w || srces.w < width){ + srces.w = width; + src = reduceCandidate(srces.sort(ascendingSort)); + srces.src = src; + } else { + src = srces.src; + } + } else { + src = srces[0]; + } + + return src; + }; + + var p = function(elem){ + if(supportSrcset && elem.parentNode && elem.parentNode.nodeName.toUpperCase() != 'PICTURE'){return;} + var candidate = getCandidate(elem); + + if(candidate && candidate.u && elem._lazypolyfill.cur != candidate.u){ + elem._lazypolyfill.cur = candidate.u; + candidate.cached = true; + elem.setAttribute(lazySizesCfg.srcAttr, candidate.u); + elem.setAttribute('src', candidate.u); + } + }; + + p.parse = parseWsrcset; + + return p; + })(); + + if(lazySizesCfg.loadedClass && lazySizesCfg.loadingClass){ + (function(){ + var sels = []; + ['img[sizes$="px"][srcset].', 'picture > img:not([srcset]).'].forEach(function(sel){ + sels.push(sel + lazySizesCfg.loadedClass); + sels.push(sel + lazySizesCfg.loadingClass); + }); + lazySizesCfg.pf({ + elements: document.querySelectorAll(sels.join(', ')) + }); + })(); + + } +})); diff --git a/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.min.js b/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.min.js new file mode 100644 index 0000000..cc86a70 --- /dev/null +++ b/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.min.js @@ -0,0 +1,2 @@ +/*! lazysizes - v5.1.1 */ +!function(a,b){if(a){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}}("undefined"!=typeof window?window:0,function(a,b,c){"use strict";var d,e=c.cfg,f=b.createElement("img"),g="sizes"in f&&"srcset"in f,h=/\s+\d+h/g,i=function(){var a=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,d=Array.prototype.forEach;return function(){var f=b.createElement("img"),g=function(b){var c,d,f=b.getAttribute(e.srcsetAttr);f&&(d=f.match(a))&&(c="w"==d[2]?d[1]/d[3]:d[3]/d[1],c&&b.setAttribute("data-aspectratio",c),b.setAttribute(e.srcsetAttr,f.replace(h,"")))},i=function(a){if(a.detail.instance==c){var b=a.target.parentNode;b&&"PICTURE"==b.nodeName&&d.call(b.getElementsByTagName("source"),g),g(a.target)}},j=function(){f.currentSrc&&b.removeEventListener("lazybeforeunveil",i)};b.addEventListener("lazybeforeunveil",i),f.onload=j,f.onerror=j,f.srcset="data:,a 1w 1h",f.complete&&j()}}();if(e.supportsType||(e.supportsType=function(a){return!a}),a.HTMLPictureElement&&g)return void(!c.hasHDescriptorFix&&b.msElementsFromPoint&&(c.hasHDescriptorFix=!0,i()));a.picturefill||e.pf||(e.pf=function(b){var c,e;if(!a.picturefill)for(c=0,e=b.elements.length;c=a.d){!e.cached&&(b=a[f-1])&&b.d>a.d-.13*Math.pow(a.d,2.2)&&(c=Math.pow(b.d-.6,1.6),b.cached&&(b.d+=.15*c),b.d+(e.d-a.d)*c>a.d&&(e=b));break}return e},k=function(){var a,b=/(([^,\s].[^\s]+)\s+(\d+)w)/g,c=/\s/,d=function(b,c,d,e){a.push({c:c,u:d,w:1*e})};return function(e){return a=[],e=e.trim(),e.replace(h,"").replace(b,d),a.length||!e||c.test(e)||a.push({c:e,u:e,w:99}),a}}(),l=function(){l.init||(l.init=!0,addEventListener("resize",function(){var a,c=b.getElementsByClassName("lazymatchmedia"),e=function(){var a,b;for(a=0,b=c.length;a1?(p=h.getAttribute("sizes")||"",p=i.test(p)&&parseInt(p,10)||c.gW(a,a.parentNode),k.d=n(a),!k.src||!k.w||k.w img:not([srcset])."].forEach(function(b){a.push(b+e.loadedClass),a.push(b+e.loadingClass)}),e.pf({elements:b.querySelectorAll(a.join(", "))})}())}); \ No newline at end of file diff --git a/Resources/Private/Javascripts/ls.bgset.min.js b/Resources/Private/Javascripts/ls.bgset.min.js deleted file mode 100644 index bf5c3ce..0000000 --- a/Resources/Private/Javascripts/ls.bgset.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! lazysizes - v4.0.2 */ -!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";if(a.addEventListener){var d=/\s+/g,e=/\s*\|\s+|\s+\|\s*/g,f=/^(.+?)(?:\s+\[\s*(.+?)\s*\])?$/,g=/\(|\)|'/,h={contain:1,cover:1},i=function(a){var b=c.gW(a,a.parentNode);return(!a._lazysizesWidth||b>a._lazysizesWidth)&&(a._lazysizesWidth=b),a._lazysizesWidth},j=function(a){var b;return b=(getComputedStyle(a)||{getPropertyValue:function(){}}).getPropertyValue("background-size"),!h[b]&&h[a.style.backgroundSize]&&(b=a.style.backgroundSize),b},k=function(a,c,g){var h=b.createElement("picture"),i=c.getAttribute(lazySizesConfig.sizesAttr),j=c.getAttribute("data-ratio"),k=c.getAttribute("data-optimumx");c._lazybgset&&c._lazybgset.parentNode==c&&c.removeChild(c._lazybgset),Object.defineProperty(g,"_lazybgset",{value:c,writable:!0}),Object.defineProperty(c,"_lazybgset",{value:h,writable:!0}),a=a.replace(d," ").split(e),h.style.display="none",g.className=lazySizesConfig.lazyClass,1!=a.length||i||(i="auto"),a.forEach(function(a){var c,d=b.createElement("source");i&&"auto"!=i&&d.setAttribute("sizes",i),(c=a.match(f))&&(d.setAttribute(lazySizesConfig.srcsetAttr,c[1]),c[2]&&d.setAttribute("media",lazySizesConfig.customMedia[c[2]]||c[2])),h.appendChild(d)}),i&&(g.setAttribute(lazySizesConfig.sizesAttr,i),c.removeAttribute(lazySizesConfig.sizesAttr),c.removeAttribute("sizes")),k&&g.setAttribute("data-optimumx",k),j&&g.setAttribute("data-ratio",j),h.appendChild(g),c.appendChild(h)},l=function(a){if(a.target._lazybgset){var b=a.target,d=b._lazybgset,e=b.currentSrc||b.src;e&&(d.style.backgroundImage="url("+(g.test(e)?JSON.stringify(e):e)+")"),b._lazybgsetLoading&&(c.fire(d,"_lazyloaded",{},!1,!0),delete b._lazybgsetLoading)}};addEventListener("lazybeforeunveil",function(a){var d,e,f;!a.defaultPrevented&&(d=a.target.getAttribute("data-bgset"))&&(f=a.target,e=b.createElement("img"),e.alt="",e._lazybgsetLoading=!0,a.detail.firesLoad=!0,k(d,f,e),setTimeout(function(){c.loader.unveil(e),c.rAF(function(){c.fire(e,"_lazyloaded",{},!0,!0),e.complete&&l({target:e})})}))}),b.addEventListener("load",l,!0),a.addEventListener("lazybeforesizes",function(a){if(a.detail.instance==c&&a.target._lazybgset&&a.detail.dataAttr){var b=a.target._lazybgset,d=j(b);h[d]&&(a.target._lazysizesParentFit=d,c.rAF(function(){a.target.setAttribute("data-parent-fit",d),a.target._lazysizesParentFit&&delete a.target._lazysizesParentFit}))}},!0),b.documentElement.addEventListener("lazybeforesizes",function(a){!a.defaultPrevented&&a.target._lazybgset&&a.detail.instance==c&&(a.detail.width=i(a.target._lazybgset))})}}); \ No newline at end of file diff --git a/Resources/Private/Javascripts/ls.parent-fit.min.js b/Resources/Private/Javascripts/ls.parent-fit.min.js deleted file mode 100644 index 0b04d9b..0000000 --- a/Resources/Private/Javascripts/ls.parent-fit.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! lazysizes - v4.0.2 */ -!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";if(a.addEventListener){var d=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,e=/parent-fit["']*\s*:\s*["']*(contain|cover|width)/,f=/parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/,g=/^picture$/i,h=function(a){return getComputedStyle(a,null)||{}},i={getParent:function(b,c){var d=b,e=b.parentNode;return c&&"prev"!=c||!e||!g.test(e.nodeName||"")||(e=e.parentNode),"self"!=c&&(d="prev"==c?b.previousElementSibling:c&&(e.closest||a.jQuery)?(e.closest?e.closest(c):jQuery(e).closest(c)[0])||e:e),d},getFit:function(a){var b,c,d=h(a),g=d.content||d.fontFamily,j={fit:a._lazysizesParentFit||a.getAttribute("data-parent-fit")};return!j.fit&&g&&(b=g.match(e))&&(j.fit=b[1]),j.fit?(c=a._lazysizesParentContainer||a.getAttribute("data-parent-container"),!c&&g&&(b=g.match(f))&&(c=b[1]),j.parent=i.getParent(a,c)):j.fit=d.objectFit,j},getImageRatio:function(b){var c,e,f,h,i,j=b.parentNode,k=j&&g.test(j.nodeName||"")?j.querySelectorAll("source, img"):[b];for(c=0;c40&&(c=b/d)&&("cover"==h&&e>c||"contain"==h&&c>e)&&(f=b*(e/c))),f):b}};c.parentFit=i,b.addEventListener("lazybeforesizes",function(a){if(!a.defaultPrevented&&a.detail.instance==c){var b=a.target;a.detail.width=i.calculateSize(b,a.detail.width)}})}}); \ No newline at end of file diff --git a/Resources/Private/Javascripts/ls.respimg.min.js b/Resources/Private/Javascripts/ls.respimg.min.js deleted file mode 100644 index 12aad20..0000000 --- a/Resources/Private/Javascripts/ls.respimg.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! lazysizes - v4.0.1 */ -!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes"),require("../fix-ios-sizes/fix-ios-sizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";var d,e=c&&c.cfg||a.lazySizesConfig,f=b.createElement("img"),g="sizes"in f&&"srcset"in f,h=/\s+\d+h/g,i=function(){var a=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,c=Array.prototype.forEach;return function(d){var e=b.createElement("img"),f=function(b){var c,d=b.getAttribute(lazySizesConfig.srcsetAttr);d&&(d.match(a)&&(c="w"==RegExp.$2?RegExp.$1/RegExp.$3:RegExp.$3/RegExp.$1,c&&b.setAttribute("data-aspectratio",c)),b.setAttribute(lazySizesConfig.srcsetAttr,d.replace(h,"")))},g=function(a){var b=a.target.parentNode;b&&"PICTURE"==b.nodeName&&c.call(b.getElementsByTagName("source"),f),f(a.target)},i=function(){e.currentSrc&&b.removeEventListener("lazybeforeunveil",g)};d[1]&&(b.addEventListener("lazybeforeunveil",g),e.onload=i,e.onerror=i,e.srcset="data:,a 1w 1h",e.complete&&i())}}();if(e||(e={},a.lazySizesConfig=e),e.supportsType||(e.supportsType=function(a){return!a}),!a.picturefill&&!e.pf){if(a.HTMLPictureElement&&g)return b.msElementsFromPoint&&i(navigator.userAgent.match(/Edge\/(\d+)/)),void(e.pf=function(){});e.pf=function(b){var c,e;if(!a.picturefill)for(c=0,e=b.elements.length;e>c;c++)d(b.elements[c])},d=function(){var f=function(a,b){return a.w-b.w},i=/^\s*\d+\.*\d*px\s*$/,j=function(a){var b,c,d=a.length,e=a[d-1],f=0;for(f;d>f;f++)if(e=a[f],e.d=e.w/a.w,e.d>=a.d){!e.cached&&(b=a[f-1])&&b.d>a.d-.13*Math.pow(a.d,2.2)&&(c=Math.pow(b.d-.6,1.6),b.cached&&(b.d+=.15*c),b.d+(e.d-a.d)*c>a.d&&(e=b));break}return e},k=function(){var a,b=/(([^,\s].[^\s]+)\s+(\d+)w)/g,c=/\s/,d=function(b,c,d,e){a.push({c:c,u:d,w:1*e})};return function(e){return a=[],e=e.trim(),e.replace(h,"").replace(b,d),a.length||!e||c.test(e)||a.push({c:e,u:e,w:99}),a}}(),l=function(){l.init||(l.init=!0,addEventListener("resize",function(){var a,c=b.getElementsByClassName("lazymatchmedia"),e=function(){var a,b;for(a=0,b=c.length;b>a;a++)d(c[a])};return function(){clearTimeout(a),a=setTimeout(e,66)}}()))},m=function(b,d){var f,g=b.getAttribute("srcset")||b.getAttribute(e.srcsetAttr);!g&&d&&(g=b._lazypolyfill?b._lazypolyfill._set:b.getAttribute(e.srcAttr)||b.getAttribute("src")),b._lazypolyfill&&b._lazypolyfill._set==g||(f=k(g||""),d&&b.parentNode&&(f.isPicture="PICTURE"==b.parentNode.nodeName.toUpperCase(),f.isPicture&&a.matchMedia&&(c.aC(b,"lazymatchmedia"),l())),f._set=g,Object.defineProperty(b,"_lazypolyfill",{value:f,writable:!0}))},n=function(b){var d=a.devicePixelRatio||1,e=c.getX&&c.getX(b);return Math.min(e||d,2.5,d)},o=function(b){return a.matchMedia?(o=function(a){return!a||(matchMedia(a)||{}).matches})(b):!b},p=function(a){var b,d,g,h,k,l,p;if(h=a,m(h,!0),k=h._lazypolyfill,k.isPicture)for(d=0,b=a.parentNode.getElementsByTagName("source"),g=b.length;g>d;d++)if(e.supportsType(b[d].getAttribute("type"),a)&&o(b[d].getAttribute("media"))){h=b[d],m(h),k=h._lazypolyfill;break}return k.length>1?(p=h.getAttribute("sizes")||"",p=i.test(p)&&parseInt(p,10)||c.gW(a,a.parentNode),k.d=n(a),!k.src||!k.w||k.w img:not([srcset])."].forEach(function(b){a.push(b+e.loadedClass),a.push(b+e.loadingClass)}),e.pf({elements:b.querySelectorAll(a.join(", "))})}()}}); \ No newline at end of file diff --git a/Resources/Private/Partials/ContentElements/Media/Rendering/Image.html b/Resources/Private/Partials/ContentElements/Media/Rendering/Image.html index 2723903..8b23d59 100644 --- a/Resources/Private/Partials/ContentElements/Media/Rendering/Image.html +++ b/Resources/Private/Partials/ContentElements/Media/Rendering/Image.html @@ -1,4 +1,4 @@ {namespace v=Visol\Viresponsiveimages\ViewHelpers} - + diff --git a/Resources/Private/TypoScript/setup.typoscript b/Resources/Private/TypoScript/setup.typoscript index f6d32fa..73e82cf 100644 --- a/Resources/Private/TypoScript/setup.typoscript +++ b/Resources/Private/TypoScript/setup.typoscript @@ -3,10 +3,10 @@ config { } page.includeJSFooterlibs { - lazysizes1respimg = EXT:viresponsiveimages/Resources/Private/Javascripts/ls.respimg.min.js - lazysizes2parentfit = EXT:viresponsiveimages/Resources/Private/Javascripts/ls.parent-fit.min.js - lazysizes3bgset = EXT:viresponsiveimages/Resources/Private/Javascripts/ls.bgset.min.js - lazysizes9core = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes.min.js + lazysizes1respimg = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.min.js + lazysizes2parentfit = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.min.js + lazysizes3bgset = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/plugins/ls.bgset.min.js + lazysizes9core = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/lazysizes.min.js }