From 0b3b2bb9f895bba4c91e58b712c00a6f44f0b468 Mon Sep 17 00:00:00 2001 From: Norman Rusch Date: Sat, 19 Nov 2022 19:42:15 +0100 Subject: [PATCH] 1.1.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 | 196 +--------------------------- dist/formats/umd/caroucssel.min.js | 2 +- dist/index.d.ts | 2 +- dist/index.js | 2 +- package-lock.json | 4 +- package.json | 2 +- 10 files changed, 14 insertions(+), 202 deletions(-) diff --git a/dist/formats/cjs/caroucssel.js b/dist/formats/cjs/caroucssel.js index eb4e5465..377f0235 100644 --- a/dist/formats/cjs/caroucssel.js +++ b/dist/formats/cjs/caroucssel.js @@ -799,7 +799,7 @@ class Carousel { } } -const version = '1.1.0'; +const version = '1.1.1'; exports.Buttons = Buttons; exports.Carousel = Carousel; diff --git a/dist/formats/cjs/caroucssel.min.js b/dist/formats/cjs/caroucssel.min.js index 9d1e1f89..bd096802 100644 --- a/dist/formats/cjs/caroucssel.min.js +++ b/dist/formats/cjs/caroucssel.min.js @@ -1 +1 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=new WeakMap;function e(e,s,n){const i=t.get(e)||{};if(s in i)return i[s];if(!n)return;const r=n();return i[s]=r,t.set(e,i),r}function s(e,s,n){const i=t.get(e)||{};i[s]=n,t.set(e,i)}function n(e,s){const n=t.get(e);n&&(n[s]=void 0,delete n[s])}function i(e){t.delete(e)}function r(t,e){const s=document.createElement("div");s.innerHTML=t(e);const n=s.firstElementChild;return n||null}const o={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"};function l(t){return t instanceof MouseEvent?t.clientX:0}const a={indicator:!1};var d,h;exports.UpdateType=void 0,(d=exports.UpdateType||(exports.UpdateType={})).SCROLL="scroll",d.RESIZE="resize",d.FORCED="forced",d.FEATURE="feature",exports.ScrollBehavior=void 0,(h=exports.ScrollBehavior||(exports.ScrollBehavior={})).AUTO="auto",h.SMOOTH="smooth";const c={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`};class u{constructor(){window.addEventListener("resize",(()=>{n(this,"dims")}))}get dimensions(){return e(this,"dims",(()=>{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}}))}}let p;const g={enabled:!0,className:"caroucssel-mask",tagName:"div"};class m{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},g),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=e(this,"mask"))&&void 0!==t?t:null}init(t){s(this,"prxy",t),p=null!=p?p:new u,this._render()}destroy(){this._remove(),i(this)}update(t){switch(t.type){case exports.UpdateType.RESIZE:case exports.UpdateType.FORCED:n(this,"hght"),this._render();break;default:this._render()}}_render(){const{enabled:t,className:n,tagName:i}=e(this,"conf");if(!t)return;const r=e(this,"prxy").el;let{height:o}=p.dimensions;r.scrollWidth<=r.clientWidth&&(o=0),e(this,"mask",(()=>{var t;const e=document.createElement(i);return e.className=n,e.style.overflow="hidden",e.style.height="100%",null===(t=r.parentNode)||void 0===t||t.insertBefore(e,r),e.appendChild(r),e}));o!==e(this,"hght")&&(s(this,"hght",o),r.style.height=`calc(100% + ${o}px)`,r.style.marginBottom=-1*o+"px")}_remove(){var t,s;const{el:n}=e(this,"prxy"),i=e(this,"mask");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")}}function v(t){return e(t,"inst")}class f{constructor(t,e){s(this,"inst",t),s(this,"feat",e)}get id(){return v(this).id}get el(){return v(this).el}get mask(){return v(this).mask}get index(){return v(this).index}set index(t){v(this).index=t}get items(){return v(this).items}get pages(){return v(this).pages}get pageIndex(){return v(this).pageIndex}update(t){var s;v(this).update(),(s=this,e(s,"feat")).forEach((e=>{e!==t&&e.update({type:exports.UpdateType.FEATURE})}))}}function x(t,e){let s=null;return(...n)=>{null!==s&&clearTimeout(s),s=setTimeout((()=>t(...n)),e)}}const y=/^caroucssel-[0-9]*$/,b=/^(link|meta|noscript|script|style|title)$/i;let _=0;const E={features:[],filterItem:()=>!0,onScroll:()=>{}};exports.Buttons=class{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},o),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,"prxy",t),this._render()}destroy(){this._remove(),i(this)}update(){this._render()}_render(){const t=e(this,"prxy"),s=e(this,"conf"),{el:n,mask:i,pages:o,pageIndex:l}=t,[a,d]=e(this,"btns",(()=>{const t=null!=i?i:n,{template:e,className:o,previousClassName:l,previousLabel:a,previousTitle:d,nextClassName:h,nextLabel:c,nextTitle:u}=s;return[{controls:n.id,label:c,title:u,className:[o,h].join(" "),handler:this._onNext},{controls:n.id,label:a,title:d,className:[o,l].join(" "),handler:this._onPrev}].map((s=>{var n,{handler:i}=s,o=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("click",this._onPrev),null==t||t.removeEventListener("click",this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=e(this,"prxy"),{pages:s,pageIndex:n}=t,i=s[n-1]||s[0];t.index=i}_onNext(){const t=e(this,"prxy"),{pages:s,pageIndex:n}=t,i=s[n+1]||s[s.length-1];t.index=i}},exports.Carousel=class{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,"element",t),_++,t.id=t.id||`caroucssel-${_}`,s(this,"id",t.id);const n=Object.assign(Object.assign({},E),e);s(this,"config",n);let i=null,r=[...n.features];const o=n.features.findIndex((t=>t instanceof m));o>-1&&([i]=r.splice(o,1)),null!=i||(i=new m),r=r.filter((t=>!(t instanceof m))),r=[i,...r],s(this,"mask",i);const l=new f(this,r);switch(s(this,"proxy",l),s(this,"feautres",r),r.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=x(this._onScroll.bind(this),25),this._onResize=x(this._onResize.bind(this),25),t.addEventListener("scroll",this._onScroll),window.addEventListener("resize",this._onResize)}static resetInstanceCount(){}get el(){return e(this,"element")}get mask(){var t;return null!==(t=e(this,"mask").el)&&void 0!==t?t:null}get id(){return e(this,"id")}get index(){return e(this,"index",(()=>{const{el:t,items:e}=this,{length:s}=e,{clientWidth:n}=t,i=t.getBoundingClientRect().left,r=[];let o=0;for(;o=0&&l+.75*s<=n&&r.push(o)}return 0===r.length?[0]:r}))}set index(t){const{behavior:e,el:s,items:i}=this,{length:r}=i;if(!Array.isArray(t)||!t.length)return;let o=t[0]||0;o=Math.max(Math.min(o,r-1),0);const{scrollLeft:l}=s,a=l,d={left:i[o].offsetLeft};o===this.pages[0][0]&&(d.left=0),a!==d.left&&(n(this,"index"),s.scrollTo(Object.assign(Object.assign({},d),{behavior:e})))}get items(){return e(this,"items",(()=>{const{filterItem:t}=e(this,"config"),{el:s}=this;return Array.from(s.children).filter((t=>!b.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return e(this,"pages",(()=>{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,r=n[n.length-1],o=r[0];let l=(null==o?void 0:o.left)||0;r===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,"page-index",(()=>{const{el:t,items:e,index:s,pages:n}=this,i=t.getBoundingClientRect().left,{clientWidth:r}=t;let o=s.reduce(((t,s)=>{if(!e[s])return t;let{left:n,right:o}=e[s].getBoundingClientRect();return n=Math.round(n-i),o=Math.round(o-i),n<0||r{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;y.test(t.id)&&t.removeAttribute("id");e(this,"feautres").forEach((t=>t.destroy())),t.removeEventListener("scroll",this._onScroll),window.removeEventListener("resize",this._onResize),i(this)}update(){n(this,"index"),n(this,"items"),n(this,"pages"),n(this,"page-index");e(this,"feautres").forEach((t=>t.update({type:exports.UpdateType.FORCED})))}_onScroll(t){n(this,"index"),n(this,"page-index");e(this,"feautres").forEach((t=>t.update({type:exports.UpdateType.SCROLL})));const{index:s}=this;e(this,"config").onScroll({index:s,type:"scroll",target:this,originalEvent:t})}_onResize(){n(this,"pages"),n(this,"index"),n(this,"page-index");e(this,"feautres").forEach((t=>t.update({type:exports.UpdateType.RESIZE})))}},exports.Mask=m,exports.Mouse=class{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},a),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,"prxy",t);const n=e(this,"conf"),{el:i}=t;i.style.cursor=n.indicator?"grab":"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){i(this)}update(){}_onStart(t){var s;const n=e(this,"time");clearTimeout(n);const i=e(this,"conf"),r=e(this,"prxy"),o=r.el;e(this,"scrl",(()=>o.scrollLeft)),e(this,"posx",(()=>l(t))),e(this,"pgidx",(()=>r.pageIndex)),o.style.userSelect="none",o.style.scrollBehavior="auto",o.style.scrollSnapType="none",o.style.cursor=i.indicator?"grabbing":"",window.addEventListener("mousemove",this._onDrag,{passive:!0}),window.addEventListener("mouseup",this._onEnd,{passive:!0}),null===(s=i.onStart)||void 0===s||s.call(i,{originalEvent:t})}_onDrag(t){var s,n,i;const r=e(this,"conf"),{el:o}=e(this,"prxy"),a=null!==(s=e(this,"scrl"))&&void 0!==s?s:0,d=(null!==(n=e(this,"posx"))&&void 0!==n?n:0)-l(t);o.scrollLeft=a+d,null===(i=r.onDrag)||void 0===i||i.call(r,{originalEvent:t})}_onEnd(t){var i,r,o,l;const a=e(this,"prxy"),d=e(this,"conf"),h=null!==(i=e(this,"scrl"))&&void 0!==i?i:0,c=null!==(r=e(this,"pgidx"))&&void 0!==r?r:0;n(this,"scrl"),n(this,"posx"),n(this,"pgidx");const u=a.el,p=Math.min(Math.max(100,.25*u.clientWidth),250),g=u.scrollLeft-h,m=Math.abs(g);u.style.removeProperty("user-select"),u.style.removeProperty("scroll-behavior"),u.style.cursor=d.indicator?"grab":"";let v=a.index;if(m>p){const t=g/m,e=Math.max(c+t,0);v=null!==(o=a.pages[e])&&void 0!==o?o:v}window.requestAnimationFrame((()=>{a.index=v}));s(this,"time",window.setTimeout((()=>{u.style.removeProperty("scroll-snap-type")}),1e3)),window.removeEventListener("mousemove",this._onDrag),window.removeEventListener("mouseup",this._onEnd),null===(l=d.onEnd)||void 0===l||l.call(d,{originalEvent:t})}},exports.Pagination=class{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},c),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,"prxy",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,"prxy"),i=e(this,"conf"),{el:o,mask:l,pages:a}=n,d=null!=l?l:o;if(a.length<2)return;const{template:h,className:c,label:u,title:p}=i,g=r(h,{label:u,title:p,pages:a,className:c,controls:o.id});if(!g)return;const m=Array.from(g.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=d.parentNode)||void 0===t||t.appendChild(g),s(this,"pags",g),s(this,"btns",m),this._update()}_update(){const t=e(this,"prxy"),s=e(this,"btns"),{pageIndex:n}=t;null==s||s.forEach(((t,e)=>t.disabled=e===n))}_remove(){var t;const s=e(this,"pags"),i=e(this,"btns");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,"btns"),n(this,"pags")}_onClick(t){const s=e(this,"prxy"),n=e(this,"btns");if(!n)return;const i=t.currentTarget,r=n.indexOf(i);s.index=s.pages[r]}},exports.version="1.1.0"; +"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=new WeakMap;function e(e,s,n){const i=t.get(e)||{};if(s in i)return i[s];if(!n)return;const r=n();return i[s]=r,t.set(e,i),r}function s(e,s,n){const i=t.get(e)||{};i[s]=n,t.set(e,i)}function n(e,s){const n=t.get(e);n&&(n[s]=void 0,delete n[s])}function i(e){t.delete(e)}function r(t,e){const s=document.createElement("div");s.innerHTML=t(e);const n=s.firstElementChild;return n||null}const o={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"};function l(t){return t instanceof MouseEvent?t.clientX:0}const a={indicator:!1};var d,h;exports.UpdateType=void 0,(d=exports.UpdateType||(exports.UpdateType={})).SCROLL="scroll",d.RESIZE="resize",d.FORCED="forced",d.FEATURE="feature",exports.ScrollBehavior=void 0,(h=exports.ScrollBehavior||(exports.ScrollBehavior={})).AUTO="auto",h.SMOOTH="smooth";const c={template:({className:t,controls:e,pages:s,label:n,title:i})=>`\n\t\t
    \n\t\t\t${s.map(((t,r)=>{const o={index:r,page:t,pages:s},l=n(o),a=i(o);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`};class u{constructor(){window.addEventListener("resize",(()=>{n(this,"dims")}))}get dimensions(){return e(this,"dims",(()=>{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}}))}}let p;const g={enabled:!0,className:"caroucssel-mask",tagName:"div"};class m{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},g),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=e(this,"mask"))&&void 0!==t?t:null}init(t){s(this,"prxy",t),p=null!=p?p:new u,this._render()}destroy(){this._remove(),i(this)}update(t){switch(t.type){case exports.UpdateType.RESIZE:case exports.UpdateType.FORCED:n(this,"hght"),this._render();break;default:this._render()}}_render(){const{enabled:t,className:n,tagName:i}=e(this,"conf");if(!t)return;const r=e(this,"prxy").el;let{height:o}=p.dimensions;r.scrollWidth<=r.clientWidth&&(o=0),e(this,"mask",(()=>{var t;const e=document.createElement(i);return e.className=n,e.style.overflow="hidden",e.style.height="100%",null===(t=r.parentNode)||void 0===t||t.insertBefore(e,r),e.appendChild(r),e}));o!==e(this,"hght")&&(s(this,"hght",o),r.style.height=`calc(100% + ${o}px)`,r.style.marginBottom=-1*o+"px")}_remove(){var t,s;const{el:n}=e(this,"prxy"),i=e(this,"mask");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")}}function v(t){return e(t,"inst")}class f{constructor(t,e){s(this,"inst",t),s(this,"feat",e)}get id(){return v(this).id}get el(){return v(this).el}get mask(){return v(this).mask}get index(){return v(this).index}set index(t){v(this).index=t}get items(){return v(this).items}get pages(){return v(this).pages}get pageIndex(){return v(this).pageIndex}update(t){var s;v(this).update(),(s=this,e(s,"feat")).forEach((e=>{e!==t&&e.update({type:exports.UpdateType.FEATURE})}))}}function x(t,e){let s=null;return(...n)=>{null!==s&&clearTimeout(s),s=setTimeout((()=>t(...n)),e)}}const y=/^caroucssel-[0-9]*$/,b=/^(link|meta|noscript|script|style|title)$/i;let _=0;const E={features:[],filterItem:()=>!0,onScroll:()=>{}};exports.Buttons=class{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},o),t)),this._onPrev=this._onPrev.bind(this),this._onNext=this._onNext.bind(this)}get name(){return"buildin:buttons"}init(t){s(this,"prxy",t),this._render()}destroy(){this._remove(),i(this)}update(){this._render()}_render(){const t=e(this,"prxy"),s=e(this,"conf"),{el:n,mask:i,pages:o,pageIndex:l}=t,[a,d]=e(this,"btns",(()=>{const t=null!=i?i:n,{template:e,className:o,previousClassName:l,previousLabel:a,previousTitle:d,nextClassName:h,nextLabel:c,nextTitle:u}=s;return[{controls:n.id,label:c,title:u,className:[o,h].join(" "),handler:this._onNext},{controls:n.id,label:a,title:d,className:[o,l].join(" "),handler:this._onPrev}].map((s=>{var n,{handler:i}=s,o=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("click",this._onPrev),null==t||t.removeEventListener("click",this._onNext),null===(e=null==t?void 0:t.parentNode)||void 0===e||e.removeChild(t)}))}_onPrev(){const t=e(this,"prxy"),{pages:s,pageIndex:n}=t,i=s[n-1]||s[0];t.index=i}_onNext(){const t=e(this,"prxy"),{pages:s,pageIndex:n}=t,i=s[n+1]||s[s.length-1];t.index=i}},exports.Carousel=class{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,"element",t),_++,t.id=t.id||`caroucssel-${_}`,s(this,"id",t.id);const n=Object.assign(Object.assign({},E),e);s(this,"config",n);let i=null,r=[...n.features];const o=n.features.findIndex((t=>t instanceof m));o>-1&&([i]=r.splice(o,1)),null!=i||(i=new m),r=r.filter((t=>!(t instanceof m))),r=[i,...r],s(this,"mask",i);const l=new f(this,r);switch(s(this,"proxy",l),s(this,"feautres",r),r.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=x(this._onScroll.bind(this),25),this._onResize=x(this._onResize.bind(this),25),t.addEventListener("scroll",this._onScroll),window.addEventListener("resize",this._onResize)}static resetInstanceCount(){}get el(){return e(this,"element")}get mask(){var t;return null!==(t=e(this,"mask").el)&&void 0!==t?t:null}get id(){return e(this,"id")}get index(){return e(this,"index",(()=>{const{el:t,items:e}=this,{length:s}=e,{clientWidth:n}=t,i=t.getBoundingClientRect().left,r=[];let o=0;for(;o=0&&l+.75*s<=n&&r.push(o)}return 0===r.length?[0]:r}))}set index(t){const{behavior:e,el:s,items:i}=this,{length:r}=i;if(!Array.isArray(t)||!t.length)return;let o=t[0]||0;o=Math.max(Math.min(o,r-1),0);const{scrollLeft:l}=s,a=l,d={left:i[o].offsetLeft};o===this.pages[0][0]&&(d.left=0),a!==d.left&&(n(this,"index"),s.scrollTo(Object.assign(Object.assign({},d),{behavior:e})))}get items(){return e(this,"items",(()=>{const{filterItem:t}=e(this,"config"),{el:s}=this;return Array.from(s.children).filter((t=>!b.test(t.tagName)&&!t.hidden)).filter(t)}))}get pages(){return e(this,"pages",(()=>{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,r=n[n.length-1],o=r[0];let l=(null==o?void 0:o.left)||0;r===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,"page-index",(()=>{const{el:t,items:e,index:s,pages:n}=this,i=t.getBoundingClientRect().left,{clientWidth:r}=t;let o=s.reduce(((t,s)=>{if(!e[s])return t;let{left:n,right:o}=e[s].getBoundingClientRect();return n=Math.round(n-i),o=Math.round(o-i),n<0||r{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;y.test(t.id)&&t.removeAttribute("id");e(this,"feautres").forEach((t=>t.destroy())),t.removeEventListener("scroll",this._onScroll),window.removeEventListener("resize",this._onResize),i(this)}update(){n(this,"index"),n(this,"items"),n(this,"pages"),n(this,"page-index");e(this,"feautres").forEach((t=>t.update({type:exports.UpdateType.FORCED})))}_onScroll(t){n(this,"index"),n(this,"page-index");e(this,"feautres").forEach((t=>t.update({type:exports.UpdateType.SCROLL})));const{index:s}=this;e(this,"config").onScroll({index:s,type:"scroll",target:this,originalEvent:t})}_onResize(){n(this,"pages"),n(this,"index"),n(this,"page-index");e(this,"feautres").forEach((t=>t.update({type:exports.UpdateType.RESIZE})))}},exports.Mask=m,exports.Mouse=class{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},a),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,"prxy",t);const n=e(this,"conf"),{el:i}=t;i.style.cursor=n.indicator?"grab":"",i.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){i(this)}update(){}_onStart(t){var s;const n=e(this,"time");clearTimeout(n);const i=e(this,"conf"),r=e(this,"prxy"),o=r.el;e(this,"scrl",(()=>o.scrollLeft)),e(this,"posx",(()=>l(t))),e(this,"pgidx",(()=>r.pageIndex)),o.style.userSelect="none",o.style.scrollBehavior="auto",o.style.scrollSnapType="none",o.style.cursor=i.indicator?"grabbing":"",window.addEventListener("mousemove",this._onDrag,{passive:!0}),window.addEventListener("mouseup",this._onEnd,{passive:!0}),null===(s=i.onStart)||void 0===s||s.call(i,{originalEvent:t})}_onDrag(t){var s,n,i;const r=e(this,"conf"),{el:o}=e(this,"prxy"),a=null!==(s=e(this,"scrl"))&&void 0!==s?s:0,d=(null!==(n=e(this,"posx"))&&void 0!==n?n:0)-l(t);o.scrollLeft=a+d,null===(i=r.onDrag)||void 0===i||i.call(r,{originalEvent:t})}_onEnd(t){var i,r,o,l;const a=e(this,"prxy"),d=e(this,"conf"),h=null!==(i=e(this,"scrl"))&&void 0!==i?i:0,c=null!==(r=e(this,"pgidx"))&&void 0!==r?r:0;n(this,"scrl"),n(this,"posx"),n(this,"pgidx");const u=a.el,p=Math.min(Math.max(100,.25*u.clientWidth),250),g=u.scrollLeft-h,m=Math.abs(g);u.style.removeProperty("user-select"),u.style.removeProperty("scroll-behavior"),u.style.cursor=d.indicator?"grab":"";let v=a.index;if(m>p){const t=g/m,e=Math.max(c+t,0);v=null!==(o=a.pages[e])&&void 0!==o?o:v}window.requestAnimationFrame((()=>{a.index=v}));s(this,"time",window.setTimeout((()=>{u.style.removeProperty("scroll-snap-type")}),1e3)),window.removeEventListener("mousemove",this._onDrag),window.removeEventListener("mouseup",this._onEnd),null===(l=d.onEnd)||void 0===l||l.call(d,{originalEvent:t})}},exports.Pagination=class{constructor(t={}){s(this,"conf",Object.assign(Object.assign({},c),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){s(this,"prxy",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,"prxy"),i=e(this,"conf"),{el:o,mask:l,pages:a}=n,d=null!=l?l:o;if(a.length<2)return;const{template:h,className:c,label:u,title:p}=i,g=r(h,{label:u,title:p,pages:a,className:c,controls:o.id});if(!g)return;const m=Array.from(g.querySelectorAll("button")).map((t=>(t.addEventListener("click",this._onClick,!0),t)));null===(t=d.parentNode)||void 0===t||t.appendChild(g),s(this,"pags",g),s(this,"btns",m),this._update()}_update(){const t=e(this,"prxy"),s=e(this,"btns"),{pageIndex:n}=t;null==s||s.forEach(((t,e)=>t.disabled=e===n))}_remove(){var t;const s=e(this,"pags"),i=e(this,"btns");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,"btns"),n(this,"pags")}_onClick(t){const s=e(this,"prxy"),n=e(this,"btns");if(!n)return;const i=t.currentTarget,r=n.indexOf(i);s.index=s.pages[r]}},exports.version="1.1.1"; diff --git a/dist/formats/iife/caroucssel.js b/dist/formats/iife/caroucssel.js index e9fe0735..5a7a8778 100644 --- a/dist/formats/iife/caroucssel.js +++ b/dist/formats/iife/caroucssel.js @@ -798,7 +798,7 @@ var caroucssel = (function (exports) { } } - const version = '1.1.0'; + const version = '1.1.1'; exports.Buttons = Buttons; exports.Carousel = Carousel; diff --git a/dist/formats/iife/caroucssel.min.js b/dist/formats/iife/caroucssel.min.js index 52b48ea0..50f1203d 100644 --- a/dist/formats/iife/caroucssel.min.js +++ b/dist/formats/iife/caroucssel.min.js @@ -1 +1 @@ -var caroucssel=function(t){"use strict";const e=new WeakMap;function n(t,n,i){const s=e.get(t)||{};if(n in s)return s[n];if(!i)return;const o=i();return s[n]=o,e.set(t,s),o}function i(t,n,i){const s=e.get(t)||{};s[n]=i,e.set(t,s)}function s(t,n){const i=e.get(t);i&&(i[n]=void 0,delete i[n])}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const i=n.firstElementChild;return i||null}const l="prxy",a="conf",h="btns",d="click",c={template:({className:t,controls:e,label:n,title:i})=>`\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",L="pags",S="btns",T={template:({className:t,controls:e,pages:n,label:i,title:s})=>`\n\t\t
    \n\t\t\t${n.map(((t,o)=>{const r={index:o,page:t,pages:n},l=i(r),a=s(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",(()=>{s(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 i=t.offsetHeight;i=n===i?e.clientHeight:i;const s=n-i;return document.body.removeChild(e),{height:s}}))}}const j="prxy",I="conf",$="mask",B="hght";let M;const A={enabled:!0,className:"caroucssel-mask",tagName:"div"};class P{constructor(t={}){i(this,I,Object.assign(Object.assign({},A),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,$))&&void 0!==t?t:null}init(t){i(this,j,t),M=null!=M?M:new k,this._render()}destroy(){this._remove(),o(this)}update(e){switch(e.type){case t.UpdateType.RESIZE:case t.UpdateType.FORCED:s(this,B),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:s}=n(this,I);if(!t)return;const o=n(this,j).el;let{height:r}=M.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,$,(()=>{var t;const n=document.createElement(s);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,B)&&(i(this,B,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:i}=n(this,j),s=n(this,$);null===(t=null==s?void 0:s.parentNode)||void 0===t||t.insertBefore(i,s),null===(e=null==s?void 0:s.parentNode)||void 0===e||e.removeChild(s),i.removeAttribute("style")}}const U="inst",D="feat";function z(t){return n(t,U)}class W{constructor(t,e){i(this,U,t),i(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 i;z(this).update(),(i=this,n(i,D)).forEach((n=>{n!==e&&n.update({type:t.UpdateType.FEATURE})}))}}function F(t,e){let n=null;return(...i)=>{null!==n&&clearTimeout(n),n=setTimeout((()=>t(...i)),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 it=0;const st={features:[],filterItem:()=>!0,onScroll:()=>{}};return t.Buttons=class{constructor(t={}){i(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){i(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:i,mask:s,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=s?s:i,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:i.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:i.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var i,{handler:s}=e,o=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(i=Object.getOwnPropertySymbols(t);s{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:i}=t,s=e[i-1]||e[0];t.index=s}_onNext(){const t=n(this,l),{pages:e,pageIndex:i}=t,s=e[i+1]||e[e.length-1];t.index=s}},t.Carousel=class{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.`);i(this,q,e),it++,e.id=e.id||`caroucssel-${it}`,i(this,"id",e.id);const s=Object.assign(Object.assign({},st),n);i(this,V,s);let o=null,r=[...s.features];const l=s.features.findIndex((t=>t instanceof P));l>-1&&([o]=r.splice(l,1)),null!=o||(o=new P),r=r.filter((t=>!(t instanceof P))),r=[o,...r],i(this,Y,o);const a=new W(this,r);switch(i(this,"proxy",a),i(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),25),this._onResize=F(this._onResize.bind(this),25),e.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}static resetInstanceCount(){}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:i}=t,s=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=i&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,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}=n,a=l,h={left:i[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(s(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 i=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:i}=t;return{left:n,width:i,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:s}=t,o=i[i.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===i[0]&&(l=0);let a=Math.floor((e-l+.75*s)/n);for(;a>0;)i.push([]),a--;i[i.length-1].push(t)})),i=i.filter((t=>0!==t.length)),i.map((t=>t.map((({index:t})=>t))))}))}get pageIndex(){return n(this,Q,(()=>{const{el:t,items:e,index:n,pages:i}=this,s=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:i,right:r}=e[n].getBoundingClientRect();return i=Math.round(i-s),r=Math.round(r-s),i<0||o{const i=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-i}))[0];return i.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(){s(this,X),s(this,J),s(this,K),s(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.FORCED})))}_onScroll(e){s(this,X),s(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.SCROLL})));const{index:i}=this;n(this,V).onScroll({index:i,type:G,target:this,originalEvent:e})}_onResize(){s(this,K),s(this,X),s(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.RESIZE})))}},t.Mask=P,t.Mouse=class{constructor(t={}){i(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){i(this,u,t);const e=n(this,p),{el:s}=t;s.style.cursor=e.indicator?y:"",s.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const i=n(this,f);clearTimeout(i);const s=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=s.indicator?"grabbing":"",window.addEventListener(b,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=s.onStart)||void 0===e||e.call(s,{originalEvent:t})}_onDrag(t){var e,i,s;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,m))&&void 0!==e?e:0,a=(null!==(i=n(this,g))&&void 0!==i?i:0)-_(t);r.scrollLeft=l+a,null===(s=o.onDrag)||void 0===s||s.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;s(this,m),s(this,g),s(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);i(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={}){i(this,C,Object.assign(Object.assign({},T),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){i(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),s=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}=s,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),i(this,L,v),i(this,S,g),this._update()}_update(){const t=n(this,O),e=n(this,S),{pageIndex:i}=t;null==e||e.forEach(((t,e)=>t.disabled=e===i))}_remove(){var t;const e=n(this,L),i=n(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==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),s(this,S),s(this,L)}_onClick(t){const e=n(this,O),i=n(this,S);if(!i)return;const s=t.currentTarget,o=i.indexOf(s);e.index=e.pages[o]}},t.version="1.1.0",Object.defineProperty(t,"__esModule",{value:!0}),t}({}); +var caroucssel=function(t){"use strict";const e=new WeakMap;function n(t,n,i){const s=e.get(t)||{};if(n in s)return s[n];if(!i)return;const o=i();return s[n]=o,e.set(t,s),o}function i(t,n,i){const s=e.get(t)||{};s[n]=i,e.set(t,s)}function s(t,n){const i=e.get(t);i&&(i[n]=void 0,delete i[n])}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const i=n.firstElementChild;return i||null}const l="prxy",a="conf",h="btns",d="click",c={template:({className:t,controls:e,label:n,title:i})=>`\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",L="pags",S="btns",T={template:({className:t,controls:e,pages:n,label:i,title:s})=>`\n\t\t
    \n\t\t\t${n.map(((t,o)=>{const r={index:o,page:t,pages:n},l=i(r),a=s(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",(()=>{s(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 i=t.offsetHeight;i=n===i?e.clientHeight:i;const s=n-i;return document.body.removeChild(e),{height:s}}))}}const j="prxy",I="conf",$="mask",B="hght";let M;const A={enabled:!0,className:"caroucssel-mask",tagName:"div"};class P{constructor(t={}){i(this,I,Object.assign(Object.assign({},A),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,$))&&void 0!==t?t:null}init(t){i(this,j,t),M=null!=M?M:new k,this._render()}destroy(){this._remove(),o(this)}update(e){switch(e.type){case t.UpdateType.RESIZE:case t.UpdateType.FORCED:s(this,B),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:s}=n(this,I);if(!t)return;const o=n(this,j).el;let{height:r}=M.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,$,(()=>{var t;const n=document.createElement(s);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,B)&&(i(this,B,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:i}=n(this,j),s=n(this,$);null===(t=null==s?void 0:s.parentNode)||void 0===t||t.insertBefore(i,s),null===(e=null==s?void 0:s.parentNode)||void 0===e||e.removeChild(s),i.removeAttribute("style")}}const U="inst",D="feat";function z(t){return n(t,U)}class W{constructor(t,e){i(this,U,t),i(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 i;z(this).update(),(i=this,n(i,D)).forEach((n=>{n!==e&&n.update({type:t.UpdateType.FEATURE})}))}}function F(t,e){let n=null;return(...i)=>{null!==n&&clearTimeout(n),n=setTimeout((()=>t(...i)),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 it=0;const st={features:[],filterItem:()=>!0,onScroll:()=>{}};return t.Buttons=class{constructor(t={}){i(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){i(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:i,mask:s,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=s?s:i,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:i.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:i.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var i,{handler:s}=e,o=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(i=Object.getOwnPropertySymbols(t);s{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:i}=t,s=e[i-1]||e[0];t.index=s}_onNext(){const t=n(this,l),{pages:e,pageIndex:i}=t,s=e[i+1]||e[e.length-1];t.index=s}},t.Carousel=class{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.`);i(this,q,e),it++,e.id=e.id||`caroucssel-${it}`,i(this,"id",e.id);const s=Object.assign(Object.assign({},st),n);i(this,V,s);let o=null,r=[...s.features];const l=s.features.findIndex((t=>t instanceof P));l>-1&&([o]=r.splice(l,1)),null!=o||(o=new P),r=r.filter((t=>!(t instanceof P))),r=[o,...r],i(this,Y,o);const a=new W(this,r);switch(i(this,"proxy",a),i(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),25),this._onResize=F(this._onResize.bind(this),25),e.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}static resetInstanceCount(){}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:i}=t,s=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=i&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,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}=n,a=l,h={left:i[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(s(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 i=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:i}=t;return{left:n,width:i,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:s}=t,o=i[i.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===i[0]&&(l=0);let a=Math.floor((e-l+.75*s)/n);for(;a>0;)i.push([]),a--;i[i.length-1].push(t)})),i=i.filter((t=>0!==t.length)),i.map((t=>t.map((({index:t})=>t))))}))}get pageIndex(){return n(this,Q,(()=>{const{el:t,items:e,index:n,pages:i}=this,s=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:i,right:r}=e[n].getBoundingClientRect();return i=Math.round(i-s),r=Math.round(r-s),i<0||o{const i=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-i}))[0];return i.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(){s(this,X),s(this,J),s(this,K),s(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.FORCED})))}_onScroll(e){s(this,X),s(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.SCROLL})));const{index:i}=this;n(this,V).onScroll({index:i,type:G,target:this,originalEvent:e})}_onResize(){s(this,K),s(this,X),s(this,Q);n(this,tt).forEach((e=>e.update({type:t.UpdateType.RESIZE})))}},t.Mask=P,t.Mouse=class{constructor(t={}){i(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){i(this,u,t);const e=n(this,p),{el:s}=t;s.style.cursor=e.indicator?y:"",s.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const i=n(this,f);clearTimeout(i);const s=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=s.indicator?"grabbing":"",window.addEventListener(b,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=s.onStart)||void 0===e||e.call(s,{originalEvent:t})}_onDrag(t){var e,i,s;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,m))&&void 0!==e?e:0,a=(null!==(i=n(this,g))&&void 0!==i?i:0)-_(t);r.scrollLeft=l+a,null===(s=o.onDrag)||void 0===s||s.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;s(this,m),s(this,g),s(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);i(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={}){i(this,C,Object.assign(Object.assign({},T),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){i(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),s=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}=s,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),i(this,L,v),i(this,S,g),this._update()}_update(){const t=n(this,O),e=n(this,S),{pageIndex:i}=t;null==e||e.forEach(((t,e)=>t.disabled=e===i))}_remove(){var t;const e=n(this,L),i=n(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==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),s(this,S),s(this,L)}_onClick(t){const e=n(this,O),i=n(this,S);if(!i)return;const s=t.currentTarget,o=i.indexOf(s);e.index=e.pages[o]}},t.version="1.1.1",Object.defineProperty(t,"__esModule",{value:!0}),t}({}); diff --git a/dist/formats/umd/caroucssel.js b/dist/formats/umd/caroucssel.js index f49afc87..ea9df539 100644 --- a/dist/formats/umd/caroucssel.js +++ b/dist/formats/umd/caroucssel.js @@ -17,73 +17,53 @@ value: true }); _exports.version = _exports.UpdateType = _exports.ScrollBehavior = _exports.Pagination = _exports.Mouse = _exports.Mask = _exports.Carousel = _exports.Buttons = void 0; - function __rest(s, e) { var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; } - const __CACHE = new WeakMap(); - function fromCache(ref, key, factory) { const storage = __CACHE.get(ref) || {}; - if (key in storage) { return storage[key]; } - if (!factory) { return undefined; } - const value = factory(); storage[key] = value; - __CACHE.set(ref, storage); - return value; } - function writeCache(ref, key, value) { const storage = __CACHE.get(ref) || {}; storage[key] = value; - __CACHE.set(ref, storage); } - function clearCache(ref, key) { const storage = __CACHE.get(ref); - if (!storage) { return; } - storage[key] = undefined; delete storage[key]; } - function clearFullCache(ref) { __CACHE.delete(ref); } - function render(template, context) { const el = document.createElement('div'); el.innerHTML = template(context); const ref = el.firstElementChild; - if (!ref) { return null; } - return ref; } - const FEATURE_NAME$3 = 'buildin:buttons'; const CACHE_KEY_PROXY$4 = 'prxy'; const CACHE_KEY_CONFIGURATION$4 = 'conf'; @@ -111,7 +91,6 @@ previousLabel: 'Previous', previousTitle: 'Go to previous' }; - class Buttons { constructor() { let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; @@ -119,27 +98,20 @@ this._onPrev = this._onPrev.bind(this); this._onNext = this._onNext.bind(this); } - get name() { return FEATURE_NAME$3; } - init(proxy) { writeCache(this, CACHE_KEY_PROXY$4, proxy); - this._render(); } - destroy() { this._remove(); - clearFullCache(this); } - update() { this._render(); } - _render() { const proxy = fromCache(this, CACHE_KEY_PROXY$4); const config = fromCache(this, CACHE_KEY_CONFIGURATION$4); @@ -176,48 +148,39 @@ }]; return settings.map(_a => { var _b; - var { - handler - } = _a, - params = __rest(_a, ["handler"]); - + handler + } = _a, + params = __rest(_a, ["handler"]); const button = render(template, params); - if (!button) { return null; } - button.addEventListener(EVENT_CLICK, handler); (_b = target.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(button, target.nextSibling); return button; }); }); - if (next) { const lastPage = pages[pageIndex + 1]; const isLastPage = lastPage === undefined; next.disabled = isLastPage; } - if (previous) { const firstPage = pages[pageIndex - 1]; const isFirstPage = firstPage === undefined; previous.disabled = isFirstPage; } } - _remove() { const buttons = fromCache(this, CACHE_KEY_BUTTONS$1); buttons === null || buttons === void 0 ? void 0 : buttons.forEach(button => { var _a; - button === null || button === void 0 ? void 0 : button.removeEventListener(EVENT_CLICK, this._onPrev); button === null || button === void 0 ? void 0 : button.removeEventListener(EVENT_CLICK, this._onNext); (_a = button === null || button === void 0 ? void 0 : button.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(button); }); } - _onPrev() { const proxy = fromCache(this, CACHE_KEY_PROXY$4); const { @@ -227,7 +190,6 @@ const index = pages[pageIndex - 1] || pages[0]; proxy.index = index; } - _onNext() { const proxy = fromCache(this, CACHE_KEY_PROXY$4); const { @@ -237,9 +199,7 @@ const index = pages[pageIndex + 1] || pages[pages.length - 1]; proxy.index = index; } - } - _exports.Buttons = Buttons; const FEATURE_NAME$2 = 'buildin:mouse'; const CACHE_KEY_PROXY$3 = 'prxy'; @@ -256,19 +216,15 @@ const THRESHOLD_MIN = 100; const THRESHOLD_MAX = 250; const THRESHOLD_FACTOR = 0.25; - function __getPositionX(event) { if (event instanceof MouseEvent) { return event.clientX; } - return 0; } - const DEFAULTS$3 = { indicator: false }; - class Mouse { constructor() { let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; @@ -277,11 +233,9 @@ this._onDrag = this._onDrag.bind(this); this._onEnd = this._onEnd.bind(this); } - get name() { return FEATURE_NAME$2; } - init(proxy) { writeCache(this, CACHE_KEY_PROXY$3, proxy); const config = fromCache(this, CACHE_KEY_CONFIGURATION$3); @@ -294,16 +248,12 @@ passive: true }); } - destroy() { clearFullCache(this); } - update() {} - _onStart(event) { var _a; - const timeout = fromCache(this, CACHE_KEY_TIMEOUT); clearTimeout(timeout); const config = fromCache(this, CACHE_KEY_CONFIGURATION$3); @@ -326,29 +276,23 @@ originalEvent: event }); } - _onDrag(event) { var _a, _b, _c; - const config = fromCache(this, CACHE_KEY_CONFIGURATION$3); const { el } = fromCache(this, CACHE_KEY_PROXY$3); const left = (_a = fromCache(this, CACHE_KEY_SCROLL_LEFT)) !== null && _a !== void 0 ? _a : 0; const x = (_b = fromCache(this, CACHE_KEY_POSITION_X)) !== null && _b !== void 0 ? _b : 0; - const currentX = __getPositionX(event); - const deltaX = x - currentX; el.scrollLeft = left + deltaX; (_c = config.onDrag) === null || _c === void 0 ? void 0 : _c.call(config, { originalEvent: event }); } - _onEnd(event) { var _a, _b, _c, _d; - const proxy = fromCache(this, CACHE_KEY_PROXY$3); const config = fromCache(this, CACHE_KEY_CONFIGURATION$3); const left = (_a = fromCache(this, CACHE_KEY_SCROLL_LEFT)) !== null && _a !== void 0 ? _a : 0; @@ -365,13 +309,11 @@ element.style.removeProperty('scroll-behavior'); element.style.cursor = config.indicator ? CURSOR_GRAB : ''; let index = proxy.index; - if (offset > threshold) { const direction = distance / offset; const at = Math.max(pageIndex + direction, 0); index = (_c = proxy.pages[at]) !== null && _c !== void 0 ? _c : index; } - window.requestAnimationFrame(() => { proxy.index = index; }); @@ -385,28 +327,22 @@ originalEvent: event }); } - } - _exports.Mouse = Mouse; var UpdateType; _exports.UpdateType = UpdateType; - (function (UpdateType) { UpdateType["SCROLL"] = "scroll"; UpdateType["RESIZE"] = "resize"; UpdateType["FORCED"] = "forced"; UpdateType["FEATURE"] = "feature"; })(UpdateType || (_exports.UpdateType = UpdateType = {})); - var ScrollBehavior; _exports.ScrollBehavior = ScrollBehavior; - (function (ScrollBehavior) { ScrollBehavior["AUTO"] = "auto"; ScrollBehavior["SMOOTH"] = "smooth"; })(ScrollBehavior || (_exports.ScrollBehavior = ScrollBehavior = {})); - const FEATURE_NAME$1 = 'buildin:pagination'; const CACHE_KEY_PROXY$2 = 'prxy'; const CACHE_KEY_CONFIGURATION$2 = 'conf'; @@ -454,49 +390,36 @@ return `Go to ${index + 1}. page`; } }; - class Pagination { constructor() { let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; writeCache(this, CACHE_KEY_CONFIGURATION$2, Object.assign(Object.assign({}, DEFAULTS$2), options)); this._onClick = this._onClick.bind(this); } - get name() { return FEATURE_NAME$1; } - init(proxy) { writeCache(this, CACHE_KEY_PROXY$2, proxy); - this._add(); } - destroy() { this._remove(); - clearFullCache(this); } - update(event) { switch (event.type) { case UpdateType.SCROLL: this._update(); - break; - default: this._remove(); - this._add(); - break; } } - _add() { var _a; - const proxy = fromCache(this, CACHE_KEY_PROXY$2); const config = fromCache(this, CACHE_KEY_CONFIGURATION$2); const { @@ -505,11 +428,9 @@ pages } = proxy; const target = mask !== null && mask !== void 0 ? mask : el; - if (pages.length < 2) { return; } - const { template, className, @@ -523,11 +444,9 @@ className, controls: el.id }); - if (!pagination) { return; } - const buttons = Array.from(pagination.querySelectorAll('button')).map(button => { button.addEventListener('click', this._onClick, true); return button; @@ -535,10 +454,8 @@ (_a = target.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(pagination); writeCache(this, CACHE_KEY_PAGINATION, pagination); writeCache(this, CACHE_KEY_BUTTONS, buttons); - this._update(); } - _update() { const proxy = fromCache(this, CACHE_KEY_PROXY$2); const buttons = fromCache(this, CACHE_KEY_BUTTONS); @@ -547,15 +464,12 @@ } = proxy; buttons === null || buttons === void 0 ? void 0 : buttons.forEach((button, at) => button.disabled = at === pageIndex); } - _remove() { var _a; - const pagination = fromCache(this, CACHE_KEY_PAGINATION); const buttons = fromCache(this, CACHE_KEY_BUTTONS); buttons === null || buttons === void 0 ? void 0 : buttons.forEach(button => { var _a; - button.removeEventListener('click', this._onClick); (_a = button.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(button); }); @@ -563,32 +477,25 @@ clearCache(this, CACHE_KEY_BUTTONS); clearCache(this, CACHE_KEY_PAGINATION); } - _onClick(event) { const proxy = fromCache(this, CACHE_KEY_PROXY$2); const buttons = fromCache(this, CACHE_KEY_BUTTONS); - if (!buttons) { return; } - const target = event.currentTarget; const index = buttons.indexOf(target); proxy.index = proxy.pages[index]; } - } - _exports.Pagination = Pagination; const CACHE_KEY_DIMENSIONS = 'dims'; - class Scrollbar { constructor() { window.addEventListener('resize', () => { clearCache(this, CACHE_KEY_DIMENSIONS); }); } - get dimensions() { return fromCache(this, CACHE_KEY_DIMENSIONS, () => { const inner = document.createElement('div'); @@ -615,93 +522,70 @@ }; }); } - } - const FEATURE_NAME = 'buildin:mask'; const CACHE_KEY_PROXY$1 = 'prxy'; const CACHE_KEY_CONFIGURATION$1 = 'conf'; const CACHE_KEY_MASK$1 = 'mask'; const CACHE_KEY_HEIGHT = 'hght'; - let __scrollbar; - const DEFAULTS$1 = { enabled: true, className: 'caroucssel-mask', tagName: 'div' }; - class Mask { constructor() { let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; writeCache(this, CACHE_KEY_CONFIGURATION$1, Object.assign(Object.assign({}, DEFAULTS$1), options)); } - get name() { return FEATURE_NAME; } - get el() { var _a; - return (_a = fromCache(this, CACHE_KEY_MASK$1)) !== null && _a !== void 0 ? _a : null; } - init(proxy) { writeCache(this, CACHE_KEY_PROXY$1, proxy); __scrollbar = __scrollbar !== null && __scrollbar !== void 0 ? __scrollbar : new Scrollbar(); - this._render(); } - destroy() { this._remove(); - clearFullCache(this); } - update(event) { switch (event.type) { case UpdateType.RESIZE: case UpdateType.FORCED: clearCache(this, CACHE_KEY_HEIGHT); - this._render(); - break; - default: this._render(); - break; } } - _render() { const { enabled, className, tagName } = fromCache(this, CACHE_KEY_CONFIGURATION$1); - if (!enabled) { return; } - const proxy = fromCache(this, CACHE_KEY_PROXY$1); const element = proxy.el; let { height } = __scrollbar.dimensions; - if (element.scrollWidth <= element.clientWidth) { height = 0; } - fromCache(this, CACHE_KEY_MASK$1, () => { var _a; - const mask = document.createElement(tagName); mask.className = className; mask.style.overflow = 'hidden'; @@ -711,19 +595,15 @@ return mask; }); const cachedHeight = fromCache(this, CACHE_KEY_HEIGHT); - if (height === cachedHeight) { return; } - writeCache(this, CACHE_KEY_HEIGHT, height); element.style.height = `calc(100% + ${height}px)`; element.style.marginBottom = `${height * -1}px`; } - _remove() { var _a, _b; - const { el } = fromCache(this, CACHE_KEY_PROXY$1); @@ -732,95 +612,71 @@ (_b = mask === null || mask === void 0 ? void 0 : mask.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(mask); el.removeAttribute('style'); } - } - _exports.Mask = Mask; const CACHE_KEY_INSTANCE = 'inst'; const CACHE_KEY_FEATURES$1 = 'feat'; - function __getInstance(ref) { return fromCache(ref, CACHE_KEY_INSTANCE); } - function __getFeatures(ref) { return fromCache(ref, CACHE_KEY_FEATURES$1); } - class Proxy { constructor(instance, features) { writeCache(this, CACHE_KEY_INSTANCE, instance); writeCache(this, CACHE_KEY_FEATURES$1, features); } - get id() { return __getInstance(this).id; } - get el() { return __getInstance(this).el; } - get mask() { return __getInstance(this).mask; } - get index() { return __getInstance(this).index; } - set index(value) { __getInstance(this).index = value; } - get items() { return __getInstance(this).items; } - get pages() { return __getInstance(this).pages; } - get pageIndex() { return __getInstance(this).pageIndex; } - update(sender) { __getInstance(this).update(); - __getFeatures(this).forEach(feature => { if (feature === sender) { return; } - feature.update({ type: UpdateType.FEATURE }); }); } - } - function debounce(func, delay) { let timeout = null; - const debounced = function () { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } - if (timeout !== null) { clearTimeout(timeout); } - timeout = setTimeout(() => func(...args), delay); }; - return debounced; } - const ID_NAME = count => `caroucssel-${count}`; - const ID_MATCH = /^caroucssel-[0-9]*$/; const EVENT_SCROLL = 'scroll'; const EVENT_RESIZE = 'resize'; @@ -842,16 +698,13 @@ filterItem: () => true, onScroll: () => undefined }; - class Carousel { constructor(el) { let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; this.behavior = ScrollBehavior.AUTO; - if (!el || !(el instanceof Element)) { throw new Error(`Carousel needs a dom element but "${typeof el}" was passed.`); } - writeCache(this, CACHE_KEY_ELEMENT, el); __instanceCount++; el.id = el.id || ID_NAME(__instanceCount); @@ -861,11 +714,9 @@ let mask = null; let features = [...configuration.features]; const index = configuration.features.findIndex(feature => feature instanceof Mask); - if (index > -1) { [mask] = features.splice(index, 1); } - mask !== null && mask !== void 0 ? mask : mask = new Mask(); features = features.filter(feature => !(feature instanceof Mask)); features = [mask, ...features]; @@ -874,41 +725,32 @@ writeCache(this, CACHE_KEY_PROXY, proxy); writeCache(this, CACHE_KEY_FEATURES, features); features.forEach(feature => feature.init(proxy)); - switch (true) { case Array.isArray(options.index): this.index = options.index; break; - case !isNaN(options.index): this.index = [options.index]; break; } - this.behavior = ScrollBehavior.SMOOTH; this._onScroll = debounce(this._onScroll.bind(this), 25); this._onResize = debounce(this._onResize.bind(this), 25); el.addEventListener(EVENT_SCROLL, this._onScroll); window.addEventListener(EVENT_RESIZE, this._onResize); } - static resetInstanceCount() {} - get el() { return fromCache(this, CACHE_KEY_ELEMENT); } - get mask() { var _a; - const mask = fromCache(this, CACHE_KEY_MASK); return (_a = mask.el) !== null && _a !== void 0 ? _a : null; } - get id() { return fromCache(this, CACHE_KEY_ID); } - get index() { return fromCache(this, CACHE_KEY_INDEX, () => { const { @@ -924,7 +766,6 @@ const outerLeft = el.getBoundingClientRect().left; const index = []; let at = 0; - for (; at < length; at++) { const item = items[at]; const rect = item.getBoundingClientRect(); @@ -935,20 +776,16 @@ left } = rect; left = left - outerLeft; - if (left + width * VISIBILITY_OFFSET >= 0 && left + width * (1 - VISIBILITY_OFFSET) <= clientWidth) { index.push(at); } } - if (index.length === 0) { return [0]; } - return index; }); } - set index(values) { const { behavior, @@ -958,11 +795,9 @@ const { length } = items; - if (!Array.isArray(values) || !values.length) { return; } - let value = values[0] || 0; value = Math.max(Math.min(value, length - 1), 0); const { @@ -974,21 +809,17 @@ const to = { left: items[value].offsetLeft }; - if (value === this.pages[0][0]) { to.left = 0; } - if (from.left === to.left) { return; } - clearCache(this, CACHE_KEY_INDEX); el.scrollTo(Object.assign(Object.assign({}, to), { behavior })); } - get items() { return fromCache(this, CACHE_KEY_ITEMS, () => { const { @@ -1001,7 +832,6 @@ return children.filter(item => !INVISIBLE_ELEMENTS.test(item.tagName) && !item.hidden).filter(filterItem); }); } - get pages() { return fromCache(this, CACHE_KEY_PAGES, () => { const { @@ -1011,11 +841,9 @@ const { clientWidth: viewport } = el; - if (viewport === 0) { return items.map((item, index) => [index]); } - let pages = [[]]; items.map((item, index) => { const { @@ -1038,18 +866,14 @@ const prevPage = pages[pages.length - 1]; const firstItem = prevPage[0]; let start = (firstItem === null || firstItem === void 0 ? void 0 : firstItem.left) || 0; - if (prevPage === pages[0]) { start = 0; } - let add = Math.floor((left - start + width * (1 - VISIBILITY_OFFSET)) / viewport); - while (add > 0) { pages.push([]); add--; } - const page = pages[pages.length - 1]; page.push(item); }); @@ -1062,7 +886,6 @@ })); }); } - get pageIndex() { return fromCache(this, CACHE_KEY_PAGE_INDEX, () => { const { @@ -1079,25 +902,20 @@ if (!items[at]) { return acc; } - let { left, right } = items[at].getBoundingClientRect(); left = Math.round(left - outerLeft); right = Math.round(right - outerLeft); - if (left < 0 || clientWidth < right) { return acc; } - return acc.concat([at]); }, []); - if (visibles.length === 0) { visibles = [index[0]]; } - const at = visibles.sort((a, b) => { const rightA = items[a].getBoundingClientRect().right; const rightB = items[b].getBoundingClientRect().right; @@ -1106,7 +924,6 @@ return pages.findIndex(page => page.includes(at)); }); } - destroy() { const { el @@ -1118,7 +935,6 @@ window.removeEventListener(EVENT_RESIZE, this._onResize); clearFullCache(this); } - update() { clearCache(this, CACHE_KEY_INDEX); clearCache(this, CACHE_KEY_ITEMS); @@ -1129,7 +945,6 @@ type: UpdateType.FORCED })); } - _onScroll(event) { clearCache(this, CACHE_KEY_INDEX); clearCache(this, CACHE_KEY_PAGE_INDEX); @@ -1148,7 +963,6 @@ originalEvent: event }); } - _onResize() { clearCache(this, CACHE_KEY_PAGES); clearCache(this, CACHE_KEY_INDEX); @@ -1158,10 +972,8 @@ type: UpdateType.RESIZE })); } - } - _exports.Carousel = Carousel; - const version = '1.1.0'; + const version = '1.1.1'; _exports.version = version; }); diff --git a/dist/formats/umd/caroucssel.min.js b/dist/formats/umd/caroucssel.min.js index b91c164c..59814515 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;const e=new WeakMap;function n(t,n,i){const s=e.get(t)||{};if(n in s)return s[n];if(!i)return;const o=i();return s[n]=o,e.set(t,s),o}function i(t,n,i){const s=e.get(t)||{};s[n]=i,e.set(t,s)}function s(t,n){const i=e.get(t);i&&(i[n]=void 0,delete i[n])}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const i=n.firstElementChild;return i||null}const l="prxy",a="conf",h="btns",d="click",c={template:t=>{let{className:e,controls:n,label:i,title:s}=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]:{};i(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){i(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:i,mask:s,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=s?s:i,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:i.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:i.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var i,{handler:s}=e,o=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(i=Object.getOwnPropertySymbols(t);s{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:i}=t,s=e[i-1]||e[0];t.index=s}_onNext(){const t=n(this,l),{pages:e,pageIndex:i}=t,s=e[i+1]||e[e.length-1];t.index=s}};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]:{};i(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){i(this,u,t);const e=n(this,p),{el:s}=t;s.style.cursor=e.indicator?b:"",s.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const i=n(this,m);clearTimeout(i);const s=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=s.indicator?"grabbing":"",window.addEventListener(y,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=s.onStart)||void 0===e||e.call(s,{originalEvent:t})}_onDrag(t){var e,i,s;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,f))&&void 0!==e?e:0,a=(null!==(i=n(this,v))&&void 0!==i?i:0)-_(t);r.scrollLeft=l+a,null===(s=o.onDrag)||void 0===s||s.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;s(this,f),s(this,v),s(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);i(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})}},t.UpdateType=w,function(t){t.SCROLL="scroll",t.RESIZE="resize",t.FORCED="forced",t.FEATURE="feature"}(w||(t.UpdateType=w={})),t.ScrollBehavior=N,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:i,label:s,title:o}=t;return`\n\t\t
    \n\t\t\t${i.map(((t,e)=>{const r={index:e,page:t,pages:i},l=s(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]:{};i(this,C,Object.assign(Object.assign({},k),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){i(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),s=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}=s,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),i(this,L,g),i(this,S,v),this._update()}_update(){const t=n(this,O),e=n(this,S),{pageIndex:i}=t;null==e||e.forEach(((t,e)=>t.disabled=e===i))}_remove(){var t;const e=n(this,L),i=n(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==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),s(this,S),s(this,L)}_onClick(t){const e=n(this,O),i=n(this,S);if(!i)return;const s=t.currentTarget,o=i.indexOf(s);e.index=e.pages[o]}};const R="dims";class T{constructor(){window.addEventListener("resize",(()=>{s(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 i=t.offsetHeight;i=n===i?e.clientHeight:i;const s=n-i;return document.body.removeChild(e),{height:s}}))}}const j="prxy",M="conf",I="mask",$="hght";let B;const A={enabled:!0,className:"caroucssel-mask",tagName:"div"};class P{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,M,Object.assign(Object.assign({},A),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,I))&&void 0!==t?t:null}init(t){i(this,j,t),B=null!=B?B:new T,this._render()}destroy(){this._remove(),o(this)}update(t){switch(t.type){case w.RESIZE:case w.FORCED:s(this,$),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:s}=n(this,M);if(!t)return;const o=n(this,j).el;let{height:r}=B.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,I,(()=>{var t;const n=document.createElement(s);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,$)&&(i(this,$,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:i}=n(this,j),s=n(this,I);null===(t=null==s?void 0:s.parentNode)||void 0===t||t.insertBefore(i,s),null===(e=null==s?void 0:s.parentNode)||void 0===e||e.removeChild(s),i.removeAttribute("style")}}t.Mask=P;const D="inst",z="feat";function W(t){return n(t,D)}class U{constructor(t,e){i(this,D,t),i(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 F(t,e){let n=null;return function(){for(var i=arguments.length,s=new Array(i),o=0;ot(...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 it=0;const st={features:[],filterItem:()=>!0,onScroll:()=>{}};t.Carousel=class{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.`);i(this,q,t),it++,t.id=t.id||`caroucssel-${it}`,i(this,"id",t.id);const n=Object.assign(Object.assign({},st),e);i(this,V,n);let s=null,o=[...n.features];const r=n.features.findIndex((t=>t instanceof P));r>-1&&([s]=o.splice(r,1)),null!=s||(s=new P),o=o.filter((t=>!(t instanceof P))),o=[s,...o],i(this,Y,s);const l=new U(this,o);switch(i(this,"proxy",l),i(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=F(this._onScroll.bind(this),25),this._onResize=F(this._onResize.bind(this),25),t.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}static resetInstanceCount(){}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:i}=t,s=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=i&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,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}=n,a=l,h={left:i[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(s(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 i=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:i}=t;return{left:n,width:i,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:s}=t,o=i[i.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===i[0]&&(l=0);let a=Math.floor((e-l+.75*s)/n);for(;a>0;)i.push([]),a--;i[i.length-1].push(t)})),i=i.filter((t=>0!==t.length)),i.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:i}=this,s=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:i,right:r}=e[n].getBoundingClientRect();return i=Math.round(i-s),r=Math.round(r-s),i<0||o{const i=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-i}))[0];return i.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(){s(this,X),s(this,J),s(this,K),s(this,Q);n(this,tt).forEach((t=>t.update({type:w.FORCED})))}_onScroll(t){s(this,X),s(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(){s(this,K),s(this,X),s(this,Q);n(this,tt).forEach((t=>t.update({type:w.RESIZE})))}};t.version="1.1.0"})); +!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;const e=new WeakMap;function n(t,n,i){const s=e.get(t)||{};if(n in s)return s[n];if(!i)return;const o=i();return s[n]=o,e.set(t,s),o}function i(t,n,i){const s=e.get(t)||{};s[n]=i,e.set(t,s)}function s(t,n){const i=e.get(t);i&&(i[n]=void 0,delete i[n])}function o(t){e.delete(t)}function r(t,e){const n=document.createElement("div");n.innerHTML=t(e);const i=n.firstElementChild;return i||null}const l="prxy",a="conf",h="btns",d="click",c={template:t=>{let{className:e,controls:n,label:i,title:s}=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]:{};i(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){i(this,l,t),this._render()}destroy(){this._remove(),o(this)}update(){this._render()}_render(){const t=n(this,l),e=n(this,a),{el:i,mask:s,pages:o,pageIndex:c}=t,[u,p]=n(this,h,(()=>{const t=null!=s?s:i,{template:n,className:o,previousClassName:l,previousLabel:a,previousTitle:h,nextClassName:c,nextLabel:u,nextTitle:p}=e;return[{controls:i.id,label:u,title:p,className:[o,c].join(" "),handler:this._onNext},{controls:i.id,label:a,title:h,className:[o,l].join(" "),handler:this._onPrev}].map((e=>{var i,{handler:s}=e,o=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(i=Object.getOwnPropertySymbols(t);s{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:i}=t,s=e[i-1]||e[0];t.index=s}_onNext(){const t=n(this,l),{pages:e,pageIndex:i}=t,s=e[i+1]||e[e.length-1];t.index=s}};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]:{};i(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){i(this,u,t);const e=n(this,p),{el:s}=t;s.style.cursor=e.indicator?b:"",s.addEventListener("mousedown",this._onStart,{passive:!0})}destroy(){o(this)}update(){}_onStart(t){var e;const i=n(this,m);clearTimeout(i);const s=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=s.indicator?"grabbing":"",window.addEventListener(y,this._onDrag,{passive:!0}),window.addEventListener(x,this._onEnd,{passive:!0}),null===(e=s.onStart)||void 0===e||e.call(s,{originalEvent:t})}_onDrag(t){var e,i,s;const o=n(this,p),{el:r}=n(this,u),l=null!==(e=n(this,f))&&void 0!==e?e:0,a=(null!==(i=n(this,v))&&void 0!==i?i:0)-_(t);r.scrollLeft=l+a,null===(s=o.onDrag)||void 0===s||s.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;s(this,f),s(this,v),s(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);i(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})}},t.UpdateType=w,function(t){t.SCROLL="scroll",t.RESIZE="resize",t.FORCED="forced",t.FEATURE="feature"}(w||(t.UpdateType=w={})),t.ScrollBehavior=N,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:i,label:s,title:o}=t;return`\n\t\t
    \n\t\t\t${i.map(((t,e)=>{const r={index:e,page:t,pages:i},l=s(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]:{};i(this,C,Object.assign(Object.assign({},k),t)),this._onClick=this._onClick.bind(this)}get name(){return"buildin:pagination"}init(t){i(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),s=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}=s,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),i(this,L,g),i(this,S,v),this._update()}_update(){const t=n(this,O),e=n(this,S),{pageIndex:i}=t;null==e||e.forEach(((t,e)=>t.disabled=e===i))}_remove(){var t;const e=n(this,L),i=n(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==e?void 0:e.parentNode)||void 0===t||t.removeChild(e),s(this,S),s(this,L)}_onClick(t){const e=n(this,O),i=n(this,S);if(!i)return;const s=t.currentTarget,o=i.indexOf(s);e.index=e.pages[o]}};const R="dims";class T{constructor(){window.addEventListener("resize",(()=>{s(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 i=t.offsetHeight;i=n===i?e.clientHeight:i;const s=n-i;return document.body.removeChild(e),{height:s}}))}}const j="prxy",M="conf",I="mask",$="hght";let B;const A={enabled:!0,className:"caroucssel-mask",tagName:"div"};class P{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,M,Object.assign(Object.assign({},A),t))}get name(){return"buildin:mask"}get el(){var t;return null!==(t=n(this,I))&&void 0!==t?t:null}init(t){i(this,j,t),B=null!=B?B:new T,this._render()}destroy(){this._remove(),o(this)}update(t){switch(t.type){case w.RESIZE:case w.FORCED:s(this,$),this._render();break;default:this._render()}}_render(){const{enabled:t,className:e,tagName:s}=n(this,M);if(!t)return;const o=n(this,j).el;let{height:r}=B.dimensions;o.scrollWidth<=o.clientWidth&&(r=0),n(this,I,(()=>{var t;const n=document.createElement(s);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,$)&&(i(this,$,r),o.style.height=`calc(100% + ${r}px)`,o.style.marginBottom=-1*r+"px")}_remove(){var t,e;const{el:i}=n(this,j),s=n(this,I);null===(t=null==s?void 0:s.parentNode)||void 0===t||t.insertBefore(i,s),null===(e=null==s?void 0:s.parentNode)||void 0===e||e.removeChild(s),i.removeAttribute("style")}}t.Mask=P;const D="inst",z="feat";function W(t){return n(t,D)}class U{constructor(t,e){i(this,D,t),i(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 F(t,e){let n=null;return function(){for(var i=arguments.length,s=new Array(i),o=0;ot(...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 it=0;const st={features:[],filterItem:()=>!0,onScroll:()=>{}};t.Carousel=class{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.`);i(this,q,t),it++,t.id=t.id||`caroucssel-${it}`,i(this,"id",t.id);const n=Object.assign(Object.assign({},st),e);i(this,V,n);let s=null,o=[...n.features];const r=n.features.findIndex((t=>t instanceof P));r>-1&&([s]=o.splice(r,1)),null!=s||(s=new P),o=o.filter((t=>!(t instanceof P))),o=[s,...o],i(this,Y,s);const l=new U(this,o);switch(i(this,"proxy",l),i(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=F(this._onScroll.bind(this),25),this._onResize=F(this._onResize.bind(this),25),t.addEventListener(G,this._onScroll),window.addEventListener(Z,this._onResize)}static resetInstanceCount(){}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:i}=t,s=t.getBoundingClientRect().left,o=[];let r=0;for(;r=0&&l+.75*n<=i&&o.push(r)}return 0===o.length?[0]:o}))}set index(t){const{behavior:e,el:n,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}=n,a=l,h={left:i[r].offsetLeft};r===this.pages[0][0]&&(h.left=0),a!==h.left&&(s(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 i=[[]];return e.map(((t,e)=>{const{offsetLeft:n,clientWidth:i}=t;return{left:n,width:i,item:t,index:e}})).sort(((t,e)=>t.left-e.left)).forEach((t=>{const{left:e,width:s}=t,o=i[i.length-1],r=o[0];let l=(null==r?void 0:r.left)||0;o===i[0]&&(l=0);let a=Math.floor((e-l+.75*s)/n);for(;a>0;)i.push([]),a--;i[i.length-1].push(t)})),i=i.filter((t=>0!==t.length)),i.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:i}=this,s=t.getBoundingClientRect().left,{clientWidth:o}=t;let r=n.reduce(((t,n)=>{if(!e[n])return t;let{left:i,right:r}=e[n].getBoundingClientRect();return i=Math.round(i-s),r=Math.round(r-s),i<0||o{const i=e[t].getBoundingClientRect().right;return e[n].getBoundingClientRect().right-i}))[0];return i.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(){s(this,X),s(this,J),s(this,K),s(this,Q);n(this,tt).forEach((t=>t.update({type:w.FORCED})))}_onScroll(t){s(this,X),s(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(){s(this,K),s(this,X),s(this,Q);n(this,tt).forEach((t=>t.update({type:w.RESIZE})))}};t.version="1.1.1"})); diff --git a/dist/index.d.ts b/dist/index.d.ts index 9ac34e56..edcf2c42 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.0"; +export declare const version = "1.1.1"; diff --git a/dist/index.js b/dist/index.js index e2b91ef0..de790853 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.0'; +export const version = '1.1.1'; diff --git a/package-lock.json b/package-lock.json index 4b51e236..f3c74d61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "caroucssel", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "caroucssel", - "version": "1.1.0", + "version": "1.1.1", "license": "MIT", "devDependencies": { "@babel/core": "^7.15.5", diff --git a/package.json b/package.json index 45889564..4a3ddc9e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "caroucssel", - "version": "1.1.0", + "version": "1.1.1", "description": "A lightweight dependency-free css carousel.", "module": "index.js", "main": "formats/cjs/caroucssel.js",