Skip to content

Commit

Permalink
v2.1.4 - Refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@iDev-Games
iDev-Games committed Apr 10, 2023
1 parent f3d8d75 commit a695f18
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 49 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
![npm bundle size](https://img.shields.io/bundlephobia/min/trig-js)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/ce378a75b36040f9a820005742a225ac)](https://app.codacy.com/gh/iDev-Games/Trig-JS/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
[![Maintainability](https://api.codeclimate.com/v1/badges/0d58ec40b6b2e8231b19/maintainability)](https://codeclimate.com/github/iDev-Games/Trig-JS/maintainability)
[![Rate this package](https://badges.openbase.com/js/rating/trig-js.svg?token=yMxvYp29jHYagYuMihBM9fSmdmu4CUt12M6SRvyJ6k0=)](https://openbase.com/js/trig-js?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)

![npm](https://img.shields.io/npm/dt/trig-js?logo=NPM) ![npm](https://img.shields.io/npm/dw/trig-js?logo=NPM) ![npm](https://img.shields.io/npm/dm/trig-js?logo=NPM) ![npm](https://img.shields.io/npm/dy/trig-js?logo=NPM) ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/trig-js)

Expand Down
2 changes: 1 addition & 1 deletion dist/trig.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "trig-js",
"version": "2.1.3",
"version": "2.1.4",
"description": "The easy way to create CSS scroll animations that react to the position of your HTML element on screen. Animate on scroll (AOS) your CSS.",
"main": "src/trig.js",
"scripts": {
Expand Down
95 changes: 49 additions & 46 deletions src/trig.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Trig.js v2.1.3 by iDev Games */
/* Trig.js v2.1.4 by iDev Games */
class Trig
{
trigs = [];
Expand All @@ -7,44 +7,47 @@ class Trig
pos = 0;
scrollDir = ["trig-scroll-down", "trig-scroll-up"];
observer;
constructor() {
self = this;
}
trigInit() {
trig.observer = new IntersectionObserver(trig.trigObserver);
trig.trigs = document.querySelectorAll('body,.enable-trig,[data-trig]');
trig.height = innerHeight;
trig.trigScroll();
self.observer = new IntersectionObserver(self.trigObserver);
self.trigs = document.querySelectorAll('body,.enable-trig,[data-trig]');
self.height = innerHeight;
self.trigScroll();
}
trigScroll(){
if (trig.trigs) {
trig.trigs.forEach(function(element, index) {
if (self.trigs) {
self.trigs.forEach(function(element, index) {
element.index = index;
trig.observer.observe(element);
self.observer.observe(element);
});
}
}
trigEntries(entries) {
entries.forEach(function(entry) {
trig.trigIntersecting(entry);
self.trigIntersecting(entry);
if(entry.target.index == 0){
trig.trigDirection(entry);
self.trigDirection(entry);
}
trig.trigPos(entry);
trig.updatePos(entry.target);
self.trigPos(entry);
self.updatePos(entry.target);
});
}
trigDirection(entry){
var y = entry.boundingClientRect.y;
if(trig.scrollPos){
if(trig.scrollPos < y-1) {
trig.scrollDir = ["trig-scroll-down", "trig-scroll-up"];
} else if(trig.scrollPos > y+1) {
trig.scrollDir = ["trig-scroll-up", "trig-scroll-down"];
if(self.scrollPos){
if(self.scrollPos < y-1) {
self.scrollDir = ["trig-scroll-down", "trig-scroll-up"];
} else if(self.scrollPos > y+1) {
self.scrollDir = ["trig-scroll-up", "trig-scroll-down"];
}
}
trig.scrollPos = y;
self.scrollPos = y;
}
trigObserver(entries){
trig.trigEntries(entries);
trig.observer.disconnect();
self.trigEntries(entries);
self.observer.disconnect();
}
trigIntersecting(entry) {
if(document.body != entry.target){
Expand All @@ -58,21 +61,21 @@ class Trig
trigPos(entry) {
var options = { offset: 0, height: 0, min: -100, max: 100 };
Object.keys(options).forEach(function(key) {
options[key] = trig.trigAttributes(entry, options, key);
options[key] = self.trigAttributes(entry, options, key);
});
var el = entry.boundingClientRect.top;
var height = entry.boundingClientRect.height;
if(trig.height > height){
height = trig.height;
if(self.height > height){
height = self.height;
}
if(document.body == entry.target){
var posTop = 0 - (el);
var pos = (posTop / (height - ((trig.height)))) * 100;
var pos = (posTop / (height - ((self.height)))) * 100;
} else {
var posTop = 0 - (el - ((trig.height / 2) + options.offset));
var posTop = 0 - (el - ((self.height / 2) + options.offset));
var pos = (posTop / (height + options.height)) * 100;
}
trig.trigSetPos(pos, options.min, options.max, entry.target);
self.trigSetPos(pos, options.min, options.max, entry.target);
}
trigAttributes(entry, options, name){
var dSet = entry.target.getAttribute("data-trig-"+name);
Expand All @@ -88,33 +91,33 @@ class Trig
}
trigSetPos(pos, min, max, entry) {
if (pos >= min && pos <= max) {
trig.thePos[entry.index] = pos;
self.thePos[entry.index] = pos;
} else if (pos <= min) {
trig.thePos[entry.index] = min;
self.thePos[entry.index] = min;
} else if (pos >= max) {
trig.thePos[entry.index] = max;
self.thePos[entry.index] = max;
}
}
trigSetBody(element){
var bo = element;
var cl = bo.classList;
if(cl.contains(trig.scrollDir[0])){
cl.replace(trig.scrollDir[0], trig.scrollDir[1]);
if(cl.contains(self.scrollDir[0])){
cl.replace(self.scrollDir[0], self.scrollDir[1]);
}
if(!cl.contains(trig.scrollDir[0]) && !cl.contains(trig.scrollDir[1])){
if(!cl.contains(self.scrollDir[0]) && !cl.contains(self.scrollDir[1])){
cl.add("trig-scroll-up");
}
var split = [0,25,50,75,100];
for (let i = 0; i < split.length; i++) {
trig.trigSplit(split[i], element.index, cl);
self.trigSplit(split[i], element.index, cl);
}
}
trigSplit(split, index, cl){
var name = split;
if(split == 0 || split == 100){
trig.trigSplitEquals(name,split,cl,index);
self.trigSplitEquals(name,split,cl,index);
} else {
trig.trigSplitMoreThan(name,split,cl,index);
self.trigSplitMoreThan(name,split,cl,index);
}
}
trigSplitEquals(name,split,cl,index){
Expand All @@ -123,16 +126,16 @@ class Trig
} else if(split == 100) {
name = "bottom";
}
if(trig.thePos[index] == split){
if(self.thePos[index] == split){
cl.add("trig-scroll-"+name);
} else {
cl.remove("trig-scroll-"+name);
}
}
trigSplitMoreThan(name,split,cl,index){
if(trig.thePos[index] >= split){
if(self.thePos[index] >= split){
cl.add("trig-scroll-"+name);
} else if(trig.thePos[index] < split) {
} else if(self.thePos[index] < split) {
cl.remove("trig-scroll-"+name);
}
}
Expand All @@ -145,19 +148,19 @@ class Trig
var id = "";
}
if(document.body == element){
trig.trigSetBody(element);
self.trigSetBody(element);
} else {
el.setProperty('--trig'+id, trig.thePos[element.index] + "%");
el.setProperty('--trig-reverse'+id, -(trig.thePos[element.index]) + "%");
el.setProperty('--trig-px'+id, trig.thePos[element.index] + "px");
el.setProperty('--trig-px-reverse'+id, -(trig.thePos[element.index]) + "px");
el.setProperty('--trig-deg'+id, ((trig.thePos[element.index] / 100) * 360) + "deg");
el.setProperty('--trig-deg-reverse'+id, ((-(trig.thePos[element.index]) / 100) * 360) + "deg");
el.setProperty('--trig'+id, self.thePos[element.index] + "%");
el.setProperty('--trig-reverse'+id, -(self.thePos[element.index]) + "%");
el.setProperty('--trig-px'+id, self.thePos[element.index] + "px");
el.setProperty('--trig-px-reverse'+id, -(self.thePos[element.index]) + "px");
el.setProperty('--trig-deg'+id, ((self.thePos[element.index] / 100) * 360) + "deg");
el.setProperty('--trig-deg-reverse'+id, ((-(self.thePos[element.index]) / 100) * 360) + "deg");
}
}
}
const trig = new Trig;

document.addEventListener('scroll', trig.trigScroll, false);
document.addEventListener('resize', trig.trigInit, false);
document.addEventListener('DOMContentLoaded', trig.trigInit, false);
document.addEventListener('DOMContentLoaded', trig.trigInit, false);

0 comments on commit a695f18

Please sign in to comment.