lazy-attr - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

lazy-attr.js

 /**
  * https://github.com/yoannchb-pro/Lazy-attr
- * VERSION: 1.0.5
+ * VERSION: 1.0.6
  */
 
+//Datas
+window.lazyDatas = {
+    updateURL: "https://cdn.jsdelivr.net/gh/yoannchb-pro/lazy-attr@latest/lazy-attr.min.js"
+};
+
+//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"];
+
+            let req = await fetch(u).catch(e => reject({error: true}));
+            let res = await req.text().catch(e => reject({error: true}));
+
+            let nv = res.substring(res.indexOf('version'));
+            nv = nv.substring(nv.indexOf('"')+1);
+            nv = nv.substring(0,nv.indexOf('"'));
+
+            resolve({version: nv});
+        });
+    };
+
+    //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) => {
+        let reset = e.getAttribute('lazy-reset');
+        reset = reset != null && reset != undefined ? true : false;
+        if(reset){
+            let backAnimation = e.getAttribute('lazy-animation');
+
+            if(backAnimation && a){
+                let pointer = e.getAttribute('lazy-animation-pointer');
+                if(pointer){
+                    //with pointer
+                    document.querySelectorAll(pointer).forEach(p => {
+                        p.classList.remove(backAnimation);
+                    });
+                } else {
+                    //no pointer
+                    e.classList.remove(backAnimation);
+                }
+                e.removeAttribute('lazy-animation');
+            }
+            e.setAttribute('lazy-animation', a);
+
+            //Reload animation
+            if(r) {
+                window.lazy()._data["observer"].unobserve(e);
+                window.lazy()._data["observer"].observe(e);
+            }
+        } else {
+            console.warn('Lazy-attr : Cannot change animation of not lazy-reset element !');
+        }
+    };
+
     return {
+        //datas
+        _data: window.lazyDatas,
+        //methods
+        changeAnimation: changeAnimation,
+        getLastVersion: getLastVersion,
         //search attributes parameters for observer
@@ -16,3 +75,5 @@ parameters: ["[lazy-reset]",
                     "[lazy-embed]",
-                    "[lazy-animation-pointer]"],
+                    "[lazy-animation-pointer]",
+                    "[lazy-animation-function]",
+                    "[lazy-animation-count]"],
         //animation list
@@ -22,11 +83,15 @@ animations: ["zoomin",
                     "opacity", 
-                    "from-left",
-                    "from-right",
-                     "from-bottom", 
-                     "from-top", 
+                    "slide-left",
+                    "slide-right",
+                     "slide-bottom", 
+                     "slide-top", 
+                     "corner-top-left",
+                     "corner-top-right",
+                     "corner-bottom-left",
+                     "corner-bottom-right",
                      "shake", 
                      "rotate",
                      "blur",
-                     "rotate3d",
-                     "rotate3d-up"],
+                     "flip",
+                     "flip-up"],
         //options
@@ -39,40 +104,173 @@ options: {
         //version
-        version: "1.0.5"
+        version: "1.0.6"
     }
 }
 
