Fix: click action stop scrolling while Swiper is scrolling

joe223 · Oct 28, 2019 · 8b06023 · 8b06023
1 parent 75aac93
commit 8b06023
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,24 @@
-<p>
-    <a href="./docs/logo.png" target="_blank"><img width="240" src="./docs/logo.png"></a>
+<p align="center">
+    <a href="https://github.com/joe223/tiny-swiper" target="_blank"><img width="240" src="https://user-images.githubusercontent.com/10026019/67656978-59e07580-f990-11e9-8baa-63c65b1d5f0a.png"></a>
+</p>
+<p align="center">📦 2kb gzipped library alternative to SwiperJS with the same modern API.</p>
+<p align="center">
+    <a href="https://www.npmjs.com/package/tiny-swiper" target="_blank"><img alt="npm" src="https://img.shields.io/npm/v/tiny-swiper"></a>
+    <a href="https://www.npmjs.com/package/tiny-swiper" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/tiny-swiper"></a>
+    <a href="https://travis-ci.com/joe223/tiny-swiper" target="_blank"><img src="https://travis-ci.com/joe223/tiny-swiper.svg?branch=master"></a>
+    <a href="https://coveralls.io/github/joe223/tiny-swiper?branch=dev" target="_blank"><img src="https://coveralls.io/repos/github/joe223/tiny-swiper/badge.svg?branch=dev"></a>
 </p>
 
-[![](https://badge.fury.io/js/tiny-swiper.svg)](https://www.npmjs.com/package/tiny-swiper)
-[![npm bundle size](https://img.shields.io/bundlephobia/minzip/tiny-swiper)](https://www.npmjs.com/package/tiny-swiper)
-[![](https://travis-ci.com/joe223/tiny-swiper.svg?branch=master)](https://travis-ci.com/joe223/tiny-swiper)
-[![Coverage Status](https://coveralls.io/repos/github/joe223/tiny-swiper/badge.svg?branch=dev)](https://coveralls.io/github/joe223/tiny-swiper?branch=dev)
+***
 
-📦 2kb gzipped library alternative to SwiperJS with the same modern API.
+> **Tiny-Swiper** is a small yet fully configurable and touch-enabled swiper for creating responsive, mobile-friendly sliders, one-page scrolling webpages, single-page applications, and more.
+
+## Browsers support
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Opera |
+| --------- | --------- | --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
-***
 
 ## Getting start
 
@@ -31,7 +40,7 @@ $ yarn add tiny-swiper
 If you prefer CDN, just make sure constructor `Swiper` is defined in browser global environment.
 
 ```html
-<script src="https://unpkg.com/tiny-swiper@latest/lib/index.js"></script>
+<script src="https://unpkg.com/tiny-swiper@latest"></script>
 ```
 
 Html code:

diff --git a/lib/index.js b/lib/index.js
@@ -44,20 +44,19 @@
     }
 
     if (!Array.isArray(list)) list = [list];
-    var newClassList = list.filter(function (claz) {
-      return !new RegExp("\\b" + claz + "\\b").test(el.className);
+    list.forEach(function (clz) {
+      return !el.classList.contains(clz) && el.classList.add(clz);
     });
-    el.className = el.className + " " + newClassList.join(' ');
   }
   function removeClassName(el, list) {
     if (list === void 0) {
       list = [];
     }
 
     if (!Array.isArray(list)) list = [list];
-    el.className = el.className.replace(new RegExp(list.map(function (item) {
-      return "(\\b" + item + "\\b)";
-    }).join('|') + "|(\\s+)", 'g'), ' ');
+    list.forEach(function (clz) {
+      return el.classList.contains(clz) && el.classList.remove(clz);
+    });
   }
   function detectTouch() {
     return Boolean('ontouchstart' in window || window.navigator.maxTouchPoints > 0 || window.navigator.msMaxTouchPoints > 0 || window.DocumentTouch && document instanceof DocumentTouch);
@@ -103,7 +102,7 @@
       this.$el = el;
       this.$el.style.overflow = 'hidden';
       this.$wrapper = el.getElementsByClassName(config.wrapperClass)[0];
-      this.$list = Array.from(el.getElementsByClassName(config.slideClass));
+      this.$list = [].slice.call(el.getElementsByClassName(config.slideClass));
       this.formEls = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA', 'BUTTON', 'VIDEO'];
       this.initStatus();
       this.update();
@@ -355,6 +354,8 @@
             _this3.scroll(_this3.index - 1, true);
           } else if (computedOffset < 0) {
             _this3.scroll(_this3.index + 1, true);
+          } else {
+            _this3.scroll(_this3.index, true);
           }
         }
 
@@ -460,7 +461,7 @@
     }]);
 
     return Swiper;
-  }();
+  }(); // Try to keep it less than 400 lines.
 
   return Swiper;
 

diff --git a/src/index.js b/src/index.js
@@ -21,7 +21,7 @@ export default class Swiper {
         this.$el = el
         this.$el.style.overflow = 'hidden'
         this.$wrapper = el.getElementsByClassName(config.wrapperClass)[0]
-        this.$list = Array.from(el.getElementsByClassName(config.slideClass))
+        this.$list = [].slice.call(el.getElementsByClassName(config.slideClass))
         this.formEls = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA', 'BUTTON', 'VIDEO']
         this.initStatus()
         this.update()
@@ -308,6 +308,8 @@ export default class Swiper {
                     this.scroll(this.index - 1, true)
                 } else if (computedOffset < 0) {
                     this.scroll(this.index + 1, true)
+                } else {
+                    this.scroll(this.index, true)
                 }
             }
             this.initStatus()
@@ -389,3 +391,4 @@ export default class Swiper {
         this.$wrapper.style.transform = this.getTransform(-offset)
     }
 }
+// Try to keep it less than 400 lines.
diff --git a/src/lib.js b/src/lib.js
@@ -1,16 +1,13 @@
 export function addClassName (el, list = []) {
     if (!Array.isArray(list)) list = [list]
 
-    const newClassList = list.filter(claz => !new RegExp(`\\b${claz}\\b`).test(el.className))
-
-    el.className = `${el.className} ${newClassList.join(' ')}`
+    list.forEach(clz => (!el.classList.contains(clz) && el.classList.add(clz)))
 }
 
 export function removeClassName (el, list = []) {
     if (!Array.isArray(list)) list = [list]
 
-    el.className = el.className.replace(
-        new RegExp(`${list.map(item => `(\\b${item}\\b)`).join('|')}|(\\s+)`, 'g'), ' ')
+    list.forEach(clz => (el.classList.contains(clz) && el.classList.remove(clz)))
 }
 
 export function detectTouch () {