From 9691e6e2dba7323b0150b78b08adf1d474325332 Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 30 Mar 2023 17:08:42 +0000 Subject: [PATCH] v1.7.3 - More refactoring --- README.md | 8 ++++---- dist/trig.js | 2 +- index.html | 4 ++-- src/trig.js | 55 +++++++++++++++++++++++++--------------------------- 4 files changed, 33 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index bda6cb4..929a5a8 100644 --- a/README.md +++ b/README.md @@ -34,10 +34,10 @@ npm i trig-js Use Trig.js from a CDN ``` -https://cdn.jsdelivr.net/npm/trig-js@1.7.2/dist/trig.js +https://cdn.jsdelivr.net/npm/trig-js@1.7.3/dist/trig.js ``` ``` -https://unpkg.com/trig-js@1.7.2/dist/trig.js +https://unpkg.com/trig-js@1.7.3/dist/trig.js ``` # What is Trig.js? @@ -58,10 +58,10 @@ All you need to do is add the dist trig.js file into your projects JS folder and Or just add one of the below CDN instead ``` - + ``` ``` - + ``` # How To Use? diff --git a/dist/trig.js b/dist/trig.js index 30f6404..80fe334 100755 --- a/dist/trig.js +++ b/dist/trig.js @@ -1 +1 @@ -const trig={trigs:[],thePos:[],documentHeight:0,trigIntersecting:function(t){t.isIntersecting?t.target.classList.add("trig"):t.target.classList.remove("trig")},trigEntries:function(t){t.forEach(function(t){trigObject.trigIntersecting(t),trigObject.trigPos(t)})},trigSetPos:function(t,e,r,i,g){var s=(0-(t-(trigObject.documentHeight/2+g)))/trigObject.documentHeight*100;s>=e&&s<=r?trigObject.thePos[i.target.index]=s:s<=e?trigObject.thePos[i.target.index]=e:s>=r&&(trigObject.thePos[i.target.index]=r)},trigPos:function(t){var e=0,r=-100,i=100,g=t.boundingClientRect.top;t.target.dataset.trigOffset&&(e=parseInt(t.target.dataset.trigOffset)),t.target.dataset.trigMin&&(r=parseInt(t.target.dataset.trigMin)),t.target.dataset.trigMax&&(i=parseInt(t.target.dataset.trigMax)),trigObject.trigSetPos(g,r,i,t,e)},updatePos:function(){trigObject.trigs.forEach(function(t,e){var r=t.style;r.setProperty("--trig",trigObject.thePos[e]+"%"),r.setProperty("--trig-reverse",-trigObject.thePos[e]+"%"),r.setProperty("--trig-px",trigObject.thePos[e]+"px"),r.setProperty("--trig-px-reverse",-trigObject.thePos[e]+"px"),r.setProperty("--trig-deg",trigObject.thePos[e]/100*360+"deg"),r.setProperty("--trig-deg-reverse",-trigObject.thePos[e]/100*360+"deg")})}},observer=new IntersectionObserver(function(t){trigObject.trigEntries(t),trigObject.updatePos(trigObject.trigs),observer.disconnect()}),trigObject=Object.create(trig);function trigInit(){trigObject.trigs=document.querySelectorAll(".enable-trig,[data-trig]"),trigObject.documentHeight=innerHeight,trigScroll()}function trigScroll(){trigObject.trigs&&trigObject.trigs.forEach(function(t,e){t.index=e,observer.observe(t)})}document.addEventListener("scroll",trigScroll,!1),document.addEventListener("resize",trigInit,!1),document.addEventListener("DOMContentLoaded",trigInit,!1); \ No newline at end of file +const trig={trigs:[],thePos:[],documentHeight:0,observer:new IntersectionObserver(function(t){trigObject.trigEntries(t),trigObject.updatePos(trigObject.trigs),trigObject.observer.disconnect()}),trigIntersecting:function(t){t.isIntersecting?t.target.classList.add("trig"):t.target.classList.remove("trig")},trigInit:function(){trigObject.trigs=document.querySelectorAll(".enable-trig,[data-trig]"),trigObject.documentHeight=innerHeight,trigObject.trigScroll()},trigScroll:function(){trigObject.trigs&&trigObject.trigs.forEach(function(t,e){t.index=e,trigObject.observer.observe(t)})},trigEntries:function(t){t.forEach(function(t){trigObject.trigIntersecting(t),trigObject.trigPos(t)})},trigSetPos:function(t,e,r,i){t>=e&&t<=r?trigObject.thePos[i.target.index]=t:t<=e?trigObject.thePos[i.target.index]=e:t>=r&&(trigObject.thePos[i.target.index]=r)},trigPos:function(t){var e=0,r=-100,i=100,g=t.boundingClientRect.top;t.target.dataset.trigOffset&&(e=parseInt(t.target.dataset.trigOffset)),t.target.dataset.trigMin&&(r=parseInt(t.target.dataset.trigMin)),t.target.dataset.trigMax&&(i=parseInt(t.target.dataset.trigMax));var s=(0-(g-(trigObject.documentHeight/2+e)))/trigObject.documentHeight*100;trigObject.trigSetPos(s,r,i,t)},updatePos:function(){trigObject.trigs.forEach(function(t,e){var r=t.style;r.setProperty("--trig",trigObject.thePos[e]+"%"),r.setProperty("--trig-reverse",-trigObject.thePos[e]+"%"),r.setProperty("--trig-px",trigObject.thePos[e]+"px"),r.setProperty("--trig-px-reverse",-trigObject.thePos[e]+"px"),r.setProperty("--trig-deg",trigObject.thePos[e]/100*360+"deg"),r.setProperty("--trig-deg-reverse",-trigObject.thePos[e]/100*360+"deg")})}},trigObject=Object.create(trig);document.addEventListener("scroll",trigObject.trigScroll,!1),document.addEventListener("resize",trigObject.trigInit,!1),document.addEventListener("DOMContentLoaded",trigObject.trigInit,!1); \ No newline at end of file diff --git a/index.html b/index.html index ef83b2c..1ce2cb6 100755 --- a/index.html +++ b/index.html @@ -203,10 +203,10 @@

