lazy-attr
Advanced tools
Comparing version 1.0.9 to 1.1.0
351
lazy-attr.js
| /** | ||
| * https://github.com/yoannchb-pro/Lazy-attr | ||
| * VERSION: 1.0.9 | ||
| * VERSION: 1.1.0 | ||
| */ | ||
| 'use strict'; | ||
| //Foreach creation for IE | ||
| if(window.NodeList && !NodeList.prototype.forEach) { | ||
| NodeList.prototype.forEach = Array.prototype.forEach; | ||
| } | ||
| if(window.HTMLCollection && !HTMLCollection.prototype.forEach) { | ||
| HTMLCollection.prototype.forEach = Array.prototype.forEach; | ||
| } | ||
| //Datas | ||
| window.lazyDatas = { | ||
| updateURL: "https://cdn.jsdelivr.net/npm/lazy-attr@latest/lazy-attr.min.js" | ||
| updateURL: "https://cdn.jsdelivr.net/npm/lazy-attr@latest/lazy-attr.min.js", | ||
| originalObserver: true | ||
| }; | ||
| //Locked methods | ||
| window.lazy = () => { | ||
| //verify if there is an update or not | ||
| const getLastVersion = () => { | ||
| return new Promise(async (resolve, reject) => { | ||
| let u = window.lazyDatas["updateURL"]; | ||
| window.lazy = function(){ | ||
| /** | ||
| * See object intersecting | ||
| * @param {HTMLElement} element | ||
| */ | ||
| function isIntersecting(element){ | ||
| const width = window.innerWidth; | ||
| const height = window.innerHeight; | ||
| let req = await fetch(u).catch(e => reject({error: true})); | ||
| let res = await req.text().catch(e => reject({error: true})); | ||
| const pos = element.getBoundingClientRect(); | ||
| let p = '[#version]'; | ||
| let hIntersect = false; | ||
| let vIntersect = false; | ||
| let topCondition = pos.top >= 0 && pos.top <= height; | ||
| let bottomCondition = pos.bottom >= 0 && pos.bottom <= height; | ||
| let leftCondition = pos.left >= 0 && pos.left <= width; | ||
| let rightCondition = pos.right >= 0 && pos.right <= width; | ||
| if(topCondition || bottomCondition) vIntersect = true; | ||
| if(leftCondition || rightCondition) hIntersect = true; | ||
| if(hIntersect && vIntersect) return true; | ||
| return false; | ||
| } | ||
| /** | ||
| * Return if an element is intersecting without tranform of animation | ||
| * @param {HTMLElement} el | ||
| */ | ||
| function isIntersectingWithoutTransform(el){ | ||
| const width = window.innerWidth; | ||
| const height = window.innerHeight; | ||
| function isElementIntersecting(element){ | ||
| const parentRect = element.offsetParent.getBoundingClientRect(); | ||
| const left = parentRect.left + element.offsetLeft; | ||
| const top = parentRect.top + element.offsetTop; | ||
| const bottom = top + element.offsetHeight; | ||
| const right = left + element.offsetWidth; | ||
| let hIntersect = false; | ||
| let vIntersect = false; | ||
| let topCondition = top >= 0 && top <= height; | ||
| let bottomCondition = bottom >= 0 && bottom <= height; | ||
| let leftCondition = left >= 0 && left <= width; | ||
| let rightCondition = right >= 0 && right <= width; | ||
| if(topCondition || bottomCondition) vIntersect = true; | ||
| if(leftCondition || rightCondition) hIntersect = true; | ||
| if(hIntersect && vIntersect) return true; | ||
| } | ||
| const pointer = el.getAttribute('lazy-animation-pointer'); | ||
| return isElementIntersecting(el) || (pointer != null ? isElementIntersecting(document.querySelector(pointer)) : false); | ||
| } | ||
| /** | ||
| * verify if there is an update or not | ||
| * @param {Function} fback | ||
| */ | ||
| function getLastVersion(fback){ | ||
| let req = new XMLHttpRequest(); | ||
| req.onload = function(){ | ||
| const res = req.responseText; | ||
| const p = '[#version]'; | ||
| let nv = res.substring(res.indexOf(p)+p.length); | ||
| nv = nv.substring(nv.indexOf(p)+p.length); | ||
| nv = nv.substring(0, nv.indexOf(p)); | ||
| fback({version: nv}); | ||
| } | ||
| req.onerror = function(){ | ||
| fback({error: true}); | ||
| } | ||
| resolve({version: nv}); | ||
| }); | ||
| req.open('GET', window.lazyDatas["updateURL"]); | ||
| req.send(); | ||
| }; | ||
| //Change animation of lazy block (e for element, a for animation name and r to reload or no the animation) | ||
| const changeAnimation = (e, a, r=false) => { | ||
| /** | ||
| * Change animation of lazy block (e for element, a for animation name and r to reload or no the animation) | ||
| * @param {HTMLElement} e | ||
| * @param {String} a | ||
| * @param {Boolean} r | ||
| */ | ||
| function changeAnimation(e, a, r){ | ||
| let reset = e.getAttribute('lazy-reset'); | ||
@@ -40,3 +122,3 @@ reset = reset != null && reset != undefined ? true : false; | ||
| //with pointer | ||
| document.querySelectorAll(pointer).forEach(p => { | ||
| document.querySelectorAll(pointer).forEach(function(p){ | ||
| p.classList.remove(backAnimation); | ||
@@ -68,2 +150,4 @@ }); | ||
| getLastVersion: getLastVersion, | ||
| isIntersecting: isIntersecting, | ||
| isIntersectingWithoutTransform: isIntersectingWithoutTransform, | ||
| //search attributes parameters for observer | ||
@@ -104,5 +188,5 @@ parameters: ["[lazy-reset]", | ||
| //version | ||
| version: "1.0.9", | ||
| version: "1.1.0", | ||
| //version matcher | ||
| versionMatcher: "[#version]1.0.9[#version]" | ||
| versionMatcher: "[#version]1.1.0[#version]" | ||
| } | ||
@@ -112,41 +196,38 @@ } | ||
| //WARN for update | ||
| window.addEventListener('load', async () => { | ||
| let v = await window.lazy().getLastVersion(); | ||
| if(v.error){ | ||
| console.error("Lazzy-attr : error while fetching to see for update !"); | ||
| } else { | ||
| try{ | ||
| let ver = v.version; | ||
| let actv = window.lazy().version; | ||
| let nv = ver>actv; | ||
| let good = ver===actv; | ||
| let error = ver<actv; | ||
| if(nv) console.warn(`Lazzy-attr : new version ${ver} available !`); | ||
| if(good) console.info(`Lazy-attr : you have the latest version ${actv}`) | ||
| if(error) console.warn(`Lazzy-attr : ${actv} is not a valid version !`); | ||
| } catch(e) {} | ||
| } | ||
| window.addEventListener('load', function(){ | ||
| window.lazy().getLastVersion(function(v){ | ||
| if(v.error){ | ||
| console.error("Lazzy-attr : error while fetching to see for update !"); | ||
| } else { | ||
| try{ | ||
| let ver = v.version; | ||
| let actv = window.lazy().version; | ||
| let nv = ver>actv; | ||
| let good = ver===actv; | ||
| let error = ver<actv; | ||
| if(nv) console.warn("Lazzy-attr : new version " + ver + " available !"); | ||
| if(good) console.info("Lazy-attr : you have the latest version " + actv) | ||
| if(error) console.warn("Lazzy-attr : " + actv + " is not a valid version !"); | ||
| } catch(e) {} | ||
| } | ||
| }); | ||
| }); | ||
| //Create IntersectionObserver for old version of navigator | ||
| if(!window.IntersectionObserver){ | ||
| //Create a prototype of the IntersectionObserver | ||
| window.IntersectionObserver = class IntersectionObserver{ | ||
| constructor(callback, options){ | ||
| this.callback = callback; | ||
| this.elements = []; | ||
| this.init(); | ||
| } | ||
| //Create a prototype of the IntersectionObserver polyfill | ||
| window.IntersectionObserver = function IntersectionObserver(callback, options){ | ||
| this.callback = callback; | ||
| this.elements = []; | ||
| window.lazyDatas.originalObserver = false; | ||
| init(){ | ||
| function init(){ | ||
| const obj = this; | ||
| const listener = () => { | ||
| function listener(){ | ||
| const entries = []; | ||
| obj.elements.forEach(element => { | ||
| let intersect = obj.isIntersecting(element); | ||
| obj.elements.forEach(function(element){ | ||
| let intersect = window.lazy().isIntersecting(element); | ||
@@ -158,3 +239,3 @@ entries.push({ | ||
| }); | ||
| this.callback(entries, obj); | ||
| callback(entries, obj); | ||
| }; | ||
@@ -174,33 +255,10 @@ | ||
| } | ||
| isIntersecting(element){ | ||
| const width = window.innerWidth; | ||
| const height = window.innerHeight; | ||
| const pos = element.getBoundingClientRect(); | ||
| let hIntersect = false; | ||
| let vIntersect = false; | ||
| let topCondition = pos.top >= 0 && pos.top <= height; | ||
| let bottomCondition = pos.bottom >= 0 && pos.bottom <= height; | ||
| let leftCondition = pos.left >= 0 && pos.left <= width; | ||
| let rightCondition = pos.right >= 0 && pos.right <= width; | ||
| if(topCondition || bottomCondition) vIntersect = true; | ||
| if(leftCondition || rightCondition) hIntersect = true; | ||
| if(hIntersect && vIntersect) return true; | ||
| return false; | ||
| } | ||
| observe(e){ | ||
| function observe(e){ | ||
| if(e) { | ||
| this.elements.push(e); | ||
| this.listener(); | ||
| } | ||
| } | ||
| unobserve(e){ | ||
| function unobserve(e){ | ||
| if(e) { | ||
@@ -210,6 +268,11 @@ let index = this.elements.indexOf(e); | ||
| this.elements.splice(index, 1); | ||
| this.listener(); | ||
| } | ||
| } | ||
| } | ||
| this.init = init; | ||
| this.observe = observe; | ||
| this.unobserve = unobserve; | ||
| this.init(); | ||
| } | ||
@@ -219,18 +282,15 @@ } | ||
| //DOM loaded | ||
| window.addEventListener('load', () => { | ||
| window.addEventListener('load', function(){ | ||
| //Function to display error and info | ||
| const displayInfo = m => console.info(`[INFO] Lazy-attr : ${m}`); | ||
| const displayError = m => console.error(`[ERROR] Lazy-attr : ${m}`); | ||
| function displayInfo(m){console.info("[INFO] Lazy-attr : " + m);}; | ||
| function displayError(m){console.error("[ERROR] Lazy-attr : " + m);}; | ||
| //Verify animation stoped | ||
| const isAnimationStoped = (e) => { | ||
| let animationStoped = e.style.animationPlayState || e.style.webkitAnimationPlayState; | ||
| if(animationStoped === "running") return false; | ||
| return true; | ||
| } | ||
| //Main function | ||
| let callback = (entries, observer) => { | ||
| /** | ||
| * Main function | ||
| * @param {*} entries | ||
| * @param {*} observer | ||
| */ | ||
| function callback(entries, observer){ | ||
| //For each elements in the observer | ||
| entries.forEach(entry => { | ||
| entries.forEach(function(entry){ | ||
| const target = entry.target; //Element target | ||
@@ -240,4 +300,8 @@ | ||
| if(entry.isIntersecting){ | ||
| //Run or pause animation function | ||
| const animationState = (e, m) => { | ||
| /** | ||
| * Run or pause animation function | ||
| * @param {HTMLElement} e | ||
| * @param {String} m | ||
| */ | ||
| function animationState(e, m){ | ||
| e.style.animationPlayState = m; | ||
@@ -247,4 +311,36 @@ e.style.webkitAnimationPlayState = m; | ||
| //Set animation parameters | ||
| const setAnimation = (e, animationClass) => { | ||
| /** | ||
| * used to remove useless attributes on not lazy-reset elements t=target and e=pointer | ||
| * @param {HTMLElement} t | ||
| * @param {HTMLElement} e | ||
| */ | ||
| function removeUselessAttributes(t, e){ | ||
| let resetP = null; | ||
| //remove animation | ||
| if(window.lazy()._data['originalObserver']){ | ||
| let animationName = t.getAttribute('lazy-animation'); | ||
| if(animationName) e.classList.remove(animationName); | ||
| } | ||
| //animation running | ||
| animationState(e, resetP); | ||
| //animation duration | ||
| t.style.animationDuration = resetP; | ||
| t.style.webkitAnimationDuration = resetP; | ||
| //animation delay | ||
| t.style.animationDelay = resetP; | ||
| t.style.webkitAnimationDelay = resetP; | ||
| //animation count | ||
| t.style.animationIterationCount = resetP; | ||
| t.style.webkitAnimationIterationCount = resetP; | ||
| //animation function | ||
| t.style.animationTimingFunction = resetP; | ||
| t.style.webkitAnimationTimingFunction = resetP; | ||
| } | ||
| /** | ||
| * Set animation parameters | ||
| * @param {HTMLElement} e | ||
| * @param {String} animationClass | ||
| */ | ||
| function setAnimation(e, animationClass){ | ||
| //if(!isAnimationStoped(e)) return; //We wait the end of animation | ||
@@ -255,4 +351,4 @@ | ||
| if(animationTime) { | ||
| e.style.animationDuration = `${animationTime}s`; | ||
| e.style.webkitAnimationDuration = `${animationTime}s`; | ||
| e.style.animationDuration = animationTime + "s"; | ||
| e.style.webkitAnimationDuration = animationTime + "s"; | ||
| } | ||
@@ -263,4 +359,4 @@ | ||
| if(animationDelay) { | ||
| e.style.animationDelay = `${animationDelay}s`; | ||
| e.style.webkitAnimationDelay = `${animationDelay}s`; | ||
| e.style.animationDelay = animationDelay + "s"; | ||
| e.style.webkitAnimationDelay = animationDelay + "s"; | ||
| } | ||
@@ -284,2 +380,24 @@ | ||
| e.classList.add(animationClass); | ||
| if(target.getAttribute('lazy-reset') === null){ | ||
| //Delete useless attribute | ||
| e.addEventListener('animationend', function(){ | ||
| //remove all useless attributes | ||
| removeUselessAttributes(target, e); | ||
| //Delete lazy-attr attributes | ||
| window.lazy().parameters.forEach(function(p){ | ||
| p = p.replace(/\[/gi, "").replace(/\]/gi, ""); | ||
| target.removeAttribute(p); | ||
| }); | ||
| }); | ||
| } else { | ||
| //Delete useless attributes on lazy-reset elements | ||
| e.addEventListener('animationend', function(){ | ||
| //remove all useless attributes | ||
| removeUselessAttributes(target, e); | ||
| }); | ||
| } | ||
| } | ||
@@ -293,3 +411,3 @@ | ||
| let t = document.querySelectorAll(pointer); | ||
| t.forEach(e => { | ||
| t.forEach(function(e){ | ||
| setAnimation(e, animationClass); //set animation | ||
@@ -307,12 +425,9 @@ animationState(e, "paused"); | ||
| //Start animation function after load element if it is lazy or not | ||
| //document.querySelector('img').style.animationPlayState .webkitAnimationPlayState | ||
| const startAnimation = () => { | ||
| targetAnimation.forEach(e => { | ||
| /** | ||
| * Start animation function after load element if it is lazy or not | ||
| */ | ||
| function startAnimation(){ | ||
| targetAnimation.forEach(function(e){ | ||
| animationState(e, "running"); | ||
| }); | ||
| if(target.getAttribute('lazy-reset') === null){ //Used to don't reload animation on scroll | ||
| target.removeAttribute('lazy-animation'); | ||
| } | ||
| } | ||
@@ -324,3 +439,3 @@ | ||
| if(loaded || !target.getAttribute("lazy-src")) startAnimation(); else { | ||
| target.addEventListener('error', () => { | ||
| target.addEventListener('error', function(){ | ||
| startAnimation(); | ||
@@ -342,4 +457,4 @@ displayError("cannot load url " + target.src); | ||
| let poster = target.getAttribute('lazy-poster'); //Permet de mettre un poster à la vidéo | ||
| if(poster) poster = `url('${poster}')`; else poster = "#000"; | ||
| target.setAttribute("srcdoc", `<style>body{background: ${poster}; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='${code}'><span>▶</span></a>`); | ||
| if(poster) poster = "url('" + poster + "')"; else poster = "#000"; | ||
| target.setAttribute("srcdoc", "<style>body{background: " + poster + "; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='${code}'><span>▶</span></a>"); | ||
| } | ||
@@ -351,7 +466,6 @@ | ||
| //Remove useless attributes | ||
| //Remove useless attributes after load | ||
| target.removeAttribute('lazy-embed'); | ||
| target.removeAttribute('lazy-poster'); | ||
| target.removeAttribute('lazy-video'); | ||
| target.removeAttribute('lazy-animation-time'); | ||
| target.removeAttribute('lazy-src'); | ||
@@ -362,5 +476,7 @@ | ||
| }; | ||
| } else if(target.getAttribute('lazy-reset') != null){ //Reload animation | ||
| //Not intersecting | ||
| } else if(target.getAttribute('lazy-reset') != null && !window.lazy().isIntersectingWithoutTransform(target)){ //Reload animation | ||
| //Reset function | ||
| const resetAnimation = (e, animationClass=false) => { | ||
| function resetAnimation(e, animationClass){ | ||
| //remove animation | ||
@@ -375,3 +491,3 @@ if(animationClass) e.classList.remove(animationClass); | ||
| let t = document.querySelectorAll(pointer); | ||
| t.forEach(e => { | ||
| t.forEach(function(e){ | ||
| resetAnimation(e, animationClass); | ||
@@ -392,6 +508,7 @@ }); | ||
| //Set observer on dom elements | ||
| //window.lazy().parameters.join(',') | ||
| const getLazyObject = () => { | ||
| document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(e => { | ||
| /** | ||
| * Set observer on dom elements | ||
| */ | ||
| function getLazyObject(){ | ||
| document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(function(e){ | ||
| observer.observe(e); | ||
@@ -398,0 +515,0 @@ }); |
@@ -1,1 +0,1 @@ | ||
| window.lazyDatas={updateURL:"https://cdn.jsdelivr.net/npm/lazy-attr@latest/lazy-attr.min.js"},window.lazy=(()=>{return{_data:window.lazyDatas,changeAnimation:(t,e,n=!1)=>{let i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){let i=t.getAttribute("lazy-animation");if(i&&e){let e=t.getAttribute("lazy-animation-pointer");e?document.querySelectorAll(e).forEach(t=>{t.classList.remove(i)}):t.classList.remove(i),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:()=>new Promise(async(t,e)=>{let n=window.lazyDatas.updateURL,i=await fetch(n).catch(t=>e({error:!0})),a=await i.text().catch(t=>e({error:!0})),o="[#version]",r=a.substring(a.indexOf(o)+o.length);t({version:r=r.substring(0,r.indexOf(o))})}),parameters:["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]"],animations:["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"],options:{root:null,rootMargin:"0px",threshold:0},version:"1.0.9",versionMatcher:"[#version]1.0.9[#version]"}}),window.addEventListener("load",async()=>{let t=await window.lazy().getLastVersion();if(t.error)console.error("Lazzy-attr : error while fetching to see for update !");else try{let e=t.version,n=window.lazy().version,i=e===n,a=e<n;e>n&&console.warn(`Lazzy-attr : new version ${e} available !`),i&&console.info(`Lazy-attr : you have the latest version ${n}`),a&&console.warn(`Lazzy-attr : ${n} is not a valid version !`)}catch(t){}}),window.IntersectionObserver||(window.IntersectionObserver=class{constructor(t,e){this.callback=t,this.elements=[],this.init()}init(){const t=this,e=()=>{const e=[];t.elements.forEach(n=>{let i=t.isIntersecting(n);e.push({target:n,isIntersecting:i})}),this.callback(e,t)};this.listener=e;const n=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;n?function t(){e(),n(t)}():console.error("Lazy-attr : your browser do not requestAnimationFrame")}isIntersecting(t){const e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect();let a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,c=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||c)&&(a=!0),!(!a||!o)}observe(t){t&&(this.elements.push(t),this.listener())}unobserve(t){if(t){let e=this.elements.indexOf(t);-1!=e&&(this.elements.splice(e,1),this.listener())}}}),window.addEventListener("load",()=>{const t=t=>console.error(`[ERROR] Lazy-attr : ${t}`);let e=(e,n)=>{e.forEach(e=>{const i=e.target;if(e.isIntersecting){const e=(t,e)=>{t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},a=(t,e)=>{let n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=`${n}s`,t.style.webkitAnimationDuration=`${n}s`);let a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=`${a}s`,t.style.webkitAnimationDelay=`${a}s`);let o=i.getAttribute("lazy-animation-count");o&&(t.style.animationIterationCount=o,t.style.webkitAnimationIterationCount=o);let r=i.getAttribute("lazy-animation-function");r&&(t.style.animationTimingFunction=r,t.style.webkitAnimationTimingFunction=r),t.classList.add(e)},o=[];let r=i.getAttribute("lazy-animation"),s=i.getAttribute("lazy-animation-pointer");if(s&&r){document.querySelectorAll(s).forEach(t=>{a(t,r),e(t,"paused"),o.push(t)})}else r&&(a(i,r),e(i,"paused"),o.push(i));const l=()=>{o.forEach(t=>{e(t,"running")}),null===i.getAttribute("lazy-reset")&&i.removeAttribute("lazy-animation")};let c=i.complete&&0!==i.naturalHeight,d=i.readyState>=0;c||d||!i.getAttribute("lazy-src")?l():(i.addEventListener("error",()=>{l(),t("cannot load url "+i.src)}),i.addEventListener("load",l));let y=i.getAttribute("lazy-video");y&&i.setAttribute("poster",y),i.preload="none";let m=i.getAttribute("lazy-embed");if(m){let t=i.getAttribute("lazy-poster");t=t?`url('${t}')`:"#000",i.setAttribute("srcdoc",`<style>body{background: ${t}; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='${m}'><span>▶</span></a>`)}let u=i.getAttribute("lazy-src");u&&(i.src=u),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-animation-time"),i.removeAttribute("lazy-src"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")){const t=(t,e=!1)=>{e&&t.classList.remove(e)};let e=i.getAttribute("lazy-animation"),n=i.getAttribute("lazy-animation-pointer");if(n&&e){document.querySelectorAll(n).forEach(n=>{t(n,e)})}else t(i,e)}})};if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){let t=new IntersectionObserver(e,window.lazy().options);window.lazyDatas.observer=t;const n=()=>{document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach(e=>{t.observe(e)})};document.addEventListener("DOMNodeInserted",n),document.addEventListener("change",n),n(),(t=>console.info(`[INFO] Lazy-attr : ${t}`))("version "+window.lazy().version)}else t("incompatible or verify window.lazy and window.lazyDatas integration")}); | ||
| "use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={updateURL:"https://cdn.jsdelivr.net/npm/lazy-attr@latest/lazy-attr.min.js",originalObserver:!0},window.lazy=function(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){let i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){let i=t.getAttribute("lazy-animation");if(i&&e){let e=t.getAttribute("lazy-animation-pointer");e?document.querySelectorAll(e).forEach(function(t){t.classList.remove(i)}):t.classList.remove(i),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){let e=new XMLHttpRequest;e.onload=function(){const n=e.responseText,i="[#version]";let o=n.substring(n.indexOf(i)+i.length);o=(o=o.substring(o.indexOf(i)+i.length)).substring(0,o.indexOf(i)),t({version:o})},e.onerror=function(){t({error:!0})},e.open("GET",window.lazyDatas.updateURL),e.send()},isIntersecting:function(t){const e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect();let o=!1,a=!1,r=i.top>=0&&i.top<=n,l=i.bottom>=0&&i.bottom<=n,s=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||l)&&(a=!0),(s||u)&&(o=!0),!(!o||!a)},isIntersectingWithoutTransform:function(t){const e=window.innerWidth,n=window.innerHeight;function i(t){const i=t.offsetParent.getBoundingClientRect(),o=i.left+t.offsetLeft,a=i.top+t.offsetTop,r=a+t.offsetHeight,l=o+t.offsetWidth;let s=!1,u=!1;if((a>=0&&a<=n||r>=0&&r<=n)&&(u=!0),(o>=0&&o<=e||l>=0&&l<=e)&&(s=!0),s&&u)return!0}const o=t.getAttribute("lazy-animation-pointer");return i(t)||null!=o&&i(document.querySelector(o))},parameters:["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]"],animations:["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"],options:{root:null,rootMargin:"0px",threshold:0},version:"1.1.0",versionMatcher:"[#version]1.1.0[#version]"}},window.addEventListener("load",function(){window.lazy().getLastVersion(function(t){if(t.error)console.error("Lazzy-attr : error while fetching to see for update !");else try{let e=t.version,n=window.lazy().version,i=e===n,o=e<n;e>n&&console.warn("Lazzy-attr : new version "+e+" available !"),i&&console.info("Lazy-attr : you have the latest version "+n),o&&console.warn("Lazzy-attr : "+n+" is not a valid version !")}catch(t){}})}),window.IntersectionObserver||(window.IntersectionObserver=function(t,e){this.callback=t,this.elements=[],window.lazyDatas.originalObserver=!1,this.init=function(){const e=this;function n(){const n=[];e.elements.forEach(function(t){let e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})}),t(n,e)}this.listener=n;const i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():console.error("Lazy-attr : your browser do not requestAnimationFrame")},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){let e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.init()}),window.addEventListener("load",function(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){let i=new IntersectionObserver(function(e,n){e.forEach(function(e){const i=e.target;if(e.isIntersecting){function o(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e}function a(t,e){if(window.lazy()._data.originalObserver){let n=t.getAttribute("lazy-animation");n&&e.classList.remove(n)}o(e,null),t.style.animationDuration=null,t.style.webkitAnimationDuration=null,t.style.animationDelay=null,t.style.webkitAnimationDelay=null,t.style.animationIterationCount=null,t.style.webkitAnimationIterationCount=null,t.style.animationTimingFunction=null,t.style.webkitAnimationTimingFunction=null}function r(t,e){let n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");let o=i.getAttribute("lazy-animation-delay");o&&(t.style.animationDelay=o+"s",t.style.webkitAnimationDelay=o+"s");let r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);let l=i.getAttribute("lazy-animation-function");l&&(t.style.animationTimingFunction=l,t.style.webkitAnimationTimingFunction=l),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",function(){a(i,t),window.lazy().parameters.forEach(function(t){t=t.replace(/\[/gi,"").replace(/\]/gi,""),i.removeAttribute(t)})}):t.addEventListener("animationend",function(){a(i,t)})}const e=[];let s=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");function l(){e.forEach(function(t){o(t,"running")})}u&&s?document.querySelectorAll(u).forEach(function(t){r(t,s),o(t,"paused"),e.push(t)}):s&&(r(i,s),o(i,"paused"),e.push(i));let c=i.complete&&0!==i.naturalHeight,d=i.readyState>=0;c||d||!i.getAttribute("lazy-src")?l():(i.addEventListener("error",function(){l(),t("cannot load url "+i.src)}),i.addEventListener("load",l));let y=i.getAttribute("lazy-video");if(y&&i.setAttribute("poster",y),i.preload="none",i.getAttribute("lazy-embed")){let t=i.getAttribute("lazy-poster");t=t?"url('"+t+"')":"#000",i.setAttribute("srcdoc","<style>body{background: "+t+"; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='${code}'><span>▶</span></a>")}let m=i.getAttribute("lazy-src");m&&(i.src=m),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){function s(t,e){e&&t.classList.remove(e)}let t=i.getAttribute("lazy-animation"),e=i.getAttribute("lazy-animation-pointer");e&&t?document.querySelectorAll(e).forEach(function(e){s(e,t)}):s(i,t)}})},window.lazy().options);function e(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach(function(t){i.observe(t)})}window.lazyDatas.observer=i,document.addEventListener("DOMNodeInserted",e),document.addEventListener("change",e),e(),n="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+n)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var n}); |
| { | ||
| "name": "lazy-attr", | ||
| "version": "1.0.9", | ||
| "version": "1.1.0", | ||
| "description": "Make a lazy page with lazy video, embed, image and animations on scrolling.", | ||
@@ -5,0 +5,0 @@ "main": "lazy-attr.js", |
@@ -1,2 +0,2 @@ | ||
| # 📖 Lazy-attr v1.0.9 - beta | ||
| # 📖 Lazy-attr v1.1.0 - beta | ||
| Create lazy image, embed, video... Make animation on lazy and not lazy element. All of that just with html attributes. | ||
@@ -6,9 +6,6 @@ ## 🎉 Update | ||
| The project is in beta so don't worry for bugs | ||
| - New attibutes : lazy-animation-function and lazy-animation-count | ||
| - Bugs correction | ||
| - Animations bugs correction | ||
| - Auto look for update | ||
| - Bug corrections | ||
| - Renamed animation | ||
| - New animations | ||
| - IE support | ||
| - More powerfull | ||
| - IE support correction ! | ||
| ## 📚 Documentation | ||
@@ -15,0 +12,0 @@ -------- |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by2.4%
1084030
- Number of package files
- increased by8.33%
13
- Lines of code
- increased by45.33%
1757
- Number of medium supply chain risk alerts
- decreased by-50%
1
Worsened metrics
- Number of lines in readme file
- decreased by-9.68%
28
No dependency changes