@cocreate/scroll 1.5.27 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.6.0](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.5.28...v1.6.0) (2023-08-16)
+
+
+### Bug Fixes
+
+* crud attributes renamed ([973d02d](https://github.com/CoCreate-app/CoCreate-scroll/commit/973d02d5cfaa0f091d5b7ddd809d9221da6cf90d))
+* replace -target -selector ([bc8aecc](https://github.com/CoCreate-app/CoCreate-scroll/commit/bc8aecc98134e9e8ff032527dfc61aef16cb87bc))
+* webpack.config and package.json make use of mode=production instead of process.env ([bffad89](https://github.com/CoCreate-app/CoCreate-scroll/commit/bffad894608346a240a1d62969b878277a0e6ef4))
+
+
+### Features
+
+* name attribute and variable renamed to key ([6f7e1b0](https://github.com/CoCreate-app/CoCreate-scroll/commit/6f7e1b04f300350c7423075998c11d56173cb098))
+
+## [1.5.28](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.5.27...v1.5.28) (2023-06-14)
+
+
+### Bug Fixes
+
+* Update dependencies versions for [@cocreate](https://github.com/cocreate) libraries ([3a75aef](https://github.com/CoCreate-app/CoCreate-scroll/commit/3a75aefc5ce12450444d4c916b3d785a617bade8))
+
 ## [1.5.27](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.5.26...v1.5.27) (2023-06-11)
 
 

package/CoCreate.config.js

@@ -4,8 +4,8 @@ module.exports = {
     "host": "",
     "sources": [
         {
-            "collection": "files",
-            "document": {
+            "array": "files",
+            "object": {
                 "_id": "602095e13c260207bf49cac4",
                 "name": "index.html",
                 "path": "/docs/scroll/index.html",

package/demo/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta
-            name="description"
+            key="description"
             content="Instantly create a start-up or manage and grow an existing business, all-in-one Realtime callobrative solution complete with many automation's and a customizable website." />
         <meta name="keywords" content="CoCreate, app landing, responsive" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />

package/docs/index.html

@@ -11,10 +11,10 @@
             sizes="32x32"
             href="https://cocreate.app/images/favicon.ico" />
         <meta
-            name="description"
+            key="description"
             content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
         <meta
-            name="keywords"
+            key="keywords"
             content="helper classes, utility classes, css framework, css library, inline style classes" />
         <meta name="robots" content="index,follow" />
         <meta
@@ -29,9 +29,9 @@
         <link
             rel="stylesheet"
             href="/docs/index.css"
-            collection="files"
-            document_id="60888216117c640e7596303f"
-            name="src"
+            array="files"
+            object="60888216117c640e7596303f"
+            key="src"
             type="text/css"
             save="true" />
         <link rel="manifest" href="/manifest.webmanifest" />
@@ -44,20 +44,20 @@
             scroll="sticky-nav,hide-nav"
             scroll-up="10"
             scroll-down="10"
-            collection="files"
-            document_id="60395ef42b3ac232657040fd"
-            name="src"></nav>
+            array="files"
+            object="60395ef42b3ac232657040fd"
+            key="src"></nav>
         <sidenav
             id="menuL"
             class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
             resizable
-            resize-target="[content_id='content']"
+            resize-selector="[content_id='content']"
             resize-property="margin-left"
             resize-value="width">
             <menu
-                collection="files"
-                document_id="603717b07de7fb350ae9fec8"
-                name="src"></menu>
+                array="files"
+                object="603717b07de7fb350ae9fec8"
+                key="src"></menu>
             <div resize="right"></div>
         </sidenav>
         <main
@@ -80,7 +80,7 @@
                         share-width="700"
                         share-media="https://cdn.cocreate.app/docs/scroll.png"
                         hover="display:block!important"
-                        hover-target=".social-networks">
+                        hover-selector=".social-networks">
                         <div class="display:none social-networks">
                             <a
                                 class="margin-right:15px"
@@ -139,11 +139,11 @@
                         class="border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#scroll-install-section">
+                        scroll-selector="#scroll-install-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#scroll-install']">
+                            hover-selector="[href='#scroll-install']">
                             <h2 class="padding:5px_0px">Install</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -165,11 +165,11 @@
                         class="margin-top:80px border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#scroll-usage-section">
+                        scroll-selector="#scroll-usage-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#scroll-usage']">
+                            hover-selector="[href='#scroll-usage']">
                             <h2 class="padding:5px_0px">Usage</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -203,11 +203,11 @@
                         class="margin-top:80px border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#scroll-attributes-section">
+                        scroll-selector="#scroll-attributes-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#scroll-attributes']">
+                            hover-selector="[href='#scroll-attributes']">
                             <h2 class="padding:5px_0px">Attributes</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -321,11 +321,11 @@
                         class="border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#scroll-demo-section">
+                        scroll-selector="#scroll-demo-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#scroll-demo']">
+                            hover-selector="[href='#scroll-demo']">
                             <h2 class="padding:5px_0px">Demo</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -349,12 +349,12 @@
                                 <textarea
                                     type="code"
                                     lang="html"
-                                    collection="demos"
-                                    document_id=""
-                                    name="demo"
+                                    array="demos"
+                                    object=""
+                                    key="demo"
                                     save="false"
                                     id="demo"
-                                    input-target=".demopreview"
+                                    input-selector=".demopreview"
                                     input-attribute="value"
                                     input-events="input, onload"
                                     class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
@@ -377,7 +377,7 @@
                                     show="#eye-slash"
                                     hide="#eye, #demo-preview"
                                     toggle="code-height"
-                                    toggle-target="#demo-code"
+                                    toggle-selector="#demo-code"
                                     ><i
                                         class="height:18px fill:#505050"
                                         src="/assets/svg/eye.svg"></i
@@ -389,7 +389,7 @@
                                     show="#eye, #demo-preview"
                                     hide="#eye-slash"
                                     toggle="code-height"
-                                    toggle-target="#demo-code"
+                                    toggle-selector="#demo-code"
                                     ><i
                                         class="height:20px fill:#505050"
                                         src="/assets/svg/eye-slash.svg"></i
@@ -416,7 +416,7 @@
                                 <a
                                     class="margin-right:5px"
                                     fullscreen
-                                    fullscreen-target="#playground"></a>
+                                    fullscreen-selector="#playground"></a>
                             </div>
                         </div>
                         <!-- End SandBox -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/scroll",
-  "version": "1.5.27",
+  "version": "1.6.0",
   "description": "A simple scroll component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "scroll",
@@ -25,7 +25,7 @@
   },
   "scripts": {
     "start": "npx webpack --config webpack.config.js",
-    "build": "NODE_ENV=production npx webpack --config webpack.config.js",
+    "build": "npx webpack --mode=production --config webpack.config.js",
     "dev": "npx webpack --config webpack.config.js --watch",
     "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
   },
@@ -58,7 +58,6 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/cli": "^1.33.8",
-    "@cocreate/observer": "^1.8.17"
+    "@cocreate/observer": "^1.8.19"
   }
 }

package/src/index.js

@@ -1,252 +1,252 @@
 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();
-		this.initElements(elements);
-	},
-
-	initElements: function(elements) {
-		for (let el of elements)
-			this.initElement(el);
-	},
-
-	initElement: function(element) {
-		const self = this;
-		const upSize = this.__getSize(element.getAttribute('scroll-up'));
-		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());
-
-		let scrollInfo = {
-			attrName: attrName,
-			values: values,
-			upSize: upSize,
-			downSize: downSize,
-			scrollTop: element.getAttribute('scroll-top'),
-			scrollLimbo: element.getAttribute('scroll-limbo'),
-			scrollBottom: element.getAttribute('scroll-bottom'),
-			scrolling: element.getAttribute('scrolling')
-		};
-
-		let elements = [element];
-		if (targetSelector) {
-			elements = document.querySelectorAll(targetSelector);
-		}
-
-		elements.forEach(el => {
-			el.scrollStatus = { currentPos: 0 };
-		});
-		
-		// 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{
-			// this.WindowInit = true;
-			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);
-		}
-
-		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;
-		this.observer = new IntersectionObserver(entries => {
-			entries.forEach(entry => {
-				let element = entry.target;
-				const attrName = element.getAttribute('scroll-attribute') || 'class';
-				const targetSelector = element.getAttribute('scroll-target');
-				const intersectValue = element.getAttribute('scroll-intersect');
-
-				let targetElements = [element];
-				if (targetSelector) {
-					targetElements = document.querySelectorAll(targetSelector);
-				}
-				if (entry.isIntersecting > 0) {
-					targetElements.forEach((el) => self.__addAttributeValue(el, attrName, intersectValue));
-				}
-				else {
-					targetElements.forEach((el) => self.__removeAttrbuteValue(el, attrName, intersectValue));
-				}
-			});
-		});
-	},
-
-	__setScrolling: function(element, info, stopped = false) {
-		const { scrolling, attrName } = info;
-		if (stopped) {
-			this.__removeAttrbuteValue(element, attrName, scrolling);
-		}
-		else {
-			this.__addAttributeValue(element, attrName, scrolling);
-		}
-	},
-
-	__runScrollEvent: function(element, info, scrollableEl) {
-		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 { upSize, downSize, attrName, values, scrollTop, scrollBottom, scrollLimbo } = info;
-
-		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]);
-			this.__removeAttrbuteValue(element, attrName, values[1]);
-
-			this.__addAttributeValue(element, attrName, scrollTop);
-		}
-		else {
-			this.__removeAttrbuteValue(element, attrName, scrollTop);
-		}
-
-		//. scroll bottom case
-		// if ((window.innerHeight + scrollY) >= document.body.scrollHeight) {
-		if ((innerHeight + scrollY) >= scrollHeight) {
-			// this.__removeAttrbuteValue(element, attrName, values[0]);
-			// this.__removeAttrbuteValue(element, attrName, values[1]);
-
-			this.__addAttributeValue(element, attrName, scrollBottom);
-		}
-		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 {
-			this.__removeAttrbuteValue(element, attrName, scrollLimbo);
-		}
-
-		element.scrollStatus.currentPos = scrollY;
-	},
-
-	__addAttributeValue: function(element, attrName, value) {
-		if (!value) return;
-		let check = new RegExp("(\\s|^)" + value + "(\\s|$)");
-		let attrValue = element.getAttribute(attrName) || "";
-
-		if (!check.test(attrValue)) {
-			attrValue += " " + value;
-			element.setAttribute(attrName, attrValue);
-		}
-	},
-
-	__removeAttrbuteValue: function(element, attrName, value) {
-		if (!value) return;
-		let check = new RegExp("(\\s|^)" + value + "(\\s|$)");
-		let attrValue = element.getAttribute(attrName) || "";
-
-		if (check.test(attrValue)) {
-			attrValue = attrValue.replace(check, " ").trim();
-			element.setAttribute(attrName, attrValue);
-		}
-	},
-
-	__getSize: function(attrValue, isWidth) {
-		let size = 0;
-		if (!attrValue) {
-			return 0;
-		}
-
-		if (attrValue.includes('%')) {
-			size = attrValue.replace('%', '').trim();
-			size = Number(size) || 0;
-
-			size = isWidth ? window.innerWidth / size : window.innerHeight / size;
-
-		}
-		else {
-			size = attrValue.replace('px', '').trim();
-			size = Number(size) || 0;
-		}
-
-		return size;
-	}
+    delta: 3,
+    observer: null,
+    timer: null,
+    firedEvents: new Map(),
+
+    init: function () {
+        let elements = document.querySelectorAll(`[scroll]`);
+        this.__initIntersectionObserver();
+        this.initElements(elements);
+    },
+
+    initElements: function (elements) {
+        for (let el of elements)
+            this.initElement(el);
+    },
+
+    initElement: function (element) {
+        const self = this;
+        const upSize = this.__getSize(element.getAttribute('scroll-up'));
+        const downSize = this.__getSize(element.getAttribute('scroll-down'));
+        const attrName = element.getAttribute('scroll-attribute') || 'class';
+        const targetSelector = element.getAttribute('scroll-selector');
+        const scrollSelector = element.getAttribute('scroll-element');
+        const intersectValue = element.getAttribute('scroll-intersect');
+
+        let values = element.getAttribute('scroll') || "";
+        values = values.split(",").map(x => x.trim());
+
+        let scrollInfo = {
+            attrName: attrName,
+            values: values,
+            upSize: upSize,
+            downSize: downSize,
+            scrollTop: element.getAttribute('scroll-top'),
+            scrollLimbo: element.getAttribute('scroll-limbo'),
+            scrollBottom: element.getAttribute('scroll-bottom'),
+            scrolling: element.getAttribute('scrolling')
+        };
+
+        let elements = [element];
+        if (targetSelector) {
+            elements = document.querySelectorAll(targetSelector);
+        }
+
+        elements.forEach(el => {
+            el.scrollStatus = { currentPos: 0 };
+        });
+
+        // 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 {
+            // this.WindowInit = true;
+            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);
+        }
+
+        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;
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                let element = entry.target;
+                const attrName = element.getAttribute('scroll-attribute') || 'class';
+                const targetSelector = element.getAttribute('scroll-selector');
+                const intersectValue = element.getAttribute('scroll-intersect');
+
+                let targetElements = [element];
+                if (targetSelector) {
+                    targetElements = document.querySelectorAll(targetSelector);
+                }
+                if (entry.isIntersecting > 0) {
+                    targetElements.forEach((el) => self.__addAttributeValue(el, attrName, intersectValue));
+                }
+                else {
+                    targetElements.forEach((el) => self.__removeAttrbuteValue(el, attrName, intersectValue));
+                }
+            });
+        });
+    },
+
+    __setScrolling: function (element, info, stopped = false) {
+        const { scrolling, attrName } = info;
+        if (stopped) {
+            this.__removeAttrbuteValue(element, attrName, scrolling);
+        }
+        else {
+            this.__addAttributeValue(element, attrName, scrolling);
+        }
+    },
+
+    __runScrollEvent: function (element, info, scrollableEl) {
+        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 { upSize, downSize, attrName, values, scrollTop, scrollBottom, scrollLimbo } = info;
+
+        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]);
+            this.__removeAttrbuteValue(element, attrName, values[1]);
+
+            this.__addAttributeValue(element, attrName, scrollTop);
+        }
+        else {
+            this.__removeAttrbuteValue(element, attrName, scrollTop);
+        }
+
+        //. scroll bottom case
+        // if ((window.innerHeight + scrollY) >= document.body.scrollHeight) {
+        if ((innerHeight + scrollY) >= scrollHeight) {
+            // this.__removeAttrbuteValue(element, attrName, values[0]);
+            // this.__removeAttrbuteValue(element, attrName, values[1]);
+
+            this.__addAttributeValue(element, attrName, scrollBottom);
+        }
+        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 {
+            this.__removeAttrbuteValue(element, attrName, scrollLimbo);
+        }
+
+        element.scrollStatus.currentPos = scrollY;
+    },
+
+    __addAttributeValue: function (element, attrName, value) {
+        if (!value) return;
+        let check = new RegExp("(\\s|^)" + value + "(\\s|$)");
+        let attrValue = element.getAttribute(attrName) || "";
+
+        if (!check.test(attrValue)) {
+            attrValue += " " + value;
+            element.setAttribute(attrName, attrValue);
+        }
+    },
+
+    __removeAttrbuteValue: function (element, attrName, value) {
+        if (!value) return;
+        let check = new RegExp("(\\s|^)" + value + "(\\s|$)");
+        let attrValue = element.getAttribute(attrName) || "";
+
+        if (check.test(attrValue)) {
+            attrValue = attrValue.replace(check, " ").trim();
+            element.setAttribute(attrName, attrValue);
+        }
+    },
+
+    __getSize: function (attrValue, isWidth) {
+        let size = 0;
+        if (!attrValue) {
+            return 0;
+        }
+
+        if (attrValue.includes('%')) {
+            size = attrValue.replace('%', '').trim();
+            size = Number(size) || 0;
+
+            size = isWidth ? window.innerWidth / size : window.innerHeight / size;
+
+        }
+        else {
+            size = attrValue.replace('px', '').trim();
+            size = Number(size) || 0;
+        }
+
+        return size;
+    }
 
 };
 
 observer.init({
-	name: 'CoCreateScrollCreate',
-	observe: ['addedNodes'],
-	target: '[scroll]',
-	callback: function(mutation) {
+    name: 'CoCreateScrollCreate',
+    observe: ['addedNodes'],
+    target: '[scroll]',
+    callback: function (mutation) {
 
-		CoCreateScroll.initElement(mutation.target);
-	}
+        CoCreateScroll.initElement(mutation.target);
+    }
 });
 
 CoCreateScroll.init();

