@cocreate/scroll 1.5.10 → 1.5.12

package/src/index.js

@@ -1,254 +1,254 @@
-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;
-	}
-
-};
-
-observer.init({
-	name: 'CoCreateScrollCreate',
-	observe: ['addedNodes'],
-	target: '[scroll]',
-	callback: function(mutation) {
-
-		CoCreateScroll.initElement(mutation.target);
-	}
-});
-
-CoCreateScroll.init();
-
-export default CoCreateScroll;
+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;
+	}
+
+};
+
+observer.init({
+	name: 'CoCreateScrollCreate',
+	observe: ['addedNodes'],
+	target: '[scroll]',
+	callback: function(mutation) {
+
+		CoCreateScroll.initElement(mutation.target);
+	}
+});
+
+CoCreateScroll.init();
+
+export default CoCreateScroll;

package/webpack.config.js

@@ -1,84 +1,84 @@
-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",
-  },
-
-  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" }),
-
-  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,
-      },
-    },
-  },
-}
+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",
+  },
+
+  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" }),
+
+  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,
+      },
+    },
+  },
+}