swiper-mouseover 2.0.1 → 2.1.0

package/README.md

@@ -44,7 +44,8 @@ or use CDN:
 const swiper = new Swiper('.mySwiper', {
   modules: [MouseoverPlugin],
   mouseover: {
-    el: '.swiper-mouseover'
+    el: '.swiper-mouseover',
+    reset: true // reset to first slide on mouseout
   }
 });
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swiper-mouseover",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Mouseover plugin for Swiper",
   "files": [
     "swiper-mouseover.js",

package/swiper-mouseover.css

@@ -1,5 +1,5 @@
 /**
- * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Swiper-Mouseover v2.1.0 for Swiper (https://github.com/fibit/swiper-mouseover)
  * Author Pavel Romanov
  * Released under the MIT License
  */

package/swiper-mouseover.js

@@ -1,63 +1,93 @@
 /**
- * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Swiper-Mouseover v2.1.0 for Swiper (https://github.com/fibit/swiper-mouseover)
  * Author Pavel Romanov
  * Released under the MIT License
  */
 function MouseoverPlugin({ swiper, extendParams, on }) {
+  const CLASS_LAYER = 'swiper-mouseover-layer';
+  
   extendParams({
     mouseover: {
-      el: null
+      el: null,
+      reset: true
     }
   });
 
+  const resolveElement = (selector) => {
+    return typeof selector === 'string' 
+      ? document.querySelector(selector) 
+      : selector;
+  };
+
+  const isTouchDevice = () => 'ontouchstart' in window;
+
+  const createMouseHandler = (slideToIndex) => function(slideIndex) {
+    return function() {
+      swiper.slideTo(slideToIndex ?? slideIndex, swiper.params.speed);
+    };
+  };
+
+  const cleanupLayers = (container) => {
+    const layers = container.querySelectorAll(`.${CLASS_LAYER}`);
+    layers.forEach(layer => {
+      const mouseOverHandler = layer._mouseOverHandler;
+      const mouseOutHandler = layer._mouseOutHandler;
+
+      if (mouseOverHandler) {
+        layer.removeEventListener('mouseover', mouseOverHandler);
+      }
+      if (mouseOutHandler) {
+        layer.removeEventListener('mouseout', mouseOutHandler);
+      }
+
+      delete layer._mouseOverHandler;
+      delete layer._mouseOutHandler;
+    });
+    container.innerHTML = '';
+  };
+
+  const createLayers = (container) => {
+    swiper.snapGrid.forEach((_, index) => {
+      const layer = document.createElement('div');
+      layer.className = CLASS_LAYER;
+      container.appendChild(layer);
+
+      const mouseOverHandler = createMouseHandler()(index);
+      layer._mouseOverHandler = mouseOverHandler;
+      layer.addEventListener('mouseover', mouseOverHandler);
+      
+      if (swiper.params.mouseover.reset) {
+        const mouseOutHandler = createMouseHandler(0)(index);
+        layer._mouseOutHandler = mouseOutHandler;
+        layer.addEventListener('mouseout', mouseOutHandler);
+      }
+    });
+  };
+
   const initMouseover = () => {
     const { el } = swiper.params.mouseover;
-    
     if (!el) return;
     
-    const mouseoverEl = typeof el === 'string' 
-      ? document.querySelector(el) 
-      : el;
-    
+    const mouseoverEl = resolveElement(el);
     if (!mouseoverEl) return;
 
-    if ('ontouchstart' in window) {
+    if (isTouchDevice()) {
       mouseoverEl.remove();
       return;
     }
 
-    mouseoverEl.innerHTML = '';
-
-    mouseoverEl.querySelectorAll('.swiper-mouseover-layer').forEach(el => {
-      el.removeEventListener('mouseover', handleMouseOver);
-      el.removeEventListener('mouseout', handleMouseOut);
-    });
-
-    for (let i = 0; i < swiper.snapGrid.length; i++) {
-      const layer = document.createElement('div');
-      layer.className = 'swiper-mouseover-layer';
-      layer.setAttribute('data-swiper-slide-index', i);
-      mouseoverEl.appendChild(layer);
-      layer.addEventListener('mouseover', handleMouseOver);
-      layer.addEventListener('mouseout', handleMouseOut);
-    }
-
-    function handleMouseOver() {
-      const slideIndex = parseInt(this.getAttribute('data-swiper-slide-index'));
-      swiper.slideTo(slideIndex, swiper.params.speed);
-    }
-
-    function handleMouseOut() {
-      swiper.slideTo(0, swiper.params.speed);
-    }
+    cleanupLayers(mouseoverEl);
+    createLayers(mouseoverEl);
   };
 
-  on('afterInit', initMouseover);
-  on('destroy', () => {
+  const cleanup = () => {
     const { el } = swiper.params.mouseover;
     if (el) {
-      const mouseoverEl = typeof el === 'string' ? document.querySelector(el) : el;
+      const mouseoverEl = resolveElement(el);
       if (mouseoverEl) mouseoverEl.remove();
     }
-  });
-};
+  };
+
+  on('afterInit', initMouseover);
+  on('destroy', cleanup);
+}

package/swiper-mouseover.min.css

@@ -1,5 +1,5 @@
 /**
- * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Swiper-Mouseover v2.1.0 for Swiper (https://github.com/fibit/swiper-mouseover)
  * Author Pavel Romanov
  * Released under the MIT License
  */

package/swiper-mouseover.min.js

@@ -1,6 +1,6 @@
 /**
- * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Swiper-Mouseover v2.1.0 for Swiper (https://github.com/fibit/swiper-mouseover)
  * Author Pavel Romanov
  * Released under the MIT License
  */
-function MouseoverPlugin({swiper:e,extendParams:t,on:o}){t({mouseover:{el:null}});o("afterInit",(()=>{const{el:t}=e.params.mouseover;if(!t)return;const o="string"==typeof t?document.querySelector(t):t;if(o)if("ontouchstart"in window)o.remove();else{o.innerHTML="",o.querySelectorAll(".swiper-mouseover-layer").forEach((e=>{e.removeEventListener("mouseover",r),e.removeEventListener("mouseout",s)}));for(let t=0;t<e.snapGrid.length;t++){const e=document.createElement("div");e.className="swiper-mouseover-layer",e.setAttribute("data-swiper-slide-index",t),o.appendChild(e),e.addEventListener("mouseover",r),e.addEventListener("mouseout",s)}}function r(){const t=parseInt(this.getAttribute("data-swiper-slide-index"));e.slideTo(t,e.params.speed)}function s(){e.slideTo(0,e.params.speed)}})),o("destroy",(()=>{const{el:t}=e.params.mouseover;if(t){const e="string"==typeof t?document.querySelector(t):t;e&&e.remove()}}))}
+function MouseoverPlugin({swiper:e,extendParams:r,on:t}){let o="swiper-mouseover-layer";r({mouseover:{el:null,reset:!0}});let s=e=>"string"==typeof e?document.querySelector(e):e,n=()=>"ontouchstart"in window,l=r=>function(t){return function(){e.slideTo(r??t,e.params.speed)}},u=e=>{let r=e.querySelectorAll(`.${o}`);r.forEach(e=>{let r=e._mouseOverHandler,t=e._mouseOutHandler;r&&e.removeEventListener("mouseover",r),t&&e.removeEventListener("mouseout",t),delete e._mouseOverHandler,delete e._mouseOutHandler}),e.innerHTML=""},a=r=>{e.snapGrid.forEach((t,s)=>{let n=document.createElement("div");n.className=o,r.appendChild(n);let u=l()(s);if(n._mouseOverHandler=u,n.addEventListener("mouseover",u),e.params.mouseover.reset){let a=l(0)(s);n._mouseOutHandler=a,n.addEventListener("mouseout",a)}})},m=()=>{let{el:r}=e.params.mouseover;if(!r)return;let t=s(r);if(t){if(n()){t.remove();return}u(t),a(t)}},i=()=>{let{el:r}=e.params.mouseover;if(r){let t=s(r);t&&t.remove()}};t("afterInit",m),t("destroy",i)}