splide-renderer.min.js 9.7 KB

12345678
  1. /*!
  2. * Splide.js
  3. * Version : 4.1.3
  4. * License : MIT
  5. * Copyright: 2022 Naotoshi Fujita
  6. */
  7. var t,s;t=this,s=function(){"use strict";function e(t,...s){return t.bind(null,...s)}function s(t,s){return typeof s===t}function r(t){return null!==t&&s("object",t)}const n=Array.isArray,i=(e(s,"function"),e(s,"string"));function h(t){return n(t)?t:[t]}function o(t,s){return t.push(...h(s)),t}e(s,"boolean"),e(s,"undefined");const l=Array.prototype;function a(t,s,i){return l.slice.call(t,s,i)}const u=Object.assign,c=Object.keys;function d(s,i,t){s&&(t?c(s).reverse():c(s)).forEach(t=>{"__proto__"!==t&&i(s[t],t)})}function f(i,...t){return t.forEach(t=>{d(t,(t,s)=>{n(t)?t=t.slice():r(t)&&(t=f({},r(i[s])?i[s]:{},t)),i[s]=t})}),i}function p(t,s){return function(t){try{return t instanceof(t.ownerDocument.defaultView||window).HTMLElement}catch(t){return!1}}(t)&&t.matches(s)}function g(t,s){return s?function(t,s){const i=t?a(t.children):[];return s?i.filter(t=>p(t,s)):i}(t,s)[0]:t.firstElementChild}function v(t){var s;s=t=>{t&&t.parentNode&&t.parentNode.removeChild(t)},h(t).forEach(s)}function w(t){return i(t)?t:t?t+"px":""}const $=Math["max"];function b(t){return t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}const y={};const _={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:["ArrowUp","ArrowRight"],ArrowRight:["ArrowDown","ArrowLeft"]},x=(t,s,r)=>{function i(t,s,i=r.direction){const e="rtl"!==i||s?"ttb"===i?0:-1:1;return _[t]&&_[t][e]||t.replace(/width|left|right/i,(t,s)=>{const i=_[t.toLowerCase()][e]||t;return 0<s?i.charAt(0).toUpperCase()+i.slice(1):i})}return{resolve:i,orient:function(t,s=r.direction){return t*("rtl"===s?1:-1)},left:e(i,"left"),right:e(i,"right"),width:e(i,"width")}},m="splide";var t=m+"__";const S=m,A=t+"slide",C=A+"--clone";var T=t+"arrow",t=t+"pagination";const k="is-active";const L={type:"slide",speed:400,perPage:1,easing:"cubic-bezier(0.25, 1, 0.5, 1)",drag:!0,direction:"ltr",interval:5e3,trimSpace:!0,focusableNodes:"a, button, textarea, input, select, iframe",classes:{slide:A,clone:C,arrows:"splide__arrows",arrow:T,prev:"splide__arrow--prev",next:"splide__arrow--next",pagination:t,page:"splide__pagination__page",spinner:"splide__spinner"},i18n:{prev:"Previous slide",next:"Next slide",first:"Go to first slide",last:"Go to last slide",slideX:"Go to slide %s",pageX:"Go to page %s",play:"Start autoplay",pause:"Pause autoplay",carousel:"carousel",slide:"slide",select:"Select a slide to show",slideLabel:"%s of %s"},reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}},O={listTag:"ul",slideTag:"li"};class P{styles={};id;options;constructor(t,s){this.id=t,this.options=s}rule(t,s,i,e){const r=this.styles[e=e||"default"]=this.styles[e]||{},n=r[t]=r[t]||{};n[s]=i}build(){let s="";return this.styles.default&&(s+=this.buildSelectors(this.styles.default)),Object.keys(this.styles).sort((t,s)=>"min"===this.options.mediaQuery?+t-+s:+s-+t).forEach(t=>{"default"!==t&&(s=(s+=`@media screen and (max-width: ${t}px) {`)+this.buildSelectors(this.styles[t])+"}")}),s}buildSelectors(t){let i="";return d(t,(t,s)=>{i+=(`#${this.id} `+s).trim()+" {",d(t,(t,s)=>{!t&&0!==t||(i+=s+`: ${t};`)}),i+="}"}),i}}function R(t,s){if(!t)throw new Error(`[${m}] `+(s||""))}return class{static clean(t){const s=t.event["on"],i=t["root"];t=i;var e,t=(e="."+C)&&t?a(t.querySelectorAll(e)):[];s("mounted",()=>{v(g(i,"style"))}),v(t)}contents;slides=[];Direction;Style;options={};config;id;breakpoints=[];constructor(t,s,i,e){f(L,e||{}),f(f(this.options,L),s||{}),this.contents=t,this.config=u({},O,i||{}),this.id=this.config.id||""+(e="splide")+(""+(y[e]=(y[e]||0)+1)).padStart(2,"0"),this.Style=new P(this.id,this.options),this.Direction=x(0,0,this.options),R(this.contents.length,"Provide at least 1 content."),this.init()}init(){this.parseBreakpoints(),this.initSlides(),this.registerRootStyles(),this.registerTrackStyles(),this.registerSlideStyles(),this.registerListStyles()}initSlides(){o(this.slides,this.contents.map((t,s)=>{(t=i(t)?{html:t}:t).styles=t.styles||{},t.attrs=t.attrs||{},this.cover(t);s=this.options.classes.slide+" "+(0===s?"is-active":"");return u(t.attrs,{class:(s+" "+(t.attrs.class||"")).trim(),style:this.buildStyles(t.styles)}),t})),this.isLoop()&&this.generateClones(this.slides)}registerRootStyles(){this.breakpoints.forEach(([t,s])=>{this.Style.rule(" ","max-width",w(s.width),t)})}registerTrackStyles(){const i=this["Style"],e=".splide__track";this.breakpoints.forEach(([t,s])=>{i.rule(e,this.resolve("paddingLeft"),this.cssPadding(s,!1),t),i.rule(e,this.resolve("paddingRight"),this.cssPadding(s,!0),t),i.rule(e,"height",this.cssTrackHeight(s),t)})}registerListStyles(){const i=this["Style"],e=".splide__list";this.breakpoints.forEach(([t,s])=>{i.rule(e,"transform",this.buildTranslate(s),t),this.cssSlideHeight(s)||i.rule(e,"aspect-ratio",this.cssAspectRatio(s),t)})}registerSlideStyles(){const i=this["Style"],e="."+A;this.breakpoints.forEach(([t,s])=>{i.rule(e,"width",this.cssSlideWidth(s),t),i.rule(e,"height",this.cssSlideHeight(s)||"100%",t),i.rule(e,this.resolve("marginRight"),w(s.gap)||"0px",t),i.rule(e+" > img","display",s.cover?"none":"inline",t)})}buildTranslate(t){const{resolve:s,orient:i}=this.Direction,e=[];return e.push(this.cssOffsetClones(t)),e.push(this.cssOffsetGaps(t)),this.isCenter(t)&&(e.push(this.buildCssValue(i(-50),"%")),e.push(...this.cssOffsetCenter(t))),e.filter(Boolean).map(t=>`translate${s("X")}(${t})`).join(" ")}cssOffsetClones(t){const{resolve:s,orient:i}=this.Direction;var e,r,n=this.getCloneCount();return this.isFixedWidth(t)?({value:r,unit:e}=this.parseCssValue(t[s("fixedWidth")]),this.buildCssValue(i(r)*n,e)):(r=100*n/t.perPage,i(r)+"%")}cssOffsetCenter(t){const{resolve:s,orient:i}=this.Direction;if(this.isFixedWidth(t))return{value:r,unit:n}=this.parseCssValue(t[s("fixedWidth")]),[this.buildCssValue(i(r/2),n)];const e=[];var{perPage:r,gap:n}=t;return e.push(i(50/r)+"%"),n&&({value:t,unit:n}=this.parseCssValue(n),e.push(this.buildCssValue(i((t/r-t)/2),n))),e}cssOffsetGaps(t){var s=this.getCloneCount();if(s&&t.gap){const r=this.Direction["orient"];var{value:i,unit:e}=this.parseCssValue(t.gap);return this.isFixedWidth(t)?this.buildCssValue(r(i*s),e):(t=t["perPage"],this.buildCssValue(r(s/t*i),e))}return""}resolve(t){return b(this.Direction.resolve(t))}cssPadding(t,s){t=t.padding,s=this.Direction.resolve(s?"right":"left",!0);return t&&w(t[s]||(r(t)?0:t))||"0px"}cssTrackHeight(t){let s="";return this.isVertical()&&(R(s=this.cssHeight(t),'"height" is missing.'),s=`calc(${s} - ${this.cssPadding(t,!1)} - ${this.cssPadding(t,!0)})`),s}cssHeight(t){return w(t.height)}cssSlideWidth(t){return t.autoWidth?"":w(t.fixedWidth)||(this.isVertical()?"":this.cssSlideSize(t))}cssSlideHeight(t){return w(t.fixedHeight)||(this.isVertical()?t.autoHeight?"":this.cssSlideSize(t):this.cssHeight(t))}cssSlideSize(t){var s=w(t.gap);return`calc((100%${s&&" + "+s})/${t.perPage||1}${s&&" - "+s})`}cssAspectRatio(t){t=t.heightRatio;return t?""+1/t:""}buildCssValue(t,s){return""+t+s}parseCssValue(t){return i(t)?{value:parseFloat(t)||0,unit:t.replace(/\d*(\.\d*)?/,"")||"px"}:{value:t,unit:"px"}}parseBreakpoints(){var t=this.options["breakpoints"];this.breakpoints.push(["default",this.options]),t&&d(t,(t,s)=>{this.breakpoints.push([s,f(f({},this.options),t)])})}isFixedWidth(t){return!!t[this.Direction.resolve("fixedWidth")]}isLoop(){return"loop"===this.options.type}isCenter(t){if("center"===t.focus){if(this.isLoop())return!0;if("slide"===this.options.type)return!this.options.trimSpace}return!1}isVertical(){return"ttb"===this.options.direction}buildClasses(){const t=this["options"];return[S,S+"--"+t.type,S+"--"+t.direction,t.drag&&S+"--draggable",t.isNavigation&&S+"--nav",k,!this.config.hidden&&"is-rendered"].filter(Boolean).join(" ")}buildAttrs(t){let i="";return d(t,(t,s)=>{i+=t?` ${b(s)}="${t}"`:""}),i.trim()}buildStyles(t){let i="";return d(t,(t,s)=>{i+=` ${b(s)}:${t};`}),i.trim()}renderSlides(){const s=this.config["slideTag"];return this.slides.map(t=>`<${s} ${this.buildAttrs(t.attrs)}>${t.html||""}</${s}>`).join("")}cover(t){const{styles:s,html:i=""}=t;this.options.cover&&!this.options.lazyLoad&&(t=i.match(/<img.*?src\s*=\s*(['"])(.+?)\1.*?>/))&&t[2]&&(s.background=`center/cover no-repeat url('${t[2]}')`)}generateClones(e){const r=this.options["classes"],n=this.getCloneCount(),t=e.slice();for(;t.length<n;)o(t,t);o(t.slice(-n).reverse(),t.slice(0,n)).forEach((t,s)=>{var i=u({},t.attrs,{class:t.attrs.class+" "+r.clone}),t=u({},t,{attrs:i});s<n?e.unshift(t):e.push(t)})}getCloneCount(){var t;return this.isLoop()?(t=this["options"],t.clones||$(...this.breakpoints.map(([,t])=>t.perPage))*((t.flickMaxPages||1)+1)):0}renderArrows(){var t="";return(t+=`<div class="${this.options.classes.arrows}">`)+this.renderArrow(!0)+this.renderArrow(!1)+"</div>"}renderArrow(t){var{classes:s,i18n:i}=this.options,s={class:s.arrow+" "+(t?s.prev:s.next),type:"button",ariaLabel:t?i.prev:i.next};return`<button ${this.buildAttrs(s)}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="${this.options.arrowPath||"m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"}" /></svg></button>`}html(){var{rootClass:t,listTag:s,arrows:i,beforeTrack:e,afterTrack:r,slider:n,beforeSlider:h,afterSlider:o}=this.config;let l="";return l=(l+=`<div id="${this.id}" class="${this.buildClasses()} ${t||""}">`)+`<style>${this.Style.build()}</style>`,n&&(l=l+(h||"")+'<div class="splide__slider">'),l+=e||"",i&&(l+=this.renderArrows()),l=(l=(l=l+'<div class="splide__track">'+`<${s} class="splide__list">`)+this.renderSlides()+`</${s}>`)+"</div>"+(r||""),n&&(l=l+"</div>"+(o||"")),l+="</div>"}}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):(t="undefined"!=typeof globalThis?globalThis:t||self).SplideRenderer=s();
  8. //# sourceMappingURL=splide-renderer.min.js.map