@cocreate/scroll 1.3.2 → 1.3.5

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.3.5](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.4...v1.3.5) (2022-06-19)
+
+
+### Bug Fixes
+
+* removed scroll-element support as it was causing a loop. Moved to branch newScroll fordebugging ([f8d99c7](https://github.com/CoCreate-app/CoCreate-scroll/commit/f8d99c707b0e87032f7dd547b3342d308182c6d6))
+
+## [1.3.4](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.3...v1.3.4) (2022-06-18)
+
+
+### Bug Fixes
+
+* bump dependencies ([0bd768f](https://github.com/CoCreate-app/CoCreate-scroll/commit/0bd768fb982758e6daa62bfd3724a3dec1618f88))
+
+## [1.3.3](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.2...v1.3.3) (2022-06-18)
+
+
+### Bug Fixes
+
+* fix scroll event loop ([59f6998](https://github.com/CoCreate-app/CoCreate-scroll/commit/59f6998d5c4f562584efa3b64793381a3e49ebe6))
+
 ## [1.3.2](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.1...v1.3.2) (2022-06-17)
 
 

package/demo/index.html

@@ -40,7 +40,7 @@
   }
   
   .scrolling {
-    background-color: gray;
+    background-color: rgb(226, 31, 210);
   }
   
   
@@ -62,13 +62,12 @@
     <!-- Navbar  -->
     <div class="display:flex flex-wrap:wrap justify-content:space-between flex-direction:row padding-top:10px padding-bottom:10px width:100% nav"
       content_id="content"
-      scroll="hidden, sticky-nav"
-      scrolling="scrolling"
       scroll-top="scroll_top"
-      scroll-limbo="scroll_limbo"
       scroll-bottom="scroll_bottom"
+      scroll="hidden, sticky-nav"
       scroll-up="10"
-      scroll-down="5">
+      scroll-down="5"
+      >
 
       <!--<a href="#" class="logo">Navbar</a>-->
       <div class="margin:0px_15px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center width:100%">
@@ -106,7 +105,7 @@
         </div>
       </div>
     </div>
-    <section class="padding-top:80px padding-bottom:40px   ">
+    <section class="padding-top:80px padding-bottom:40px" scroll scrolling="scrolling">
       <div class=" max-width:90% margin:0px_auto">
         <div class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
           <div class="flex-grow:1 min-width:300px width:50%">
@@ -122,7 +121,7 @@
         </div>
       </div>
     </section>
-    <section class="bg-light-gray padding:25px_0px">
+    <section class="bg-light-gray padding:25px_0px" scroll scroll-limbo="scroll_limbo">
       <div class="max-width:90% margin:0px_auto">
         <div class="padding:25px_0px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center">
           <div class="padding:0px_10px">
@@ -227,7 +226,6 @@
     </div>
 
 
-        <!--<script src="../dist/CoCreate-selected.js"></script>-->
 	    <script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
 
   </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/scroll",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "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.3.2",
-    "@cocreate/observer": "^1.5.2"
+    "@cocreate/docs": "^1.3.3",
+    "@cocreate/observer": "^1.5.3"
   }
 }

package/src/index.js

@@ -3,8 +3,6 @@ import observer from '@cocreate/observer';
 const CoCreateScroll = {
 	delta: 3,
 	observer: null,
-	elementList: new Map(),
-
 	init: function() {
 		let elements = document.querySelectorAll(`[scroll]`);
 		this.__initIntersectionObserver();
@@ -22,7 +20,6 @@ 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') || "";
@@ -50,49 +47,31 @@ 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 || scrollEl.scrollY - element.scrollStatus.currentPos) <= self.delta) {
-			return;
-		}
-
 		let timer = null;
-		if (timer != null) {
-			clearTimeout(timer);
-		}
+		window.addEventListener('scroll', function(event) {
+			if (!element.scrollStatus) return;
+			if (Math.abs(window.scrollY - element.scrollStatus.currentPos) <= self.delta) {
+				return;
+			}
 
-		elements.forEach((el) => {
-			self.__runScrollEvent(el, scrollInfo, scrollableEl);
-			self.__setScrolling(el, scrollInfo, false);
-		});
+			if (timer != null) {
+				clearTimeout(timer);
+			}
 
-		timer = setTimeout(function() {
 			elements.forEach((el) => {
-				self.__setScrolling(el, scrollInfo, true);
+				self.__runScrollEvent(el, scrollInfo);
+				self.__setScrolling(el, scrollInfo, false);
 			});
-		}, 500);
+
+			timer = setTimeout(function() {
+				elements.forEach((el) => {
+					self.__setScrolling(el, scrollInfo, true);
+				});
+			}, 500);
+		});
+		if (intersectValue && window.IntersectionObserver && this.observer) {
+			this.observer.observe(element);
+		}
 	},
 
 	__initIntersectionObserver: function() {
@@ -128,19 +107,10 @@ const CoCreateScroll = {
 		}
 	},
 
-	__runScrollEvent: function(element, info, scrollableEl) {
+	__runScrollEvent: function(element, info) {
 		if (!element.scrollStatus) return
 		const currentPos = element.scrollStatus.currentPos;
-		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 scrollY = window.scrollY;
 		const { upSize, downSize, attrName, values, scrollTop, scrollBottom, scrollLimbo } = info;
 
 		if (upSize < (currentPos - scrollY)) {
@@ -164,8 +134,7 @@ const CoCreateScroll = {
 		}
 
 		//. scroll bottom case
-		// if ((window.innerHeight + scrollY) >= document.body.scrollHeight) {
-		if ((innerHeight + scrollY) >= scrollHeight) {
+		if ((window.innerHeight + scrollY) >= document.body.scrollHeight) {
 			// this.__removeAttrbuteValue(element, attrName, values[0]);
 			// this.__removeAttrbuteValue(element, attrName, values[1]);
 
@@ -175,8 +144,7 @@ const CoCreateScroll = {
 			this.__removeAttrbuteValue(element, attrName, scrollBottom);
 		}
 		
-		// if (scrollY != 0 && (scrollY + window.innerHeight) != document.body.scrollHeight){
-		if (scrollY != 0 && (scrollY + innerHeight) != scrollHeight){
+		if (scrollY != 0 && (scrollY + window.innerHeight) != document.body.scrollHeight){
 			this.__addAttributeValue(element, attrName, scrollLimbo);
 		}
 		else {
@@ -229,6 +197,8 @@ const CoCreateScroll = {
 		return size;
 	}
 
+
+
 };
 
 observer.init({
@@ -243,4 +213,4 @@ observer.init({
 
 CoCreateScroll.init();
 
-export default CoCreateScroll;
+export default CoCreateScroll;