@cocreate/scroll 1.3.5 → 1.3.6

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.3.6](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.5...v1.3.6) (2022-06-22)
+
+
+### Bug Fixes
+
+* compare datetime to break infinite loop on scroll up and scroll down ([c86b317](https://github.com/CoCreate-app/CoCreate-scroll/commit/c86b3170a9335acf895006de54d10b2cc3fc2ab0))
+
 ## [1.3.5](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.4...v1.3.5) (2022-06-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/scroll",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "A simple scroll component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "scroll",

package/src/index.js

@@ -3,6 +3,9 @@ import observer from '@cocreate/observer';
 const CoCreateScroll = {
 	delta: 3,
 	observer: null,
+	timer: null,
+	firedEvents: new Map(),
+
 	init: function() {
 		let elements = document.querySelectorAll(`[scroll]`);
 		this.__initIntersectionObserver();
@@ -20,8 +23,9 @@ const CoCreateScroll = {
 		const downSize = this.__getSize(element.getAttribute('scroll-down'));
 		const attrName = element.getAttribute('scroll-attribute') || 'class';
 		const targetSelector = element.getAttribute('scroll-target');
+		const scrollSelector = element.getAttribute('scroll-element');
 		const intersectValue = element.getAttribute('scroll-intersect');
-
+		
 		let values = element.getAttribute('scroll') || "";
 		values = values.split(",").map(x => x.trim());
 
@@ -45,34 +49,55 @@ const CoCreateScroll = {
 			el.scrollStatus = { currentPos: 0 };
 		});
 		
-		this.__runScrollEvent(element, scrollInfo);		
+		// this.__runScrollEvent(element, scrollInfo);		
 
-		let timer = null;
-		window.addEventListener('scroll', function(event) {
-			if (!element.scrollStatus) return;
-			if (Math.abs(window.scrollY - element.scrollStatus.currentPos) <= self.delta) {
-				return;
-			}
-
-			if (timer != null) {
-				clearTimeout(timer);
+		let scrollableElements;
+		if (scrollSelector)
+			scrollableElements = document.querySelectorAll(scrollSelector);
+		
+		if (scrollableElements) {
+			for (let scrollableEl of scrollableElements) {
+				scrollableEl.addEventListener('scroll', function(event) {
+					self._scrollEvent(elements, element, scrollInfo, scrollableEl)
+				});	
 			}
+		} else{
+			// this.WindowInit = true;
+			window.addEventListener('scroll', function(event) {
+				self._scrollEvent(elements, element, scrollInfo)
+			});	
+		}
 
-			elements.forEach((el) => {
-				self.__runScrollEvent(el, scrollInfo);
-				self.__setScrolling(el, scrollInfo, false);
-			});
-
-			timer = setTimeout(function() {
-				elements.forEach((el) => {
-					self.__setScrolling(el, scrollInfo, true);
-				});
-			}, 500);
-		});
 		if (intersectValue && window.IntersectionObserver && this.observer) {
 			this.observer.observe(element);
 		}
 	},
+	
+	_scrollEvent: function(elements, element, scrollInfo, scrollableEl) {
+		const self = this;
+		if (!element.scrollStatus) return;
+		let scrollEl = scrollableEl || window;
+		if (Math.abs(scrollEl.scrollTop || scrollEl.scrollY - element.scrollStatus.currentPos) <= self.delta) {
+			return;
+		}
+
+		let timer = null;
+		if (timer != null) {
+			clearTimeout(timer);
+		}
+
+		elements.forEach((el) => {
+			self.__setScrolling(el, scrollInfo, false);
+			self.__runScrollEvent(el, scrollInfo, scrollableEl);
+
+		});
+
+		timer = setTimeout(function() {
+			elements.forEach((el) => {
+				self.__setScrolling(el, scrollInfo, true);
+			});
+		}, 500);
+	},
 
 	__initIntersectionObserver: function() {
 		const self = this;
@@ -107,21 +132,34 @@ const CoCreateScroll = {
 		}
 	},
 
-	__runScrollEvent: function(element, info) {
+	__runScrollEvent: function(element, info, scrollableEl) {
 		if (!element.scrollStatus) return
 		const currentPos = element.scrollStatus.currentPos;
-		const scrollY = window.scrollY;
+		let scrollY, scrollHeight, innerHeight;
+		if (scrollableEl){
+			scrollY = scrollableEl.scrollTop;
+			scrollHeight = scrollableEl.scrollHeight
+			innerHeight = scrollableEl.clientHeight
+		} else {
+			scrollY = window.scrollY;
+			scrollHeight = document.body.scrollHeight
+			innerHeight = window.innerHeight
+		}
 		const { upSize, downSize, attrName, values, scrollTop, scrollBottom, scrollLimbo } = info;
 
-		if (upSize < (currentPos - scrollY)) {
-			this.__addAttributeValue(element, attrName, values[0]);
-			this.__removeAttrbuteValue(element, attrName, values[1]);
-		}
-		else if (downSize < (scrollY - currentPos)) {
-			this.__removeAttrbuteValue(element, attrName, values[0]);
-			this.__addAttributeValue(element, attrName, values[1]);
-		}
+		let newTime = new Date().getTime()
+		if (!info.datetime || (newTime - info.datetime) > 200 ) {
+			info['datetime'] = newTime
 
+			if (upSize <= (currentPos - scrollY)) {
+				this.__addAttributeValue(element, attrName, values[0]);
+				this.__removeAttrbuteValue(element, attrName, values[1]);
+			}
+			else if (downSize <= (scrollY - currentPos)) {
+				this.__removeAttrbuteValue(element, attrName, values[0]);
+				this.__addAttributeValue(element, attrName, values[1]);
+			}
+		}
 		//. scroll top case
 		if (scrollY <= this.delta) {
 			this.__removeAttrbuteValue(element, attrName, values[0]);
@@ -134,7 +172,8 @@ const CoCreateScroll = {
 		}
 
 		//. scroll bottom case
-		if ((window.innerHeight + scrollY) >= document.body.scrollHeight) {
+		// if ((window.innerHeight + scrollY) >= document.body.scrollHeight) {
+		if ((innerHeight + scrollY) >= scrollHeight) {
 			// this.__removeAttrbuteValue(element, attrName, values[0]);
 			// this.__removeAttrbuteValue(element, attrName, values[1]);
 
@@ -144,7 +183,8 @@ const CoCreateScroll = {
 			this.__removeAttrbuteValue(element, attrName, scrollBottom);
 		}
 		
-		if (scrollY != 0 && (scrollY + window.innerHeight) != document.body.scrollHeight){
+		// if (scrollY != 0 && (scrollY + window.innerHeight) != document.body.scrollHeight){
+		if (scrollY != 0 && (scrollY + innerHeight) != scrollHeight){
 			this.__addAttributeValue(element, attrName, scrollLimbo);
 		}
 		else {
@@ -197,8 +237,6 @@ const CoCreateScroll = {
 		return size;
 	}
 
-
-
 };
 
 observer.init({
@@ -213,4 +251,4 @@ observer.init({
 
 CoCreateScroll.init();
 
-export default CoCreateScroll;
+export default CoCreateScroll;