Merge pull request #26 from yama-dev/v0.13.5

V0.13.5

Author: yama-dev

.env

@@ -1,2 +1,2 @@
 SLUG=js-scroll-effect-module
-VERSION=0.13.3
+VERSION=0.13.5

Makefile

@@ -37,6 +37,6 @@ zip:
 	$(CP) dist/js-scroll-effect-module.js examples/index.html $(ZIP_FOLDER)/
 	$(CP) examples/scroll-effect-module.css examples/scroll-effect-module.css $(ZIP_FOLDER)/
 	sed -i "" "s/..\/dist\//.\//g" "$(ZIP_FOLDER)/index.html"
-	$(ZIP) $(ZIP_FOLDER)/$(VERSION).zip -r $(ZIP_FOLDER)/*
+	$(ZIP) $(ZIP_FOLDER)/$(SLUG)_v$(VERSION).zip -r $(ZIP_FOLDER)/*
 
 .PHONY: all build serve clean prod zip install

README.md

@@ -21,7 +21,7 @@ By using pre-prepared CSS, it is surprisingly easy to add effects that match the
 
 - npm -> [https://www.npmjs.com/package/js-scroll-effect-module](https://www.npmjs.com/package/js-scroll-effect-module)
 
-- Standalone(CDN) -> [https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.3/dist/js-scroll-effect-module.js](https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.3/dist/js-scroll-effect-module.js)
+- Standalone(CDN) -> [https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/dist/js-scroll-effect-module.js](https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/dist/js-scroll-effect-module.js)
 
 - Zip -> [yama-dev/js-scroll-effect-module](https://github.com/yama-dev/js-scroll-effect-module/releases/latest)
 
@@ -44,8 +44,8 @@ import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
 ### Basic Use
 
 ``` html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.3/examples/scroll-effect-module.css">
-<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.3/dist/js-scroll-effect-module.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/examples/scroll-effect-module.css">
+<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/dist/js-scroll-effect-module.js"></script>
 
 <div data-scroll></div>
 
@@ -63,7 +63,7 @@ new SCROLL_EFFECT_MODULE({
 ### Advanced Use
 
 ``` html
-<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.3/dist/js-scroll-effect-module.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/dist/js-scroll-effect-module.js"></script>
 
 <div data-scroll data-scroll-name="name-1"></div>
 
@@ -72,7 +72,7 @@ new SCROLL_EFFECT_MODULE({
 <script>
 const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
   target             : '[data-scroll]',
-  classNameInview    : 'is-active',
+  classNameInview    : 'is-scroll-active',
 
   ratio              : 0.8,   // 判定する比率を指定（ウィンドウ高さを1として指定）
   reverse            : false, // スクロールを戻した時にクラスを削除するかどうか
@@ -84,6 +84,8 @@ const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
   autoStart          : true, // 自動でスタートするかどうか
   autoStartType      : 'ready', // ready, load, scroll
 
+  updateResizeAuto   : true,
+
   throttleInterval   : 5,
 
   on: {

dist/js-scroll-effect-module.js

@@ -71,7 +71,7 @@ <h3>Advanced Use</h3>
   &lt;script&gt;
   const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
     target         : &#39;[data-scroll]&#39;,
-    classNameInview: &#39;is-active&#39;,
+    classNameInview: &#39;is-scroll-active&#39;,
     ratio          : 0.8,
     ratioReverse   : null,
     reverse        : true,
@@ -121,12 +121,13 @@ <h3>Advanced Use (callback)</h3>
     <script>
     const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
       target: '[data-scroll]',
-      classNameInview : 'is-active',
+      classNameInview : 'is-scroll-active',
       ratio           : 0.5,
       ratioReverse    : 0.9,
       reverse         : true,
       firstDelay      : 100,
       autoStart       : true,
+      updateResizeAuto: true,
       on: {
         Change: function(obj, index, name){
           console.log('Change', obj, index, name);

examples/index.html

@@ -7,42 +7,42 @@
   opacity: 0;
   transition: opacity var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadein"].is-active { opacity: 1; }
+[data-scroll-type="fadein"].is-scroll-active { opacity: 1; }
 
 [data-scroll-type="zoomin"] {
   opacity: 0;
   transform: scale(0.9);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="zoomin"].is-active { opacity: 1; transform: scale(1); }
+[data-scroll-type="zoomin"].is-scroll-active { opacity: 1; transform: scale(1); }
 
 [data-scroll-type="fadeinTop"] {
   opacity: 0;
   transform: translate(0, -30px);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinTop"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinTop"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="fadeinBottom"] {
   opacity: 0;
   transform: translate(0, 30px);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinBottom"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinBottom"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="fadeinLeft"] {
   opacity: 0;
   transform: translate(-80%, 0);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinLeft"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinLeft"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="fadeinRight"] {
   opacity: 0;
   transform: translate(80%, 0);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinRight"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinRight"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="spinin"] {
   opacity: 0;
@@ -51,5 +51,5 @@
   backface-visibility: hidden;
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="spinin"].is-active { opacity: 1; transform: translate(0, 0) rotate3d(1, 0, 1, 0); }
+[data-scroll-type="spinin"].is-scroll-active { opacity: 1; transform: translate(0, 0) rotate3d(1, 0, 1, 0); }
 

examples/scroll-effect-module.css

@@ -1,6 +1,6 @@
 {
   "name": "js-scroll-effect-module",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "description": "Add effect at scroll.",
   "keywords": [
     "scroll",
@@ -40,8 +40,8 @@
     "@babel/register": "^7.14.5",
     "babel-loader": "^8.2.2",
     "browser-sync": "^2.27.5",
-    "eslint": "^7.32.0",
-    "eslint-loader": "^2.1.1",
+    "eslint": "^8.57.0",
+    "eslint-webpack-plugin": "^4.1.0",
     "mocha": "^9.0.3",
     "npm-run-all": "^4.1.5",
     "webpack": "^5.48.0",

package.json

@@ -23,7 +23,7 @@ export default class SCROLL_EFFECT_MODULE {
       parent             : 'window',
       body               : 'body',
 
-      classNameInview    : 'is-active',
+      classNameInview    : 'is-scroll-active',
 
       ratio              : 0.8,
       ratioReverse       : null,
@@ -37,6 +37,8 @@ export default class SCROLL_EFFECT_MODULE {
 
       throttleInterval   : 5,
 
+      updateResizeAuto   : true,
+
       customVarNameRatio : null, // '--sem-scroll-ratio'
 
       on: {
@@ -101,8 +103,19 @@ export default class SCROLL_EFFECT_MODULE {
     if(this.timer) clearTimeout(this.timer);
 
     // for Resize-Event
+    let currentWidth = window.innerWidth;
     this.state.$parent.addEventListener('resize', () => {
-      this.Start();
+      // not resize
+      if (currentWidth == window.innerWidth) {
+        return;
+      }
+
+      // update window width
+      currentWidth = window.innerWidth;
+
+      if(this.config.updateResizeAuto){
+        this.Start();
+      }
     });
 
     if(this.config.autoStartType === 'ready'){
@@ -304,10 +317,24 @@ export default class SCROLL_EFFECT_MODULE {
         _item.changing = false;
 
         // アクティブの増減によってcallbackに渡すitemを変更
-        let _item_fix = _type === 'down' ? _item : _item_pre;
+        let _item_fix = null;
+        if(_type === 'down'){
+          _item_fix = _item;
+        } else {
+          if(_item_pre){
+            _item_fix = _item_pre;
+          } else {
+            _item_fix = _item;
+          }
+        }
 
         // Changeコールバック関数の呼び出し
-        this.callCallback(this.config.on.Change, _item_fix, _item_fix.index, _item_fix.dataset[this.getDatasetKey(this.config.targetDataName)]);
+        this.callCallback(
+          this.config.on.Change,
+          _item_fix,
+          _item_fix ? _item_fix.index : 0,
+          _item_fix ? _item_fix.dataset[this.getDatasetKey(this.config.targetDataName)] : {},
+        );
       }
     }
   }

src/js-scroll-effect-module.js

@@ -8,6 +8,7 @@ if(!env) process.exit(1);
 
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 const webpackPlugEnv = new webpack.EnvironmentPlugin({
   DEBUG: false,
@@ -28,12 +29,6 @@ const config = {
   },
   module: {
     rules: [
-      {
-        enforce: 'pre',
-        test: /\.(js)$/,
-        exclude: /node_modules/,
-        loader: 'eslint-loader',
-      },
       {
         test: /\.js$/,
         exclude: /node_modules[///](?!(@yama-dev)\/).*/,
@@ -56,6 +51,11 @@ const config = {
   target: ['web', 'es5'],
   plugins: [
     webpackPlugEnv,
+    new ESLintPlugin({
+      cache: true,
+      extensions: ['js'],
+      fix: false,
+    }),
   ],
   optimization: {
     minimizer: [