@cocreate/scroll 1.2.27 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.3.0](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.2.29...v1.3.0) (2022-06-07)
+
+
+### Features
+
+* sortable-element to define a scroll element defaults to window ([dd0b493](https://github.com/CoCreate-app/CoCreate-scroll/commit/dd0b49330b89afc6526b5ea9c81f7166615a57c0))
+
+## [1.2.29](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.2.28...v1.2.29) (2022-05-23)
+
+
+### Bug Fixes
+
+* bump all dependencies ([4c5dcd0](https://github.com/CoCreate-app/CoCreate-scroll/commit/4c5dcd0a3097c55289ed365a966718a09c9ca099))
+
+## [1.2.28](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.2.27...v1.2.28) (2022-05-19)
+
+
+### Bug Fixes
+
+* update document_id on link index.css ([501ef76](https://github.com/CoCreate-app/CoCreate-scroll/commit/501ef76623dc3d0989387f70b053939247943539))
+
 ## [1.2.27](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.2.26...v1.2.27) (2022-05-06)
 
 

package/docs/index.html

@@ -14,7 +14,7 @@
 
     <!-- CoCreate CSS -->
     <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
-    <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
+    <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="62827d7e8082ce05b081430b" name="src" type="text/css" save="true" />
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/scroll",
-  "version": "1.2.27",
+  "version": "1.3.0",
   "description": "A simple scroll component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "scroll",
@@ -61,7 +61,7 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/docs": "^1.2.69",
-    "@cocreate/observer": "^1.4.4"
+    "@cocreate/docs": "^1.3.1",
+    "@cocreate/observer": "^1.5.1"
   }
 }

package/src/index.js

@@ -3,6 +3,8 @@ import observer from '@cocreate/observer';
 const CoCreateScroll = {
 	delta: 3,
 	observer: null,
+	elementList: new Map(),
+
 	init: function() {
 		let elements = document.querySelectorAll(`[scroll]`);
 		this.__initIntersectionObserver();
@@ -20,6 +22,7 @@ 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') || "";
@@ -47,31 +50,49 @@ const CoCreateScroll = {
 		
 		this.__runScrollEvent(element, scrollInfo);		
 
+		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 {
+			window.addEventListener('scroll', function(event) {
+				self._scrollEvent(elements, element, scrollInfo)
+			});	
+		}
+
+		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 - element.scrollStatus.currentPos) <= self.delta) {
+			return;
+		}
+
 		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);
+		}
 
-			if (timer != null) {
-				clearTimeout(timer);
-			}
+		elements.forEach((el) => {
+			self.__runScrollEvent(el, scrollInfo, scrollableEl);
+			self.__setScrolling(el, scrollInfo, false);
+		});
 
+		timer = setTimeout(function() {
 			elements.forEach((el) => {
-				self.__runScrollEvent(el, scrollInfo);
-				self.__setScrolling(el, scrollInfo, false);
+				self.__setScrolling(el, scrollInfo, true);
 			});
-
-			timer = setTimeout(function() {
-				elements.forEach((el) => {
-					self.__setScrolling(el, scrollInfo, true);
-				});
-			}, 500);
-		});
-		if (intersectValue && window.IntersectionObserver && this.observer) {
-			this.observer.observe(element);
-		}
+		}, 500);
 	},
 
 	__initIntersectionObserver: function() {
@@ -107,10 +128,19 @@ 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)) {
@@ -134,7 +164,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 +175,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 +229,6 @@ const CoCreateScroll = {
 		return size;
 	}
 
-
-
 };
 
 observer.init({