From 1a6d7e4308075e9360af857df59c1ed075a23601 Mon Sep 17 00:00:00 2001 From: Norman Rusch Date: Tue, 24 Sep 2024 10:52:01 +0200 Subject: [PATCH] 1.1.7 --- README.md | 1 + dist/formats/cjs/caroucssel.js | 2 +- dist/formats/cjs/caroucssel.min.js | 2 +- dist/formats/iife/caroucssel.js | 2 +- dist/formats/iife/caroucssel.min.js | 2 +- dist/formats/umd/caroucssel.js | 2 +- dist/formats/umd/caroucssel.min.js | 2 +- dist/index.d.ts | 2 +- dist/index.js | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 11 files changed, 12 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 0a2ef535..30065bd2 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ [![CI Status](https://github.com/schorfES/caroucssel/actions/workflows/ci.yml/badge.svg)](https://github.com/schorfES/caroucssel/actions) [![Coverage Status on Codecov](https://codecov.io/gh/schorfES/caroucssel/branch/main/graph/badge.svg)](https://codecov.io/gh/schorfES/caroucssel) [![Known Vulnerabilities](https://snyk.io/test/github/schorfES/caroucssel/badge.svg)](https://snyk.io/test/github/schorfES/caroucssel) +
[![Tree Shaking](https://badgen.net/bundlephobia/tree-shaking/caroucssel)](https://bundlephobia.com/result?p=caroucssel) [![Minified gzipped size](https://badgen.net/bundlephobia/minzip/caroucssel)](https://bundlephobia.com/result?p=caroucssel) ![Types included](https://badgen.net/npm/types/tslib) diff --git a/dist/formats/cjs/caroucssel.js b/dist/formats/cjs/caroucssel.js index 56407095..73d88528 100644 --- a/dist/formats/cjs/caroucssel.js +++ b/dist/formats/cjs/caroucssel.js @@ -800,7 +800,7 @@ class Carousel { } } -const version = '1.1.6'; +const version = '1.1.7'; exports.Buttons = Buttons; exports.Carousel = Carousel; diff --git a/dist/formats/cjs/caroucssel.min.js b/dist/formats/cjs/caroucssel.min.js index e79ea0a0..baca020b 100644 --- a/dist/formats/cjs/caroucssel.min.js +++ b/dist/formats/cjs/caroucssel.min.js @@ -1 +1 @@ -"use strict";"function"==typeof SuppressedError&&SuppressedError;const t=new WeakMap;function e(e,s,n){const i=t.get(e)||new Map;if(i.has(s))return i.get(s);if(!n)return;const o=n();return i.set(s,o),t.set(e,i),o}function s(e,s,n){const i=t.get(e)||new Map;i.set(s,n),t.set(e,i)}function n(e,s){const n=t.get(e);n&&n.has(s)&&n.delete(s)}function i(e){t.delete(e)}function o(t,e){const s=document.createElement("div");s.innerHTML=t(e);const n=s.firstElementChild;return n||null}const r="prxy",l="conf",a="btns",h="click",d={template:({className:t,controls:e,label:s,title:n})=>`\n\t\t\n\t`,className:"button",nextClassName:"is-next",nextLabel:"Next",nextTitle:"Go to next",previousClassName:"is-previous",previousLabel:"Previous",previousTitle:"Go to previous"};const c="prxy",u="conf",p="pgidx",g="posx",v="scrl",m="time",f="grab",x="mousemove",y="mouseup";function b(t){return t instanceof MouseEvent?t.clientX:0}const _={indicator:!1};var E,w;exports.UpdateType=void 0,(E=exports.UpdateType||(exports.UpdateType={})).SCROLL="scroll",E.RESIZE="resize",E.FORCED="forced",E.FEATURE="feature",exports.ScrollBehavior=void 0,(w=exports.ScrollBehavior||(exports.ScrollBehavior={})).AUTO="auto",w.SMOOTH="smooth";const N="prxy",O="conf",C="pags",S="btns",L={template:({className:t,controls:e,pages:s,label:n,title:i})=>`\n\t\t\n\t`,className:"pagination",label:({index:t})=>`${t+1}`,title:({index:t})=>`Go to ${t+1}. page`};const T="dims";class R{constructor(){window.addEventListener("resize",(()=>{n(this,T)}))}get dimensions(){return e(this,T,(()=>{const t=document.createElement("div"),e=document.createElement("div");document.body.appendChild(e),e.style.position="absolute",e.style.top="0px",e.style.left="0px",e.style.visibility="hidden",e.appendChild(t),t.style.width="200px",t.style.height="100%",e.style.width="150px",e.style.height="200px",e.style.overflow="hidden";const s=t.offsetHeight;e.style.overflow="scroll";let n=t.offsetHeight;n=s===n?e.clientHeight:n;const i=s-n;return document.body.removeChild(e),{height:i}}))}}const k="prxy",j="conf",I="mask",M="hght";let $;const B={enabled:!0,className:"caroucssel-mask",tagName:"div"};class A{constructor(t={}){s(this,j,Object.assign(Object.assign({},B),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=e(this,I))&&void 0!==t?t:null}init(t){s(this,k,t),$=null!=$?$:new R,this._render()}destroy(){this._remove(),i(this)}update(t){switch(t.type){case exports.UpdateType.RESIZE:case exports.UpdateType.FORCED:n(this,M),this._render();break;default:this._render()}}_render(){const{enabled:t,className:n,tagName:i}=e(this,j);if(!t)return;const o=e(this,k).el;let{height:r}=$.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),e(this,I,(()=>{var t;const e=document.createElement(i);return e.className=n,e.style.overflow="hidden",e.style.height="100%",null===(t=o.parentNode)||void 0===t||t.insertBefore(e,o),e.appendChild(o),e}));r!==e(this,M)&&(s(this,M,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,s;const{el:n}=e(this,k),i=e(this,I);null===(t=null==i?void 0:i.parentNode)||void 0===t||t.insertBefore(n,i),null===(s=null==i?void 0:i.parentNode)||void 0===s||s.removeChild(i),n.removeAttribute("style")}}const U="inst",P="feat";function D(t){return e(t,U)}class z{constructor(t,e){s(this,U,t),s(this,P,e)}get id(){return D(this).id}get el(){return D(this).el}get mask(){return D(this).mask}get index(){return D(this).index}set index(t){D(this).index=t}get items(){return D(this).items}get pages(){return D(this).pages}get pageIndex(){return D(this).pageIndex}update(t){var s;D(this).update(),(s=this,e(s,P)).forEach((e=>{e!==t&&e.update({type:exports.UpdateType.FEATURE})}))}}function W(t,e){let s=null;return(...n)=>{null!==s&&clearTimeout(s),s=setTimeout((()=>t(...n)),e)}}const F=/^caroucssel-[0-9]*$/,H="scroll",G="resize",Z="element",q="config",V="index",X="items",J="pages",K="page-index",Q="mask",Y="feautres",tt=.25,et=/^(link|meta|noscript|script|style|title)$/i;let st=0;const nt={features:[],filterItem:()=>!0,onScroll:()=>{}};exports.Buttons=class{constructor(t={}){s(this,l,Object.assign(Object.assign({},d),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,r,t),this._render()}destroy(){this._remove(),i(this)}update(){this._render()}_render(){const t=e(this,r),s=e(this,l),{el:n,mask:i,pages:d,pageIndex:c}=t,[u,p]=e(this,a,(()=>{const t=null!=i?i:n,{template:e,className:r,previousClassName:l,previousLabel:a,previousTitle:d,nextClassName:c,nextLabel:u,nextTitle:p}=s;return[{controls:n.id,label:u,title:p,className:[r,c].join(" "),handler:this._onNext},{controls:n.id,label:a,title:d,className:[r,l].join(" "),handler:this._onPrev}].map((s=>{var n,{handler:i}=s,r=function(t,e){var s={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(s[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i{var e;null==t||t.removeEventListener(h,this._onPrev),null==t||t.removeEventListener(h,this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=e(this,r),{pages:s,pageIndex:n}=t,i=s[n-1]||s[0];t.index=i}_onNext(){const t=e(this,r),{pages:s,pageIndex:n}=t,i=s[n+1]||s[s.length-1];t.index=i}},exports.Carousel=class{static resetInstanceCount(){}constructor(t,e={}){if(this.behavior=exports.ScrollBehavior.AUTO,!(t&&t instanceof Element))throw new Error(`Carousel needs a dom element but "${typeof t}" was passed.`);s(this,Z,t),st++,t.id=t.id||`caroucssel-${st}`,s(this,"id",t.id);const n=Object.assign(Object.assign({},nt),e);s(this,q,n);let i=null,o=[...n.features];const r=n.features.findIndex((t=>t instanceof A));r>-1&&([i]=o.splice(r,1)),null!=i||(i=new A),o=o.filter((t=>!(t instanceof A))),o=[i,...o],s(this,Q,i);const l=new z(this,o);switch(s(this,"proxy",l),s(this,Y,o),o.forEach((t=>t.init(l))),!0){case Array.isArray(e.index):this.index=e.index;break;case!isNaN(e.index):this.index=[e.index]}this.behavior=exports.ScrollBehavior.SMOOTH,this._onScroll=W(this._onScroll.bind(this),45),this._onResize=W(this._onResize.bind(this),25),t.addEventListener(H,this._onScroll),window.addEventListener(G,this._onResize)}get el(){return e(this,Z)}get mask(){var t;return null!==(t=e(this,Q).el)&&void 0!==t?t:null}get id(){return e(this,"id")}get index(){return e(this,V,(()=>{const{el:t,items:e}=this,{length:s}=e,{clientWidth:n}=t,i=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*s<=n&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:s,items:i}=this,{length:o}=i;if(!Array.isArray(t)||!t.length)return;let r=t[0]||0;r=Math.max(Math.min(r,o-1),0);const{scrollLeft:l}=s,a=l,h={left:i[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(n(this,V),s.scrollTo(Object.assign(Object.assign({},h),{behavior:e})))}get items(){return e(this,X,(()=>{const{filterItem:t}=e(this,q),{el:s}=this;return Array.from(s.children).filter((t=>!et.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return e(this,J,(()=>{const{el:t,items:e}=this,{clientWidth:s}=t;if(0===s)return e.map(((t,e)=>[e]));let n=[[]];return e.map(((t,e)=>{const{offsetLeft:s,clientWidth:n}=t;return{left:s,width:n,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:i}=t,o=n[n.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===n[0]&&(l=0);let a=Math.floor((e-l+.75*i)/s);for(;a>0;)n.push([]),a--;n[n.length-1].push(t)})),n=n.filter((t=>0!==t.length)),n.map((t=>t.map((({index:t})=>t))))}))}get pageIndex(){return e(this,K,(()=>{const{el:t,items:e,index:s,pages:n}=this,i=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=s.reduce(((t,s)=>{if(!e[s])return t;let{left:n,right:r}=e[s].getBoundingClientRect();return n=Math.round(n-i),r=Math.round(r-i),n<0||o{const n=e[t].getBoundingClientRect().right;return e[s].getBoundingClientRect().right-n}))[0];return n.findIndex((t=>t.includes(l)))}))}destroy(){const{el:t}=this;F.test(t.id)&&t.removeAttribute("id");e(this,Y).forEach((t=>t.destroy())),t.removeEventListener(H,this._onScroll),window.removeEventListener(G,this._onResize),i(this)}update(){n(this,V),n(this,X),n(this,J),n(this,K);e(this,Y).forEach((t=>t.update({type:exports.UpdateType.FORCED})))}_onScroll(t){n(this,V),n(this,K);e(this,Y).forEach((t=>t.update({type:exports.UpdateType.SCROLL})));const{index:s}=this;e(this,q).onScroll({index:s,type:H,target:this,originalEvent:t})}_onResize(){n(this,J),n(this,V),n(this,K);e(this,Y).forEach((t=>t.update({type:exports.UpdateType.RESIZE})))}},exports.Mask=A,exports.Mouse=class{constructor(t={}){s(this,u,Object.assign(Object.assign({},_),t)),this._onStart=this._onStart.bind(this),this._onDrag=this._onDrag.bind(this),this._onEnd=this._onEnd.bind(this)}get name(){return"buildin:mouse"}init(t){s(this,c,t);const n=e(this,u),{el:i}=t;i.style.cursor=n.indicator?f:"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){i(this)}update(){}_onStart(t){var s;const n=e(this,m);clearTimeout(n);const i=e(this,u),o=e(this,c),r=o.el;e(this,v,(()=>r.scrollLeft)),e(this,g,(()=>b(t))),e(this,p,(()=>o.pageIndex)),r.style.userSelect="none",r.style.scrollBehavior="auto",r.style.scrollSnapType="none",r.style.cursor=i.indicator?"grabbing":"",window.addEventListener(x,this._onDrag,{passive:!0}),window.addEventListener(y,this._onEnd,{passive:!0}),null===(s=i.onStart)||void 0===s||s.call(i,{originalEvent:t})}_onDrag(t){var s,n,i;const o=e(this,u),{el:r}=e(this,c),l=null!==(s=e(this,v))&&void 0!==s?s:0,a=(null!==(n=e(this,g))&&void 0!==n?n:0)-b(t);r.scrollLeft=l+a,null===(i=o.onDrag)||void 0===i||i.call(o,{originalEvent:t})}_onEnd(t){var i,o,r,l;const a=e(this,c),h=e(this,u),d=null!==(i=e(this,v))&&void 0!==i?i:0,b=null!==(o=e(this,p))&&void 0!==o?o:0;n(this,v),n(this,g),n(this,p);const _=a.el,E=Math.min(Math.max(100,.25*_.clientWidth),250),w=_.scrollLeft-d,N=Math.abs(w);_.style.removeProperty("user-select"),_.style.removeProperty("scroll-behavior"),_.style.cursor=h.indicator?f:"";let O=a.index;if(N>E){const t=w/N,e=Math.max(b+t,0);O=null!==(r=a.pages[e])&&void 0!==r?r:O}window.requestAnimationFrame((()=>{a.index=O}));const C=window.setTimeout((()=>{_.style.removeProperty("scroll-snap-type")}),1e3);s(this,m,C),window.removeEventListener(x,this._onDrag),window.removeEventListener(y,this._onEnd),null===(l=h.onEnd)||void 0===l||l.call(h,{originalEvent:t})}},exports.Pagination=class{constructor(t={}){s(this,O,Object.assign(Object.assign({},L),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,N,t),this._add()}destroy(){this._remove(),i(this)}update(t){if(t.type===exports.UpdateType.SCROLL)this._update();else this._remove(),this._add()}_add(){var t;const n=e(this,N),i=e(this,O),{el:r,mask:l,pages:a}=n,h=null!=l?l:r;if(a.length<2)return;const{template:d,className:c,label:u,title:p}=i,g=o(d,{label:u,title:p,pages:a,className:c,controls:r.id});if(!g)return;const v=Array.from(g.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=h.parentNode)||void 0===t||t.appendChild(g),s(this,C,g),s(this,S,v),this._update()}_update(){const t=e(this,N),s=e(this,S),{pageIndex:n}=t;null==s||s.forEach(((t,e)=>t.disabled=e===n))}_remove(){var t;const s=e(this,C),i=e(this,S);null==i||i.forEach((t=>{var e;t.removeEventListener("click",this._onClick),null===(e=t.parentNode)||void 0===e||e.removeChild(t)})),null===(t=null==s?void 0:s.parentNode)||void 0===t||t.removeChild(s),n(this,S),n(this,C)}_onClick(t){const s=e(this,N),n=e(this,S);if(!n)return;const i=t.currentTarget,o=n.indexOf(i);s.index=s.pages[o]}},exports.version="1.1.6"; +"use strict";"function"==typeof SuppressedError&&SuppressedError;const t=new WeakMap;function e(e,s,n){const i=t.get(e)||new Map;if(i.has(s))return i.get(s);if(!n)return;const o=n();return i.set(s,o),t.set(e,i),o}function s(e,s,n){const i=t.get(e)||new Map;i.set(s,n),t.set(e,i)}function n(e,s){const n=t.get(e);n&&n.has(s)&&n.delete(s)}function i(e){t.delete(e)}function o(t,e){const s=document.createElement("div");s.innerHTML=t(e);const n=s.firstElementChild;return n||null}const r="prxy",l="conf",a="btns",h="click",d={template:({className:t,controls:e,label:s,title:n})=>`\n\t\t\n\t`,className:"button",nextClassName:"is-next",nextLabel:"Next",nextTitle:"Go to next",previousClassName:"is-previous",previousLabel:"Previous",previousTitle:"Go to previous"};const c="prxy",u="conf",p="pgidx",g="posx",v="scrl",m="time",f="grab",x="mousemove",y="mouseup";function b(t){return t instanceof MouseEvent?t.clientX:0}const _={indicator:!1};var E,w;exports.UpdateType=void 0,(E=exports.UpdateType||(exports.UpdateType={})).SCROLL="scroll",E.RESIZE="resize",E.FORCED="forced",E.FEATURE="feature",exports.ScrollBehavior=void 0,(w=exports.ScrollBehavior||(exports.ScrollBehavior={})).AUTO="auto",w.SMOOTH="smooth";const N="prxy",O="conf",C="pags",S="btns",L={template:({className:t,controls:e,pages:s,label:n,title:i})=>`\n\t\t
    \n\t\t\t${s.map(((t,o)=>{const r={index:o,page:t,pages:s},l=n(r),a=i(r);return`
  • \n\t\t\t\t\t\n\t\t\t\t
    • `})).join("")}\n\t\t
\n\t`,className:"pagination",label:({index:t})=>`${t+1}`,title:({index:t})=>`Go to ${t+1}. page`};const T="dims";class R{constructor(){window.addEventListener("resize",(()=>{n(this,T)}))}get dimensions(){return e(this,T,(()=>{const t=document.createElement("div"),e=document.createElement("div");document.body.appendChild(e),e.style.position="absolute",e.style.top="0px",e.style.left="0px",e.style.visibility="hidden",e.appendChild(t),t.style.width="200px",t.style.height="100%",e.style.width="150px",e.style.height="200px",e.style.overflow="hidden";const s=t.offsetHeight;e.style.overflow="scroll";let n=t.offsetHeight;n=s===n?e.clientHeight:n;const i=s-n;return document.body.removeChild(e),{height:i}}))}}const k="prxy",j="conf",I="mask",M="hght";let $;const B={enabled:!0,className:"caroucssel-mask",tagName:"div"};class A{constructor(t={}){s(this,j,Object.assign(Object.assign({},B),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=e(this,I))&&void 0!==t?t:null}init(t){s(this,k,t),$=null!=$?$:new R,this._render()}destroy(){this._remove(),i(this)}update(t){switch(t.type){case exports.UpdateType.RESIZE:case exports.UpdateType.FORCED:n(this,M),this._render();break;default:this._render()}}_render(){const{enabled:t,className:n,tagName:i}=e(this,j);if(!t)return;const o=e(this,k).el;let{height:r}=$.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),e(this,I,(()=>{var t;const e=document.createElement(i);return e.className=n,e.style.overflow="hidden",e.style.height="100%",null===(t=o.parentNode)||void 0===t||t.insertBefore(e,o),e.appendChild(o),e}));r!==e(this,M)&&(s(this,M,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,s;const{el:n}=e(this,k),i=e(this,I);null===(t=null==i?void 0:i.parentNode)||void 0===t||t.insertBefore(n,i),null===(s=null==i?void 0:i.parentNode)||void 0===s||s.removeChild(i),n.removeAttribute("style")}}const U="inst",P="feat";function D(t){return e(t,U)}class z{constructor(t,e){s(this,U,t),s(this,P,e)}get id(){return D(this).id}get el(){return D(this).el}get mask(){return D(this).mask}get index(){return D(this).index}set index(t){D(this).index=t}get items(){return D(this).items}get pages(){return D(this).pages}get pageIndex(){return D(this).pageIndex}update(t){var s;D(this).update(),(s=this,e(s,P)).forEach((e=>{e!==t&&e.update({type:exports.UpdateType.FEATURE})}))}}function W(t,e){let s=null;return(...n)=>{null!==s&&clearTimeout(s),s=setTimeout((()=>t(...n)),e)}}const F=/^caroucssel-[0-9]*$/,H="scroll",G="resize",Z="element",q="config",V="index",X="items",J="pages",K="page-index",Q="mask",Y="feautres",tt=.25,et=/^(link|meta|noscript|script|style|title)$/i;let st=0;const nt={features:[],filterItem:()=>!0,onScroll:()=>{}};exports.Buttons=class{constructor(t={}){s(this,l,Object.assign(Object.assign({},d),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,r,t),this._render()}destroy(){this._remove(),i(this)}update(){this._render()}_render(){const t=e(this,r),s=e(this,l),{el:n,mask:i,pages:d,pageIndex:c}=t,[u,p]=e(this,a,(()=>{const t=null!=i?i:n,{template:e,className:r,previousClassName:l,previousLabel:a,previousTitle:d,nextClassName:c,nextLabel:u,nextTitle:p}=s;return[{controls:n.id,label:u,title:p,className:[r,c].join(" "),handler:this._onNext},{controls:n.id,label:a,title:d,className:[r,l].join(" "),handler:this._onPrev}].map((s=>{var n,{handler:i}=s,r=function(t,e){var s={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(s[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i{var e;null==t||t.removeEventListener(h,this._onPrev),null==t||t.removeEventListener(h,this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=e(this,r),{pages:s,pageIndex:n}=t,i=s[n-1]||s[0];t.index=i}_onNext(){const t=e(this,r),{pages:s,pageIndex:n}=t,i=s[n+1]||s[s.length-1];t.index=i}},exports.Carousel=class{static resetInstanceCount(){}constructor(t,e={}){if(this.behavior=exports.ScrollBehavior.AUTO,!(t&&t instanceof Element))throw new Error(`Carousel needs a dom element but "${typeof t}" was passed.`);s(this,Z,t),st++,t.id=t.id||`caroucssel-${st}`,s(this,"id",t.id);const n=Object.assign(Object.assign({},nt),e);s(this,q,n);let i=null,o=[...n.features];const r=n.features.findIndex((t=>t instanceof A));r>-1&&([i]=o.splice(r,1)),null!=i||(i=new A),o=o.filter((t=>!(t instanceof A))),o=[i,...o],s(this,Q,i);const l=new z(this,o);switch(s(this,"proxy",l),s(this,Y,o),o.forEach((t=>t.init(l))),!0){case Array.isArray(e.index):this.index=e.index;break;case!isNaN(e.index):this.index=[e.index]}this.behavior=exports.ScrollBehavior.SMOOTH,this._onScroll=W(this._onScroll.bind(this),45),this._onResize=W(this._onResize.bind(this),25),t.addEventListener(H,this._onScroll),window.addEventListener(G,this._onResize)}get el(){return e(this,Z)}get mask(){var t;return null!==(t=e(this,Q).el)&&void 0!==t?t:null}get id(){return e(this,"id")}get index(){return e(this,V,(()=>{const{el:t,items:e}=this,{length:s}=e,{clientWidth:n}=t,i=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*s<=n&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:s,items:i}=this,{length:o}=i;if(!Array.isArray(t)||!t.length)return;let r=t[0]||0;r=Math.max(Math.min(r,o-1),0);const{scrollLeft:l}=s,a=l,h={left:i[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(n(this,V),s.scrollTo(Object.assign(Object.assign({},h),{behavior:e})))}get items(){return e(this,X,(()=>{const{filterItem:t}=e(this,q),{el:s}=this;return Array.from(s.children).filter((t=>!et.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return e(this,J,(()=>{const{el:t,items:e}=this,{clientWidth:s}=t;if(0===s)return e.map(((t,e)=>[e]));let n=[[]];return e.map(((t,e)=>{const{offsetLeft:s,clientWidth:n}=t;return{left:s,width:n,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:i}=t,o=n[n.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===n[0]&&(l=0);let a=Math.floor((e-l+.75*i)/s);for(;a>0;)n.push([]),a--;n[n.length-1].push(t)})),n=n.filter((t=>0!==t.length)),n.map((t=>t.map((({index:t})=>t))))}))}get pageIndex(){return e(this,K,(()=>{const{el:t,items:e,index:s,pages:n}=this,i=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=s.reduce(((t,s)=>{if(!e[s])return t;let{left:n,right:r}=e[s].getBoundingClientRect();return n=Math.round(n-i),r=Math.round(r-i),n<0||o{const n=e[t].getBoundingClientRect().right;return e[s].getBoundingClientRect().right-n}))[0];return n.findIndex((t=>t.includes(l)))}))}destroy(){const{el:t}=this;F.test(t.id)&&t.removeAttribute("id");e(this,Y).forEach((t=>t.destroy())),t.removeEventListener(H,this._onScroll),window.removeEventListener(G,this._onResize),i(this)}update(){n(this,V),n(this,X),n(this,J),n(this,K);e(this,Y).forEach((t=>t.update({type:exports.UpdateType.FORCED})))}_onScroll(t){n(this,V),n(this,K);e(this,Y).forEach((t=>t.update({type:exports.UpdateType.SCROLL})));const{index:s}=this;e(this,q).onScroll({index:s,type:H,target:this,originalEvent:t})}_onResize(){n(this,J),n(this,V),n(this,K);e(this,Y).forEach((t=>t.update({type:exports.UpdateType.RESIZE})))}},exports.Mask=A,exports.Mouse=class{constructor(t={}){s(this,u,Object.assign(Object.assign({},_),t)),this._onStart=this._onStart.bind(this),this._onDrag=this._onDrag.bind(this),this._onEnd=this._onEnd.bind(this)}get name(){return"buildin:mouse"}init(t){s(this,c,t);const n=e(this,u),{el:i}=t;i.style.cursor=n.indicator?f:"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){i(this)}update(){}_onStart(t){var s;const n=e(this,m);clearTimeout(n);const i=e(this,u),o=e(this,c),r=o.el;e(this,v,(()=>r.scrollLeft)),e(this,g,(()=>b(t))),e(this,p,(()=>o.pageIndex)),r.style.userSelect="none",r.style.scrollBehavior="auto",r.style.scrollSnapType="none",r.style.cursor=i.indicator?"grabbing":"",window.addEventListener(x,this._onDrag,{passive:!0}),window.addEventListener(y,this._onEnd,{passive:!0}),null===(s=i.onStart)||void 0===s||s.call(i,{originalEvent:t})}_onDrag(t){var s,n,i;const o=e(this,u),{el:r}=e(this,c),l=null!==(s=e(this,v))&&void 0!==s?s:0,a=(null!==(n=e(this,g))&&void 0!==n?n:0)-b(t);r.scrollLeft=l+a,null===(i=o.onDrag)||void 0===i||i.call(o,{originalEvent:t})}_onEnd(t){var i,o,r,l;const a=e(this,c),h=e(this,u),d=null!==(i=e(this,v))&&void 0!==i?i:0,b=null!==(o=e(this,p))&&void 0!==o?o:0;n(this,v),n(this,g),n(this,p);const _=a.el,E=Math.min(Math.max(100,.25*_.clientWidth),250),w=_.scrollLeft-d,N=Math.abs(w);_.style.removeProperty("user-select"),_.style.removeProperty("scroll-behavior"),_.style.cursor=h.indicator?f:"";let O=a.index;if(N>E){const t=w/N,e=Math.max(b+t,0);O=null!==(r=a.pages[e])&&void 0!==r?r:O}window.requestAnimationFrame((()=>{a.index=O}));const C=window.setTimeout((()=>{_.style.removeProperty("scroll-snap-type")}),1e3);s(this,m,C),window.removeEventListener(x,this._onDrag),window.removeEventListener(y,this._onEnd),null===(l=h.onEnd)||void 0===l||l.call(h,{originalEvent:t})}},exports.Pagination=class{constructor(t={}){s(this,O,Object.assign(Object.assign({},L),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,N,t),this._add()}destroy(){this._remove(),i(this)}update(t){if(t.type===exports.UpdateType.SCROLL)this._update();else this._remove(),this._add()}_add(){var t;const n=e(this,N),i=e(this,O),{el:r,mask:l,pages:a}=n,h=null!=l?l:r;if(a.length<2)return;const{template:d,className:c,label:u,title:p}=i,g=o(d,{label:u,title:p,pages:a,className:c,controls:r.id});if(!g)return;const v=Array.from(g.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=h.parentNode)||void 0===t||t.appendChild(g),s(this,C,g),s(this,S,v),this._update()}_update(){const t=e(this,N),s=e(this,S),{pageIndex:n}=t;null==s||s.forEach(((t,e)=>t.disabled=e===n))}_remove(){var t;const s=e(this,C),i=e(this,S);null==i||i.forEach((t=>{var e;t.removeEventListener("click",this._onClick),null===(e=t.parentNode)||void 0===e||e.removeChild(t)})),null===(t=null==s?void 0:s.parentNode)||void 0===t||t.removeChild(s),n(this,S),n(this,C)}_onClick(t){const s=e(this,N),n=e(this,S);if(!n)return;const i=t.currentTarget,o=n.indexOf(i);s.index=s.pages[o]}},exports.version="1.1.7"; diff --git a/dist/formats/iife/caroucssel.js b/dist/formats/iife/caroucssel.js index c3ae72eb..fe66c2e1 100644 --- a/dist/formats/iife/caroucssel.js +++ b/dist/formats/iife/caroucssel.js @@ -801,7 +801,7 @@ var caroucssel = (function (exports) { } } - const version = '1.1.6'; + const version = '1.1.7'; exports.Buttons = Buttons; exports.Carousel = Carousel; diff --git a/dist/formats/iife/caroucssel.min.js b/dist/formats/iife/caroucssel.min.js index 1f045917..01678185 100644 --- a/dist/formats/iife/caroucssel.min.js +++ b/dist/formats/iife/caroucssel.min.js @@ -1 +1 @@ -var caroucssel=function(t){"use strict";"function"==typeof SuppressedError&&SuppressedError;const e=new WeakMap;function n(t,n,s){const i=e.get(t)||new Map;if(i.has(n))return i.get(n);if(!s)return;const o=s();return i.set(n,o),e.set(t,i),o}function s(t,n,s){const i=e.get(t)||new Map;i.set(n,s),e.set(t,i)}function i(t,n){const s=e.get(t);s&&s.has(n)&&s.delete(n)}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const s=n.firstElementChild;return s||null}const l="prxy",a="conf",h="btns",d="click",c={template:({className:t,controls:e,label:n,title:s})=>`\n\t\t\n\t`,className:"button",nextClassName:"is-next",nextLabel:"Next",nextTitle:"Go to next",previousClassName:"is-previous",previousLabel:"Previous",previousTitle:"Go to previous"};const u="prxy",p="conf",v="pgidx",g="posx",m="scrl",f="time",y="grab",b="mousemove",x="mouseup";function _(t){return t instanceof MouseEvent?t.clientX:0}const E={indicator:!1};var w,N;t.UpdateType=void 0,(w=t.UpdateType||(t.UpdateType={})).SCROLL="scroll",w.RESIZE="resize",w.FORCED="forced",w.FEATURE="feature",t.ScrollBehavior=void 0,(N=t.ScrollBehavior||(t.ScrollBehavior={})).AUTO="auto",N.SMOOTH="smooth";const O="prxy",C="conf",S="pags",L="btns",T={template:({className:t,controls:e,pages:n,label:s,title:i})=>`\n\t\t
    \n\t\t\t${n.map(((t,o)=>{const r={index:o,page:t,pages:n},l=s(r),a=i(r);return`
  • \n\t\t\t\t\t\n\t\t\t\t
    • `})).join("")}\n\t\t
\n\t`,className:"pagination",label:({index:t})=>`${t+1}`,title:({index:t})=>`Go to ${t+1}. page`};const R="dims";class k{constructor(){window.addEventListener("resize",(()=>{i(this,R)}))}get dimensions(){return n(this,R,(()=>{const t=document.createElement("div"),e=document.createElement("div");document.body.appendChild(e),e.style.position="absolute",e.style.top="0px",e.style.left="0px",e.style.visibility="hidden",e.appendChild(t),t.style.width="200px",t.style.height="100%",e.style.width="150px",e.style.height="200px",e.style.overflow="hidden";const n=t.offsetHeight;e.style.overflow="scroll";let s=t.offsetHeight;s=n===s?e.clientHeight:s;const i=n-s;return document.body.removeChild(e),{height:i}}))}}const j="prxy",I="conf",M="mask",$="hght";let B;const A={enabled:!0,className:"caroucssel-mask",tagName:"div"};class U{constructor(t={}){s(this,I,Object.assign(Object.assign({},A),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,M))&&void 0!==t?t:null}init(t){s(this,j,t),B=null!=B?B:new k,this._render()}destroy(){this._remove(),o(this)}update(e){switch(e.type){case t.UpdateType.RESIZE:case t.UpdateType.FORCED:i(this,$),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:i}=n(this,I);if(!t)return;const o=n(this,j).el;let{height:r}=B.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,M,(()=>{var t;const n=document.createElement(i);return n.className=e,n.style.overflow="hidden",n.style.height="100%",null===(t=o.parentNode)||void 0===t||t.insertBefore(n,o),n.appendChild(o),n}));r!==n(this,$)&&(s(this,$,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:s}=n(this,j),i=n(this,M);null===(t=null==i?void 0:i.parentNode)||void 0===t||t.insertBefore(s,i),null===(e=null==i?void 0:i.parentNode)||void 0===e||e.removeChild(i),s.removeAttribute("style")}}const P="inst",D="feat";function z(t){return n(t,P)}class W{constructor(t,e){s(this,P,t),s(this,D,e)}get id(){return z(this).id}get el(){return z(this).el}get mask(){return z(this).mask}get index(){return z(this).index}set index(t){z(this).index=t}get items(){return z(this).items}get pages(){return z(this).pages}get pageIndex(){return z(this).pageIndex}update(e){var s;z(this).update(),(s=this,n(s,D)).forEach((n=>{n!==e&&n.update({type:t.UpdateType.FEATURE})}))}}function F(t,e){let n=null;return(...s)=>{null!==n&&clearTimeout(n),n=setTimeout((()=>t(...s)),e)}}const H=/^caroucssel-[0-9]*$/,G="scroll",Z="resize",q="element",V="config",X="index",J="items",K="pages",Q="page-index",Y="mask",tt="feautres",et=.25,nt=/^(link|meta|noscript|script|style|title)$/i;let st=0;const it={features:[],filterItem:()=>!0,onScroll:()=>{}};return t.Buttons=class{constructor(t={}){s(this,a,Object.assign(Object.assign({},c),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:s,mask:i,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=i?i:s,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:s.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:s.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var s,{handler:i}=e,o=function(t,e){var n={};for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&e.indexOf(s)<0&&(n[s]=t[s]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(s=Object.getOwnPropertySymbols(t);i{var e;null==t||t.removeEventListener(d,this._onPrev),null==t||t.removeEventListener(d,this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s-1]||e[0];t.index=i}_onNext(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s+1]||e[e.length-1];t.index=i}},t.Carousel=class{static resetInstanceCount(){}constructor(e,n={}){if(this.behavior=t.ScrollBehavior.AUTO,!(e&&e instanceof Element))throw new Error(`Carousel needs a dom element but "${typeof e}" was passed.`);s(this,q,e),st++,e.id=e.id||`caroucssel-${st}`,s(this,"id",e.id);const i=Object.assign(Object.assign({},it),n);s(this,V,i);let o=null,r=[...i.features];const l=i.features.findIndex((t=>t instanceof U));l>-1&&([o]=r.splice(l,1)),null!=o||(o=new U),r=r.filter((t=>!(t instanceof U))),r=[o,...r],s(this,Y,o);const a=new W(this,r);switch(s(this,"proxy",a),s(this,tt,r),r.forEach((t=>t.init(a))),!0){case Array.isArray(n.index):this.index=n.index;break;case!isNaN(n.index):this.index=[n.index]}this.behavior=t.ScrollBehavior.SMOOTH,this._onScroll=F(this._onScroll.bind(this),45),this._onResize=F(this._onResize.bind(this),25),e.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}get el(){return n(this,q)}get mask(){var t;return null!==(t=n(this,Y).el)&&void 0!==t?t:null}get id(){return n(this,"id")}get index(){return n(this,X,(()=>{const{el:t,items:e}=this,{length:n}=e,{clientWidth:s}=t,i=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=s&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,items:s}=this,{length:o}=s;if(!Array.isArray(t)||!t.length)return;let r=t[0]||0;r=Math.max(Math.min(r,o-1),0);const{scrollLeft:l}=n,a=l,h={left:s[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(i(this,X),n.scrollTo(Object.assign(Object.assign({},h),{behavior:e})))}get items(){return n(this,J,(()=>{const{filterItem:t}=n(this,V),{el:e}=this;return Array.from(e.children).filter((t=>!nt.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return n(this,K,(()=>{const{el:t,items:e}=this,{clientWidth:n}=t;if(0===n)return e.map(((t,e)=>[e]));let s=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:s}=t;return{left:n,width:s,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:i}=t,o=s[s.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===s[0]&&(l=0);let a=Math.floor((e-l+.75*i)/n);for(;a>0;)s.push([]),a--;s[s.length-1].push(t)})),s=s.filter((t=>0!==t.length)),s.map((t=>t.map((({index:t})=>t))))}))}get pageIndex(){return n(this,Q,(()=>{const{el:t,items:e,index:n,pages:s}=this,i=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:s,right:r}=e[n].getBoundingClientRect();return s=Math.round(s-i),r=Math.round(r-i),s<0||o{const s=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-s}))[0];return s.findIndex((t=>t.includes(l)))}))}destroy(){const{el:t}=this;H.test(t.id)&&t.removeAttribute("id");n(this,tt).forEach((t=>t.destroy())),t.removeEventListener(G,this._onScroll),window.removeEventListener(Z,this._onResize),o(this)}update(){i(this,X),i(this,J),i(this,K),i(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.FORCED})))}_onScroll(e){i(this,X),i(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.SCROLL})));const{index:s}=this;n(this,V).onScroll({index:s,type:G,target:this,originalEvent:e})}_onResize(){i(this,K),i(this,X),i(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.RESIZE})))}},t.Mask=U,t.Mouse=class{constructor(t={}){s(this,p,Object.assign(Object.assign({},E),t)),this._onStart=this._onStart.bind(this),this._onDrag=this._onDrag.bind(this),this._onEnd=this._onEnd.bind(this)}get name(){return"buildin:mouse"}init(t){s(this,u,t);const e=n(this,p),{el:i}=t;i.style.cursor=e.indicator?y:"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const s=n(this,f);clearTimeout(s);const i=n(this,p),o=n(this,u),r=o.el;n(this,m,(()=>r.scrollLeft)),n(this,g,(()=>_(t))),n(this,v,(()=>o.pageIndex)),r.style.userSelect="none",r.style.scrollBehavior="auto",r.style.scrollSnapType="none",r.style.cursor=i.indicator?"grabbing":"",window.addEventListener(b,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=i.onStart)||void 0===e||e.call(i,{originalEvent:t})}_onDrag(t){var e,s,i;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,m))&&void 0!==e?e:0,a=(null!==(s=n(this,g))&&void 0!==s?s:0)-_(t);r.scrollLeft=l+a,null===(i=o.onDrag)||void 0===i||i.call(o,{originalEvent:t})}_onEnd(t){var e,o,r,l;const a=n(this,u),h=n(this,p),d=null!==(e=n(this,m))&&void 0!==e?e:0,c=null!==(o=n(this,v))&&void 0!==o?o:0;i(this,m),i(this,g),i(this,v);const _=a.el,E=Math.min(Math.max(100,.25*_.clientWidth),250),w=_.scrollLeft-d,N=Math.abs(w);_.style.removeProperty("user-select"),_.style.removeProperty("scroll-behavior"),_.style.cursor=h.indicator?y:"";let O=a.index;if(N>E){const t=w/N,e=Math.max(c+t,0);O=null!==(r=a.pages[e])&&void 0!==r?r:O}window.requestAnimationFrame((()=>{a.index=O}));const C=window.setTimeout((()=>{_.style.removeProperty("scroll-snap-type")}),1e3);s(this,f,C),window.removeEventListener(b,this._onDrag),window.removeEventListener(x,this._onEnd),null===(l=h.onEnd)||void 0===l||l.call(h,{originalEvent:t})}},t.Pagination=class{constructor(t={}){s(this,C,Object.assign(Object.assign({},T),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,O,t),this._add()}destroy(){this._remove(),o(this)}update(e){if(e.type===t.UpdateType.SCROLL)this._update();else this._remove(),this._add()}_add(){var t;const e=n(this,O),i=n(this,C),{el:o,mask:l,pages:a}=e,h=null!=l?l:o;if(a.length<2)return;const{template:d,className:c,label:u,title:p}=i,v=r(d,{label:u,title:p,pages:a,className:c,controls:o.id});if(!v)return;const g=Array.from(v.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=h.parentNode)||void 0===t||t.appendChild(v),s(this,S,v),s(this,L,g),this._update()}_update(){const t=n(this,O),e=n(this,L),{pageIndex:s}=t;null==e||e.forEach(((t,e)=>t.disabled=e===s))}_remove(){var t;const e=n(this,S),s=n(this,L);null==s||s.forEach((t=>{var e;t.removeEventListener("click",this._onClick),null===(e=t.parentNode)||void 0===e||e.removeChild(t)})),null===(t=null==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),i(this,L),i(this,S)}_onClick(t){const e=n(this,O),s=n(this,L);if(!s)return;const i=t.currentTarget,o=s.indexOf(i);e.index=e.pages[o]}},t.version="1.1.6",t}({}); +var caroucssel=function(t){"use strict";"function"==typeof SuppressedError&&SuppressedError;const e=new WeakMap;function n(t,n,s){const i=e.get(t)||new Map;if(i.has(n))return i.get(n);if(!s)return;const o=s();return i.set(n,o),e.set(t,i),o}function s(t,n,s){const i=e.get(t)||new Map;i.set(n,s),e.set(t,i)}function i(t,n){const s=e.get(t);s&&s.has(n)&&s.delete(n)}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const s=n.firstElementChild;return s||null}const l="prxy",a="conf",h="btns",d="click",c={template:({className:t,controls:e,label:n,title:s})=>`\n\t\t\n\t`,className:"button",nextClassName:"is-next",nextLabel:"Next",nextTitle:"Go to next",previousClassName:"is-previous",previousLabel:"Previous",previousTitle:"Go to previous"};const u="prxy",p="conf",v="pgidx",g="posx",m="scrl",f="time",y="grab",b="mousemove",x="mouseup";function _(t){return t instanceof MouseEvent?t.clientX:0}const E={indicator:!1};var w,N;t.UpdateType=void 0,(w=t.UpdateType||(t.UpdateType={})).SCROLL="scroll",w.RESIZE="resize",w.FORCED="forced",w.FEATURE="feature",t.ScrollBehavior=void 0,(N=t.ScrollBehavior||(t.ScrollBehavior={})).AUTO="auto",N.SMOOTH="smooth";const O="prxy",C="conf",S="pags",L="btns",T={template:({className:t,controls:e,pages:n,label:s,title:i})=>`\n\t\t
    \n\t\t\t${n.map(((t,o)=>{const r={index:o,page:t,pages:n},l=s(r),a=i(r);return`
  • \n\t\t\t\t\t\n\t\t\t\t
    • `})).join("")}\n\t\t
\n\t`,className:"pagination",label:({index:t})=>`${t+1}`,title:({index:t})=>`Go to ${t+1}. page`};const R="dims";class k{constructor(){window.addEventListener("resize",(()=>{i(this,R)}))}get dimensions(){return n(this,R,(()=>{const t=document.createElement("div"),e=document.createElement("div");document.body.appendChild(e),e.style.position="absolute",e.style.top="0px",e.style.left="0px",e.style.visibility="hidden",e.appendChild(t),t.style.width="200px",t.style.height="100%",e.style.width="150px",e.style.height="200px",e.style.overflow="hidden";const n=t.offsetHeight;e.style.overflow="scroll";let s=t.offsetHeight;s=n===s?e.clientHeight:s;const i=n-s;return document.body.removeChild(e),{height:i}}))}}const j="prxy",I="conf",M="mask",$="hght";let B;const A={enabled:!0,className:"caroucssel-mask",tagName:"div"};class U{constructor(t={}){s(this,I,Object.assign(Object.assign({},A),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,M))&&void 0!==t?t:null}init(t){s(this,j,t),B=null!=B?B:new k,this._render()}destroy(){this._remove(),o(this)}update(e){switch(e.type){case t.UpdateType.RESIZE:case t.UpdateType.FORCED:i(this,$),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:i}=n(this,I);if(!t)return;const o=n(this,j).el;let{height:r}=B.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,M,(()=>{var t;const n=document.createElement(i);return n.className=e,n.style.overflow="hidden",n.style.height="100%",null===(t=o.parentNode)||void 0===t||t.insertBefore(n,o),n.appendChild(o),n}));r!==n(this,$)&&(s(this,$,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:s}=n(this,j),i=n(this,M);null===(t=null==i?void 0:i.parentNode)||void 0===t||t.insertBefore(s,i),null===(e=null==i?void 0:i.parentNode)||void 0===e||e.removeChild(i),s.removeAttribute("style")}}const P="inst",D="feat";function z(t){return n(t,P)}class W{constructor(t,e){s(this,P,t),s(this,D,e)}get id(){return z(this).id}get el(){return z(this).el}get mask(){return z(this).mask}get index(){return z(this).index}set index(t){z(this).index=t}get items(){return z(this).items}get pages(){return z(this).pages}get pageIndex(){return z(this).pageIndex}update(e){var s;z(this).update(),(s=this,n(s,D)).forEach((n=>{n!==e&&n.update({type:t.UpdateType.FEATURE})}))}}function F(t,e){let n=null;return(...s)=>{null!==n&&clearTimeout(n),n=setTimeout((()=>t(...s)),e)}}const H=/^caroucssel-[0-9]*$/,G="scroll",Z="resize",q="element",V="config",X="index",J="items",K="pages",Q="page-index",Y="mask",tt="feautres",et=.25,nt=/^(link|meta|noscript|script|style|title)$/i;let st=0;const it={features:[],filterItem:()=>!0,onScroll:()=>{}};return t.Buttons=class{constructor(t={}){s(this,a,Object.assign(Object.assign({},c),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:s,mask:i,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=i?i:s,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:s.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:s.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var s,{handler:i}=e,o=function(t,e){var n={};for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&e.indexOf(s)<0&&(n[s]=t[s]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(s=Object.getOwnPropertySymbols(t);i{var e;null==t||t.removeEventListener(d,this._onPrev),null==t||t.removeEventListener(d,this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s-1]||e[0];t.index=i}_onNext(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s+1]||e[e.length-1];t.index=i}},t.Carousel=class{static resetInstanceCount(){}constructor(e,n={}){if(this.behavior=t.ScrollBehavior.AUTO,!(e&&e instanceof Element))throw new Error(`Carousel needs a dom element but "${typeof e}" was passed.`);s(this,q,e),st++,e.id=e.id||`caroucssel-${st}`,s(this,"id",e.id);const i=Object.assign(Object.assign({},it),n);s(this,V,i);let o=null,r=[...i.features];const l=i.features.findIndex((t=>t instanceof U));l>-1&&([o]=r.splice(l,1)),null!=o||(o=new U),r=r.filter((t=>!(t instanceof U))),r=[o,...r],s(this,Y,o);const a=new W(this,r);switch(s(this,"proxy",a),s(this,tt,r),r.forEach((t=>t.init(a))),!0){case Array.isArray(n.index):this.index=n.index;break;case!isNaN(n.index):this.index=[n.index]}this.behavior=t.ScrollBehavior.SMOOTH,this._onScroll=F(this._onScroll.bind(this),45),this._onResize=F(this._onResize.bind(this),25),e.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}get el(){return n(this,q)}get mask(){var t;return null!==(t=n(this,Y).el)&&void 0!==t?t:null}get id(){return n(this,"id")}get index(){return n(this,X,(()=>{const{el:t,items:e}=this,{length:n}=e,{clientWidth:s}=t,i=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=s&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,items:s}=this,{length:o}=s;if(!Array.isArray(t)||!t.length)return;let r=t[0]||0;r=Math.max(Math.min(r,o-1),0);const{scrollLeft:l}=n,a=l,h={left:s[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(i(this,X),n.scrollTo(Object.assign(Object.assign({},h),{behavior:e})))}get items(){return n(this,J,(()=>{const{filterItem:t}=n(this,V),{el:e}=this;return Array.from(e.children).filter((t=>!nt.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return n(this,K,(()=>{const{el:t,items:e}=this,{clientWidth:n}=t;if(0===n)return e.map(((t,e)=>[e]));let s=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:s}=t;return{left:n,width:s,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:i}=t,o=s[s.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===s[0]&&(l=0);let a=Math.floor((e-l+.75*i)/n);for(;a>0;)s.push([]),a--;s[s.length-1].push(t)})),s=s.filter((t=>0!==t.length)),s.map((t=>t.map((({index:t})=>t))))}))}get pageIndex(){return n(this,Q,(()=>{const{el:t,items:e,index:n,pages:s}=this,i=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:s,right:r}=e[n].getBoundingClientRect();return s=Math.round(s-i),r=Math.round(r-i),s<0||o{const s=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-s}))[0];return s.findIndex((t=>t.includes(l)))}))}destroy(){const{el:t}=this;H.test(t.id)&&t.removeAttribute("id");n(this,tt).forEach((t=>t.destroy())),t.removeEventListener(G,this._onScroll),window.removeEventListener(Z,this._onResize),o(this)}update(){i(this,X),i(this,J),i(this,K),i(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.FORCED})))}_onScroll(e){i(this,X),i(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.SCROLL})));const{index:s}=this;n(this,V).onScroll({index:s,type:G,target:this,originalEvent:e})}_onResize(){i(this,K),i(this,X),i(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.RESIZE})))}},t.Mask=U,t.Mouse=class{constructor(t={}){s(this,p,Object.assign(Object.assign({},E),t)),this._onStart=this._onStart.bind(this),this._onDrag=this._onDrag.bind(this),this._onEnd=this._onEnd.bind(this)}get name(){return"buildin:mouse"}init(t){s(this,u,t);const e=n(this,p),{el:i}=t;i.style.cursor=e.indicator?y:"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const s=n(this,f);clearTimeout(s);const i=n(this,p),o=n(this,u),r=o.el;n(this,m,(()=>r.scrollLeft)),n(this,g,(()=>_(t))),n(this,v,(()=>o.pageIndex)),r.style.userSelect="none",r.style.scrollBehavior="auto",r.style.scrollSnapType="none",r.style.cursor=i.indicator?"grabbing":"",window.addEventListener(b,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=i.onStart)||void 0===e||e.call(i,{originalEvent:t})}_onDrag(t){var e,s,i;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,m))&&void 0!==e?e:0,a=(null!==(s=n(this,g))&&void 0!==s?s:0)-_(t);r.scrollLeft=l+a,null===(i=o.onDrag)||void 0===i||i.call(o,{originalEvent:t})}_onEnd(t){var e,o,r,l;const a=n(this,u),h=n(this,p),d=null!==(e=n(this,m))&&void 0!==e?e:0,c=null!==(o=n(this,v))&&void 0!==o?o:0;i(this,m),i(this,g),i(this,v);const _=a.el,E=Math.min(Math.max(100,.25*_.clientWidth),250),w=_.scrollLeft-d,N=Math.abs(w);_.style.removeProperty("user-select"),_.style.removeProperty("scroll-behavior"),_.style.cursor=h.indicator?y:"";let O=a.index;if(N>E){const t=w/N,e=Math.max(c+t,0);O=null!==(r=a.pages[e])&&void 0!==r?r:O}window.requestAnimationFrame((()=>{a.index=O}));const C=window.setTimeout((()=>{_.style.removeProperty("scroll-snap-type")}),1e3);s(this,f,C),window.removeEventListener(b,this._onDrag),window.removeEventListener(x,this._onEnd),null===(l=h.onEnd)||void 0===l||l.call(h,{originalEvent:t})}},t.Pagination=class{constructor(t={}){s(this,C,Object.assign(Object.assign({},T),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,O,t),this._add()}destroy(){this._remove(),o(this)}update(e){if(e.type===t.UpdateType.SCROLL)this._update();else this._remove(),this._add()}_add(){var t;const e=n(this,O),i=n(this,C),{el:o,mask:l,pages:a}=e,h=null!=l?l:o;if(a.length<2)return;const{template:d,className:c,label:u,title:p}=i,v=r(d,{label:u,title:p,pages:a,className:c,controls:o.id});if(!v)return;const g=Array.from(v.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=h.parentNode)||void 0===t||t.appendChild(v),s(this,S,v),s(this,L,g),this._update()}_update(){const t=n(this,O),e=n(this,L),{pageIndex:s}=t;null==e||e.forEach(((t,e)=>t.disabled=e===s))}_remove(){var t;const e=n(this,S),s=n(this,L);null==s||s.forEach((t=>{var e;t.removeEventListener("click",this._onClick),null===(e=t.parentNode)||void 0===e||e.removeChild(t)})),null===(t=null==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),i(this,L),i(this,S)}_onClick(t){const e=n(this,O),s=n(this,L);if(!s)return;const i=t.currentTarget,o=s.indexOf(i);e.index=e.pages[o]}},t.version="1.1.7",t}({}); diff --git a/dist/formats/umd/caroucssel.js b/dist/formats/umd/caroucssel.js index 45579e21..4750f505 100644 --- a/dist/formats/umd/caroucssel.js +++ b/dist/formats/umd/caroucssel.js @@ -975,5 +975,5 @@ } } _exports.Carousel = Carousel; - const version = _exports.version = '1.1.6'; + const version = _exports.version = '1.1.7'; }); diff --git a/dist/formats/umd/caroucssel.min.js b/dist/formats/umd/caroucssel.min.js index bf30d4f7..020789b8 100644 --- a/dist/formats/umd/caroucssel.min.js +++ b/dist/formats/umd/caroucssel.min.js @@ -1 +1 @@ -!function(t,e){if("function"==typeof define&&define.amd)define("caroucssel",["exports"],e);else if("undefined"!=typeof exports)e(exports);else{var n={exports:{}};e(n.exports),t.caroucssel=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(t){Object.defineProperty(t,"__esModule",{value:!0}),t.version=t.UpdateType=t.ScrollBehavior=t.Pagination=t.Mouse=t.Mask=t.Carousel=t.Buttons=void 0,"function"==typeof SuppressedError&&SuppressedError;const e=new WeakMap;function n(t,n,s){const i=e.get(t)||new Map;if(i.has(n))return i.get(n);if(!s)return;const o=s();return i.set(n,o),e.set(t,i),o}function s(t,n,s){const i=e.get(t)||new Map;i.set(n,s),e.set(t,i)}function i(t,n){const s=e.get(t);s&&s.has(n)&&s.delete(n)}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const s=n.firstElementChild;return s||null}const l="prxy",a="conf",h="btns",d="click",c={template:t=>{let{className:e,controls:n,label:s,title:i}=t;return`\n\t\t\n\t`},className:"button",nextClassName:"is-next",nextLabel:"Next",nextTitle:"Go to next",previousClassName:"is-previous",previousLabel:"Previous",previousTitle:"Go to previous"};t.Buttons=class{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,a,Object.assign(Object.assign({},c),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:s,mask:i,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=i?i:s,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:s.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:s.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var s,{handler:i}=e,o=function(t,e){var n={};for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&e.indexOf(s)<0&&(n[s]=t[s]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(s=Object.getOwnPropertySymbols(t);i{var e;null==t||t.removeEventListener(d,this._onPrev),null==t||t.removeEventListener(d,this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s-1]||e[0];t.index=i}_onNext(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s+1]||e[e.length-1];t.index=i}};const u="prxy",p="conf",g="pgidx",v="posx",f="scrl",m="time",b="grab",y="mousemove",x="mouseup";function _(t){return t instanceof MouseEvent?t.clientX:0}const E={indicator:!1};var w,N;t.Mouse=class{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,p,Object.assign(Object.assign({},E),t)),this._onStart=this._onStart.bind(this),this._onDrag=this._onDrag.bind(this),this._onEnd=this._onEnd.bind(this)}get name(){return"buildin:mouse"}init(t){s(this,u,t);const e=n(this,p),{el:i}=t;i.style.cursor=e.indicator?b:"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const s=n(this,m);clearTimeout(s);const i=n(this,p),o=n(this,u),r=o.el;n(this,f,(()=>r.scrollLeft)),n(this,v,(()=>_(t))),n(this,g,(()=>o.pageIndex)),r.style.userSelect="none",r.style.scrollBehavior="auto",r.style.scrollSnapType="none",r.style.cursor=i.indicator?"grabbing":"",window.addEventListener(y,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=i.onStart)||void 0===e||e.call(i,{originalEvent:t})}_onDrag(t){var e,s,i;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,f))&&void 0!==e?e:0,a=(null!==(s=n(this,v))&&void 0!==s?s:0)-_(t);r.scrollLeft=l+a,null===(i=o.onDrag)||void 0===i||i.call(o,{originalEvent:t})}_onEnd(t){var e,o,r,l;const a=n(this,u),h=n(this,p),d=null!==(e=n(this,f))&&void 0!==e?e:0,c=null!==(o=n(this,g))&&void 0!==o?o:0;i(this,f),i(this,v),i(this,g);const _=a.el,E=Math.min(Math.max(100,.25*_.clientWidth),250),w=_.scrollLeft-d,N=Math.abs(w);_.style.removeProperty("user-select"),_.style.removeProperty("scroll-behavior"),_.style.cursor=h.indicator?b:"";let O=a.index;if(N>E){const t=w/N,e=Math.max(c+t,0);O=null!==(r=a.pages[e])&&void 0!==r?r:O}window.requestAnimationFrame((()=>{a.index=O}));const C=window.setTimeout((()=>{_.style.removeProperty("scroll-snap-type")}),1e3);s(this,m,C),window.removeEventListener(y,this._onDrag),window.removeEventListener(x,this._onEnd),null===(l=h.onEnd)||void 0===l||l.call(h,{originalEvent:t})}},function(t){t.SCROLL="scroll",t.RESIZE="resize",t.FORCED="forced",t.FEATURE="feature"}(w||(t.UpdateType=w={})),function(t){t.AUTO="auto",t.SMOOTH="smooth"}(N||(t.ScrollBehavior=N={}));const O="prxy",C="conf",L="pags",S="btns",k={template:t=>{let{className:e,controls:n,pages:s,label:i,title:o}=t;return`\n\t\t
    \n\t\t\t${s.map(((t,e)=>{const r={index:e,page:t,pages:s},l=i(r),a=o(r);return`
  • \n\t\t\t\t\t\n\t\t\t\t
    • `})).join("")}\n\t\t
\n\t`},className:"pagination",label:t=>{let{index:e}=t;return`${e+1}`},title:t=>{let{index:e}=t;return`Go to ${e+1}. page`}};t.Pagination=class{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,C,Object.assign(Object.assign({},k),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,O,t),this._add()}destroy(){this._remove(),o(this)}update(t){if(t.type===w.SCROLL)this._update();else this._remove(),this._add()}_add(){var t;const e=n(this,O),i=n(this,C),{el:o,mask:l,pages:a}=e,h=null!=l?l:o;if(a.length<2)return;const{template:d,className:c,label:u,title:p}=i,g=r(d,{label:u,title:p,pages:a,className:c,controls:o.id});if(!g)return;const v=Array.from(g.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=h.parentNode)||void 0===t||t.appendChild(g),s(this,L,g),s(this,S,v),this._update()}_update(){const t=n(this,O),e=n(this,S),{pageIndex:s}=t;null==e||e.forEach(((t,e)=>t.disabled=e===s))}_remove(){var t;const e=n(this,L),s=n(this,S);null==s||s.forEach((t=>{var e;t.removeEventListener("click",this._onClick),null===(e=t.parentNode)||void 0===e||e.removeChild(t)})),null===(t=null==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),i(this,S),i(this,L)}_onClick(t){const e=n(this,O),s=n(this,S);if(!s)return;const i=t.currentTarget,o=s.indexOf(i);e.index=e.pages[o]}};const R="dims";class T{constructor(){window.addEventListener("resize",(()=>{i(this,R)}))}get dimensions(){return n(this,R,(()=>{const t=document.createElement("div"),e=document.createElement("div");document.body.appendChild(e),e.style.position="absolute",e.style.top="0px",e.style.left="0px",e.style.visibility="hidden",e.appendChild(t),t.style.width="200px",t.style.height="100%",e.style.width="150px",e.style.height="200px",e.style.overflow="hidden";const n=t.offsetHeight;e.style.overflow="scroll";let s=t.offsetHeight;s=n===s?e.clientHeight:s;const i=n-s;return document.body.removeChild(e),{height:i}}))}}const M="prxy",j="conf",I="mask",$="hght";let A;const B={enabled:!0,className:"caroucssel-mask",tagName:"div"};class P{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,j,Object.assign(Object.assign({},B),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,I))&&void 0!==t?t:null}init(t){s(this,M,t),A=null!=A?A:new T,this._render()}destroy(){this._remove(),o(this)}update(t){switch(t.type){case w.RESIZE:case w.FORCED:i(this,$),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:i}=n(this,j);if(!t)return;const o=n(this,M).el;let{height:r}=A.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,I,(()=>{var t;const n=document.createElement(i);return n.className=e,n.style.overflow="hidden",n.style.height="100%",null===(t=o.parentNode)||void 0===t||t.insertBefore(n,o),n.appendChild(o),n}));r!==n(this,$)&&(s(this,$,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:s}=n(this,M),i=n(this,I);null===(t=null==i?void 0:i.parentNode)||void 0===t||t.insertBefore(s,i),null===(e=null==i?void 0:i.parentNode)||void 0===e||e.removeChild(i),s.removeAttribute("style")}}t.Mask=P;const D="inst",z="feat";function W(t){return n(t,D)}class F{constructor(t,e){s(this,D,t),s(this,z,e)}get id(){return W(this).id}get el(){return W(this).el}get mask(){return W(this).mask}get index(){return W(this).index}set index(t){W(this).index=t}get items(){return W(this).items}get pages(){return W(this).pages}get pageIndex(){return W(this).pageIndex}update(t){var e;W(this).update(),(e=this,n(e,z)).forEach((e=>{e!==t&&e.update({type:w.FEATURE})}))}}function H(t,e){let n=null;return function(){for(var s=arguments.length,i=new Array(s),o=0;ot(...i)),e)}}const U=/^caroucssel-[0-9]*$/,G="scroll",Z="resize",q="element",V="config",X="index",J="items",K="pages",Q="page-index",Y="mask",tt="feautres",et=.25,nt=/^(link|meta|noscript|script|style|title)$/i;let st=0;const it={features:[],filterItem:()=>!0,onScroll:()=>{}};t.Carousel=class{static resetInstanceCount(){}constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.behavior=N.AUTO,!(t&&t instanceof Element))throw new Error(`Carousel needs a dom element but "${typeof t}" was passed.`);s(this,q,t),st++,t.id=t.id||`caroucssel-${st}`,s(this,"id",t.id);const n=Object.assign(Object.assign({},it),e);s(this,V,n);let i=null,o=[...n.features];const r=n.features.findIndex((t=>t instanceof P));r>-1&&([i]=o.splice(r,1)),null!=i||(i=new P),o=o.filter((t=>!(t instanceof P))),o=[i,...o],s(this,Y,i);const l=new F(this,o);switch(s(this,"proxy",l),s(this,tt,o),o.forEach((t=>t.init(l))),!0){case Array.isArray(e.index):this.index=e.index;break;case!isNaN(e.index):this.index=[e.index]}this.behavior=N.SMOOTH,this._onScroll=H(this._onScroll.bind(this),45),this._onResize=H(this._onResize.bind(this),25),t.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}get el(){return n(this,q)}get mask(){var t;return null!==(t=n(this,Y).el)&&void 0!==t?t:null}get id(){return n(this,"id")}get index(){return n(this,X,(()=>{const{el:t,items:e}=this,{length:n}=e,{clientWidth:s}=t,i=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=s&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,items:s}=this,{length:o}=s;if(!Array.isArray(t)||!t.length)return;let r=t[0]||0;r=Math.max(Math.min(r,o-1),0);const{scrollLeft:l}=n,a=l,h={left:s[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(i(this,X),n.scrollTo(Object.assign(Object.assign({},h),{behavior:e})))}get items(){return n(this,J,(()=>{const{filterItem:t}=n(this,V),{el:e}=this;return Array.from(e.children).filter((t=>!nt.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return n(this,K,(()=>{const{el:t,items:e}=this,{clientWidth:n}=t;if(0===n)return e.map(((t,e)=>[e]));let s=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:s}=t;return{left:n,width:s,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:i}=t,o=s[s.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===s[0]&&(l=0);let a=Math.floor((e-l+.75*i)/n);for(;a>0;)s.push([]),a--;s[s.length-1].push(t)})),s=s.filter((t=>0!==t.length)),s.map((t=>t.map((t=>{let{index:e}=t;return e}))))}))}get pageIndex(){return n(this,Q,(()=>{const{el:t,items:e,index:n,pages:s}=this,i=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:s,right:r}=e[n].getBoundingClientRect();return s=Math.round(s-i),r=Math.round(r-i),s<0||o{const s=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-s}))[0];return s.findIndex((t=>t.includes(l)))}))}destroy(){const{el:t}=this;U.test(t.id)&&t.removeAttribute("id");n(this,tt).forEach((t=>t.destroy())),t.removeEventListener(G,this._onScroll),window.removeEventListener(Z,this._onResize),o(this)}update(){i(this,X),i(this,J),i(this,K),i(this,Q);n(this,tt).forEach((t=>t.update({type:w.FORCED})))}_onScroll(t){i(this,X),i(this,Q);n(this,tt).forEach((t=>t.update({type:w.SCROLL})));const{index:e}=this;n(this,V).onScroll({index:e,type:G,target:this,originalEvent:t})}_onResize(){i(this,K),i(this,X),i(this,Q);n(this,tt).forEach((t=>t.update({type:w.RESIZE})))}};t.version="1.1.6"})); +!function(t,e){if("function"==typeof define&&define.amd)define("caroucssel",["exports"],e);else if("undefined"!=typeof exports)e(exports);else{var n={exports:{}};e(n.exports),t.caroucssel=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(t){Object.defineProperty(t,"__esModule",{value:!0}),t.version=t.UpdateType=t.ScrollBehavior=t.Pagination=t.Mouse=t.Mask=t.Carousel=t.Buttons=void 0,"function"==typeof SuppressedError&&SuppressedError;const e=new WeakMap;function n(t,n,s){const i=e.get(t)||new Map;if(i.has(n))return i.get(n);if(!s)return;const o=s();return i.set(n,o),e.set(t,i),o}function s(t,n,s){const i=e.get(t)||new Map;i.set(n,s),e.set(t,i)}function i(t,n){const s=e.get(t);s&&s.has(n)&&s.delete(n)}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const s=n.firstElementChild;return s||null}const l="prxy",a="conf",h="btns",d="click",c={template:t=>{let{className:e,controls:n,label:s,title:i}=t;return`\n\t\t\n\t`},className:"button",nextClassName:"is-next",nextLabel:"Next",nextTitle:"Go to next",previousClassName:"is-previous",previousLabel:"Previous",previousTitle:"Go to previous"};t.Buttons=class{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,a,Object.assign(Object.assign({},c),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:s,mask:i,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=i?i:s,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:s.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:s.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var s,{handler:i}=e,o=function(t,e){var n={};for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&e.indexOf(s)<0&&(n[s]=t[s]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(s=Object.getOwnPropertySymbols(t);i{var e;null==t||t.removeEventListener(d,this._onPrev),null==t||t.removeEventListener(d,this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s-1]||e[0];t.index=i}_onNext(){const t=n(this,l),{pages:e,pageIndex:s}=t,i=e[s+1]||e[e.length-1];t.index=i}};const u="prxy",p="conf",g="pgidx",v="posx",f="scrl",m="time",b="grab",y="mousemove",x="mouseup";function _(t){return t instanceof MouseEvent?t.clientX:0}const E={indicator:!1};var w,N;t.Mouse=class{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,p,Object.assign(Object.assign({},E),t)),this._onStart=this._onStart.bind(this),this._onDrag=this._onDrag.bind(this),this._onEnd=this._onEnd.bind(this)}get name(){return"buildin:mouse"}init(t){s(this,u,t);const e=n(this,p),{el:i}=t;i.style.cursor=e.indicator?b:"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const s=n(this,m);clearTimeout(s);const i=n(this,p),o=n(this,u),r=o.el;n(this,f,(()=>r.scrollLeft)),n(this,v,(()=>_(t))),n(this,g,(()=>o.pageIndex)),r.style.userSelect="none",r.style.scrollBehavior="auto",r.style.scrollSnapType="none",r.style.cursor=i.indicator?"grabbing":"",window.addEventListener(y,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=i.onStart)||void 0===e||e.call(i,{originalEvent:t})}_onDrag(t){var e,s,i;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,f))&&void 0!==e?e:0,a=(null!==(s=n(this,v))&&void 0!==s?s:0)-_(t);r.scrollLeft=l+a,null===(i=o.onDrag)||void 0===i||i.call(o,{originalEvent:t})}_onEnd(t){var e,o,r,l;const a=n(this,u),h=n(this,p),d=null!==(e=n(this,f))&&void 0!==e?e:0,c=null!==(o=n(this,g))&&void 0!==o?o:0;i(this,f),i(this,v),i(this,g);const _=a.el,E=Math.min(Math.max(100,.25*_.clientWidth),250),w=_.scrollLeft-d,N=Math.abs(w);_.style.removeProperty("user-select"),_.style.removeProperty("scroll-behavior"),_.style.cursor=h.indicator?b:"";let O=a.index;if(N>E){const t=w/N,e=Math.max(c+t,0);O=null!==(r=a.pages[e])&&void 0!==r?r:O}window.requestAnimationFrame((()=>{a.index=O}));const C=window.setTimeout((()=>{_.style.removeProperty("scroll-snap-type")}),1e3);s(this,m,C),window.removeEventListener(y,this._onDrag),window.removeEventListener(x,this._onEnd),null===(l=h.onEnd)||void 0===l||l.call(h,{originalEvent:t})}},function(t){t.SCROLL="scroll",t.RESIZE="resize",t.FORCED="forced",t.FEATURE="feature"}(w||(t.UpdateType=w={})),function(t){t.AUTO="auto",t.SMOOTH="smooth"}(N||(t.ScrollBehavior=N={}));const O="prxy",C="conf",L="pags",S="btns",k={template:t=>{let{className:e,controls:n,pages:s,label:i,title:o}=t;return`\n\t\t
    \n\t\t\t${s.map(((t,e)=>{const r={index:e,page:t,pages:s},l=i(r),a=o(r);return`
  • \n\t\t\t\t\t\n\t\t\t\t
    • `})).join("")}\n\t\t
\n\t`},className:"pagination",label:t=>{let{index:e}=t;return`${e+1}`},title:t=>{let{index:e}=t;return`Go to ${e+1}. page`}};t.Pagination=class{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,C,Object.assign(Object.assign({},k),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,O,t),this._add()}destroy(){this._remove(),o(this)}update(t){if(t.type===w.SCROLL)this._update();else this._remove(),this._add()}_add(){var t;const e=n(this,O),i=n(this,C),{el:o,mask:l,pages:a}=e,h=null!=l?l:o;if(a.length<2)return;const{template:d,className:c,label:u,title:p}=i,g=r(d,{label:u,title:p,pages:a,className:c,controls:o.id});if(!g)return;const v=Array.from(g.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=h.parentNode)||void 0===t||t.appendChild(g),s(this,L,g),s(this,S,v),this._update()}_update(){const t=n(this,O),e=n(this,S),{pageIndex:s}=t;null==e||e.forEach(((t,e)=>t.disabled=e===s))}_remove(){var t;const e=n(this,L),s=n(this,S);null==s||s.forEach((t=>{var e;t.removeEventListener("click",this._onClick),null===(e=t.parentNode)||void 0===e||e.removeChild(t)})),null===(t=null==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),i(this,S),i(this,L)}_onClick(t){const e=n(this,O),s=n(this,S);if(!s)return;const i=t.currentTarget,o=s.indexOf(i);e.index=e.pages[o]}};const R="dims";class T{constructor(){window.addEventListener("resize",(()=>{i(this,R)}))}get dimensions(){return n(this,R,(()=>{const t=document.createElement("div"),e=document.createElement("div");document.body.appendChild(e),e.style.position="absolute",e.style.top="0px",e.style.left="0px",e.style.visibility="hidden",e.appendChild(t),t.style.width="200px",t.style.height="100%",e.style.width="150px",e.style.height="200px",e.style.overflow="hidden";const n=t.offsetHeight;e.style.overflow="scroll";let s=t.offsetHeight;s=n===s?e.clientHeight:s;const i=n-s;return document.body.removeChild(e),{height:i}}))}}const M="prxy",j="conf",I="mask",$="hght";let A;const B={enabled:!0,className:"caroucssel-mask",tagName:"div"};class P{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,j,Object.assign(Object.assign({},B),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,I))&&void 0!==t?t:null}init(t){s(this,M,t),A=null!=A?A:new T,this._render()}destroy(){this._remove(),o(this)}update(t){switch(t.type){case w.RESIZE:case w.FORCED:i(this,$),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:i}=n(this,j);if(!t)return;const o=n(this,M).el;let{height:r}=A.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,I,(()=>{var t;const n=document.createElement(i);return n.className=e,n.style.overflow="hidden",n.style.height="100%",null===(t=o.parentNode)||void 0===t||t.insertBefore(n,o),n.appendChild(o),n}));r!==n(this,$)&&(s(this,$,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:s}=n(this,M),i=n(this,I);null===(t=null==i?void 0:i.parentNode)||void 0===t||t.insertBefore(s,i),null===(e=null==i?void 0:i.parentNode)||void 0===e||e.removeChild(i),s.removeAttribute("style")}}t.Mask=P;const D="inst",z="feat";function W(t){return n(t,D)}class F{constructor(t,e){s(this,D,t),s(this,z,e)}get id(){return W(this).id}get el(){return W(this).el}get mask(){return W(this).mask}get index(){return W(this).index}set index(t){W(this).index=t}get items(){return W(this).items}get pages(){return W(this).pages}get pageIndex(){return W(this).pageIndex}update(t){var e;W(this).update(),(e=this,n(e,z)).forEach((e=>{e!==t&&e.update({type:w.FEATURE})}))}}function H(t,e){let n=null;return function(){for(var s=arguments.length,i=new Array(s),o=0;ot(...i)),e)}}const U=/^caroucssel-[0-9]*$/,G="scroll",Z="resize",q="element",V="config",X="index",J="items",K="pages",Q="page-index",Y="mask",tt="feautres",et=.25,nt=/^(link|meta|noscript|script|style|title)$/i;let st=0;const it={features:[],filterItem:()=>!0,onScroll:()=>{}};t.Carousel=class{static resetInstanceCount(){}constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.behavior=N.AUTO,!(t&&t instanceof Element))throw new Error(`Carousel needs a dom element but "${typeof t}" was passed.`);s(this,q,t),st++,t.id=t.id||`caroucssel-${st}`,s(this,"id",t.id);const n=Object.assign(Object.assign({},it),e);s(this,V,n);let i=null,o=[...n.features];const r=n.features.findIndex((t=>t instanceof P));r>-1&&([i]=o.splice(r,1)),null!=i||(i=new P),o=o.filter((t=>!(t instanceof P))),o=[i,...o],s(this,Y,i);const l=new F(this,o);switch(s(this,"proxy",l),s(this,tt,o),o.forEach((t=>t.init(l))),!0){case Array.isArray(e.index):this.index=e.index;break;case!isNaN(e.index):this.index=[e.index]}this.behavior=N.SMOOTH,this._onScroll=H(this._onScroll.bind(this),45),this._onResize=H(this._onResize.bind(this),25),t.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}get el(){return n(this,q)}get mask(){var t;return null!==(t=n(this,Y).el)&&void 0!==t?t:null}get id(){return n(this,"id")}get index(){return n(this,X,(()=>{const{el:t,items:e}=this,{length:n}=e,{clientWidth:s}=t,i=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=s&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,items:s}=this,{length:o}=s;if(!Array.isArray(t)||!t.length)return;let r=t[0]||0;r=Math.max(Math.min(r,o-1),0);const{scrollLeft:l}=n,a=l,h={left:s[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(i(this,X),n.scrollTo(Object.assign(Object.assign({},h),{behavior:e})))}get items(){return n(this,J,(()=>{const{filterItem:t}=n(this,V),{el:e}=this;return Array.from(e.children).filter((t=>!nt.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return n(this,K,(()=>{const{el:t,items:e}=this,{clientWidth:n}=t;if(0===n)return e.map(((t,e)=>[e]));let s=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:s}=t;return{left:n,width:s,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:i}=t,o=s[s.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===s[0]&&(l=0);let a=Math.floor((e-l+.75*i)/n);for(;a>0;)s.push([]),a--;s[s.length-1].push(t)})),s=s.filter((t=>0!==t.length)),s.map((t=>t.map((t=>{let{index:e}=t;return e}))))}))}get pageIndex(){return n(this,Q,(()=>{const{el:t,items:e,index:n,pages:s}=this,i=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:s,right:r}=e[n].getBoundingClientRect();return s=Math.round(s-i),r=Math.round(r-i),s<0||o{const s=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-s}))[0];return s.findIndex((t=>t.includes(l)))}))}destroy(){const{el:t}=this;U.test(t.id)&&t.removeAttribute("id");n(this,tt).forEach((t=>t.destroy())),t.removeEventListener(G,this._onScroll),window.removeEventListener(Z,this._onResize),o(this)}update(){i(this,X),i(this,J),i(this,K),i(this,Q);n(this,tt).forEach((t=>t.update({type:w.FORCED})))}_onScroll(t){i(this,X),i(this,Q);n(this,tt).forEach((t=>t.update({type:w.SCROLL})));const{index:e}=this;n(this,V).onScroll({index:e,type:G,target:this,originalEvent:t})}_onResize(){i(this,K),i(this,X),i(this,Q);n(this,tt).forEach((t=>t.update({type:w.RESIZE})))}};t.version="1.1.7"})); diff --git a/dist/index.d.ts b/dist/index.d.ts index f5c77ef8..721d1323 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -3,4 +3,4 @@ export { Mouse } from './features/mouse'; export { Pagination } from './features/pagination'; export { Carousel, Mask } from './carousel'; export * from './types'; -export declare const version = "1.1.6"; +export declare const version = "1.1.7"; diff --git a/dist/index.js b/dist/index.js index 542c79ea..17ee17b5 100644 --- a/dist/index.js +++ b/dist/index.js @@ -5,4 +5,4 @@ export { Carousel, Mask } from './carousel'; export * from './types'; // This will be replaced by the version from the package.json // See: scripts/build_post.js -export const version = '1.1.6'; +export const version = '1.1.7'; diff --git a/package-lock.json b/package-lock.json index bb88b52e..bbfc078b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "caroucssel", - "version": "1.1.6", + "version": "1.1.7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "caroucssel", - "version": "1.1.6", + "version": "1.1.7", "license": "MIT", "devDependencies": { "@babel/core": "^7.15.5", diff --git a/package.json b/package.json index c9f0aa7a..7259545f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "caroucssel", - "version": "1.1.6", + "version": "1.1.7", "description": "A lightweight dependency-free css carousel.", "module": "index.js", "main": "formats/cjs/caroucssel.js",