How To Install?

Or just add one of the below CDN instead

-                        <script src="https://unpkg.com/trig-js@1.7.2/dist/trig.js"></script>
+                        <script src="https://unpkg.com/trig-js@1.7.3/dist/trig.js"></script>
                     
-                        <script src="https://cdn.jsdelivr.net/npm/trig-js@1.7.2/dist/trig.js"></script>
+                        <script src="https://cdn.jsdelivr.net/npm/trig-js@1.7.3/dist/trig.js"></script>
diff --git a/src/trig.js b/src/trig.js index c8ef9a4..e8cbcb1 100755 --- a/src/trig.js +++ b/src/trig.js @@ -1,8 +1,13 @@ -/* Trig.js v1.7.2 by iDev Games */ +/* Trig.js v1.7.3 by iDev Games */ const trig = { trigs: [], thePos: [], documentHeight: 0, + observer: new IntersectionObserver(function(entries) { + trigObject.trigEntries(entries); + trigObject.updatePos(trigObject.trigs); + trigObject.observer.disconnect(); + }), trigIntersecting: function(entry) { if (entry.isIntersecting) { entry.target.classList.add("trig"); @@ -10,15 +15,26 @@ const trig = { entry.target.classList.remove("trig"); } }, + trigInit: function() { + trigObject.trigs = document.querySelectorAll('.enable-trig,[data-trig]'); + trigObject.documentHeight = innerHeight; + trigObject.trigScroll(); + }, + trigScroll: function(){ + if (trigObject.trigs) { + trigObject.trigs.forEach(function(element, index) { + element.index = index; + trigObject.observer.observe(element); + }); + } + }, trigEntries: function(entries) { entries.forEach(function(entry) { trigObject.trigIntersecting(entry); trigObject.trigPos(entry); }); }, - trigSetPos: function(el, min, max, entry, offset) { - var posTop = 0 - (el - ((trigObject.documentHeight / 2) + offset)); - var pos = (posTop / trigObject.documentHeight) * 100; + trigSetPos: function(pos, min, max, entry) { if (pos >= min && pos <= max) { trigObject.thePos[entry.target.index] = pos; } else if (pos <= min) { @@ -41,7 +57,9 @@ const trig = { if (entry.target.dataset.trigMax) { max = parseInt(entry.target.dataset.trigMax); } - trigObject.trigSetPos(el, min, max, entry, offset); + var posTop = 0 - (el - ((trigObject.documentHeight / 2) + offset)); + var pos = (posTop / trigObject.documentHeight) * 100; + trigObject.trigSetPos(pos, min, max, entry); }, updatePos: function() { trigObject.trigs.forEach(function(element, index) { @@ -56,29 +74,8 @@ const trig = { } }; -const observer = new IntersectionObserver(function(entries) { - trigObject.trigEntries(entries); - trigObject.updatePos(trigObject.trigs); - observer.disconnect(); -}); - const trigObject = Object.create(trig); -document.addEventListener('scroll', trigScroll, false); -document.addEventListener('resize', trigInit, false); -document.addEventListener('DOMContentLoaded', trigInit, false); - -function trigInit(){ - trigObject.trigs = document.querySelectorAll('.enable-trig,[data-trig]'); - trigObject.documentHeight = innerHeight; - trigScroll(); -} - -function trigScroll() { - if (trigObject.trigs) { - trigObject.trigs.forEach(function(element, index) { - element.index = index; - observer.observe(element); - }); - } -} \ No newline at end of file +document.addEventListener('scroll', trigObject.trigScroll, false); +document.addEventListener('resize', trigObject.trigInit, false); +document.addEventListener('DOMContentLoaded', trigObject.trigInit, false); \ No newline at end of file