swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
2 lines • 4.34 kB
JavaScript
import{c as createElementIfNotDefined}from"../shared/create-element-if-not-defined.min.mjs";import{s as makeElementsArray,w as setInnerHTML}from"../shared/utils.min.mjs";const arrowSvg='<svg class="swiper-navigation-icon" width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z" fill="currentColor"/></svg>',Navigation=({swiper:e,extendParams:n,on:a,emit:t})=>{function i(){return e.params.navigation}function s(n){let a;return n&&"string"==typeof n&&e.isElement&&(a=e.el.querySelector(n)||e.hostEl.querySelector(n),a)?a:(n&&("string"==typeof n&&(a=[...document.querySelectorAll(n)]),e.params.uniqueNavElements&&"string"==typeof n&&a&&a.length>1&&1===e.el.querySelectorAll(n).length?a=e.el.querySelector(n):a&&1===a.length&&(a=a[0])),n&&!a?n:a)}function l(n,a){const t=i();makeElementsArray(n).forEach(n=>{n&&(n.classList[a?"add":"remove"](...t.disabledClass.split(" ")),"BUTTON"===n.tagName&&(n.disabled=a),e.params.watchOverflow&&e.enabled&&n.classList[e.isLocked?"add":"remove"](t.lockClass))})}function r(){const{nextEl:n,prevEl:a}=e.navigation;if(e.params.loop)return l(a,!1),void l(n,!1);l(a,e.isBeginning&&!e.params.rewind),l(n,e.isEnd&&!e.params.rewind)}function o(n){n.preventDefault(),(!e.isBeginning||e.params.loop||e.params.rewind)&&(e.slidePrev(),t("navigationPrev"))}function c(n){n.preventDefault(),(!e.isEnd||e.params.loop||e.params.rewind)&&(e.slideNext(),t("navigationNext"))}function d(){e.params.navigation=createElementIfNotDefined(e,e.originalParams.navigation,e.params.navigation,{nextEl:"swiper-button-next",prevEl:"swiper-button-prev"});const n=i();if(!n.nextEl&&!n.prevEl)return;const a=s(n.nextEl),t=s(n.prevEl);Object.assign(e.navigation,{nextEl:a,prevEl:t});const l=makeElementsArray(a),r=makeElementsArray(t),d=(a,t)=>{if(a){if(n.addIcons&&a.matches(".swiper-button-next,.swiper-button-prev")&&!a.querySelector("svg")){const e=document.createElement("div");setInnerHTML(e,arrowSvg);const n=e.querySelector("svg");n&&a.appendChild(n),e.remove()}a.addEventListener("click","next"===t?c:o)}!e.enabled&&a&&a.classList.add(...n.lockClass.split(" "))};l.forEach(e=>d(e,"next")),r.forEach(e=>d(e,"prev"))}function m(){const n=i(),{nextEl:a,prevEl:t}=e.navigation,s=makeElementsArray(a),l=makeElementsArray(t),r=(e,a)=>{e.removeEventListener("click","next"===a?c:o),e.classList.remove(...n.disabledClass.split(" "))};s.forEach(e=>r(e,"next")),l.forEach(e=>r(e,"prev"))}n({navigation:{nextEl:null,prevEl:null,addIcons:!0,hideOnClick:!1,disabledClass:"swiper-button-disabled",hiddenClass:"swiper-button-hidden",lockClass:"swiper-button-lock",navigationDisabledClass:"swiper-navigation-disabled"}}),e.navigation={nextEl:null,prevEl:null,arrowSvg:arrowSvg},a("init",()=>{!1===i().enabled?p():(d(),r())}),a("toEdge fromEdge lock unlock",()=>{r()}),a("destroy",()=>{m()}),a("enable disable",()=>{const n=i(),{nextEl:a,prevEl:t}=e.navigation,s=makeElementsArray(a),l=makeElementsArray(t);e.enabled?r():[...s,...l].filter(e=>!!e).forEach(e=>e.classList.add(n.lockClass))}),a("click",(n,a)=>{const s=i(),{nextEl:l,prevEl:r}=e.navigation,o=makeElementsArray(l),c=makeElementsArray(r),d=a.target;let m=c.includes(d)||o.includes(d);if(e.isElement&&!m){const e=a.composedPath?a.composedPath():[];e.length&&(m=e.find(e=>o.includes(e)||c.includes(e)))}if(s.hideOnClick&&!m){if(e.pagination&&e.params.pagination&&e.params.pagination.clickable&&(e.pagination.el===d||e.pagination.el.contains(d)))return;let n;o.length?n=o[0].classList.contains(s.hiddenClass):c.length&&(n=c[0].classList.contains(s.hiddenClass)),t(!0===n?"navigationShow":"navigationHide"),[...o,...c].filter(e=>!!e).forEach(e=>e.classList.toggle(s.hiddenClass))}});const p=()=>{const n=i();e.el.classList.add(...n.navigationDisabledClass.split(" ")),m()};Object.assign(e.navigation,{enable:()=>{const n=i();e.el.classList.remove(...n.navigationDisabledClass.split(" ")),d(),r()},disable:p,update:r,init:d,destroy:m})};export{Navigation as default};
//# sourceMappingURL=navigation.min.mjs.map