You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
10 KiB
1 lines
10 KiB
const t=(e,...i)=>{const s=i.length;for(let n=0;n<s;n++){const s=i[n]||{};Object.entries(s).forEach((([i,s])=>{const n=Array.isArray(s)?[]:{};var r;e[i]||Object.assign(e,{[i]:n}),"object"==typeof(r=s)&&null!==r&&r.constructor===Object&&"[object Object]"===Object.prototype.toString.call(r)?Object.assign(e[i],t(n,s)):Array.isArray(s)?Object.assign(e,{[i]:[...s]}):Object.assign(e,{[i]:s})}))}return e},e=t=>`${t||""}`.split(" ").filter((t=>!!t)),i=(t,i)=>{t&&e(i).forEach((e=>{t.classList.add(e)}))},s=(t,i)=>{t&&e(i).forEach((e=>{t.classList.remove(e)}))},n=function(t,e){return t.split(".").reduce(((t,e)=>"object"==typeof t?t[e]:void 0),e)};class r{constructor(t={}){Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"events",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),this.setOptions(t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))t.startsWith("on")&&"function"==typeof this[t]&&(this[t]=this[t].bind(this))}setOptions(e){this.options=e?t({},this.constructor.defaults,e):{};for(const[t,e]of Object.entries(this.option("on")||{}))this.on(t,e)}option(t,...e){let i=n(t,this.options);return i&&"function"==typeof i&&(i=i.call(this,this,...e)),i}optionFor(t,e,i,...s){let r=n(e,t);var o;"string"!=typeof(o=r)||isNaN(o)||isNaN(parseFloat(o))||(r=parseFloat(r)),"true"===r&&(r=!0),"false"===r&&(r=!1),r&&"function"==typeof r&&(r=r.call(this,this,t,...s));let a=n(e,this.options);return a&&"function"==typeof a?r=a.call(this,this,t,...s,r):void 0===r&&(r=a),void 0===r?i:r}cn(t){const e=this.options.classes;return e&&e[t]||""}localize(t,e=[]){t=String(t).replace(/\{\{(\w+).?(\w+)?\}\}/g,((t,e,i)=>{let s="";return i?s=this.option(`${e[0]+e.toLowerCase().substring(1)}.l10n.${i}`):e&&(s=this.option(`l10n.${e}`)),s||(s=t),s}));for(let i=0;i<e.length;i++)t=t.split(e[i][0]).join(e[i][1]);return t=t.replace(/\{\{(.*?)\}\}/g,((t,e)=>e))}on(t,e){let i=[];"string"==typeof t?i=t.split(" "):Array.isArray(t)&&(i=t),this.events||(this.events=new Map),i.forEach((t=>{let i=this.events.get(t);i||(this.events.set(t,[]),i=[]),i.includes(e)||i.push(e),this.events.set(t,i)}))}off(t,e){let i=[];"string"==typeof t?i=t.split(" "):Array.isArray(t)&&(i=t),i.forEach((t=>{const i=this.events.get(t);if(Array.isArray(i)){const t=i.indexOf(e);t>-1&&i.splice(t,1)}}))}emit(t,...e){[...this.events.get(t)||[]].forEach((t=>t(this,...e))),"*"!==t&&this.emit("*",t,...e)}}Object.defineProperty(r,"version",{enumerable:!0,configurable:!0,writable:!0,value:"5.0.26"}),Object.defineProperty(r,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:{}});class o extends r{constructor(t,e){super(e),Object.defineProperty(this,"instance",{enumerable:!0,configurable:!0,writable:!0,value:t})}attach(){}detach(){}}var a,l;!function(t){t[t.Init=0]="Init",t[t.Error=1]="Error",t[t.Ready=2]="Ready",t[t.Panning=3]="Panning",t[t.Mousemove=4]="Mousemove",t[t.Destroy=5]="Destroy"}(a||(a={})),function(t){t[t.Init=0]="Init",t[t.Ready=1]="Ready",t[t.Destroy=2]="Destroy"}(l||(l={}));const c=(t,e=1e4)=>(t=parseFloat(t+"")||0,Math.round((t+Number.EPSILON)*e)/e),h={classes:{container:"f-thumbs f-carousel__thumbs",viewport:"f-thumbs__viewport",track:"f-thumbs__track",slide:"f-thumbs__slide",isResting:"is-resting",isSelected:"is-selected",isLoading:"is-loading",hasThumbs:"has-thumbs"},minCount:2,parentEl:null,thumbTpl:'<button class="f-thumbs__slide__button" tabindex="0" type="button" aria-label="{{GOTO}}" data-carousel-index="%i"><img class="f-thumbs__slide__img" data-lazy-src="{{%s}}" alt="" /></button>',type:"modern"};var u;!function(t){t[t.Init=0]="Init",t[t.Ready=1]="Ready",t[t.Hidden=2]="Hidden"}(u||(u={}));const d="thumbWidth",f="thumbHeight",b="thumbClipWidth";class p extends o{constructor(){super(...arguments),Object.defineProperty(this,"type",{enumerable:!0,configurable:!0,writable:!0,value:"modern"}),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"track",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"carousel",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"thumbWidth",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"thumbClipWidth",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"thumbHeight",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"thumbGap",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"thumbExtraGap",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:u.Init})}get isModern(){return"modern"===this.type}onInitSlide(t,e){const i=e.el?e.el.dataset:void 0;i&&(e.thumbSrc=i.thumbSrc||e.thumbSrc||"",e[b]=parseFloat(i[b]||"")||e[b]||0,e[f]=parseFloat(i.thumbHeight||"")||e[f]||0),this.addSlide(e)}onInitSlides(){this.build()}onTransform(){var t,i,n;if(!this.isModern)return;const r=this.instance,o=this.carousel,a=o?o.panzoom:null;if(o&&a&&(null===(t=r.panzoom)||void 0===t?void 0:t.isDragging)){let t=(null===(i=o.pages[o.page])||void 0===i?void 0:i.pos)||0;t+=r.getProgress()*this[b];let e=a.getBounds();-1*t>e.x.min&&-1*t<e.x.max&&a.panTo({x:-1*t,friction:.75}),s(this.container,this.cn("isResting"))}else l=this.container,c=this.cn("isResting"),h=null===(n=r.panzoom)||void 0===n?void 0:n.isResting,l&&e(c).forEach((t=>{l.classList.toggle(t,h||!1)}));var l,c,h;this.shiftModern()}onRefresh(){this.updateProps();for(const t of this.instance.slides||[])this.resizeModernSlide(t);this.shiftModern()}isDisabled(){const t=this.option("minCount")||0;if(t){const e=this.instance;let i=0;for(const t of e.slides||[])t.thumbSrc&&i++;if(i<t)return!0}const e=this.option("type");return["modern","classic"].indexOf(e)<0}getThumb(t){const e=this.option("thumbTpl")||"";return{html:this.instance.localize(e,[["%i",t.index],["%d",t.index+1],["%s",t.thumbSrc||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"]])}}addSlide(t){const e=this.carousel;e&&e.addSlide(t.index,this.getThumb(t))}getSlides(){const t=[];for(const e of this.instance.slides||[])t.push(this.getThumb(e));return t}resizeModernSlide(t){var e,i;if(!this.isModern)return;if(!(null===(i=null===(e=this.carousel)||void 0===e?void 0:e.slides[t.index])||void 0===i?void 0:i.el))return;const s=t[b]&&t[f]?Math.round(this[f]*(t[b]/t[f])):this[d];t[d]=s}updateProps(){const t=this.container;if(!t)return;const e=e=>parseFloat(getComputedStyle(t).getPropertyValue("--f-thumb-"+e))||0;this.thumbGap=e("gap"),this.thumbExtraGap=e("extra-gap"),this[d]=e("width")||40,this[b]=e("clip-width")||40,this[f]=e("height")||40}build(){if(this.state!==u.Init)return;if(this.isDisabled())return;const e=this.instance,s=e.container,n=this.getSlides(),r=this.option("type");this.type=r;const o=document.createElement("div");i(o,this.cn("container")),i(o,`is-${r}`),i(o,this.cn("isResting"));const a=this.option("parentEl");a?a.appendChild(o):s.after(o),i(s,this.cn("hasThumbs")),this.container=o,this.updateProps();const l=document.createElement("div");i(l,this.cn("track")),o.appendChild(l),this.track=l;const c=t({},{track:l,infinite:!1,center:!0,fill:"classic"===r,dragFree:!0,slidesPerPage:1,transition:!1,preload:.25,friction:.12,Panzoom:{maxVelocity:0},Dots:!1,Navigation:!1,classes:{container:"f-thumbs",viewport:"f-thumbs__viewport",track:"f-thumbs__track",slide:"f-thumbs__slide"}},this.option("Carousel")||{},{Sync:{target:e},slides:n}),h=new e.constructor(o,c);h.on("createSlide",((t,e)=>{this.setProps(e.index),this.emit("createSlide",e,e.el)})),h.on("ready",(()=>{this.shiftModern(),this.emit("ready")})),h.on("refresh",(()=>{this.shiftModern()})),h.on("Panzoom.click",((t,e,i)=>{this.onClick(i)})),this.carousel=h,this.state=u.Ready}onClick(t){t.preventDefault(),t.stopPropagation();const e=this.instance,{pages:i,page:s}=e,n=t=>{if(t){const e=t.closest("[data-carousel-index]");if(e)return[parseInt(e.dataset.carouselIndex||"",10)||0,e]}return[-1,void 0]},r=(t,e)=>{const i=document.elementFromPoint(t,e);return i?n(i):[-1,void 0]};let[o,a]=n(t.target);if(o>-1)return;const l=this[b],c=t.clientX,h=t.clientY;let[u,d]=r(c-l,h),[f,p]=r(c+l,h);d&&p?(o=Math.abs(c-d.getBoundingClientRect().right)<Math.abs(c-p.getBoundingClientRect().left)?u:f,o===s&&(o=o===u?f:u)):d?o=u:p&&(o=f),o>-1&&i[o]&&e.slideTo(o)}getShift(t){var e;const{instance:i}=this,s=this.carousel;if(!i||!s)return 0;const n=this[d],r=this[b],o=this.thumbGap,a=this.thumbExtraGap;if(!(null===(e=s.slides[t])||void 0===e?void 0:e.el))return 0;const l=.5*(n-r),c=i.pages.length-1;let h=i.getProgress(0),u=i.getProgress(c),f=i.getProgress(t,!1,!0),p=0,m=l+a+o;const g=h<0&&h>-1,y=u>0&&u<1;return 0===t?(p=m*Math.abs(h),y&&1===h&&(p-=m*Math.abs(u))):t===c?(p=m*Math.abs(u)*-1,g&&-1===u&&(p+=m*Math.abs(h))):g||y?(p=-1*m,p+=m*Math.abs(h),p+=m*(1-Math.abs(u))):p=m*f,p}setProps(t){if(!this.isModern)return;const{instance:e}=this,i=this.carousel;if(e&&i){const s=i.slides[t].el;if(s&&s.childNodes.length){let i=c(1-Math.abs(e.getProgress(t))),n=c(this.getShift(t));s.style.setProperty("--progress",i?i+"":""),s.style.setProperty("--shift",n+"")}}}shiftModern(){if(!this.isModern)return;const{instance:t,track:e}=this,i=t.panzoom,s=this.carousel;if(!(t&&e&&i&&s))return;if(i.state===a.Init||i.state===a.Destroy)return;for(const e of t.slides)this.setProps(e.index);let n=(this[b]+this.thumbGap)*(s.slides.length||0);e.style.setProperty("--width",n+"")}cleanup(){this.carousel&&this.carousel.destroy(),this.carousel=null,this.container&&this.container.remove(),this.container=null,this.track&&this.track.remove(),this.track=null,this.state=u.Init,s(this.instance.container,this.cn("hasThumbs"))}attach(){const t=this,e=t.instance;e.on("initSlide",t.onInitSlide),e.state===l.Init?e.on("initSlides",t.onInitSlides):t.onInitSlides(),e.on("Panzoom.afterTransform",t.onTransform),e.on("Panzoom.refresh",t.onRefresh)}detach(){const t=this,e=t.instance;e.off("initSlide",t.onInitSlide),e.off("initSlides",t.onInitSlides),e.off("Panzoom.afterTransform",t.onTransform),e.off("Panzoom.refresh",t.onRefresh),t.cleanup()}}Object.defineProperty(p,"defaults",{enumerable:!0,configurable:!0,writable:!0,value:h});export{u as States,p as Thumbs,h as defaultOptions};
|
|
|