| 1 |
/* eslint-disable no-unused-vars, radix */ |
| 2 |
// eslint-disable-next-line no-use-before-define |
| 3 |
// eslint-disable-next-line camelcase |
| 4 |
|
| 5 |
'use strict'; |
| 6 |
|
| 7 |
window.PCLL_options = window.PCLL_options || {}; |
| 8 |
|
| 9 |
var PCLL = ( function() { |
| 10 |
var PCLL = { |
| 11 |
|
| 12 |
_lastCheckTs: 0, |
| 13 |
_checkDebounceTimeoutRunning: false, |
| 14 |
_earlyLoadedCount: 0, |
| 15 |
|
| 16 |
init: function () { |
| 17 |
PCLL.threshold = PCLL.getOptionIntValue('threshold', 200); |
| 18 |
PCLL.recheckDelay = PCLL.getOptionIntValue('recheck_delay', 250); |
| 19 |
PCLL.debounce = PCLL.getOptionIntValue('debounce', 50); |
| 20 |
PCLL.immediateLoadCount = PCLL.getOptionIntValue('immediate_load_count', 3) |
| 21 |
PCLL.checkRecurring(); |
| 22 |
PCLL.lazyLoadYouTube(); |
| 23 |
return PCLL; |
| 24 |
}, |
| 25 |
|
| 26 |
check: function( fromDebounceTimeout ) { |
| 27 |
var tstamp, winH, updated, els; |
| 28 |
if ( true === fromDebounceTimeout ) { |
| 29 |
PCLL._checkDebounceTimeoutRunning = false; |
| 30 |
} |
| 31 |
tstamp = performance.now(); |
| 32 |
if ( tstamp < PCLL._lastCheckTs + PCLL.debounce ) { |
| 33 |
if ( ! PCLL._checkDebounceTimeoutRunning ) { |
| 34 |
PCLL._checkDebounceTimeoutRunning = true; |
| 35 |
setTimeout( function() { |
| 36 |
PCLL.check( true ); |
| 37 |
}, PCLL.debounce ); |
| 38 |
} |
| 39 |
return; |
| 40 |
} |
| 41 |
PCLL._lastCheckTs = tstamp; |
| 42 |
|
| 43 |
winH = document.documentElement.clientHeight || body.clientHeight; |
| 44 |
updated = false; |
| 45 |
els = document.getElementsByClassName( 'lazy-hidden' ); |
| 46 |
|
| 47 |
[].forEach.call( els, function( el, index, array ) { |
| 48 |
var elemRect = el.getBoundingClientRect(); |
| 49 |
|
| 50 |
// do not lazy-load images that are hidden with display:none or have a width/height of 0 |
| 51 |
if ( ! elemRect.width || ! elemRect.height ) { |
| 52 |
return; |
| 53 |
} |
| 54 |
|
| 55 |
// directly load the first nth images |
| 56 |
if (PCLL._earlyLoadedCount <= PCLL.immediateLoadCount) { |
| 57 |
PCLL._earlyLoadedCount++; |
| 58 |
PCLL.showImmediately( el ); |
| 59 |
} |
| 60 |
|
| 61 |
if ( 0 < winH - elemRect.top + PCLL.threshold ) { |
| 62 |
PCLL.show( el ); |
| 63 |
updated = true; |
| 64 |
} |
| 65 |
}); |
| 66 |
|
| 67 |
if ( updated ) { |
| 68 |
PCLL.check(); |
| 69 |
} |
| 70 |
}, |
| 71 |
|
| 72 |
checkRecurring: function() { |
| 73 |
PCLL.check(); |
| 74 |
setTimeout( PCLL.checkRecurring, PCLL.recheckDelay ); |
| 75 |
}, |
| 76 |
|
| 77 |
show: function( el ) { |
| 78 |
var type, s, div, iframe; |
| 79 |
el.className = el.className.replace( /(?:^|\s)lazy-hidden(?!\S)/g, '' ); |
| 80 |
el.addEventListener( 'load', function() { |
| 81 |
el.className += ' lazy-loaded'; |
| 82 |
PCLL.customEvent( el, 'lazyloaded' ); |
| 83 |
}, false ); |
| 84 |
|
| 85 |
type = el.getAttribute( 'data-lazy-type' ); |
| 86 |
|
| 87 |
if ( 'image' == type ) { |
| 88 |
if ( null != el.getAttribute( 'data-lazy-srcset' ) ) { |
| 89 |
el.setAttribute( 'srcset', el.getAttribute( 'data-lazy-srcset' ) ); |
| 90 |
} |
| 91 |
if ( null != el.getAttribute( 'data-lazy-sizes' ) ) { |
| 92 |
el.setAttribute( 'sizes', el.getAttribute( 'data-lazy-sizes' ) ); |
| 93 |
} |
| 94 |
el.setAttribute( 'src', el.getAttribute( 'data-lazy-src' ) ); |
| 95 |
} else if ( 'iframe' == type ) { |
| 96 |
s = el.getAttribute( 'data-lazy-src' ); |
| 97 |
div = document.createElement( 'div' ); |
| 98 |
|
| 99 |
div.innerHTML = s; |
| 100 |
iframe = div.firstChild; |
| 101 |
el.parentNode.replaceChild( iframe, el ); |
| 102 |
} |
| 103 |
}, |
| 104 |
|
| 105 |
showImmediately: function( el ) { |
| 106 |
// This function is similar to the "show" function but without lazy loading |
| 107 |
var type, s, div, iframe; |
| 108 |
el.className = el.className.replace( /(?:^|\s)lazy-hidden(?!\S)/g, '' ); |
| 109 |
el.addEventListener( 'load', function() { |
| 110 |
el.className += ' lazy-load-direct'; |
| 111 |
PCLL.customEvent( el, 'lazyloaded' ); |
| 112 |
}, false ); |
| 113 |
|
| 114 |
// Remove native lazyload if present |
| 115 |
if (el.hasAttribute('loading')) { |
| 116 |
el.removeAttribute('loading'); |
| 117 |
} |
| 118 |
|
| 119 |
type = el.getAttribute( 'data-lazy-type' ); |
| 120 |
|
| 121 |
if ( 'image' == type ) { |
| 122 |
if ( null != el.getAttribute( 'data-lazy-srcset' ) ) { |
| 123 |
el.setAttribute( 'srcset', el.getAttribute( 'data-lazy-srcset' ) ); |
| 124 |
} |
| 125 |
if ( null != el.getAttribute( 'data-lazy-sizes' ) ) { |
| 126 |
el.setAttribute( 'sizes', el.getAttribute( 'data-lazy-sizes' ) ); |
| 127 |
} |
| 128 |
el.setAttribute( 'src', el.getAttribute( 'data-lazy-src' ) ); |
| 129 |
} else if ( 'iframe' == type ) { |
| 130 |
s = el.getAttribute( 'data-lazy-src' ); |
| 131 |
div = document.createElement( 'div' ); |
| 132 |
|
| 133 |
div.innerHTML = s; |
| 134 |
iframe = div.firstChild; |
| 135 |
el.parentNode.replaceChild( iframe, el ); |
| 136 |
} |
| 137 |
}, |
| 138 |
|
| 139 |
customEvent: function( el, eventName ) { |
| 140 |
var event; |
| 141 |
|
| 142 |
if ( document.createEvent ) { |
| 143 |
event = document.createEvent( 'HTMLEvents' ); |
| 144 |
event.initEvent( eventName, true, true ); |
| 145 |
} else { |
| 146 |
event = document.createEventObject(); |
| 147 |
event.eventType = eventName; |
| 148 |
} |
| 149 |
|
| 150 |
event.eventName = eventName; |
| 151 |
|
| 152 |
if ( document.createEvent ) { |
| 153 |
el.dispatchEvent( event ); |
| 154 |
} else { |
| 155 |
el.fireEvent( 'on' + event.eventType, event ); |
| 156 |
} |
| 157 |
}, |
| 158 |
|
| 159 |
lazyLoadYouTube: function (el) { |
| 160 |
var lazyloadYoutube = document.querySelectorAll('.pcll-youtube-player'); |
| 161 |
|
| 162 |
lazyloadYoutube.forEach(function (div) { |
| 163 |
div.addEventListener('click', function () { |
| 164 |
var iframe = document.createElement('iframe'); |
| 165 |
iframe.setAttribute('frameborder', '0'); |
| 166 |
iframe.setAttribute('allowfullscreen', ''); |
| 167 |
iframe.setAttribute('allow', 'autoplay'); // Explicitly allow autoplay |
| 168 |
|
| 169 |
// Construct the iframe src with autoplay and feature parameters |
| 170 |
var baseSrc = this.getAttribute('data-src'); |
| 171 |
var separator = baseSrc.includes('?') ? '&' : '?'; // Determine the correct separator |
| 172 |
var videoSrc = `${baseSrc}${separator}autoplay=1&feature=oembed`; // Append autoplay=1 and feature=oembed |
| 173 |
|
| 174 |
iframe.setAttribute('src', videoSrc); |
| 175 |
iframe.style.width = '100%'; |
| 176 |
iframe.style.height = this.offsetHeight + 'px'; |
| 177 |
this.innerHTML = ''; |
| 178 |
this.appendChild(iframe); |
| 179 |
}); |
| 180 |
}); |
| 181 |
}, |
| 182 |
|
| 183 |
getOptionIntValue: function( name, defaultValue ) { |
| 184 |
// eslint-disable-next-line camelcase |
| 185 |
if ( 'undefined' !== typeof ( window.PCLL_options[name]) ) { |
| 186 |
// eslint-disable-next-line camelcase |
| 187 |
return parseInt( window.PCLL_options[name]); |
| 188 |
} |
| 189 |
return defaultValue; |
| 190 |
} |
| 191 |
}; |
| 192 |
return PCLL.init(); |
| 193 |
}() ); |
| 194 |
|
| 195 |
window.addEventListener( 'load', PCLL.check, false ); |
| 196 |
window.addEventListener( 'scroll', PCLL.check, false ); |
| 197 |
window.addEventListener( 'resize', PCLL.check, false ); |
| 198 |
document.getElementsByTagName( 'body' ).item( 0 ).addEventListener( 'post-load', PCLL.check, false ); |
| 199 |
|
