swiper-mouseover 2.0.1 → 2.2.0

package/README.md

@@ -15,7 +15,16 @@ Pull-in a latest version with NPM:
 ```
 npm i swiper-mouseover
 ```
-and provide <link> to the required:
+and import it (ESM build `swiper-mouseover.mjs`):
+```js
+import MouseoverPlugin from 'swiper-mouseover';
+import 'swiper-mouseover/swiper-mouseover.min.css';
+```
+or require it (CommonJS):
+```js
+const MouseoverPlugin = require('swiper-mouseover');
+```
+or provide <link> to the required:
 ```html
 <link href="/path/to/swiper-mouseover.min.css" rel="stylesheet">
 <script src="/path/to/swiper-mouseover.min.js"></script>
@@ -44,7 +53,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,15 +1,37 @@
 {
   "name": "swiper-mouseover",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Mouseover plugin for Swiper",
   "files": [
     "swiper-mouseover.js",
     "swiper-mouseover.min.js",
+    "swiper-mouseover.mjs",
     "swiper-mouseover.css",
     "swiper-mouseover.min.css"
   ],
+  "main": "swiper-mouseover.js",
+  "module": "swiper-mouseover.mjs",
+  "style": "swiper-mouseover.css",
+  "exports": {
+    ".": {
+      "import": "./swiper-mouseover.mjs",
+      "require": "./swiper-mouseover.js",
+      "default": "./swiper-mouseover.js"
+    },
+    "./swiper-mouseover.js": "./swiper-mouseover.js",
+    "./swiper-mouseover.min.js": "./swiper-mouseover.min.js",
+    "./swiper-mouseover.mjs": "./swiper-mouseover.mjs",
+    "./swiper-mouseover.css": "./swiper-mouseover.css",
+    "./swiper-mouseover.min.css": "./swiper-mouseover.min.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
-    "test": "echo \"Tests skipped\" && exit 0"
+    "build": "node scripts/build.mjs",
+    "test": "echo \"Tests skipped\" && exit 0",
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -32,5 +54,8 @@
   "homepage": "https://github.com/fibit/swiper-mouseover#readme",
   "peerDependencies": {
     "swiper": ">=11.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0"
   }
 }

package/swiper-mouseover.css

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

package/swiper-mouseover.js

@@ -1,63 +1,120 @@
 /**
- * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Swiper-Mouseover v2.2.0 for Swiper (https://github.com/fibit/swiper-mouseover)
  * Author Pavel Romanov
  * Released under the MIT License
  */
-function MouseoverPlugin({ swiper, extendParams, on }) {
-  extendParams({
-    mouseover: {
-      el: null
-    }
-  });
-
-  const initMouseover = () => {
-    const { el } = swiper.params.mouseover;
-    
-    if (!el) return;
-    
-    const mouseoverEl = typeof el === 'string' 
-      ? document.querySelector(el) 
-      : el;
-    
-    if (!mouseoverEl) return;
-
-    if ('ontouchstart' in window) {
-      mouseoverEl.remove();
-      return;
-    }
-
-    mouseoverEl.innerHTML = '';
-
-    mouseoverEl.querySelectorAll('.swiper-mouseover-layer').forEach(el => {
-      el.removeEventListener('mouseover', handleMouseOver);
-      el.removeEventListener('mouseout', handleMouseOut);
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    const plugin = factory();
+
+    module.exports = plugin;
+    module.exports.MouseoverPlugin = plugin;
+    module.exports.default = plugin;
+  } else if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else {
+    root.MouseoverPlugin = factory();
+  }
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  function MouseoverPlugin({ swiper, extendParams, on }) {
+    const CLASS_LAYER = 'swiper-mouseover-layer';
+
+    extendParams({
+      mouseover: {
+        el: null,
+        reset: true
+      }
     });
 
-    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);
-    }
-  };
-
-  on('afterInit', initMouseover);
-  on('destroy', () => {
-    const { el } = swiper.params.mouseover;
-    if (el) {
-      const mouseoverEl = typeof el === 'string' ? document.querySelector(el) : el;
-      if (mouseoverEl) mouseoverEl.remove();
-    }
-  });
-};
+    const resolveElement = (selector) => {
+      return typeof selector === 'string'
+        ? document.querySelector(selector)
+        : selector;
+    };
+
+    const isTouchDevice = () => {
+      if (typeof window.matchMedia === 'function') {
+        const hoverNone = window.matchMedia('(hover: none)').matches;
+        const hoverHover = window.matchMedia('(hover: hover)').matches;
+
+        if (hoverNone || hoverHover) return hoverNone;
+      }
+
+      return '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 = resolveElement(el);
+      if (!mouseoverEl) return;
+
+      if (isTouchDevice()) {
+        mouseoverEl.remove();
+        return;
+      }
+
+      cleanupLayers(mouseoverEl);
+      createLayers(mouseoverEl);
+    };
+
+    const cleanup = () => {
+      const { el } = swiper.params.mouseover;
+      if (el) {
+        const mouseoverEl = resolveElement(el);
+        if (mouseoverEl) mouseoverEl.remove();
+      }
+    };
+
+    on('afterInit', initMouseover);
+    on('destroy', cleanup);
+  }
+
+  return MouseoverPlugin;
+});

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.2.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.2.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(i,n){if(typeof module=="object"&&module.exports){const s=n();module.exports=s,module.exports.MouseoverPlugin=s,module.exports.default=s}else typeof define=="function"&&define.amd?define([],n):i.MouseoverPlugin=n()})(typeof globalThis<"u"?globalThis:this,function(){"use strict";function i({swiper:n,extendParams:s,on:c}){const l="swiper-mouseover-layer";s({mouseover:{el:null,reset:!0}});const m=e=>typeof e=="string"?document.querySelector(e):e,v=()=>{if(typeof window.matchMedia=="function"){const e=window.matchMedia("(hover: none)").matches,o=window.matchMedia("(hover: hover)").matches;if(e||o)return e}return"ontouchstart"in window},a=e=>function(o){return function(){n.slideTo(e??o,n.params.speed)}},f=e=>{e.querySelectorAll(`.${l}`).forEach(t=>{const r=t._mouseOverHandler,u=t._mouseOutHandler;r&&t.removeEventListener("mouseover",r),u&&t.removeEventListener("mouseout",u),delete t._mouseOverHandler,delete t._mouseOutHandler}),e.innerHTML=""},h=e=>{n.snapGrid.forEach((o,t)=>{const r=document.createElement("div");r.className=l,e.appendChild(r);const u=a()(t);if(r._mouseOverHandler=u,r.addEventListener("mouseover",u),n.params.mouseover.reset){const d=a(0)(t);r._mouseOutHandler=d,r.addEventListener("mouseout",d)}})},p=()=>{const{el:e}=n.params.mouseover;if(!e)return;const o=m(e);if(o){if(v()){o.remove();return}f(o),h(o)}},H=()=>{const{el:e}=n.params.mouseover;if(e){const o=m(e);o&&o.remove()}};c("afterInit",p),c("destroy",H)}return i});

package/swiper-mouseover.mjs

@@ -0,0 +1,132 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// swiper-mouseover.js
+var require_swiper_mouseover = __commonJS({
+  "swiper-mouseover.js"(exports, module) {
+    (function(root, factory) {
+      if (typeof module === "object" && module.exports) {
+        const plugin2 = factory();
+        module.exports = plugin2;
+        module.exports.MouseoverPlugin = plugin2;
+        module.exports.default = plugin2;
+      } else if (typeof define === "function" && define.amd) {
+        define([], factory);
+      } else {
+        root.MouseoverPlugin = factory();
+      }
+    })(typeof globalThis !== "undefined" ? globalThis : exports, function() {
+      "use strict";
+      function MouseoverPlugin({ swiper, extendParams, on }) {
+        const CLASS_LAYER = "swiper-mouseover-layer";
+        extendParams({
+          mouseover: {
+            el: null,
+            reset: true
+          }
+        });
+        const resolveElement = (selector) => {
+          return typeof selector === "string" ? document.querySelector(selector) : selector;
+        };
+        const isTouchDevice = () => {
+          if (typeof window.matchMedia === "function") {
+            const hoverNone = window.matchMedia("(hover: none)").matches;
+            const hoverHover = window.matchMedia("(hover: hover)").matches;
+            if (hoverNone || hoverHover) return hoverNone;
+          }
+          return "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 = resolveElement(el);
+          if (!mouseoverEl) return;
+          if (isTouchDevice()) {
+            mouseoverEl.remove();
+            return;
+          }
+          cleanupLayers(mouseoverEl);
+          createLayers(mouseoverEl);
+        };
+        const cleanup = () => {
+          const { el } = swiper.params.mouseover;
+          if (el) {
+            const mouseoverEl = resolveElement(el);
+            if (mouseoverEl) mouseoverEl.remove();
+          }
+        };
+        on("afterInit", initMouseover);
+        on("destroy", cleanup);
+      }
+      return MouseoverPlugin;
+    });
+  }
+});
+
+// <stdin>
+var import_swiper_mouseover = __toESM(require_swiper_mouseover());
+var stdin_default = import_swiper_mouseover.default;
+var export_MouseoverPlugin = import_swiper_mouseover.default;
+export {
+  export_MouseoverPlugin as MouseoverPlugin,
+  stdin_default as default
+};