diff --git a/dist/js/splide-renderer.min.js b/dist/js/splide-renderer.min.js index b9c4b255..b462b06d 100644 --- a/dist/js/splide-renderer.min.js +++ b/dist/js/splide-renderer.min.js @@ -1,2 +1,2 @@ -!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).SplideRenderer=i()}(this,function(){"use strict";var n="rtl",r="ttb",o={marginRight:["marginBottom","marginLeft"],autoWidth:["autoHeight"],fixedWidth:["fixedHeight"],paddingLeft:["paddingTop","paddingRight"],paddingRight:["paddingBottom","paddingLeft"],width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:["ArrowUp","ArrowRight"],ArrowRight:["ArrowDown","ArrowLeft"]};function a(t,i,s){return{resolve:function(t,i){var e=s.direction;return o[t][e!==n||i?e===r?0:-1:1]||t},orient:function(t){return t*(s.direction===n?1:-1)}}}var e="splide",s=e,u=e+"__track",l=e+"__list",c=e+"__slide",h=c+"--clone",t=e+"__arrow",i=e+"__pagination",d="is-active",f={type:"slide",speed:400,waitForTransition:!0,perPage:1,cloneStatus:!0,arrows:!0,pagination:!0,interval:5e3,pauseOnHover:!0,pauseOnFocus:!0,resetProgress:!0,keyboard:!0,easing:"cubic-bezier(0.25, 1, 0.5, 1)",drag:!0,direction:"ltr",slideFocus:!0,trimSpace:!0,focusableNodes:"a, button, textarea, input, select, iframe",classes:{slide:c,clone:h,arrows:e+"__arrows",arrow:t,prev:t+"--prev",next:t+"--next",pagination:i,page:i+"__page",spinner:e+"__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"}};function p(t){return null!==t&&"object"==typeof t}function g(t){return Array.isArray(t)}function v(t){return"string"==typeof t}function y(t){return g(t)?t:[t]}function b(t,i){y(t).forEach(i)}function m(t,i){return t.push.apply(t,y(i)),t}var S=Array.prototype;function w(t,i,e){return S.slice.call(t,i,e)}function C(t,i){return t instanceof HTMLElement&&(t.msMatchesSelector||t.matches).call(t,i)}function x(t,i){return i?(e=i,((i=t)?w(i.children).filter(function(t){return C(t,e)}):[])[0]):t.firstElementChild;var e}function _(t,i,e){if(t)for(var s=Object.keys(t),s=e?s.reverse():s,n=0;n img","display",t.cover?"none":"inline",i)})},i.buildTranslate=function(t){var i=this.Direction,e=i.resolve,s=i.orient,i=[];return i.push(this.cssOffsetClones(t)),i.push(this.cssOffsetGaps(t)),this.isCenter(t)&&(i.push(this.buildCssValue(s(-50),"%")),i.push.apply(i,this.cssOffsetCenter(t))),i.filter(Boolean).map(function(t){return"translate"+e("X")+"("+t+")"}).join(" ")},i.cssOffsetClones=function(t){var i=this.Direction,e=i.resolve,s=i.orient,n=this.getCloneCount();if(this.isFixedWidth(t)){i=this.parseCssValue(t[e("fixedWidth")]),e=i.value,i=i.unit;return this.buildCssValue(s(e)*n,i)}return s(100*n/t.perPage)+"%"},i.cssOffsetCenter=function(t){var i=this.Direction,e=i.resolve,i=i.orient;if(this.isFixedWidth(t)){var s=this.parseCssValue(t[e("fixedWidth")]),n=s.value,r=s.unit;return[this.buildCssValue(i(n/2),r)]}var s=[],n=t.perPage,r=t.gap;return s.push(i(50/n)+"%"),r&&(r=(t=this.parseCssValue(r)).value,t=t.unit,s.push(this.buildCssValue(i((r/n-r)/2),t))),s},i.cssOffsetGaps=function(t){var i=this.getCloneCount();if(i&&t.gap){var e=this.Direction.orient,s=this.parseCssValue(t.gap),n=s.value,s=s.unit;if(this.isFixedWidth(t))return this.buildCssValue(e(n*i),s);t=t.perPage;return this.buildCssValue(e(i/t*n),s)}return""},i.resolve=function(t){return E(this.Direction.resolve(t))},i.cssPadding=function(t,i){t=t.padding,i=this.Direction.resolve(i?"right":"left",!0);return t&&P(t[i]||(p(t)?0:t))||"0px"},i.cssTrackHeight=function(t){var i="";return this.isVertical()&&(T(i=this.cssHeight(t),'"height" is missing.'),i="calc("+i+" - "+this.cssPadding(t,!1)+" - "+this.cssPadding(t,!0)+")"),i},i.cssHeight=function(t){return P(t.height)},i.cssSlideWidth=function(t){return t.autoWidth?"":P(t.fixedWidth)||(this.isVertical()?"":this.cssSlideSize(t))},i.cssSlideHeight=function(t){return P(t.fixedHeight)||(this.isVertical()?t.autoHeight?"":this.cssSlideSize(t):this.cssHeight(t))},i.cssSlideSize=function(t){var i=P(t.gap);return"calc((100%"+(i&&" + "+i)+")/"+(t.perPage||1)+(i&&" - "+i)+")"},i.cssAspectRatio=function(t){t=t.heightRatio;return t?""+1/t:""},i.buildCssValue=function(t,i){return""+t+i},i.parseCssValue=function(t){return v(t)?{value:parseFloat(t)||0,unit:t.replace(/\d*(\.\d*)?/,"")||"px"}:{value:t,unit:"px"}},i.parseBreakpoints=function(){var e=this,t=this.options.breakpoints;this.breakpoints.push(["default",this.options]),t&&_(t,function(t,i){e.breakpoints.push([i,A(A({},e.options),t)])})},i.isFixedWidth=function(t){return!!t[this.Direction.resolve("fixedWidth")]},i.isLoop=function(){return"loop"===this.options.type},i.isCenter=function(t){if("center"===t.focus){if(this.isLoop())return!0;if("slide"===this.options.type)return!this.options.trimSpace}return!1},i.isVertical=function(){return this.options.direction===r},i.buildClasses=function(){var t=this.options;return[s,s+"--"+t.type,s+"--"+t.direction,t.drag&&s+"--draggable",t.isNavigation&&s+"--nav",d,!this.config.hidden&&"is-rendered"].filter(Boolean).join(" ")},i.buildAttrs=function(t){var e="";return _(t,function(t,i){e+=t?" "+E(i)+'="'+t+'"':""}),e.trim()},i.buildStyles=function(t){var e="";return _(t,function(t,i){e+=" "+E(i)+":"+t+";"}),e.trim()},i.renderSlides=function(){var i=this,e=this.config.slideTag;return this.slides.map(function(t){return"<"+e+" "+i.buildAttrs(t.attrs)+">"+(t.html||"")+""}).join("")},i.cover=function(t){var i=t.styles,t=t.html,t=void 0===t?"":t;!this.options.cover||this.options.lazyLoad||(t=t.match(//))&&t[2]&&(i.background="center/cover no-repeat url('"+t[2]+"')")},i.generateClones=function(s){for(var n=this.options.classes,r=this.getCloneCount(),t=s.slice();t.length',t+=this.renderArrow(!0),t+=this.renderArrow(!1),t+=""},i.renderArrow=function(t){var i=this.options,e=i.classes,i=i.i18n,i={class:e.arrow+" "+(t?e.prev:e.next),type:"button",ariaLabel:t?i.prev:i.next};return"'},i.html=function(){var t=this.config,i=t.rootClass,e=t.listTag,s=t.arrows,n=t.beforeTrack,r=t.afterTrack,o=t.slider,a=t.beforeSlider,u=t.afterSlider,t="";return t+='
',t+="",o&&(t+=a||"",t+='
'),t+=n||"",s&&(t+=this.renderArrows()),t+='
',t+="<"+e+' class="splide__list">',t+=this.renderSlides(),t+="",t+="
",t+=r||"",o&&(t+="
",t+=u||""),t+="
"},t}()}); +!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).SplideRenderer=i()}(this,function(){"use strict";var n="rtl",r="ttb",o={marginRight:["marginBottom","marginLeft"],autoWidth:["autoHeight"],fixedWidth:["fixedHeight"],paddingLeft:["paddingTop","paddingRight"],paddingRight:["paddingBottom","paddingLeft"],width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:["ArrowUp","ArrowRight"],ArrowRight:["ArrowDown","ArrowLeft"]};function a(t,i,s){return{resolve:function(t,i){var e=s.direction;return o[t][e!==n||i?e===r?0:-1:1]||t},orient:function(t){return t*(s.direction===n?1:-1)}}}var e="splide",s=e,u=e+"__track",l=e+"__list",c=e+"__slide",h=c+"--clone",t=e+"__arrow",i=e+"__pagination",d="is-active",f={type:"slide",role:"region",speed:400,waitForTransition:!0,perPage:1,cloneStatus:!0,arrows:!0,pagination:!0,interval:5e3,pauseOnHover:!0,pauseOnFocus:!0,resetProgress:!0,keyboard:!0,easing:"cubic-bezier(0.25, 1, 0.5, 1)",drag:!0,direction:"ltr",slideFocus:!0,trimSpace:!0,focusableNodes:"a, button, textarea, input, select, iframe",classes:{slide:c,clone:h,arrows:e+"__arrows",arrow:t,prev:t+"--prev",next:t+"--next",pagination:i,page:i+"__page",spinner:e+"__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",slideLabel:"%s of %s"}};function p(t){return null!==t&&"object"==typeof t}function g(t){return Array.isArray(t)}function v(t){return"string"==typeof t}function y(t){return g(t)?t:[t]}function b(t,i){y(t).forEach(i)}function m(t,i){return t.push.apply(t,y(i)),t}var S=Array.prototype;function w(t,i,e){return S.slice.call(t,i,e)}function C(t,i){return t instanceof HTMLElement&&(t.msMatchesSelector||t.matches).call(t,i)}function x(t,i){return i?(e=i,((i=t)?w(i.children).filter(function(t){return C(t,e)}):[])[0]):t.firstElementChild;var e}function _(t,i,e){if(t)for(var s=Object.keys(t),s=e?s.reverse():s,n=0;n img","display",t.cover?"none":"inline",i)})},i.buildTranslate=function(t){var i=this.Direction,e=i.resolve,s=i.orient,i=[];return i.push(this.cssOffsetClones(t)),i.push(this.cssOffsetGaps(t)),this.isCenter(t)&&(i.push(this.buildCssValue(s(-50),"%")),i.push.apply(i,this.cssOffsetCenter(t))),i.filter(Boolean).map(function(t){return"translate"+e("X")+"("+t+")"}).join(" ")},i.cssOffsetClones=function(t){var i=this.Direction,e=i.resolve,s=i.orient,n=this.getCloneCount();if(this.isFixedWidth(t)){i=this.parseCssValue(t[e("fixedWidth")]),e=i.value,i=i.unit;return this.buildCssValue(s(e)*n,i)}return s(100*n/t.perPage)+"%"},i.cssOffsetCenter=function(t){var i=this.Direction,e=i.resolve,i=i.orient;if(this.isFixedWidth(t)){var s=this.parseCssValue(t[e("fixedWidth")]),n=s.value,r=s.unit;return[this.buildCssValue(i(n/2),r)]}var s=[],n=t.perPage,r=t.gap;return s.push(i(50/n)+"%"),r&&(r=(t=this.parseCssValue(r)).value,t=t.unit,s.push(this.buildCssValue(i((r/n-r)/2),t))),s},i.cssOffsetGaps=function(t){var i=this.getCloneCount();if(i&&t.gap){var e=this.Direction.orient,s=this.parseCssValue(t.gap),n=s.value,s=s.unit;if(this.isFixedWidth(t))return this.buildCssValue(e(n*i),s);t=t.perPage;return this.buildCssValue(e(i/t*n),s)}return""},i.resolve=function(t){return E(this.Direction.resolve(t))},i.cssPadding=function(t,i){t=t.padding,i=this.Direction.resolve(i?"right":"left",!0);return t&&P(t[i]||(p(t)?0:t))||"0px"},i.cssTrackHeight=function(t){var i="";return this.isVertical()&&(T(i=this.cssHeight(t),'"height" is missing.'),i="calc("+i+" - "+this.cssPadding(t,!1)+" - "+this.cssPadding(t,!0)+")"),i},i.cssHeight=function(t){return P(t.height)},i.cssSlideWidth=function(t){return t.autoWidth?"":P(t.fixedWidth)||(this.isVertical()?"":this.cssSlideSize(t))},i.cssSlideHeight=function(t){return P(t.fixedHeight)||(this.isVertical()?t.autoHeight?"":this.cssSlideSize(t):this.cssHeight(t))},i.cssSlideSize=function(t){var i=P(t.gap);return"calc((100%"+(i&&" + "+i)+")/"+(t.perPage||1)+(i&&" - "+i)+")"},i.cssAspectRatio=function(t){t=t.heightRatio;return t?""+1/t:""},i.buildCssValue=function(t,i){return""+t+i},i.parseCssValue=function(t){return v(t)?{value:parseFloat(t)||0,unit:t.replace(/\d*(\.\d*)?/,"")||"px"}:{value:t,unit:"px"}},i.parseBreakpoints=function(){var e=this,t=this.options.breakpoints;this.breakpoints.push(["default",this.options]),t&&_(t,function(t,i){e.breakpoints.push([i,A(A({},e.options),t)])})},i.isFixedWidth=function(t){return!!t[this.Direction.resolve("fixedWidth")]},i.isLoop=function(){return"loop"===this.options.type},i.isCenter=function(t){if("center"===t.focus){if(this.isLoop())return!0;if("slide"===this.options.type)return!this.options.trimSpace}return!1},i.isVertical=function(){return this.options.direction===r},i.buildClasses=function(){var t=this.options;return[s,s+"--"+t.type,s+"--"+t.direction,t.drag&&s+"--draggable",t.isNavigation&&s+"--nav",d,!this.config.hidden&&"is-rendered"].filter(Boolean).join(" ")},i.buildAttrs=function(t){var e="";return _(t,function(t,i){e+=t?" "+E(i)+'="'+t+'"':""}),e.trim()},i.buildStyles=function(t){var e="";return _(t,function(t,i){e+=" "+E(i)+":"+t+";"}),e.trim()},i.renderSlides=function(){var i=this,e=this.config.slideTag;return this.slides.map(function(t){return"<"+e+" "+i.buildAttrs(t.attrs)+">"+(t.html||"")+""}).join("")},i.cover=function(t){var i=t.styles,t=t.html,t=void 0===t?"":t;!this.options.cover||this.options.lazyLoad||(t=t.match(//))&&t[2]&&(i.background="center/cover no-repeat url('"+t[2]+"')")},i.generateClones=function(s){for(var n=this.options.classes,r=this.getCloneCount(),t=s.slice();t.length',t+=this.renderArrow(!0),t+=this.renderArrow(!1),t+=""},i.renderArrow=function(t){var i=this.options,e=i.classes,i=i.i18n,i={class:e.arrow+" "+(t?e.prev:e.next),type:"button",ariaLabel:t?i.prev:i.next};return"'},i.html=function(){var t=this.config,i=t.rootClass,e=t.listTag,s=t.arrows,n=t.beforeTrack,r=t.afterTrack,o=t.slider,a=t.beforeSlider,u=t.afterSlider,t="";return t+='
',t+="",o&&(t+=a||"",t+='
'),t+=n||"",s&&(t+=this.renderArrows()),t+='
',t+="<"+e+' class="splide__list">',t+=this.renderSlides(),t+="",t+="
",t+=r||"",o&&(t+="
",t+=u||""),t+="
"},t}()}); //# sourceMappingURL=splide-renderer.min.js.map diff --git a/dist/js/splide.cjs.js b/dist/js/splide.cjs.js index f2d630f1..95d80cc3 100644 --- a/dist/js/splide.cjs.js +++ b/dist/js/splide.cjs.js @@ -272,10 +272,12 @@ function assert(condition, message) { } } -function nextTick(callback) { - setTimeout(callback); +function apply(func) { + return func.bind(null, ...slice(arguments, 1)); } +const nextTick = setTimeout; + const noop = () => { }; @@ -437,7 +439,7 @@ function EventInterface(Splide2) { function forEachEvent(targets, events, iteratee) { forEach(targets, (target) => { if (target) { - events.split(" ").forEach(iteratee.bind(null, target)); + events.split(" ").forEach(apply(iteratee, target)); } }); } @@ -701,6 +703,7 @@ const CLASSES = { function Elements(Splide2, Components2, options) { const { on } = EventInterface(Splide2); const { root } = Splide2; + const { i18n } = options; const elements = {}; const slides = []; let classes; @@ -713,7 +716,9 @@ function Elements(Splide2, Components2, options) { addClass(root, classes = getClasses()); } function mount() { - on(EVENT_REFRESH, refresh, DEFAULT_EVENT_PRIORITY - 2); + const priority = DEFAULT_EVENT_PRIORITY - 2; + on(EVENT_REFRESH, destroy, priority); + on(EVENT_REFRESH, setup, priority); on(EVENT_UPDATED, update); } function destroy() { @@ -721,10 +726,6 @@ function Elements(Splide2, Components2, options) { removeClass(root, classes); removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style")); } - function refresh() { - destroy(); - setup(); - } function update() { removeClass(root, classes); addClass(root, classes = getClasses()); @@ -757,7 +758,9 @@ function Elements(Splide2, Components2, options) { root.id = id; track.id = track.id || `${id}-track`; list.id = list.id || `${id}-list`; - setAttribute(root, ARIA_ROLEDESCRIPTION, "carousel"); + setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel); + setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || null); + setAttribute(list, ROLE, "none"); } function find(selector) { return child(root, selector) || child(slider, selector); @@ -785,7 +788,7 @@ const FADE = "fade"; function Slide$1(Splide2, index, slideIndex, slide) { const { on, emit, bind, destroy: destroyEvents } = EventInterface(Splide2); const { Components, root, options } = Splide2; - const { isNavigation, updateOnMove } = options; + const { isNavigation, updateOnMove, i18n } = options; const { resolve } = Components.Direction; const styles = getAttribute(slide, "style"); const isClone = slideIndex > -1; @@ -796,7 +799,8 @@ function Slide$1(Splide2, index, slideIndex, slide) { if (!isClone) { slide.id = `${root.id}-slide${pad(index + 1)}`; setAttribute(slide, ROLE, "group"); - setAttribute(slide, ARIA_ROLEDESCRIPTION, "slide"); + setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide); + setAttribute(slide, ARIA_LABEL, format(i18n.slideLabel, [index + 1, Splide2.length])); } listen(); } @@ -819,7 +823,7 @@ function Slide$1(Splide2, index, slideIndex, slide) { } function initNavigation() { const idx = isClone ? slideIndex : index; - const label = format(options.i18n.slideX, idx + 1); + const label = format(i18n.slideX, idx + 1); const controls = Splide2.splides.map((target) => target.splide.root.id).join(" "); setAttribute(slide, ARIA_LABEL, label); setAttribute(slide, ARIA_CONTROLS, controls); @@ -904,7 +908,8 @@ function Slides(Splide2, Components2, options) { const Slides2 = []; function mount() { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); on([EVENT_MOUNTED, EVENT_REFRESH], () => { Slides2.sort((Slide1, Slide2) => Slide1.index - Slide2.index); }); @@ -920,10 +925,6 @@ function Slides(Splide2, Components2, options) { }); empty(Slides2); } - function refresh() { - destroy(); - init(); - } function update() { forEach$1((Slide2) => { Slide2.update(); @@ -955,7 +956,7 @@ function Slides(Splide2, Components2, options) { const ref = slides[index]; ref ? before(slide, ref) : append(list, slide); addClass(slide, options.classes.slide); - observeImages(slide, emit.bind(null, EVENT_RESIZE)); + observeImages(slide, apply(emit, EVENT_RESIZE)); } }); emit(EVENT_REFRESH); @@ -1121,7 +1122,8 @@ function Clones(Splide2, Components2, options) { let cloneCount; function mount() { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); on([EVENT_UPDATED, EVENT_RESIZE], observe); } function init() { @@ -1134,10 +1136,6 @@ function Clones(Splide2, Components2, options) { remove(clones); empty(clones); } - function refresh() { - destroy(); - init(); - } function observe() { if (cloneCount < computeCloneCount()) { emit(EVENT_REFRESH); @@ -1497,8 +1495,7 @@ function Arrows(Splide2, Components2, options) { } if (prev && next) { if (!arrows.prev) { - const { id } = Elements.track; - setAttribute([prev, next], ARIA_CONTROLS, id); + setAttribute([prev, next], ARIA_CONTROLS, Elements.list.id); arrows.prev = prev; arrows.next = next; listen(); @@ -1517,12 +1514,8 @@ function Arrows(Splide2, Components2, options) { function listen() { const { go } = Controller; on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update); - bind(next, "click", () => { - go(">", true); - }); - bind(prev, "click", () => { - go("<", true); - }); + bind(next, "click", apply(go, ">", true, void 0)); + bind(prev, "click", apply(go, "<", true, void 0)); } function createArrows() { wrapper = create("div", classes.arrows); @@ -1647,30 +1640,25 @@ function Cover(Splide2, Components2, options) { const { on } = EventInterface(Splide2); function mount() { if (options.cover) { - on(EVENT_LAZYLOAD_LOADED, (img, Slide) => { - toggle(true, img, Slide); - }); - on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply.bind(null, true)); + on(EVENT_LAZYLOAD_LOADED, apply(toggle, true)); + on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply(cover, true)); } } - function destroy() { - apply(false); - } - function apply(cover) { + function cover(cover2) { Components2.Slides.forEach((Slide) => { const img = child(Slide.container || Slide.slide, "img"); if (img && img.src) { - toggle(cover, img, Slide); + toggle(cover2, img, Slide); } }); } - function toggle(cover, img, Slide) { - Slide.style("background", cover ? `center/cover no-repeat url("${img.src}")` : "", true); - display(img, cover ? "none" : ""); + function toggle(cover2, img, Slide) { + Slide.style("background", cover2 ? `center/cover no-repeat url("${img.src}")` : "", true); + display(img, cover2 ? "none" : ""); } return { mount, - destroy + destroy: apply(cover, false) }; } @@ -1860,9 +1848,7 @@ function Drag(Splide2, Components2, options) { if (isFree) { Controller.scroll(destination); } else if (Splide2.is(FADE)) { - const { length } = Splide2; - const index = Splide2.index + orient(sign(velocity)); - Controller.go(rewind ? (index + length) % length : index); + Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+"); } else if (Splide2.is(SLIDE) && exceeded && rewind) { Controller.go(exceededLimit(true) ? ">" : "<"); } else { @@ -1994,16 +1980,13 @@ function LazyLoad(Splide2, Components2, options) { function mount() { if (options.lazyLoad) { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); if (!isSequential) { on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED], observe); } } } - function refresh() { - destroy(); - init(); - } function init() { Components2.Slides.forEach((_Slide) => { queryAll(_Slide.slide, IMAGE_SELECTOR).forEach((_img) => { @@ -2114,10 +2097,9 @@ function Pagination(Splide2, Components2, options) { for (let i = 0; i < max; i++) { const li = create("li", null, list); const button = create("button", { class: classes.page, type: "button" }, li); - const controls = Slides.getIn(i).map((Slide) => Slide.slide.id); const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX; - bind(button, "click", onClick.bind(null, i)); - setAttribute(button, ARIA_CONTROLS, controls.join(" ")); + bind(button, "click", apply(onClick, i)); + setAttribute(button, ARIA_CONTROLS, Components2.Elements.list.id); setAttribute(button, ARIA_LABEL, format(text, i + 1)); items.push({ li, button, page: i }); } @@ -2215,6 +2197,29 @@ function Sync(Splide2, Components2, options) { }; } +function Live(Splide2, Components2, options) { + const { on } = EventInterface(Splide2); + const { list } = Components2.Elements; + const { live } = options; + function mount() { + if (live) { + setAttribute(list, ARIA_ATOMIC, false); + disable(!Components2.Autoplay.isPaused()); + on(EVENT_AUTOPLAY_PLAY, apply(disable, true)); + on(EVENT_AUTOPLAY_PAUSE, apply(disable, false)); + } + } + function disable(disabled) { + if (live) { + setAttribute(list, ARIA_LIVE, disabled ? "off" : "polite"); + } + } + return { + mount, + disable + }; +} + function Wheel(Splide2, Components2, options) { const { bind } = EventInterface(Splide2); function mount() { @@ -2259,6 +2264,7 @@ var ComponentConstructors = /*#__PURE__*/Object.freeze({ LazyLoad: LazyLoad, Pagination: Pagination, Sync: Sync, + Live: Live, Wheel: Wheel }); @@ -2270,11 +2276,15 @@ const I18N = { slideX: "Go to slide %s", pageX: "Go to page %s", play: "Start autoplay", - pause: "Pause autoplay" + pause: "Pause autoplay", + carousel: "carousel", + slide: "slide", + slideLabel: "%s of %s" }; const DEFAULTS = { type: "slide", + role: "region", speed: 400, waitForTransition: true, perPage: 1, diff --git a/dist/js/splide.esm.js b/dist/js/splide.esm.js index b817d23c..842bac43 100644 --- a/dist/js/splide.esm.js +++ b/dist/js/splide.esm.js @@ -268,10 +268,12 @@ function assert(condition, message) { } } -function nextTick(callback) { - setTimeout(callback); +function apply(func) { + return func.bind(null, ...slice(arguments, 1)); } +const nextTick = setTimeout; + const noop = () => { }; @@ -433,7 +435,7 @@ function EventInterface(Splide2) { function forEachEvent(targets, events, iteratee) { forEach(targets, (target) => { if (target) { - events.split(" ").forEach(iteratee.bind(null, target)); + events.split(" ").forEach(apply(iteratee, target)); } }); } @@ -697,6 +699,7 @@ const CLASSES = { function Elements(Splide2, Components2, options) { const { on } = EventInterface(Splide2); const { root } = Splide2; + const { i18n } = options; const elements = {}; const slides = []; let classes; @@ -709,7 +712,9 @@ function Elements(Splide2, Components2, options) { addClass(root, classes = getClasses()); } function mount() { - on(EVENT_REFRESH, refresh, DEFAULT_EVENT_PRIORITY - 2); + const priority = DEFAULT_EVENT_PRIORITY - 2; + on(EVENT_REFRESH, destroy, priority); + on(EVENT_REFRESH, setup, priority); on(EVENT_UPDATED, update); } function destroy() { @@ -717,10 +722,6 @@ function Elements(Splide2, Components2, options) { removeClass(root, classes); removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style")); } - function refresh() { - destroy(); - setup(); - } function update() { removeClass(root, classes); addClass(root, classes = getClasses()); @@ -753,7 +754,9 @@ function Elements(Splide2, Components2, options) { root.id = id; track.id = track.id || `${id}-track`; list.id = list.id || `${id}-list`; - setAttribute(root, ARIA_ROLEDESCRIPTION, "carousel"); + setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel); + setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || null); + setAttribute(list, ROLE, "none"); } function find(selector) { return child(root, selector) || child(slider, selector); @@ -781,7 +784,7 @@ const FADE = "fade"; function Slide$1(Splide2, index, slideIndex, slide) { const { on, emit, bind, destroy: destroyEvents } = EventInterface(Splide2); const { Components, root, options } = Splide2; - const { isNavigation, updateOnMove } = options; + const { isNavigation, updateOnMove, i18n } = options; const { resolve } = Components.Direction; const styles = getAttribute(slide, "style"); const isClone = slideIndex > -1; @@ -792,7 +795,8 @@ function Slide$1(Splide2, index, slideIndex, slide) { if (!isClone) { slide.id = `${root.id}-slide${pad(index + 1)}`; setAttribute(slide, ROLE, "group"); - setAttribute(slide, ARIA_ROLEDESCRIPTION, "slide"); + setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide); + setAttribute(slide, ARIA_LABEL, format(i18n.slideLabel, [index + 1, Splide2.length])); } listen(); } @@ -815,7 +819,7 @@ function Slide$1(Splide2, index, slideIndex, slide) { } function initNavigation() { const idx = isClone ? slideIndex : index; - const label = format(options.i18n.slideX, idx + 1); + const label = format(i18n.slideX, idx + 1); const controls = Splide2.splides.map((target) => target.splide.root.id).join(" "); setAttribute(slide, ARIA_LABEL, label); setAttribute(slide, ARIA_CONTROLS, controls); @@ -900,7 +904,8 @@ function Slides(Splide2, Components2, options) { const Slides2 = []; function mount() { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); on([EVENT_MOUNTED, EVENT_REFRESH], () => { Slides2.sort((Slide1, Slide2) => Slide1.index - Slide2.index); }); @@ -916,10 +921,6 @@ function Slides(Splide2, Components2, options) { }); empty(Slides2); } - function refresh() { - destroy(); - init(); - } function update() { forEach$1((Slide2) => { Slide2.update(); @@ -951,7 +952,7 @@ function Slides(Splide2, Components2, options) { const ref = slides[index]; ref ? before(slide, ref) : append(list, slide); addClass(slide, options.classes.slide); - observeImages(slide, emit.bind(null, EVENT_RESIZE)); + observeImages(slide, apply(emit, EVENT_RESIZE)); } }); emit(EVENT_REFRESH); @@ -1117,7 +1118,8 @@ function Clones(Splide2, Components2, options) { let cloneCount; function mount() { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); on([EVENT_UPDATED, EVENT_RESIZE], observe); } function init() { @@ -1130,10 +1132,6 @@ function Clones(Splide2, Components2, options) { remove(clones); empty(clones); } - function refresh() { - destroy(); - init(); - } function observe() { if (cloneCount < computeCloneCount()) { emit(EVENT_REFRESH); @@ -1493,8 +1491,7 @@ function Arrows(Splide2, Components2, options) { } if (prev && next) { if (!arrows.prev) { - const { id } = Elements.track; - setAttribute([prev, next], ARIA_CONTROLS, id); + setAttribute([prev, next], ARIA_CONTROLS, Elements.list.id); arrows.prev = prev; arrows.next = next; listen(); @@ -1513,12 +1510,8 @@ function Arrows(Splide2, Components2, options) { function listen() { const { go } = Controller; on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update); - bind(next, "click", () => { - go(">", true); - }); - bind(prev, "click", () => { - go("<", true); - }); + bind(next, "click", apply(go, ">", true, void 0)); + bind(prev, "click", apply(go, "<", true, void 0)); } function createArrows() { wrapper = create("div", classes.arrows); @@ -1643,30 +1636,25 @@ function Cover(Splide2, Components2, options) { const { on } = EventInterface(Splide2); function mount() { if (options.cover) { - on(EVENT_LAZYLOAD_LOADED, (img, Slide) => { - toggle(true, img, Slide); - }); - on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply.bind(null, true)); + on(EVENT_LAZYLOAD_LOADED, apply(toggle, true)); + on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply(cover, true)); } } - function destroy() { - apply(false); - } - function apply(cover) { + function cover(cover2) { Components2.Slides.forEach((Slide) => { const img = child(Slide.container || Slide.slide, "img"); if (img && img.src) { - toggle(cover, img, Slide); + toggle(cover2, img, Slide); } }); } - function toggle(cover, img, Slide) { - Slide.style("background", cover ? `center/cover no-repeat url("${img.src}")` : "", true); - display(img, cover ? "none" : ""); + function toggle(cover2, img, Slide) { + Slide.style("background", cover2 ? `center/cover no-repeat url("${img.src}")` : "", true); + display(img, cover2 ? "none" : ""); } return { mount, - destroy + destroy: apply(cover, false) }; } @@ -1856,9 +1844,7 @@ function Drag(Splide2, Components2, options) { if (isFree) { Controller.scroll(destination); } else if (Splide2.is(FADE)) { - const { length } = Splide2; - const index = Splide2.index + orient(sign(velocity)); - Controller.go(rewind ? (index + length) % length : index); + Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+"); } else if (Splide2.is(SLIDE) && exceeded && rewind) { Controller.go(exceededLimit(true) ? ">" : "<"); } else { @@ -1990,16 +1976,13 @@ function LazyLoad(Splide2, Components2, options) { function mount() { if (options.lazyLoad) { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); if (!isSequential) { on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED], observe); } } } - function refresh() { - destroy(); - init(); - } function init() { Components2.Slides.forEach((_Slide) => { queryAll(_Slide.slide, IMAGE_SELECTOR).forEach((_img) => { @@ -2110,10 +2093,9 @@ function Pagination(Splide2, Components2, options) { for (let i = 0; i < max; i++) { const li = create("li", null, list); const button = create("button", { class: classes.page, type: "button" }, li); - const controls = Slides.getIn(i).map((Slide) => Slide.slide.id); const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX; - bind(button, "click", onClick.bind(null, i)); - setAttribute(button, ARIA_CONTROLS, controls.join(" ")); + bind(button, "click", apply(onClick, i)); + setAttribute(button, ARIA_CONTROLS, Components2.Elements.list.id); setAttribute(button, ARIA_LABEL, format(text, i + 1)); items.push({ li, button, page: i }); } @@ -2211,6 +2193,29 @@ function Sync(Splide2, Components2, options) { }; } +function Live(Splide2, Components2, options) { + const { on } = EventInterface(Splide2); + const { list } = Components2.Elements; + const { live } = options; + function mount() { + if (live) { + setAttribute(list, ARIA_ATOMIC, false); + disable(!Components2.Autoplay.isPaused()); + on(EVENT_AUTOPLAY_PLAY, apply(disable, true)); + on(EVENT_AUTOPLAY_PAUSE, apply(disable, false)); + } + } + function disable(disabled) { + if (live) { + setAttribute(list, ARIA_LIVE, disabled ? "off" : "polite"); + } + } + return { + mount, + disable + }; +} + function Wheel(Splide2, Components2, options) { const { bind } = EventInterface(Splide2); function mount() { @@ -2255,6 +2260,7 @@ var ComponentConstructors = /*#__PURE__*/Object.freeze({ LazyLoad: LazyLoad, Pagination: Pagination, Sync: Sync, + Live: Live, Wheel: Wheel }); @@ -2266,11 +2272,15 @@ const I18N = { slideX: "Go to slide %s", pageX: "Go to page %s", play: "Start autoplay", - pause: "Pause autoplay" + pause: "Pause autoplay", + carousel: "carousel", + slide: "slide", + slideLabel: "%s of %s" }; const DEFAULTS = { type: "slide", + role: "region", speed: 400, waitForTransition: true, perPage: 1, diff --git a/dist/js/splide.js b/dist/js/splide.js index 79fbecde..751b0a00 100644 --- a/dist/js/splide.js +++ b/dist/js/splide.js @@ -298,10 +298,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d } } - function nextTick(callback) { - setTimeout(callback); + function apply(func) { + return func.bind.apply(func, [null].concat(slice(arguments, 1))); } + var nextTick = setTimeout; + var noop = function noop() {}; function raf(func) { @@ -483,7 +485,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function forEachEvent(targets, events, iteratee) { forEach(targets, function (target) { if (target) { - events.split(" ").forEach(iteratee.bind(null, target)); + events.split(" ").forEach(apply(iteratee, target)); } }); } @@ -779,6 +781,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d on = _EventInterface.on; var root = Splide2.root; + var i18n = options.i18n; var elements = {}; var slides = []; var classes; @@ -793,7 +796,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d } function mount() { - on(EVENT_REFRESH, refresh, DEFAULT_EVENT_PRIORITY - 2); + var priority = DEFAULT_EVENT_PRIORITY - 2; + on(EVENT_REFRESH, destroy, priority); + on(EVENT_REFRESH, setup, priority); on(EVENT_UPDATED, update); } @@ -803,11 +808,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style")); } - function refresh() { - destroy(); - setup(); - } - function update() { removeClass(root, classes); addClass(root, classes = getClasses()); @@ -842,7 +842,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d root.id = id; track.id = track.id || id + "-track"; list.id = list.id || id + "-list"; - setAttribute(root, ARIA_ROLEDESCRIPTION, "carousel"); + setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel); + setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || null); + setAttribute(list, ROLE, "none"); } function find(selector) { @@ -875,7 +877,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d root = Splide2.root, options = Splide2.options; var isNavigation = options.isNavigation, - updateOnMove = options.updateOnMove; + updateOnMove = options.updateOnMove, + i18n = options.i18n; var resolve = Components.Direction.resolve; var styles = getAttribute(slide, "style"); var isClone = slideIndex > -1; @@ -887,7 +890,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d if (!isClone) { slide.id = root.id + "-slide" + pad(index + 1); setAttribute(slide, ROLE, "group"); - setAttribute(slide, ARIA_ROLEDESCRIPTION, "slide"); + setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide); + setAttribute(slide, ARIA_LABEL, format(i18n.slideLabel, [index + 1, Splide2.length])); } listen(); @@ -915,7 +919,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function initNavigation() { var idx = isClone ? slideIndex : index; - var label = format(options.i18n.slideX, idx + 1); + var label = format(i18n.slideX, idx + 1); var controls = Splide2.splides.map(function (target) { return target.splide.root.id; }).join(" "); @@ -1024,7 +1028,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function mount() { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); on([EVENT_MOUNTED, EVENT_REFRESH], function () { Slides2.sort(function (Slide1, Slide2) { return Slide1.index - Slide2.index; @@ -1045,11 +1050,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d empty(Slides2); } - function refresh() { - destroy(); - init(); - } - function update() { forEach$1(function (Slide2) { Slide2.update(); @@ -1091,7 +1091,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d var ref = slides[index]; ref ? before(slide, ref) : append(list, slide); addClass(slide, options.classes.slide); - observeImages(slide, emit.bind(null, EVENT_RESIZE)); + observeImages(slide, apply(emit, EVENT_RESIZE)); } }); emit(EVENT_REFRESH); @@ -1304,7 +1304,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function mount() { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); on([EVENT_UPDATED, EVENT_RESIZE], observe); } @@ -1320,11 +1321,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d empty(clones); } - function refresh() { - destroy(); - init(); - } - function observe() { if (cloneCount < computeCloneCount()) { emit(EVENT_REFRESH); @@ -1778,8 +1774,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d if (prev && next) { if (!arrows.prev) { - var id = Elements.track.id; - setAttribute([prev, next], ARIA_CONTROLS, id); + setAttribute([prev, next], ARIA_CONTROLS, Elements.list.id); arrows.prev = prev; arrows.next = next; listen(); @@ -1801,12 +1796,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function listen() { var go = Controller.go; on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update); - bind(next, "click", function () { - go(">", true); - }); - bind(prev, "click", function () { - go("<", true); - }); + bind(next, "click", apply(go, ">", true, void 0)); + bind(prev, "click", apply(go, "<", true, void 0)); } function createArrows() { @@ -1961,35 +1952,29 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function mount() { if (options.cover) { - on(EVENT_LAZYLOAD_LOADED, function (img, Slide) { - toggle(true, img, Slide); - }); - on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply.bind(null, true)); + on(EVENT_LAZYLOAD_LOADED, apply(toggle, true)); + on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply(cover, true)); } } - function destroy() { - apply(false); - } - - function apply(cover) { + function cover(cover2) { Components2.Slides.forEach(function (Slide) { var img = child(Slide.container || Slide.slide, "img"); if (img && img.src) { - toggle(cover, img, Slide); + toggle(cover2, img, Slide); } }); } - function toggle(cover, img, Slide) { - Slide.style("background", cover ? "center/cover no-repeat url(\"" + img.src + "\")" : "", true); - display(img, cover ? "none" : ""); + function toggle(cover2, img, Slide) { + Slide.style("background", cover2 ? "center/cover no-repeat url(\"" + img.src + "\")" : "", true); + display(img, cover2 ? "none" : ""); } return { mount: mount, - destroy: destroy + destroy: apply(cover, false) }; } @@ -2396,7 +2381,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function mount() { if (options.lazyLoad) { init(); - on(EVENT_REFRESH, refresh); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); if (!isSequential) { on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED], observe); @@ -2404,11 +2390,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d } } - function refresh() { - destroy(); - init(); - } - function init() { Components2.Slides.forEach(function (_Slide) { queryAll(_Slide.slide, IMAGE_SELECTOR).forEach(function (_img) { @@ -2562,12 +2543,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d class: classes.page, type: "button" }, li); - var controls = Slides.getIn(i).map(function (Slide) { - return Slide.slide.id; - }); var text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX; - bind(button, "click", onClick.bind(null, i)); - setAttribute(button, ARIA_CONTROLS, controls.join(" ")); + bind(button, "click", apply(onClick, i)); + setAttribute(button, ARIA_CONTROLS, Components2.Elements.list.id); setAttribute(button, ARIA_LABEL, format(text, i + 1)); items.push({ li: li, @@ -2690,9 +2668,37 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d }; } - function Wheel(Splide2, Components2, options) { + function Live(Splide2, Components2, options) { var _EventInterface16 = EventInterface(Splide2), - bind = _EventInterface16.bind; + on = _EventInterface16.on; + + var list = Components2.Elements.list; + var live = options.live; + + function mount() { + if (live) { + setAttribute(list, ARIA_ATOMIC, false); + disable(!Components2.Autoplay.isPaused()); + on(EVENT_AUTOPLAY_PLAY, apply(disable, true)); + on(EVENT_AUTOPLAY_PAUSE, apply(disable, false)); + } + } + + function disable(disabled) { + if (live) { + setAttribute(list, ARIA_LIVE, disabled ? "off" : "polite"); + } + } + + return { + mount: mount, + disable: disable + }; + } + + function Wheel(Splide2, Components2, options) { + var _EventInterface17 = EventInterface(Splide2), + bind = _EventInterface17.bind; function mount() { if (options.wheel) { @@ -2740,6 +2746,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d LazyLoad: LazyLoad, Pagination: Pagination, Sync: Sync, + Live: Live, Wheel: Wheel }); var I18N = { @@ -2750,10 +2757,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d slideX: "Go to slide %s", pageX: "Go to page %s", play: "Start autoplay", - pause: "Pause autoplay" + pause: "Pause autoplay", + carousel: "carousel", + slide: "slide", + slideLabel: "%s of %s" }; var DEFAULTS = { type: "slide", + role: "region", speed: 400, waitForTransition: true, perPage: 1, @@ -2776,8 +2787,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d }; function Fade(Splide2, Components2, options) { - var _EventInterface17 = EventInterface(Splide2), - on = _EventInterface17.on; + var _EventInterface18 = EventInterface(Splide2), + on = _EventInterface18.on; function mount() { on([EVENT_MOUNTED, EVENT_REFRESH], function () { @@ -2804,8 +2815,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d } function Slide(Splide2, Components2, options) { - var _EventInterface18 = EventInterface(Splide2), - bind = _EventInterface18.bind; + var _EventInterface19 = EventInterface(Splide2), + bind = _EventInterface19.bind; var Move = Components2.Move, Controller = Components2.Controller; diff --git a/dist/js/splide.min.js b/dist/js/splide.min.js index 36cd0ad0..1788b297 100644 --- a/dist/js/splide.min.js +++ b/dist/js/splide.min.js @@ -1,2 +1,2 @@ -function _defineProperties(n,t){for(var e=0;e=o))return l();p(f)}}function l(){c=!0}function d(){cancelAnimationFrame(n),c=!(n=s=0)}return{start:function(n){n||d(),r=u()-(n?s*t:0),c=!1,p(f)},rewind:function(){r=u(),s=0,i&&i(s)},pause:l,cancel:d,set:function(n){t=n},isPaused:function(){return c}}}function d(n){var t=n;return{set:function(n){t=n},is:function(n){return w(y(n),t)}}}function Dn(e,i){var o;return function(){var n=arguments,t=this;o||(o=zn(i||0,function(){e.apply(t,n),o=null},null,1)).start()}}var h={marginRight:["marginBottom","marginLeft"],autoWidth:["autoHeight"],fixedWidth:["fixedHeight"],paddingLeft:["paddingTop","paddingRight"],paddingRight:["paddingBottom","paddingLeft"],width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:["ArrowUp","ArrowRight"],ArrowRight:["ArrowDown","ArrowLeft"]};var Mn="role",Tn="tabindex",t="aria-",In=t+"controls",Nn=t+"current",On=t+"label",Rn=t+"hidden",g=t+"orientation",Fn=t+"roledescription",jn=[Mn,Tn,"disabled",In,Nn,On,Rn,g,Fn,"aria-atomic","aria-live"],Bn=Q,Wn=Q+"__slider",Xn=Q+"__track",Gn=Q+"__list",Hn=Q+"__slide",Yn=Hn+"--clone",qn=Hn+"__container",Un=Q+"__arrows",e=Q+"__arrow",Jn=e+"--prev",Kn=e+"--next",t=Q+"__pagination",Qn=Q+"__progress",Vn=Qn+"__bar",Zn=Q+"__autoplay",$n=Q+"__play",nt=Q+"__pause",tt="is-active",et="is-prev",it="is-next",ot="is-visible",rt="is-loading",ut=[tt,ot,et,it,rt];var st="slide",ct="loop",at="fade";function ft(o,i,e,r){var u,n=Ln(o),t=n.on,s=n.emit,c=n.bind,a=n.destroy,f=o.Components,l=o.root,d=o.options,p=d.isNavigation,h=d.updateOnMove,g=f.Direction.resolve,v=B(r,"style"),m=-1r.perPage}}},Layout:function(n,t,e){var i,o,r=Ln(n),u=r.on,s=r.bind,c=r.emit,a=t.Slides,f=t.Direction.resolve,l=(t=t.Elements).root,d=t.track,p=t.list,h=a.getAt;function g(){o=null,i="ttb"===e.direction,O(l,"maxWidth",K(e.width)),O(d,f("paddingLeft"),m(!1)),O(d,f("paddingRight"),m(!0)),v()}function v(){var n=X(l);o&&o.width===n.width&&o.height===n.height||(O(d,"height",function(){var n="";i&&(V(n=y(),"height or heightRatio is missing."),n="calc("+n+" - "+m(!1)+" - "+m(!0)+")");return n}()),a.style(f("marginRight"),K(e.gap)),a.style("width",(e.autoWidth?"":K(e.fixedWidth)||(i?"":b()))||null),a.style("height",K(e.fixedHeight)||(i?e.autoHeight?"":b():y())||null,!0),o=n,c(Sn))}function m(n){var t=e.padding,n=f(n?"right":"left");return t&&K(t[n]||(F(t)?0:t))||"0px"}function y(){return K(e.height||X(p).width*e.heightRatio)}function b(){var n=K(e.gap);return"calc((100%"+(n&&" + "+n)+")/"+(e.perPage||1)+(n&&" - "+n)+")"}function _(n,t){var e=h(n);if(e){n=X(e.slide)[f("right")],e=X(p)[f("left")];return on(n-e)+(t?0:w())}return 0}function w(){var n=h(0);return n&&parseFloat(O(n.slide,f("marginRight")))||0}return{mount:function(){g(),s(window,"resize load",Dn(c.bind(this,En))),u([xn,wn],g),u(En,v)},listSize:function(){return X(p)[f("width")]},slideSize:function(n,t){return(n=h(n||0))?X(n.slide)[f("width")]+(t?0:w()):0},sliderSize:function(){return _(n.length-1,!0)-_(-1,!0)},totalSize:_,getPadding:function(n){return parseFloat(O(d,f("padding"+(n?"Right":"Left"))))||0}}},Clones:function(s,n,c){var t,e=Ln(s),i=e.on,o=e.emit,a=n.Elements,f=n.Slides,r=n.Direction.resolve,l=[];function u(){(t=g())&&(function(o){var r=f.get().slice(),u=r.length;if(u){for(;r.lengthp(x(!0));return e||t}return{mount:function(){a=s.Transition,t([ln,Sn,xn,wn],v)},destroy:function(){T(h,"style")},move:function(n,t,e,i){var o,r;E()||(o=u.state.set,r=w(),n!==t&&(a.cancel(),y(b(r,t":"<",!1,i):i&&i()}))},jump:m,translate:y,shift:b,cancel:function(){y(w()),a.cancel()},toIndex:function(n){for(var t=s.Slides.get(),e=0,i=1/0,o=0;o])(\d+)?/)||[],e=i[1],i=i[2],"+"===e||"-"===e?t=x(g+ +(""+e+(+i||1)),g,!0):">"===e?t=i?k(+i):b(!0):"<"===e&&(t=_(!0))):t=p?n:un(n,0,E())}return t}(n);o.useScroll?y(i,!0,!0,o.speed,e):-1<(n=S(i))&&!a.isBusy()&&(t||n!==g)&&(A(n),a.move(i,n,v,e))},scroll:y,getNext:b,getPrev:_,getAdjacent:w,getEnd:E,setIndex:A,getIndex:function(n){return n?v:g},toIndex:k,toPage:P,toDest:C,hasFocus:L}},Arrows:function(o,n,e){var i,t=Ln(o),r=t.on,u=t.bind,s=t.emit,c=e.classes,a=e.i18n,f=n.Elements,l=n.Controller,d=f.arrows,p=f.prev,h=f.next,g={};function v(){var n,t;e.arrows&&(p&&h||(d=N("div",c.arrows),p=m(!0),h=m(!1),i=!0,S(d,[p,h]),k(d,A("slider"===e.arrows&&f.slider||o.root)))),p&&h&&(g.prev||(n=f.track.id,I([p,h],In,n),g.prev=p,g.next=h,t=l.go,r([ln,pn,xn,wn,Pn],y),u(h,"click",function(){t(">",!0)}),u(p,"click",function(){t("<",!0)}),s("arrows:mounted",p,h)),R(d,!1===e.arrows?"none":""))}function m(n){return H(' + + + + + + diff --git a/src/js/types/components.ts b/src/js/types/components.ts index 940c6d2c..18c6bf02 100644 --- a/src/js/types/components.ts +++ b/src/js/types/components.ts @@ -9,6 +9,7 @@ import { ElementsComponent } from '../components/Elements/Elements'; import { KeyboardComponent } from '../components/Keyboard/Keyboard'; import { LayoutComponent } from '../components/Layout/Layout'; import { LazyLoadComponent } from '../components/LazyLoad/LazyLoad'; +import { LiveComponent } from '../components/Live/Live'; import { MoveComponent } from '../components/Move/Move'; import { OptionsComponent } from '../components/Options/Options'; import { PaginationComponent } from '../components/Pagination/Pagination'; @@ -44,5 +45,6 @@ export interface Components { Pagination: PaginationComponent; Sync: SyncComponent; Wheel: WheelComponent; + Live: LiveComponent; Transition: TransitionComponent; } diff --git a/src/js/types/index.ts b/src/js/types/index.ts index f4077e8c..bea185ae 100644 --- a/src/js/types/index.ts +++ b/src/js/types/index.ts @@ -2,5 +2,4 @@ export * from './components'; export * from './events'; export * from './general'; export * from './options'; - - +export * from './utils'; diff --git a/src/js/types/options.ts b/src/js/types/options.ts index 15f64a40..cac7f7e5 100644 --- a/src/js/types/options.ts +++ b/src/js/types/options.ts @@ -1,3 +1,6 @@ +import { I18N } from '../constants/i18n'; + + /** * The interface for options. * @@ -12,6 +15,12 @@ export interface Options extends ResponsiveOptions { */ type?: string; + /** + * The `role` attribute for the root element. + * If the tag is `
`, this value will not be used. The default value is `'region'`. + */ + role?: string; + /** * Determines whether to disable any actions while the slider is transitioning. * Even if `false`, the slider forcibly waits for transition on the loop points. @@ -157,6 +166,12 @@ export interface Options extends ResponsiveOptions { */ noDrag?: string; + /** + * Enables the live region by `aria-live`. + * If `true`, screen readers will read a content of each slide whenever slide changes. + */ + live?: boolean; + /** * Determines whether to use the Transition component or not. */ @@ -189,7 +204,7 @@ export interface Options extends ResponsiveOptions { /** * The collection of i18n strings. */ - i18n?: Record; + i18n?: Record; } /** diff --git a/src/js/types/utils.ts b/src/js/types/utils.ts new file mode 100644 index 00000000..c00e876d --- /dev/null +++ b/src/js/types/utils.ts @@ -0,0 +1,32 @@ +/** + * Casts T to U. + * + * @internal + */ +export type Cast = T extends U ? T : U; + +/** + * Pushes U to tuple T. + * + * @internal + */ +export type Push = [ ...T, U ]; + +/** + * Removes the first type from the tuple T. + * + * @internal + */ +export type Shift = ( ( ...args: T ) => any ) extends ( arg: any, ...args: infer A ) => any + ? A + : never; + +/** + * Removes the N types from the tuple T. + * + * @internal + */ +export type ShiftN = { + 0: T, + 1: ShiftN, N, Push>, +}[ C['length'] extends N ? 0 : 1 ] extends infer A ? Cast : never; \ No newline at end of file diff --git a/src/js/utils/function/apply/apply.test.ts b/src/js/utils/function/apply/apply.test.ts new file mode 100644 index 00000000..38ebfa10 --- /dev/null +++ b/src/js/utils/function/apply/apply.test.ts @@ -0,0 +1,25 @@ +import { apply } from './apply'; + + +describe( 'apply', () => { + test( 'can bind arguments to the function.', () => { + function sum( a: number, b: number, c = 0, d = 0 ): number { + return a + b + c + d; + } + + // The type should be ( b: number, c?: number, d?: number ) => number. + const sum1 = apply( sum, 1 ); + const sum2 = apply( sum, 1, 1 ); + const sum3 = apply( sum, 1, 1, 1 ); + const sum4 = apply( sum, 1, 1, 1, 1 ); + + expect( sum1( 1, 1, 1 ) ).toBe( 4 ); + expect( sum2( 1, 1 ) ).toBe( 4 ); + expect( sum3( 1 ) ).toBe( 4 ); + expect( sum4() ).toBe( 4 ); + + expect( sum1( 2 ) ).toBe( 3 ); // 1, 2, 0, 0 + expect( sum1( 2, 2 ) ).toBe( 5 ); // 1, 2, 2, 0 + expect( sum1( 2, 2, 2 ) ).toBe( 7 ); // 1, 2, 2, 2 + } ); +} ); \ No newline at end of file diff --git a/src/js/utils/function/apply/apply.ts b/src/js/utils/function/apply/apply.ts new file mode 100644 index 00000000..ea17fdbe --- /dev/null +++ b/src/js/utils/function/apply/apply.ts @@ -0,0 +1,28 @@ +import { AnyFunction, ShiftN } from '../../../types'; +import { slice } from '../../arrayLike'; + + +/** + * Create a function where provided arguments are bound. + * `this` parameter will be always null. + * + * @param func - A function. + * @param args - Arguments to bind to the function. + * + * @return A function where arguments are bound. + */ +export function apply( + func: F, + ...args: A +): ( ...args: ShiftN, A["length"]> ) => ReturnType; + +/** + * Create a function where provided arguments are bound. + * `this` parameter will be always null. + * + * @param func - A function. + */ +export function apply( func: AnyFunction ): any { + // eslint-disable-next-line prefer-rest-params, prefer-spread + return func.bind( null, ...slice( arguments, 1 ) ); +} diff --git a/src/js/utils/function/index.ts b/src/js/utils/function/index.ts index 2699bba0..78b776f0 100644 --- a/src/js/utils/function/index.ts +++ b/src/js/utils/function/index.ts @@ -1,3 +1,4 @@ +export { apply } from './apply/apply'; export { nextTick } from './nextTick/nextTick'; export { noop } from './noop/noop'; export { raf } from './raf/raf'; diff --git a/src/js/utils/function/nextTick/nextTick.ts b/src/js/utils/function/nextTick/nextTick.ts index 13358440..38c90ace 100644 --- a/src/js/utils/function/nextTick/nextTick.ts +++ b/src/js/utils/function/nextTick/nextTick.ts @@ -6,6 +6,4 @@ import { AnyFunction } from '../../../types'; * * @param callback - A callback function. */ -export function nextTick( callback: AnyFunction ): void { - setTimeout( callback ); -} +export const nextTick: ( callback: AnyFunction ) => ReturnType = setTimeout; diff --git a/src/js/utils/object/merge/merge.ts b/src/js/utils/object/merge/merge.ts index 023a4e5a..afb575dc 100644 --- a/src/js/utils/object/merge/merge.ts +++ b/src/js/utils/object/merge/merge.ts @@ -1,3 +1,4 @@ +import { Cast } from '../../../types'; import { isArray, isObject } from '../../type/type'; import { forOwn } from '../forOwn/forOwn'; @@ -22,8 +23,6 @@ export type Merge = Omit & { : U[ K ]; } & Omit; -type Cast = T extends U ? T : U; - /** * Recursively merges source properties to the object. * Be aware that this method does not merge arrays. They are just duplicated by `slice()`.