@cocreate/scroll 1.11.3 → 1.12.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.12.0](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.11.3...v1.12.0) (2024-09-21)
+
+
+### Features
+
+* added CoCreate-actions ([e2c2a6a](https://github.com/CoCreate-app/CoCreate-scroll/commit/e2c2a6a3071ea691244874495f5d2426906e192d))
+* scroll-to to set a scroll position top | bottom | left | right ([0c42fc1](https://github.com/CoCreate-app/CoCreate-scroll/commit/0c42fc1ce81b1bf585d5fd5508e1e1ff97de04c5))
+
 ## [1.11.3](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.11.2...v1.11.3) (2024-06-12)
 
 

package/demo/index.html

@@ -66,7 +66,8 @@
             scroll-bottom="scroll_bottom"
             scroll="hidden, sticky-nav"
             scroll-up="10"
-            scroll-down="5">
+            scroll-down="5"
+            scroll-to="top | bottom | left | right">
             <!--<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%">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/scroll",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "A simple scroll component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "scroll",
@@ -58,6 +58,7 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/observer": "^1.16.1"
+    "@cocreate/observer": "^1.16.1",
+    "@cocreate/actions": "^1.19.1"
   }
 }

package/src/index.js

@@ -1,4 +1,5 @@
-import observer from '@cocreate/observer';
+import Observer from '@cocreate/observer';
+import Actions from '@cocreate/actions';
 
 const CoCreateScroll = {
     delta: 3,
@@ -7,7 +8,7 @@ const CoCreateScroll = {
     firedEvents: new Map(),
 
     init: function () {
-        let elements = document.querySelectorAll(`[scroll]`);
+        let elements = document.querySelectorAll(`[scroll], [scroll-to]`);
         this.__initIntersectionObserver();
         this.initElements(elements);
     },
@@ -25,8 +26,9 @@ const CoCreateScroll = {
         const targetSelector = element.getAttribute('scroll-selector');
         const scrollSelector = element.getAttribute('scroll-element');
         const intersectValue = element.getAttribute('scroll-intersect');
+        const scrollTo = element.getAttribute('scroll-to');
 
-        let values = element.getAttribute('scroll') || "";
+        let values = element.getAttribute('scroll') || element.getAttribute('scroll-value');
         values = values.split(",").map(x => x.trim());
 
         let scrollInfo = {
@@ -37,7 +39,8 @@ const CoCreateScroll = {
             scrollTop: element.getAttribute('scroll-top'),
             scrollLimbo: element.getAttribute('scroll-limbo'),
             scrollBottom: element.getAttribute('scroll-bottom'),
-            scrolling: element.getAttribute('scrolling')
+            scrolling: element.getAttribute('scrolling'),
+            scrollTo
         };
 
         let elements = [element];
@@ -54,6 +57,8 @@ const CoCreateScroll = {
         let scrollableElements;
         if (scrollSelector)
             scrollableElements = document.querySelectorAll(scrollSelector);
+        else if (element.hasAttribute('scroll-element'))
+            scrollableElements = [element]
 
         if (scrollableElements) {
             for (let scrollableEl of scrollableElements) {
@@ -71,6 +76,10 @@ const CoCreateScroll = {
         if (intersectValue && window.IntersectionObserver && this.observer) {
             this.observer.observe(element);
         }
+
+        if (scrollTo) {
+            this.setScrollPosition(element, scrollTo)
+        }
     },
 
     _scrollEvent: function (elements, element, scrollInfo, scrollableEl) {
@@ -99,6 +108,20 @@ const CoCreateScroll = {
         }, 500);
     },
 
+    setScrollPosition: function (element, scrollTo) {
+        if (scrollTo.includes('top')) {
+            element.scrollTop = 0;
+        } else if (scrollTo.includes('bottom')) {
+            element.scrollTop = element.scrollHeight;
+        }
+
+        if (scrollTo.includes('left')) {
+            element.scrollLeft = 0;
+        } else if (scrollTo.includes('right')) {
+            element.scrollLeft = element.scrollWidth;
+        }
+    },
+
     __initIntersectionObserver: function () {
         const self = this;
         this.observer = new IntersectionObserver(entries => {
@@ -114,8 +137,7 @@ const CoCreateScroll = {
                 }
                 if (entry.isIntersecting > 0) {
                     targetElements.forEach((el) => self.__addAttributeValue(el, attrName, intersectValue));
-                }
-                else {
+                } else {
                     targetElements.forEach((el) => self.__removeAttrbuteValue(el, attrName, intersectValue));
                 }
             });
@@ -126,8 +148,7 @@ const CoCreateScroll = {
         const { scrolling, attrName } = info;
         if (stopped) {
             this.__removeAttrbuteValue(element, attrName, scrolling);
-        }
-        else {
+        } else {
             this.__addAttributeValue(element, attrName, scrolling);
         }
     },
@@ -154,20 +175,19 @@ const CoCreateScroll = {
             if (upSize <= (currentPos - scrollY)) {
                 this.__addAttributeValue(element, attrName, values[0]);
                 this.__removeAttrbuteValue(element, attrName, values[1]);
-            }
-            else if (downSize <= (scrollY - currentPos)) {
+            } 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]);
             this.__removeAttrbuteValue(element, attrName, values[1]);
 
             this.__addAttributeValue(element, attrName, scrollTop);
-        }
-        else {
+        } else {
             this.__removeAttrbuteValue(element, attrName, scrollTop);
         }
 
@@ -178,16 +198,14 @@ const CoCreateScroll = {
             // this.__removeAttrbuteValue(element, attrName, values[1]);
 
             this.__addAttributeValue(element, attrName, scrollBottom);
-        }
-        else {
+        } else {
             this.__removeAttrbuteValue(element, attrName, scrollBottom);
         }
 
         // if (scrollY != 0 && (scrollY + window.innerHeight) != document.body.scrollHeight){
         if (scrollY != 0 && (scrollY + innerHeight) != scrollHeight) {
             this.__addAttributeValue(element, attrName, scrollLimbo);
-        }
-        else {
+        } else {
             this.__removeAttrbuteValue(element, attrName, scrollLimbo);
         }
 
@@ -200,7 +218,10 @@ const CoCreateScroll = {
         let attrValue = element.getAttribute(attrName) || "";
 
         if (!check.test(attrValue)) {
-            attrValue += " " + value;
+            if (attrName === 'class')
+                attrValue += " " + value;
+            else
+                attrValue = value
             element.setAttribute(attrName, attrValue);
         }
     },
@@ -228,8 +249,7 @@ const CoCreateScroll = {
 
             size = isWidth ? window.innerWidth / size : window.innerHeight / size;
 
-        }
-        else {
+        } else {
             size = attrValue.replace('px', '').trim();
             size = Number(size) || 0;
         }
@@ -239,16 +259,32 @@ const CoCreateScroll = {
 
 };
 
-observer.init({
+Observer.init({
     name: 'CoCreateScrollCreate',
     observe: ['addedNodes'],
-    target: '[scroll]',
+    target: '[scroll], [scroll-to]',
     callback: function (mutation) {
-
         CoCreateScroll.initElement(mutation.target);
     }
 });
 
+Observer.init({
+    name: 'CoCreateScrollAttributes',
+    observe: ['attributes'],
+    attributeName: ['scroll-to'],
+    // target: selector, // blocks mutations when applied
+    callback: function (mutation) {
+        CoCreateScroll.setScrollPosition(mutation.target, mutation.target.getAttribute('scroll-to'))
+    }
+});
+
+Actions.init({
+    name: "scroll-to",
+    callback: (action) => {
+        // CoCreateScroll.setScrollPosition(mutation.target)
+    }
+});
+
 CoCreateScroll.init();
 
 export default CoCreateScroll;