+//WARN for update
+(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 : ${ver} 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();
+        }
+    
+        init(){
+            const obj = this;
+            const listener = () => {
+                const x = window.scrollX;
+                const y = window.scrollY;
+                const entries = [];
+                obj.elements.forEach(element => {
+                    let intersect = false;
+    
+                    let bodyRect = document.body.getBoundingClientRect();
+                    let pos = element.getBoundingClientRect();
+    
+                    let hIntersect = false;
+                    let vIntersect = false;
+    
+                    let top = pos.top - bodyRect.top;
+                    let bottom = pos.bottom - bodyRect.bottom;
+                    let right = pos.right - bodyRect.right;
+                    let left = pos.left - bodyRect.left;
+    
+                    let topCondition = (top >= y && top <= y+window.innerHeight);
+                    let bottomCondition = (bottom <= y+window.innerHeight && bottom >= y);
+                    let leftCondition = (left >= x && left <= x+window.innerWidth);
+                    let rightCondition = (right <= x+window.innerWidth && right >= x);
+    
+                    if(topCondition || bottomCondition) vIntersect = true;
+                    if(leftCondition || rightCondition) hIntersect = true;
+    
+                    if(hIntersect && vIntersect) intersect = true;
+    
+                    entries.push({
+                        target: element,
+                        isIntersecting: intersect
+                    });
+                });
+                this.callback(entries, obj);
+            };
+    
+            this.listener = listener;
+    
+            window.addEventListener('scroll', listener);
+        }
+    
+        observe(e){
+            if(e) {
+                this.elements.push(e);
+                this.listener();
+            }
+        }
+    
+        unobserve(e){
+            if(e) {
+                let index = this.elements.indexOf(e);
+                if(index != -1) {
+                    this.elements.splice(index, 1);
+                    this.listener();
+                }
+            }
+        }
+    }
+}
+
 //DOM loaded
 window.addEventListener('load', () => {
     //Function to display error and info
-    const displayInfo = m => console.log(`[INFO] Lazy-attr : ${m}`);
+    const displayInfo = m => console.info(`[INFO] Lazy-attr : ${m}`);
     const 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) => {
+        //For each elements in the observer
         entries.forEach(entry => {
             const target = entry.target; //Element target
 
+            //Intersecting
             if(entry.isIntersecting){
-                //Animation duration
-                let animationTime = target.getAttribute('lazy-animation-time');
-                if(animationTime) target.style.animationDuration = `${animationTime}s`;
-
-                //Animation delay
-                let animationDelay = target.getAttribute('lazy-animation-delay');
-                if(animationDelay) target.style.animationDelay = `${animationDelay}s`;
-
-
                 //Run or pause animation function
                 const animationState = (e, m) => {
                     e.style.animationPlayState = m;
-                    e.webkitAnimationPlayState = m;
+                    e.style.webkitAnimationPlayState = m;
                 };
 
+                //Set animation parameters
+                const setAnimation = (e, animationClass) => {
+                    //if(!isAnimationStoped(e)) return; //We wait the end of animation
+
+                    //Animation duration
+                    let animationTime = target.getAttribute('lazy-animation-time');
+                    if(animationTime) {
+                        e.style.animationDuration = `${animationTime}s`;
+                        e.style.webkitAnimationDuration = `${animationTime}s`;
+                    }
+
+                    //Animation delay
+                    let animationDelay = target.getAttribute('lazy-animation-delay');
+                    if(animationDelay) {
+                        e.style.animationDelay = `${animationDelay}s`;
+                        e.style.webkitAnimationDelay = `${animationDelay}s`;
+                    }
+
+                    //Animation count
+                    let animationCount = target.getAttribute('lazy-animation-count');
+                    if(animationCount) {
+                        e.style.animationIterationCount = animationCount;
+                        e.style.webkitAnimationIterationCount = animationCount;
+                    }
+
+                    //Animation function
+                    let animationFunction = target.getAttribute('lazy-animation-function');
+                    if(animationFunction){
+                        e.style.animationTimingFunction = animationFunction;
+                        e.style.webkitAnimationTimingFunction = animationFunction;
+                    }
+
+                    //Set animation class
+                    e.classList.add(animationClass);
+                }
+
                 //Animation class
+                const targetAnimation = [];
                 let animationClass = target.getAttribute('lazy-animation');
                 let pointer = target.getAttribute('lazy-animation-pointer');
-                const targetAnimation = [];
                 if(pointer && animationClass){
                     let t = document.querySelectorAll(pointer);
                     t.forEach(e => {
-                        e.classList.add(animationClass);
+                        setAnimation(e, animationClass); //set animation
                         animationState(e, "paused");
@@ -83,3 +281,3 @@ targetAnimation.push(e);
                     if(animationClass){
-                        target.classList.add(animationClass);
+                        setAnimation(target, animationClass); //set animation
                         animationState(target, "paused");
@@ -143,3 +341,9 @@ targetAnimation.push(target);
             } else if(target.getAttribute('lazy-reset') != null){ //Reload animation
-                //Reset class animation
+                //Reset function
+                const resetAnimation = (e, animationClass=false) => {
+                    //remove animation
+                    if(animationClass) e.classList.remove(animationClass);
+                }
+
+                //Reset class animation for pointer or target
                 let animationClass = target.getAttribute('lazy-animation');
@@ -150,11 +354,7 @@ let pointer = target.getAttribute('lazy-animation-pointer');
                     t.forEach(e => {
-                        e.classList.remove(animationClass);
+                        resetAnimation(e, animationClass);
                     });
                 } else {
-                    if(animationClass) target.classList.remove(animationClass);
+                    resetAnimation(target, animationClass);
                 }
-
-                //Reset animation delay
-                let d = target.getAttribute('lazy-animation-delay');
-                if(d) target.style.animationDelay = "";
             }
@@ -165,7 +365,9 @@ });
     //Get available
-    if(window.IntersectionObserver && window.lazy()){
+    if(window.IntersectionObserver && window.lazy() && window.lazyDatas){
         //Observer
         let observer = new IntersectionObserver(callback, window.lazy().options);
+        window.lazyDatas["observer"] = observer;
 
         //Set observer on dom elements
+        //window.lazy().parameters.join(',')
         const getLazyObject = () => {
@@ -177,2 +379,3 @@ document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(e => {
         document.addEventListener("DOMNodeInserted", getLazyObject);
+        document.addEventListener("change", getLazyObject);
         getLazyObject();
@@ -184,4 +387,4 @@
         //Error
-        displayError('incompatible or verify window.lazy integration');
+        displayError('incompatible or verify window.lazy and window.lazyDatas integration');
     }
 });

lazy-attr.min.js

@@ -1,1 +0,1 @@
-window.lazy=(()=>({parameters:["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]"],animations:["zoomin","zoomout","opacity","from-left","from-right","from-bottom","from-top","shake","rotate","blur","rotate3d","rotate3d-up"],options:{root:null,rootMargin:"0px",threshold:0},version:"1.0.5"})),window.addEventListener("load",()=>{const t=t=>console.error(`[ERROR] Lazy-attr : ${t}`);let e=(e,a)=>{e.forEach(e=>{const o=e.target;if(e.isIntersecting){let e=o.getAttribute("lazy-animation-time");e&&(o.style.animationDuration=`${e}s`);let i=o.getAttribute("lazy-animation-delay");i&&(o.style.animationDelay=`${i}s`);const r=(t,e)=>{t.style.animationPlayState=e,t.webkitAnimationPlayState=e};let n=o.getAttribute("lazy-animation"),l=o.getAttribute("lazy-animation-pointer");const s=[];if(l&&n){document.querySelectorAll(l).forEach(t=>{t.classList.add(n),r(t,"paused"),s.push(t)})}else n&&(o.classList.add(n),r(o,"paused"),s.push(o));const y=()=>{s.forEach(t=>{r(t,"running")}),null===o.getAttribute("lazy-reset")&&o.removeAttribute("lazy-animation")};let d=o.complete&&0!==o.naturalHeight,m=o.readyState>=0;d||m||!o.getAttribute("lazy-src")?y():(o.addEventListener("error",()=>{y(),t("cannot load url "+o.src)}),o.addEventListener("load",y));let u=o.getAttribute("lazy-video");u&&o.setAttribute("poster",u),o.preload="none";let c=o.getAttribute("lazy-embed");if(c){let t=o.getAttribute("lazy-poster");t=t?`url('${t}')`:"#000",o.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>\n                    <a href='${c}'><span>▶</span></a>`)}let b=o.getAttribute("lazy-src");b&&(o.src=b),o.removeAttribute("lazy-embed"),o.removeAttribute("lazy-poster"),o.removeAttribute("lazy-video"),o.removeAttribute("lazy-animation-time"),o.removeAttribute("lazy-src"),null===o.getAttribute("lazy-reset")&&a.unobserve(o)}else if(null!=o.getAttribute("lazy-reset")){let t=o.getAttribute("lazy-animation"),e=o.getAttribute("lazy-animation-pointer");if(e&&t){document.querySelectorAll(e).forEach(e=>{e.classList.remove(t)})}else t&&o.classList.remove(t);o.getAttribute("lazy-animation-delay")&&(o.style.animationDelay="")}})};if(window.IntersectionObserver&&window.lazy()){let t=new IntersectionObserver(e,window.lazy().options);const a=()=>{document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach(e=>{t.observe(e)})};document.addEventListener("DOMNodeInserted",a),a(),(t=>console.log(`[INFO] Lazy-attr : ${t}`))("version "+window.lazy().version)}else t("incompatible or verify window.lazy integration")});
+window.lazyDatas={updateURL:"https://cdn.jsdelivr.net/gh/yoannchb-pro/lazy-attr@latest/lazy-attr.min.js"},window.lazy=(()=>{return{_data:window.lazyDatas,changeAnimation:(t,e,i=!1)=>{let n=t.getAttribute("lazy-reset");if(n=null!=n&&null!=n){let n=t.getAttribute("lazy-animation");if(n&&e){let e=t.getAttribute("lazy-animation-pointer");e?document.querySelectorAll(e).forEach(t=>{t.classList.remove(n)}):t.classList.remove(n),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),i&&(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 i=window.lazyDatas.updateURL,n=await fetch(i).catch(t=>e({error:!0})),a=await n.text().catch(t=>e({error:!0})),o=a.substring(a.indexOf("version"));t({version:o=(o=o.substring(o.indexOf('"')+1)).substring(0,o.indexOf('"'))})}),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.6"}}),(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,i=window.lazy().version,n=e===i,a=e<i;e>i&&console.warn(`Lazzy-attr : new version ${e} available !`),n&&console.info(`Lazy-attr : you have the latest version ${i}`),a&&console.warn(`Lazzy-attr : ${e} 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=window.scrollX,i=window.scrollY,n=[];t.elements.forEach(t=>{let a=!1,o=document.body.getBoundingClientRect(),r=t.getBoundingClientRect(),l=!1,s=!1,d=r.top-o.top,c=r.bottom-o.bottom,y=r.right-o.right,u=r.left-o.left,m=d>=i&&d<=i+window.innerHeight,b=c<=i+window.innerHeight&&c>=i,w=u>=e&&u<=e+window.innerWidth,z=y<=e+window.innerWidth&&y>=e;(m||b)&&(s=!0),(w||z)&&(l=!0),l&&s&&(a=!0),n.push({target:t,isIntersecting:a})}),this.callback(n,t)};this.listener=e,window.addEventListener("scroll",e)}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,i)=>{e.forEach(e=>{const n=e.target;if(e.isIntersecting){const e=(t,e)=>{t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},a=(t,e)=>{let i=n.getAttribute("lazy-animation-time");i&&(t.style.animationDuration=`${i}s`,t.style.webkitAnimationDuration=`${i}s`);let a=n.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=`${a}s`,t.style.webkitAnimationDelay=`${a}s`);let o=n.getAttribute("lazy-animation-count");o&&(t.style.animationIterationCount=o,t.style.webkitAnimationIterationCount=o);let r=n.getAttribute("lazy-animation-function");r&&(t.style.animationTimingFunction=r,t.style.webkitAnimationTimingFunction=r),t.classList.add(e)},o=[];let r=n.getAttribute("lazy-animation"),l=n.getAttribute("lazy-animation-pointer");if(l&&r){document.querySelectorAll(l).forEach(t=>{a(t,r),e(t,"paused"),o.push(t)})}else r&&(a(n,r),e(n,"paused"),o.push(n));const s=()=>{o.forEach(t=>{e(t,"running")}),null===n.getAttribute("lazy-reset")&&n.removeAttribute("lazy-animation")};let d=n.complete&&0!==n.naturalHeight,c=n.readyState>=0;d||c||!n.getAttribute("lazy-src")?s():(n.addEventListener("error",()=>{s(),t("cannot load url "+n.src)}),n.addEventListener("load",s));let y=n.getAttribute("lazy-video");y&&n.setAttribute("poster",y),n.preload="none";let u=n.getAttribute("lazy-embed");if(u){let t=n.getAttribute("lazy-poster");t=t?`url('${t}')`:"#000",n.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>\n                    <a href='${u}'><span>▶</span></a>`)}let m=n.getAttribute("lazy-src");m&&(n.src=m),n.removeAttribute("lazy-embed"),n.removeAttribute("lazy-poster"),n.removeAttribute("lazy-video"),n.removeAttribute("lazy-animation-time"),n.removeAttribute("lazy-src"),null===n.getAttribute("lazy-reset")&&i.unobserve(n)}else if(null!=n.getAttribute("lazy-reset")){const t=(t,e=!1)=>{e&&t.classList.remove(e)};let e=n.getAttribute("lazy-animation"),i=n.getAttribute("lazy-animation-pointer");if(i&&e){document.querySelectorAll(i).forEach(i=>{t(i,e)})}else t(n,e)}})};if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){let t=new IntersectionObserver(e,window.lazy().options);window.lazyDatas.observer=t;const i=()=>{document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach(e=>{t.observe(e)})};document.addEventListener("DOMNodeInserted",i),document.addEventListener("change",i),i(),(t=>console.info(`[INFO] Lazy-attr : ${t}`))("version "+window.lazy().version)}else t("incompatible or verify window.lazy and window.lazyDatas integration")});

package.json

 {
   "name": "lazy-attr",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Make a lazy page with lazy video, embed, image and animations on scrolling.",
@@ -16,2 +16,5 @@ "main": "lazy-attr.js",
     "video",
+    "js",
+    "css",
+    "attributes",
     "animation",
@@ -21,3 +24,3 @@ "yoannchb"
   "author": "yoannchb",
-  "license": "ISC"
+  "license": "MIT"
 }

README.md

@@ -1,2 +0,2 @@
-# 📖 Lazy-attr v1.0.5 - beta
+# 📖 Lazy-attr v1.0.6 - beta
 Create lazy image, embed, video... Make animation on lazy and not lazy element. All of that just with html attributes.
@@ -6,13 +6,8 @@ ## 🎉 Update
 The project is in beta so don't worry for bugs
-- New attributes : lazy-animation-pointer
+- New attibutes : lazy-animation-function and lazy-animation-count
+- Animations bugs correction
+- Auto look for update
+- Bug corrections
+- Renamed animation
 - New animations
-- New documentation
-- Bugs correction
-- Bugs animations correction
-- 2 Animations removed
-- Video bugs correction
-- Video animation correction
-- Image loading animation correction
-- Handle error
-- min files added
 ## 📚 Documentation
@@ -25,7 +20,7 @@ --------
 ```html
+<script src="https://cdn.jsdelivr.net/gh/yoannchb-pro/lazy-attr@latest/lazy-attr.min.js"></script>
+<link src="https://cdn.jsdelivr.net/gh/yoannchb-pro/lazy-attr@latest/lazy-attr-animation.min.css"/>
+<!-- or -->
 <script src="./lazy-attr.min.js"></script>
 <link src="./lazy-attr-animation.min.css"/>
-<!-- or -->
-<script src="https://cdn.jsdelivr.net/npm/lazy-attr@1.0.5/lazy-attr.min.js"></script>
-<link src="https://cdn.jsdelivr.net/npm/lazy-attr@1.0.5/lazy-attr-animation.min.css"/>
 ```
@@ -32,0 +27,0 @@ ## 🐱 Github and NPM

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1055759

increased by2.35%

Number of package files

12

increased by9.09%

Lines of code

1187

increased by46.91%

Worsened metrics

Number of lines in readme file

30

decreased by-14.29%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes