uncloakjs/dist/uncloak.min.js

IntersectionObserver-based lazy loader and content revealer

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Uncloak=e()}(this,function(){"use strict";function d(t,e,i){for(var s in t.removeAttribute("data-uncloak-new"),this.callbacks={init:[],uncloak:[]},this.callbacks)s in i.callbacks&&(this.callbacks[s]=i.callbacks[s]);this.cloaked=!0,this.uncloakReady=!1,this.delayTimer={y0:0,y1:null},this.delayType=t.getAttribute("data-uncloak-delay-type")||null,this.delayTypes=i.delayTypes||{},this.instance=e,this.lazyContent=t.hasAttribute("data-uncloak-ignore-lazy")?[]:Array.from(t.querySelectorAll("[data-uncloak-src], [data-uncloak-srcset], [data-uncloak-picture]")).filter(function(t){return!t.hasAttribute("data-uncloak-ignore")}),this.lazyContentLoadStatus=this.lazyContent[0]?-1:2,this.node=t,this.threshold=parseFloat(t.getAttribute("data-uncloak-threshold"))||0,this.lazyContentObserver=null}d.prototype.init=function(){var e=this;this.lazyContent[0]&&(this.lazyContentObserver=new IntersectionObserver(function(t){t[0].isIntersecting&&(e.loadLazyContent(),e.lazyContentObserver.disconnect())},{rootMargin:"50%"}),this.lazyContentObserver.observe(this.node)),this.runCallbacks("init")},d.prototype.process=function(t){return this.cloaked&&(null!==this.delayType&&null===this.delayTimer.y1&&(this.delayTimer={y0:performance.now(),y1:this.createDelayTimeout(t,this.delayType)},t++),this.mediaLoaded()?this.uncloak():this.uncloakReady=!0),t},d.prototype.uncloak=function(){var t,e,i,s=this;this.cloaked&&(this.cloaked=!1,t=performance.now()-this.delayTimer.y0,i=function(){s.node.classList.remove("uncloak--cloaked"),s.runCallbacks("uncloak")},(e=this.delayTimer.y1-t)<=0?i():setTimeout(i,e))},d.prototype.reset=function(t){void 0===t&&(t=!0),this.cloaked=!0,this.delayTimer={y0:0,y1:null},this.node.classList.add("uncloak--cloaked"),t&&this.instance.nodeObserver.observe(this.node)},d.prototype.runCallbacks=function(t){var e=this.callbacks[t];if(e&&e.length)for(var i=0;i<e.length;i++)e[i](this)},d.prototype.createDelayTimeout=function(t,e){return this.delayTypes&&this.delayTypes[e](t)||0},d.prototype.loadLazyContent=function(){var i=this;if(!this.mediaLoaded()&&1!==this.lazyContentLoadStatus){this.lazyContentLoadStatus=1;for(var s=this.lazyContent.length,o=function(t,e){return function(){e.removeEventListener("load",o,!1),t.removeAttribute("data-uncloak-src"),t.removeAttribute("data-uncloak-srcset"),t.removeAttribute("data-uncloak-ie-src"),t.removeAttribute("data-uncloak-alt"),t.removeAttribute("data-uncloak-class"),t.removeAttribute("data-uncloak-picture"),0===--s&&(i.lazyContentLoadStatus=2,i.uncloakReady&&i.uncloak())}},t=0;t<this.lazyContent.length;t++){var e,n=this.lazyContent[t],a=n.getAttribute("data-uncloak-srcset")||null,r=n;a&&(n.srcset=a),n.hasAttribute("data-uncloak-src")&&(n.src=n.getAttribute("data-uncloak-src")),n.hasAttribute("data-uncloak-picture")&&(r=e=document.createElement("img"),this.instance.isIE&&n.hasAttribute("data-uncloak-ie-src")&&(e.src=n.getAttribute("data-uncloak-ie-src")),n.hasAttribute("data-uncloak-alt")&&(e.alt=n.getAttribute("data-uncloak-alt")),n.hasAttribute("data-uncloak-class")&&(e.className=n.getAttribute("data-uncloak-class")),n.appendChild(e)),r.addEventListener("load",o(n,r),!1)}}},d.prototype.mediaLoaded=function(){return 2===this.lazyContentLoadStatus};function a(t,e){this.container=t.container,this.video=t.video||t.container.querySelector("video"),this.autoplay=t.autoplay||0,this.error=!1,this.isResponsive=!1,this.loadStatus=0,this.promise=null,this.requiresResize=this.container.hasAttribute("data-video-resize"),this.sources=[],this.callbacks={durationchange:[],firstPlay:[],playing:[],error:[]},e&&this.init()}a.prototype.init=function(){var t,e=this;0<this.loadStatus||(this.loadStatus=1,this.extractSources(),this.video.src||this.setSrc(),this.video.addEventListener("loadedmetadata",function(){e.video.currentTime=.1,e.requiresResize&&e.resizeVideo()},!1),this.video.addEventListener("durationchange",function(){e.loadStatus=2,e.video.setAttribute("muted",""),e.runCallbacks("durationchange"),e.autoplay&&e.play()},!1),t=function(){e.container.classList.add("video-loaded"),e.runCallbacks("firstPlay"),e.video.removeEventListener("playing",t,!1)},this.video.addEventListener("playing",t,!1),this.video.addEventListener("playing",function(){e.runCallbacks("playing")},!1),this.video.addEventListener("error",function(){e.disable()},!1))},a.prototype.disable=function(){this.container.classList.add("video-disabled"),this.error=!0,this.runCallbacks("error")},a.prototype.extractSources=function(){if(null!==(e=this.video.getAttribute("data-video-srcset")||null)){for(var t=/^\s*(.+)\s+(\d+)([wh])?\s*$/,e=e.split(","),i=0;i<e.length;i++){var s=e[i].match(t);s&&this.sources.push({src:s[1],width:parseInt(s[2])})}this.sources.sort(function(t,e){return t.width-e.width})}else(e=this.video.getAttribute("data-video-src"))&&(this.sources.push({src:e}),this.video.removeAttribute("data-video-src"));this.isResponsive=1<this.sources.length},a.prototype.play=function(){var t,e=this;!this.isLoading()&&this.video.paused&&null===this.promise&&(0===this.loadStatus&&this.init(),void 0!==(t=this.video.play())&&(this.promise=t).then(function(){e.promise=null}).catch(function(){e.promise.status&&"rejected"===e.promise.status&&e.disable()}),setTimeout(function(){e.video.paused&&e.disable()},100))},a.prototype.pause=function(){this.pauseReady()&&this.video.pause()},a.prototype.pauseReady=function(){return!this.video.paused&&null===this.promise&&2===this.loadStatus},a.prototype.reset=function(){this.pauseReady()&&(this.video.pause(),this.video.currentTime=.1)},a.prototype.setSrc=function(){if(this.isResponsive)for(var t=this.container.clientWidth,e=this.video.src.replace(/(https?:)/,""),i=this.video.paused,s=0;s<this.sources.length;s++)if(t<=this.sources[s].width||s===this.sources.length-1)return void(e!==this.sources[s].src&&(this.video.src=this.sources[s].src,i||this.play()));this.video.src=this.sources[0].src},a.prototype.addCallback=function(t,e){this.callbacks[t].push(e)},a.prototype.runCallbacks=function(t){var e=this.callbacks[t];if(e.length)for(var i=0;i<e.length;i++)e[i]()},a.prototype.isDisabled=function(){return this.error},a.prototype.isPaused=function(){return this.video.paused},a.prototype.isLoaded=function(){return 2===this.loadStatus},a.prototype.isLoading=function(){return 1===this.loadStatus},a.prototype.resizeVideo=function(){if(this.video.videoHeight/this.video.videoWidth<=this.container.offsetHeight/this.container.offsetWidth)return this.video.style.height="100%",void(this.video.style.width="auto");this.video.style.height="auto",this.video.style.width="100%"};function t(t){if(this.items=[],this.hasResizeListener=!1,this.nodeObserver=null,this.isIE="undefined"!=typeof document&&document.documentMode,this.itemOptions={delayTypes:{},callbacks:{}},t&&t.itemOptions)for(var e in this.itemOptions)t.itemOptions[e]&&(this.itemOptions[e]=t.itemOptions[e]||{});this.init()}var c=function(n){function t(t,e,i){var s,o=this;n.call(this,t,e,i),this.videoPlayer=null,this.videoAutoplay=!t.hasAttribute("data-uncloak-video-manual"),void 0!==a&&(s=t.querySelector("."+t.getAttribute("data-uncloak-video")),this.videoPlayer=new a({container:s,autoplay:0},!1),this.videoPlayer.addCallback("error",function(){o.loadLazyContent(),o.uncloak()}),this.videoAutoplay&&(this.videoPlayer.addCallback("firstPlay",function(){o.uncloak()}),this.callbacks.uncloak.push(function(){o.toggleVideoPlay(!0)})))}return n&&(t.__proto__=n),((t.prototype=Object.create(n&&n.prototype)).constructor=t).prototype.init=function(){var i=this;this.lazyContentObserver=new IntersectionObserver(function(t){var e=t[0];i.videoPlayer.isDisabled()?(i.loadLazyContent(),i.lazyContentObserver.disconnect()):i.toggleVideoPlay(e.isIntersecting)},{rootMargin:"10%"}),this.lazyContentObserver.observe(this.videoPlayer.container),this.runCallbacks("init")},t.prototype.mediaLoaded=function(){return!this.videoPlayer.isDisabled()||2===this.lazyContentLoadStatus},t.prototype.toggleVideoPlay=function(t){t?this.videoPlayer.play():this.videoPlayer.pause()},t}(d);return t.prototype.init=function(){var l=this;"IntersectionObserver"in window||console.error("uncloak: IntersectionObserver not supported in this browser."),this.nodeObserver=new IntersectionObserver(function(t){t.reduce(function(t,e){var i=!1,s=null;try{var o=e.boundingClientRect,n=e.isIntersecting||0<e.intersectionRatio||o.top<=window.innerHeight&&o.left<=0&&o.width>=document.body.clientWidth&&o.height>=window.innerHeight;if(!n)return t;s=l.getItemByNode(e.target);var a=o.height,r=s.threshold*e.rootBounds.height,i=r<=a?e.intersectionRect.height>=r:n}catch(t){i=!0,s=l.getItemByNode(e.target)}return i&&s&&(t=s.process(t),l.nodeObserver.unobserve(e.target)),t},0)},{rootMargin:"10% 0%",threshold:[.1,.2,.3,.5,.6,.7,.8,.9]}),this.findNewItems()},t.prototype.findNewItems=function(t){var e=this;if(void 0===t&&(t=document.querySelectorAll("[data-uncloak-new]")),t[0]){for(var i,s=this.items.length,o=!1,n=0;n<t.length;n++){var a=t[n],r=s+n,l=void 0;a.hasAttribute("data-uncloak-video")?(l=new c(a,this,this.itemOptions),o=!0):l=new d(a,this,this.itemOptions),a.id="uncloak-"+r,l.init(),this.nodeObserver.observe(a),this.items.push(l)}o&&!this.hasResizeListener&&(this.hasResizeListener=!0,i=function(){for(var t=0;t<e.items.length;t++)"videoPlayer"in e.items[t]&&(e.items[t].videoPlayer.isResponsive&&e.items[t].videoPlayer.setSrc(),e.items[t].videoPlayer.requiresResize&&e.items[t].videoPlayer.resizeVideo())},window.addEventListener("orientationchange",i),window.addEventListener("resize",i))}},t.prototype.getItemByNode=function(t){var e=t.id.split("-")[1];return this.items[e]},t});