package/webpack.config.js

@@ -1,84 +1,90 @@
 const path = require("path")
 const TerserPlugin = require("terser-webpack-plugin")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-let isProduction = process.env.NODE_ENV === "production"
 const { CleanWebpackPlugin } = require("clean-webpack-plugin")
 
-module.exports = {
-  entry: {
-    "CoCreate-scroll": "./src/index.js",
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: isProduction ? "[name].min.js" : "[name].js",
-    libraryTarget: "umd",
-    libraryExport: "default",
-    library: ["CoCreate", "scroll"],
-    globalObject: "this",
-  },
+module.exports = (env, argv) => {
+    let isProduction = false
+    if (argv.mode === 'production')
+        isProduction = true
 
-  plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    }),
-  ],
-  // Default mode for Webpack is production.
-  // Depending on mode Webpack will apply different things
-  // on final bundle. For now we don't need production's JavaScript
-  // minifying and other thing so let's set mode to development
-  mode: isProduction ? "production" : "development",
-  module: {
-    rules: [
-      {
-        test: /.js$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            plugins: ["@babel/plugin-transform-modules-commonjs"],
-          },
+    const config = {
+        entry: {
+            "CoCreate-scroll": "./src/index.js",
         },
-      },
-      {
-        test: /.css$/i,
-        use: [
-          { loader: "style-loader", options: { injectType: "linkTag" } },
-          "file-loader",
+        output: {
+            path: path.resolve(__dirname, "dist"),
+            filename: isProduction ? "[name].min.js" : "[name].js",
+            libraryTarget: "umd",
+            libraryExport: "default",
+            library: ["CoCreate", "scroll"],
+            globalObject: "this",
+        },
+
+        plugins: [
+            new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
         ],
-      },
-    ],
-  },
+        // Default mode for Webpack is production.
+        // Depending on mode Webpack will apply different things
+        // on final bundle. For now we don't need production's JavaScript
+        // minifying and other thing so let's set mode to development
+        mode: isProduction ? "production" : "development",
+        module: {
+            rules: [
+                {
+                    test: /.js$/,
+                    exclude: /(node_modules)/,
+                    use: {
+                        loader: "babel-loader",
+                        options: {
+                            plugins: ["@babel/plugin-transform-modules-commonjs"],
+                        },
+                    },
+                },
+                {
+                    test: /.css$/i,
+                    use: [
+                        { loader: "style-loader", options: { injectType: "linkTag" } },
+                        "file-loader",
+                    ],
+                },
+            ],
+        },
 
-  // add source map
-  ...(isProduction ? {} : { devtool: "eval-source-map" }),
+        // add source map
+        ...(isProduction ? {} : { devtool: "eval-source-map" }),
 
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        extractComments: true,
-        // cache: true,
-        parallel: true,
-        // sourceMap: true, // Must be set to true if using source-maps in production
-        terserOptions: {
-          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-          // extractComments: 'all',
-          compress: {
-            drop_console: true,
-          },
-        },
-      }),
-    ],
-    splitChunks: {
-      chunks: "all",
-      minSize: 200,
-      // maxSize: 99999,
-      //minChunks: 1,
+        optimization: {
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    extractComments: true,
+                    // cache: true,
+                    parallel: true,
+                    // sourceMap: true, // Must be set to true if using source-maps in production
+                    terserOptions: {
+                        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                        // extractComments: 'all',
+                        compress: {
+                            drop_console: true,
+                        },
+                    },
+                }),
+            ],
+            splitChunks: {
+                chunks: "all",
+                minSize: 200,
+                // maxSize: 99999,
+                //minChunks: 1,
 
-      cacheGroups: {
-        defaultVendors: false,
-      },
-    },
-  },
-}
+                cacheGroups: {
+                    defaultVendors: false,
+                },
+            },
+        },
+    }
+    return config
+}