/*! * Splide.js * Version : 3.0.0 * License : MIT * Copyright: 2021 Naotoshi Fujita */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); const PROJECT_CODE = "splide"; const DATA_ATTRIBUTE = `data-${PROJECT_CODE}`; const CREATED = 1; const MOUNTED = 2; const IDLE = 3; const MOVING = 4; const DESTROYED = 5; const STATES = { CREATED, MOUNTED, IDLE, MOVING, DESTROYED }; const DEFAULT_EVENT_PRIORITY = 10; const DEFAULT_USER_EVENT_PRIORITY = 20; function empty(array) { array.length = 0; } function isObject(subject) { return !isNull(subject) && typeof subject === "object"; } function isArray(subject) { return Array.isArray(subject); } function isFunction(subject) { return typeof subject === "function"; } function isString(subject) { return typeof subject === "string"; } function isUndefined(subject) { return typeof subject === "undefined"; } function isNull(subject) { return subject === null; } function isHTMLElement(subject) { return subject instanceof HTMLElement; } function isHTMLButtonElement(subject) { return subject instanceof HTMLButtonElement; } function toArray(value) { return isArray(value) ? value : [value]; } function forEach(values, iteratee) { toArray(values).forEach(iteratee); } function includes(array, value) { return array.indexOf(value) > -1; } function push(array, items) { array.push(...toArray(items)); return array; } const arrayProto = Array.prototype; function slice(arrayLike, start, end) { return arrayProto.slice.call(arrayLike, start, end); } function find(arrayLike, predicate) { return slice(arrayLike).filter(predicate)[0]; } function toggleClass(elm, classes, add) { if (elm) { forEach(classes, (name) => { if (name) { elm.classList[add ? "add" : "remove"](name); } }); } } function addClass(elm, classes) { toggleClass(elm, isString(classes) ? classes.split(" ") : classes, true); } function append(parent, children) { forEach(children, parent.appendChild.bind(parent)); } function before(nodes, ref) { forEach(nodes, (node) => { const parent = ref.parentNode; if (parent) { parent.insertBefore(node, ref); } }); } function matches(elm, selector) { return (elm["msMatchesSelector"] || elm.matches).call(elm, selector); } function children(parent, selector) { return parent ? slice(parent.children).filter((child) => matches(child, selector)) : []; } function child(parent, selector) { return selector ? children(parent, selector)[0] : parent.firstElementChild; } function forOwn(object, iteratee) { if (object) { const keys = Object.keys(object); for (let i = 0; i < keys.length; i++) { const key = keys[i]; if (key !== "__proto__") { if (iteratee(object[key], key) === false) { break; } } } } return object; } function assign(object) { slice(arguments, 1).forEach((source) => { forOwn(source, (value, key) => { object[key] = source[key]; }); }); return object; } function merge(object, source) { forOwn(source, (value, key) => { if (isArray(value)) { object[key] = value.slice(); } else if (isObject(value)) { object[key] = merge(isObject(object[key]) ? object[key] : {}, value); } else { object[key] = value; } }); return object; } function removeAttribute(elm, attrs) { if (elm) { forEach(attrs, (attr) => { elm.removeAttribute(attr); }); } } function setAttribute(elm, attrs, value) { if (isObject(attrs)) { forOwn(attrs, (value2, name) => { setAttribute(elm, name, value2); }); } else { isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value)); } } function create(tag, attrs, parent) { const elm = document.createElement(tag); if (attrs) { isString(attrs) ? addClass(elm, attrs) : setAttribute(elm, attrs); } parent && append(parent, elm); return elm; } function style(elm, styles) { if (isString(styles)) { return getComputedStyle(elm)[styles]; } forOwn(styles, (value, key) => { if (!isNull(value)) { elm.style[key] = `${value}`; } }); } function display(elm, display2) { style(elm, { display: display2 }); } function getAttribute(elm, attr) { return elm.getAttribute(attr); } function hasClass(elm, className) { return elm && elm.classList.contains(className); } function rect(target) { return target.getBoundingClientRect(); } function remove(nodes) { forEach(nodes, (node) => { if (node && node.parentNode) { node.parentNode.removeChild(node); } }); } function measure(parent, value) { if (isString(value)) { const div = create("div", { style: `width: ${value}; position: absolute;` }, parent); value = rect(div).width; remove(div); } return value; } function parseHtml(html) { return child(new DOMParser().parseFromString(html, "text/html").body); } function prevent(e, stopPropagation) { e.preventDefault(); if (stopPropagation) { e.stopPropagation(); e.stopImmediatePropagation(); } } function query(parent, selector) { return parent && parent.querySelector(selector); } function queryAll(parent, selector) { return slice(parent.querySelectorAll(selector)); } function removeClass(elm, classes) { toggleClass(elm, classes, false); } function unit(value) { return isString(value) ? value : value ? `${value}px` : ""; } function assert(condition, message = "") { if (!condition) { throw new Error(`[${PROJECT_CODE}] ${message}`); } } function nextTick(callback) { setTimeout(callback); } const noop = () => { }; function raf(func) { return requestAnimationFrame(func); } const { min, max, floor, ceil, abs } = Math; function approximatelyEqual(x, y, epsilon) { return abs(x - y) < epsilon; } function between(number, minOrMax, maxOrMin, exclusive) { const minimum = min(minOrMax, maxOrMin); const maximum = max(minOrMax, maxOrMin); return exclusive ? minimum < number && number < maximum : minimum <= number && number <= maximum; } function clamp(number, x, y) { const minimum = min(x, y); const maximum = max(x, y); return min(max(minimum, number), maximum); } function sign(x) { return +(x > 0) - +(x < 0); } function camelToKebab(string) { return string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(); } function format(string, replacements) { forEach(replacements, (replacement) => { string = string.replace("%s", `${replacement}`); }); return string; } function pad(number) { return number < 10 ? `0${number}` : `${number}`; } const ids = {}; function uniqueId(prefix) { return `${prefix}${pad(ids[prefix] = (ids[prefix] || 0) + 1)}`; } function EventBus() { let handlers = {}; function on(events, callback, key, priority = DEFAULT_EVENT_PRIORITY) { forEachEvent(events, (event, namespace) => { handlers[event] = handlers[event] || []; push(handlers[event], { _event: event, _callback: callback, _namespace: namespace, _priority: priority, _key: key }).sort((handler1, handler2) => handler1._priority - handler2._priority); }); } function off(events, key) { forEachEvent(events, (event, namespace) => { const eventHandlers = handlers[event]; handlers[event] = eventHandlers && eventHandlers.filter((handler) => { return handler._key ? handler._key !== key : handler._namespace !== namespace; }); }); } function offBy(key) { forOwn(handlers, (eventHandlers, event) => { off(event, key); }); } function emit(event) { (handlers[event] || []).forEach((handler) => { handler._callback.apply(handler, slice(arguments, 1)); }); } function destroy() { handlers = {}; } function forEachEvent(events, iteratee) { toArray(events).join(" ").split(" ").forEach((eventNS) => { const fragments = eventNS.split("."); iteratee(fragments[0], fragments[1]); }); } return { on, off, offBy, emit, destroy }; } const EVENT_MOUNTED = "mounted"; const EVENT_READY = "ready"; const EVENT_MOVE = "move"; const EVENT_MOVED = "moved"; const EVENT_CLICK = "click"; const EVENT_ACTIVE = "active"; const EVENT_INACTIVE = "inactive"; const EVENT_VISIBLE = "visible"; const EVENT_HIDDEN = "hidden"; const EVENT_SLIDE_KEYDOWN = "slide:keydown"; const EVENT_REFRESH = "refresh"; const EVENT_UPDATED = "undated"; const EVENT_RESIZE = "resize"; const EVENT_RESIZED = "resized"; const EVENT_DRAG = "drag"; const EVENT_DRAGGING = "dragging"; const EVENT_DRAGGED = "dragged"; const EVENT_SCROLL = "scroll"; const EVENT_SCROLLED = "scrolled"; const EVENT_DESTROY = "destroy"; const EVENT_ARROWS_MOUNTED = "arrows:mounted"; const EVENT_ARROWS_UPDATED = "arrows:updated"; const EVENT_PAGINATION_MOUNTED = "pagination:mounted"; const EVENT_PAGINATION_UPDATED = "pagination:updated"; const EVENT_NAVIGATION_MOUNTED = "navigation:mounted"; const EVENT_AUTOPLAY_PLAY = "autoplay:play"; const EVENT_AUTOPLAY_PLAYING = "autoplay:playing"; const EVENT_AUTOPLAY_PAUSE = "autoplay:pause"; const EVENT_LAZYLOAD_LOADED = "lazyload:loaded"; function EventInterface(Splide2) { const { event } = Splide2; const key = {}; let listeners = []; function on(events, callback, priority) { event.on(events, callback, key, priority); } function off(events) { event.off(events, key); } function bind(targets, events, callback, options) { forEachEvent(targets, events, (target, event2) => { listeners.push([target, event2, callback, options]); target.addEventListener(event2, callback, options); }); } function unbind(targets, events) { forEachEvent(targets, events, (target, event2) => { listeners = listeners.filter((listener) => { if (listener[0] === target && listener[1] === event2) { target.removeEventListener(event2, listener[2], listener[3]); return false; } return true; }); }); } function forEachEvent(targets, events, iteratee) { forEach(targets, (target) => { if (target) { events.split(" ").forEach(iteratee.bind(null, target)); } }); } function destroy() { listeners = listeners.filter((data) => unbind(data[0], data[1])); event.offBy(key); } event.on(EVENT_DESTROY, destroy, key); return { on, off, emit: event.emit, bind, unbind, destroy }; } function RequestInterval(interval, onInterval, onUpdate, limit) { const { now } = Date; let startTime; let rate = 0; let id; let paused = true; let count = 0; function update() { if (!paused) { const elapsed = now() - startTime; if (elapsed >= interval) { rate = 1; startTime = now(); } else { rate = elapsed / interval; } if (onUpdate) { onUpdate(rate); } if (rate === 1) { onInterval(); if (limit && ++count >= limit) { return pause(); } } raf(update); } } function start(resume) { !resume && cancel(); startTime = now() - (resume ? rate * interval : 0); paused = false; raf(update); } function pause() { paused = true; } function rewind() { startTime = now(); rate = 0; if (onUpdate) { onUpdate(rate); } } function cancel() { cancelAnimationFrame(id); rate = 0; id = 0; paused = true; } function isPaused() { return paused; } return { start, rewind, pause, cancel, isPaused }; } function State(initialState) { let state = initialState; function set(value) { state = value; } function is(states) { return includes(toArray(states), state); } return { set, is }; } function Throttle(func, duration) { let interval; function throttled() { if (!interval) { interval = RequestInterval(duration || 0, () => { func.apply(this, arguments); interval = null; }, null, 1); interval.start(); } } return throttled; } function Options(Splide2, Components2, options) { const throttledObserve = Throttle(observe); let initialOptions; let points; let currPoint; function setup() { try { merge(options, JSON.parse(getAttribute(Splide2.root, DATA_ATTRIBUTE))); } catch (e) { assert(false, e.message); } initialOptions = merge({}, options); } function mount() { const { breakpoints } = options; const isMin = options.mediaQuery === "min"; if (breakpoints) { points = Object.keys(breakpoints).sort((n, m) => isMin ? +m - +n : +n - +m).map((point) => [ point, matchMedia(`(${isMin ? "min" : "max"}-width:${point}px)`) ]); addEventListener("resize", throttledObserve); observe(); } } function destroy(completely) { if (completely) { removeEventListener("resize", throttledObserve); } } function observe() { const item = find(points, (item2) => item2[1].matches) || []; if (item[0] !== currPoint) { onMatch(currPoint = item[0]); } } function onMatch(point) { const newOptions = options.breakpoints[point] || initialOptions; if (newOptions.destroy) { Splide2.options = initialOptions; Splide2.destroy(newOptions.destroy === "completely"); } else { if (Splide2.state.is(DESTROYED)) { destroy(true); Splide2.mount(); } Splide2.options = newOptions; } } return { setup, mount, destroy }; } const RTL = "rtl"; const TTB = "ttb"; const ORIENTATION_MAP = { 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 Direction(Splide2, Components2, options) { function resolve(prop, axisOnly) { const { direction } = options; const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1; return ORIENTATION_MAP[prop][index] || prop; } function orient(value) { return value * (options.direction === RTL ? 1 : -1); } return { resolve, orient }; } const CLASS_ROOT = PROJECT_CODE; const CLASS_SLIDER = `${PROJECT_CODE}__slider`; const CLASS_TRACK = `${PROJECT_CODE}__track`; const CLASS_LIST = `${PROJECT_CODE}__list`; const CLASS_SLIDE = `${PROJECT_CODE}__slide`; const CLASS_CLONE = `${CLASS_SLIDE}--clone`; const CLASS_CONTAINER = `${CLASS_SLIDE}__container`; const CLASS_ARROWS = `${PROJECT_CODE}__arrows`; const CLASS_ARROW = `${PROJECT_CODE}__arrow`; const CLASS_ARROW_PREV = `${CLASS_ARROW}--prev`; const CLASS_ARROW_NEXT = `${CLASS_ARROW}--next`; const CLASS_PAGINATION = `${PROJECT_CODE}__pagination`; const CLASS_PAGINATION_PAGE = `${CLASS_PAGINATION}__page`; const CLASS_PROGRESS = `${PROJECT_CODE}__progress`; const CLASS_PROGRESS_BAR = `${CLASS_PROGRESS}__bar`; const CLASS_AUTOPLAY = `${PROJECT_CODE}__autoplay`; const CLASS_PLAY = `${PROJECT_CODE}__play`; const CLASS_PAUSE = `${PROJECT_CODE}__pause`; const CLASS_SPINNER = `${PROJECT_CODE}__spinner`; const CLASS_INITIALIZED = "is-initialized"; const CLASS_ACTIVE = "is-active"; const CLASS_PREV = "is-prev"; const CLASS_NEXT = "is-next"; const CLASS_VISIBLE = "is-visible"; const CLASS_LOADING = "is-loading"; const STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING]; const CLASSES = { slide: CLASS_SLIDE, clone: CLASS_CLONE, arrows: CLASS_ARROWS, arrow: CLASS_ARROW, prev: CLASS_ARROW_PREV, next: CLASS_ARROW_NEXT, pagination: CLASS_PAGINATION, page: CLASS_PAGINATION_PAGE, spinner: CLASS_SPINNER }; function Elements(Splide2, Components2, options) { const { on } = EventInterface(Splide2); const { root } = Splide2; const elements = {}; const slides = []; let classes; let slider; let track; let list; function setup() { collect(); identify(); addClass(root, classes = getClasses()); } function mount() { on(EVENT_REFRESH, refresh); on(EVENT_UPDATED, update); } function destroy() { empty(slides); removeClass(root, classes); } function refresh() { destroy(); setup(); } function update() { removeClass(root, classes); addClass(root, classes = getClasses()); } function collect() { slider = child(root, `.${CLASS_SLIDER}`); track = query(root, `.${CLASS_TRACK}`); list = child(track, `.${CLASS_LIST}`); assert(track && list, "A track/list element is missing."); push(slides, children(list, `.${CLASS_SLIDE}:not(.${CLASS_CLONE})`)); const autoplay = find(`.${CLASS_AUTOPLAY}`); const arrows = find(`.${CLASS_ARROWS}`); assign(elements, { root, slider, track, list, slides, arrows, prev: query(arrows, `.${CLASS_ARROW_PREV}`), next: query(arrows, `.${CLASS_ARROW_NEXT}`), bar: query(find(`.${CLASS_PROGRESS}`), `.${CLASS_PROGRESS_BAR}`), play: query(autoplay, `.${CLASS_PLAY}`), pause: query(autoplay, `.${CLASS_PAUSE}`) }); } function identify() { const id = root.id || uniqueId(PROJECT_CODE); root.id = id; track.id = track.id || `${id}-track`; list.id = list.id || `${id}-list`; } function find(selector) { return child(root, selector) || child(slider, selector); } function getClasses() { return [ `${CLASS_ROOT}--${options.type}`, `${CLASS_ROOT}--${options.direction}`, options.drag && `${CLASS_ROOT}--draggable`, options.isNavigation && `${CLASS_ROOT}--nav`, CLASS_ACTIVE ]; } return assign(elements, { setup, mount, destroy }); } function Style$1() { let style; let sheet; function mount() { style = create("style", {}, document.head); sheet = style.sheet; } function destroy() { remove(style); sheet = null; } function rule(selector, prop, value) { const { cssRules } = sheet; const cssRule = find(cssRules, (cssRule2) => isCSSStyleRule(cssRule2) && cssRule2.selectorText === selector) || cssRules[sheet.insertRule(`${selector}{}`, 0)]; if (isCSSStyleRule(cssRule)) { const { style: style2 } = cssRule; value = `${value}`; if (style2[prop] !== value) { style2[prop] = value; } } } function ruleBy(target, prop, value) { rule(`#${isHTMLElement(target) ? target.id : target}`, prop, value); } function isCSSStyleRule(cssRule) { return cssRule instanceof CSSStyleRule; } return { mount, destroy, rule, ruleBy }; } const ROLE = "role"; const ARIA_CONTROLS = "aria-controls"; const ARIA_CURRENT = "aria-current"; const ARIA_LABEL = "aria-label"; const ARIA_HIDDEN = "aria-hidden"; const TAB_INDEX = "tabindex"; const DISABLED = "disabled"; const ARIA_ORIENTATION = "aria-orientation"; const ALL_ATTRIBUTES = [ ROLE, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, TAB_INDEX, DISABLED ]; const SLIDE = "slide"; const LOOP = "loop"; 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 { resolve } = Components.Direction; const isClone = slideIndex > -1; const container = child(slide, `.${CLASS_CONTAINER}`); let destroyed; function mount() { init(); bind(slide, "click keydown", (e) => { emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e); }); on([EVENT_RESIZED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update.bind(this)); if (updateOnMove) { on(EVENT_MOVE, onMove.bind(this)); } update.call(this); } function init() { if (!isClone) { slide.id = `${root.id}-slide${pad(index + 1)}`; } if (isNavigation) { const idx = isClone ? slideIndex : index; const label = format(options.i18n.slideX, idx + 1); const controls = Splide2.splides.map((splide) => splide.root.id).join(" "); setAttribute(slide, ARIA_LABEL, label); setAttribute(slide, ARIA_CONTROLS, controls); setAttribute(slide, ROLE, "menuitem"); } } function destroy() { destroyed = true; destroyEvents(); removeClass(slide, STATUS_CLASSES); removeAttribute(slide, ALL_ATTRIBUTES); } function onMove(next, prev, dest) { if (!destroyed) { update.call(this); if (dest === index) { updateActivity.call(this, true); } } } function update() { if (!destroyed) { const { index: currIndex } = Splide2; updateActivity.call(this, isActive()); updateVisibility.call(this, isVisible()); toggleClass(slide, CLASS_PREV, index === currIndex - 1); toggleClass(slide, CLASS_NEXT, index === currIndex + 1); } } function updateActivity(active) { if (active !== hasClass(slide, CLASS_ACTIVE)) { toggleClass(slide, CLASS_ACTIVE, active); if (isNavigation) { setAttribute(slide, ARIA_CURRENT, active || null); } emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this); } } function updateVisibility(visible) { const { focusableNodes } = options; const ariaHidden = !visible && !isActive(); setAttribute(slide, ARIA_HIDDEN, ariaHidden || null); setAttribute(slide, TAB_INDEX, !ariaHidden && options.slideFocus ? 0 : null); if (focusableNodes) { queryAll(slide, focusableNodes).forEach((node) => { setAttribute(node, TAB_INDEX, ariaHidden ? -1 : null); }); } if (visible !== hasClass(slide, CLASS_VISIBLE)) { toggleClass(slide, CLASS_VISIBLE, visible); emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this); } } function rule(prop, value, useContainer) { const selector = `#${slide.id}${container && useContainer ? ` > .${CLASS_CONTAINER}` : ""}`; Components.Style.rule(selector, prop, value); } function isActive() { return Splide2.index === index; } function isVisible() { if (Splide2.is(FADE)) { return isActive(); } const trackRect = rect(Components.Elements.track); const slideRect = rect(slide); const left = resolve("left"); const right = resolve("right"); return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]); } function isWithin(from, distance) { let diff = abs(from - index); if (!Splide2.is(SLIDE) && !isClone) { diff = min(diff, Splide2.length - diff); } return diff <= distance; } return { index, slideIndex, slide, container, isClone, mount, destroy, rule, isWithin }; } function Slides(Splide2, Components2, options) { const { on, emit, bind } = EventInterface(Splide2); const { slides, list } = Components2.Elements; const Slides2 = []; function mount() { init(); on(EVENT_REFRESH, refresh); } function init() { slides.forEach((slide, index) => { register(slide, index, -1); }); } function destroy() { forEach$1((Slide2) => { Slide2.destroy(); }); empty(Slides2); } function refresh() { destroy(); init(); } function register(slide, index, slideIndex) { const object = Slide$1(Splide2, index, slideIndex, slide); object.mount(); Slides2.push(object); } function get(excludeClones) { return excludeClones ? filter((Slide2) => !Slide2.isClone) : Slides2; } function getIn(page) { const { Controller } = Components2; const index = Controller.toIndex(page); const max = Controller.hasFocus() ? 1 : options.perPage; return filter((Slide2) => between(Slide2.index, index, index + max - 1)); } function getAt(index) { return filter(index)[0]; } function add(items, index) { forEach(items, (slide) => { if (isString(slide)) { slide = parseHtml(slide); } if (isHTMLElement(slide)) { const ref = slides[index]; ref ? before(slide, ref) : append(list, slide); addClass(slide, options.classes.slide); observeImages(slide, emit.bind(null, EVENT_RESIZE)); } }); emit(EVENT_REFRESH); } function remove$1(matcher) { remove(filter(matcher).map((Slide2) => Slide2.slide)); emit(EVENT_REFRESH); } function forEach$1(iteratee, excludeClones) { get(excludeClones).forEach(iteratee); } function filter(matcher) { return Slides2.filter(isFunction(matcher) ? matcher : (Slide2) => isString(matcher) ? matches(Slide2.slide, matcher) : includes(toArray(matcher), Slide2.index)); } function rule(prop, value, useContainer) { forEach$1((Slide2) => { Slide2.rule(prop, value, useContainer); }); } function observeImages(elm, callback) { const images = queryAll(elm, "img"); let { length } = images; if (length) { images.forEach((img) => { bind(img, "load error", () => { if (!--length) { callback(); } }); }); } else { callback(); } } function getLength(excludeClones) { return excludeClones ? slides.length : Slides2.length; } function isEnough() { return Slides2.length > options.perPage; } return { mount, destroy, register, get, getIn, getAt, add, remove: remove$1, forEach: forEach$1, filter, rule, getLength, isEnough }; } function Clones(Splide2, Components2, options) { const { on, emit } = EventInterface(Splide2); const { Elements, Slides } = Components2; const { resolve } = Components2.Direction; const clones = []; let cloneCount; function mount() { init(); on(EVENT_REFRESH, refresh); on([EVENT_UPDATED, EVENT_RESIZE], observe); } function init() { if (cloneCount = computeCloneCount()) { generate(cloneCount); } } function destroy() { remove(clones); empty(clones); } function refresh() { destroy(); init(); } function observe() { if (cloneCount !== computeCloneCount()) { emit(EVENT_REFRESH); } } function generate(count) { const slides = Slides.get().slice(); const { length } = slides; if (length) { while (slides.length < count) { push(slides, slides); } push(slides.slice(-count), slides.slice(0, count)).forEach((Slide, index) => { const isHead = index < count; const clone = cloneDeep(Slide.slide, index); isHead ? before(clone, slides[0].slide) : append(Elements.list, clone); push(clones, clone); Slides.register(clone, index - count + (isHead ? 0 : length), Slide.index); }); } } function cloneDeep(elm, index) { const clone = elm.cloneNode(true); addClass(clone, options.classes.clone); clone.id = `${Splide2.root.id}-clone${pad(index + 1)}`; return clone; } function computeCloneCount() { let { clones: clones2 } = options; if (!Splide2.is(LOOP)) { clones2 = 0; } else if (!clones2) { const fixedSize = measure(Elements.list, options[resolve("fixedWidth")]); const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize); const baseCount = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage; clones2 = baseCount * (options.drag ? (options.flickMaxPages || 1) + 1 : 2); } return clones2; } return { mount, destroy }; } function Layout(Splide2, Components2, options) { const { on, bind, emit } = EventInterface(Splide2); const { Slides } = Components2; const { ruleBy } = Components2.Style; const { resolve } = Components2.Direction; const { track, list } = Components2.Elements; const { getAt } = Slides; const vertical = options.direction === TTB; function mount() { init(); bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE))); on([EVENT_UPDATED, EVENT_REFRESH], init); on(EVENT_RESIZE, resize); } function init() { ruleBy(Splide2.root, "maxWidth", unit(options.width)); ruleBy(track, resolve("paddingLeft"), cssPadding(false)); ruleBy(track, resolve("paddingRight"), cssPadding(true)); Slides.rule(resolve("marginRight"), unit(options.gap)); Slides.rule("width", cssSlideWidth()); setSlidesHeight(); resize(); } function resize() { ruleBy(track, "height", cssTrackHeight()); options.heightRatio && setSlidesHeight(); emit(EVENT_RESIZED); } function setSlidesHeight() { Slides.rule("height", cssSlideHeight(), true); } function cssPadding(right) { const { padding } = options; const prop = resolve(right ? "right" : "left", true); return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px"; } function cssTrackHeight() { let height = ""; if (vertical) { height = cssHeight(); assert(height, "height or heightRatio is missing."); height = `calc(${height} - ${cssPadding(false)} - ${cssPadding(true)})`; } return height; } function cssHeight() { return unit(options.height || rect(list).width * options.heightRatio); } function cssSlideWidth() { return options.autoWidth ? "" : unit(options.fixedWidth) || (vertical ? "" : cssSlideSize()); } function cssSlideHeight() { return unit(options.fixedHeight) || (vertical ? options.autoHeight ? "" : cssSlideSize() : cssHeight()); } function cssSlideSize() { const gap = unit(options.gap); return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`; } function listSize() { return rect(list)[resolve("width")]; } function slideSize(index, withoutGap) { const Slide = getAt(index || 0); return Slide ? rect(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0; } function totalSize(index, withoutGap) { const Slide = getAt(index); if (Slide) { const right = rect(Slide.slide)[resolve("right")]; const left = rect(list)[resolve("left")]; return abs(right - left) + (withoutGap ? 0 : getGap()); } return 0; } function sliderSize() { return totalSize(Splide2.length - 1, true) - totalSize(-1, true); } function getGap() { const Slide = getAt(0); return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0; } function getPadding(right) { return parseFloat(style(track, resolve(`padding${right ? "Right" : "Left"}`, true))) || 0; } return { mount, listSize, slideSize, sliderSize, totalSize, getPadding }; } const SNAP_THRESHOLD = 10; function Move(Splide2, Components2, options) { const { on, emit } = EventInterface(Splide2); const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout; const { resolve, orient } = Components2.Direction; const { list, track } = Components2.Elements; let waiting; let shouldSnap = true; function mount() { if (!Splide2.is(FADE)) { on([EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition, DEFAULT_EVENT_PRIORITY - 1); } } function reposition() { if (exceededLimit(true)) { translate(getLimit(true)); } else if (shouldSnap || (shouldSnap = canSnap())) { jump(Splide2.index); } } function move(dest, index, prev, callback) { if (!isBusy()) { const { set } = Splide2.state; const position = getPosition(); const looping = dest !== index; waiting = looping || options.waitForTransition; set(MOVING); emit(EVENT_MOVE, index, prev, dest); Components2.Transition.start(dest, () => { looping && jump(index); waiting = false; set(IDLE); emit(EVENT_MOVED, index, prev, dest); if (options.trimSpace === "move" && dest !== prev && position === getPosition()) { Components2.Controller.go(dest > prev ? ">" : "<", false, callback); } else { callback && callback(); } }); } } function jump(index) { translate(toPosition(index, true)); } function translate(position) { position = loop(position); shouldSnap = canSnap(position); Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${100 * position / listSize()}%)`); } function loop(position) { if (!waiting && Splide2.is(LOOP)) { const diff = position - getPosition(); const exceededMin = exceededLimit(false, position); const exceededMax = exceededLimit(true, position); if (exceededMin && diff > 0 || exceededMax && diff < 0) { position += orient(sliderSize() * (exceededMin ? 1 : -1)); } } return position; } function cancel() { waiting = false; Components2.Transition.cancel(); translate(getPosition()); } function toIndex(position) { const Slides = Components2.Slides.get(); let index = 0; let minDistance = Infinity; for (let i = 0; i < Slides.length; i++) { const slideIndex = Slides[i].index; const distance = abs(toPosition(slideIndex, true) - position); if (distance < minDistance) { minDistance = distance; index = slideIndex; } else { break; } } return index; } function toPosition(index, trimming) { const position = orient(totalSize(index - 1) - offset(index)); return trimming ? trim(position) : position; } function getPosition() { const left = resolve("left"); return rect(list)[left] - rect(track)[left] + orient(getPadding(false)); } function trim(position) { if (options.trimSpace && Splide2.is(SLIDE)) { position = clamp(position, 0, orient(sliderSize() - listSize())); } return position; } function offset(index) { const { focus } = options; return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0; } function getLimit(max) { return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace); } function canSnap(position) { position = isUndefined(position) ? getPosition() : position; return abs(position - toPosition(toIndex(position), true)) < SNAP_THRESHOLD; } function isBusy() { return !!waiting; } function exceededLimit(max, position) { position = isUndefined(position) ? getPosition() : position; const exceededMin = max !== true && orient(position) < orient(getLimit(false)); const exceededMax = max !== false && orient(position) > orient(getLimit(true)); return exceededMin || exceededMax; } return { mount, move, jump, translate, cancel, toIndex, toPosition, getPosition, getLimit, isBusy, exceededLimit }; } function Controller(Splide2, Components2, options) { const { on } = EventInterface(Splide2); const { Move } = Components2; const { jump, getPosition, getLimit } = Move; const { isEnough, getLength } = Components2.Slides; const isLoop = Splide2.is(LOOP); let currIndex = options.start || 0; let prevIndex = currIndex; let slideCount; let perMove; let perPage; function mount() { init(); jump(currIndex); on([EVENT_UPDATED, EVENT_REFRESH], init); on(EVENT_SCROLLED, reindex, 0); } function init() { slideCount = getLength(true); perMove = options.perMove; perPage = options.perPage; currIndex = min(currIndex, slideCount - 1); jump(currIndex); } function reindex() { setIndex(Move.toIndex(getPosition())); } function go(control, allowSameIndex, callback) { const dest = parse(control); const index = loop(dest); if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) { setIndex(index); Move.move(dest, index, prevIndex, callback); } } function parse(control) { let index = currIndex; if (isString(control)) { const [, indicator, number] = control.match(/([+\-<>])(\d+)?/) || []; if (indicator === "+" || indicator === "-") { index = computeDestIndex(currIndex + +`${indicator}${+number || 1}`, currIndex, true); } else if (indicator === ">") { index = number ? toIndex(+number) : getNext(true); } else if (indicator === "<") { index = getPrev(true); } } else { if (isLoop) { index = clamp(control, -perPage, slideCount + perPage - 1); } else { index = clamp(control, 0, getEnd()); } } return index; } function getNext(destination) { return getAdjacent(false, destination); } function getPrev(destination) { return getAdjacent(true, destination); } function getAdjacent(prev, destination) { const number = perMove || hasFocus() ? 1 : perPage; const dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex); if (dest === -1 && Splide2.is(SLIDE)) { if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) { return prev ? 0 : getEnd(); } } return destination ? dest : loop(dest); } function computeDestIndex(dest, from, incremental) { if (isEnough()) { const end = getEnd(); if (dest < 0 || dest > end) { if (between(0, dest, from, true) || between(end, from, dest, true)) { dest = toIndex(toPage(dest)); } else { if (isLoop) { dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount; } else if (options.rewind) { dest = dest < 0 ? end : 0; } else { dest = -1; } } } else { if (!isLoop && !incremental && dest !== from) { dest = perMove ? dest : toIndex(toPage(from) + (dest < from ? -1 : 1)); } } } else { dest = -1; } return dest; } function getEnd() { let end = slideCount - perPage; if (hasFocus() || isLoop && perMove) { end = slideCount - 1; } return max(end, 0); } function loop(index) { if (isLoop) { return isEnough() ? index % slideCount + (index < 0 ? slideCount : 0) : -1; } return index; } function toIndex(page) { return clamp(hasFocus() ? page : perPage * page, 0, getEnd()); } function toPage(index) { if (!hasFocus()) { index = between(index, slideCount - perPage, slideCount - 1) ? slideCount - 1 : index; index = floor(index / perPage); } return index; } function setIndex(index) { if (index !== currIndex) { prevIndex = currIndex; currIndex = index; } } function getIndex(prev) { return prev ? prevIndex : currIndex; } function hasFocus() { return !isUndefined(options.focus) || options.isNavigation; } return { mount, go, getNext, getPrev, getEnd, setIndex, getIndex, toIndex, toPage, hasFocus }; } const XML_NAME_SPACE = "http://www.w3.org/2000/svg"; const PATH = "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"; const SIZE = 40; function Arrows(Splide2, Components2, options) { const { on, bind, emit } = EventInterface(Splide2); const { classes, i18n } = options; const { Elements, Controller } = Components2; let wrapper = Elements.arrows; let prev = Elements.prev; let next = Elements.next; let created; const arrows = {}; function mount() { init(); on(EVENT_UPDATED, init); } function init() { if (options.arrows) { if (!prev || !next) { createArrows(); } } if (prev && next) { if (!arrows.prev) { const { id } = Elements.track; setAttribute(prev, ARIA_CONTROLS, id); setAttribute(next, ARIA_CONTROLS, id); arrows.prev = prev; arrows.next = next; listen(); emit(EVENT_ARROWS_MOUNTED, prev, next); } else { display(wrapper, options.arrows === false ? "none" : ""); } } } function destroy() { if (created) { remove(wrapper); } else { removeAttribute(prev, ALL_ATTRIBUTES); removeAttribute(next, ALL_ATTRIBUTES); } } 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); }); } function createArrows() { wrapper = create("div", classes.arrows); prev = createArrow(true); next = createArrow(false); created = true; append(wrapper, [prev, next]); before(wrapper, child(options.arrows === "slider" && Elements.slider || Splide2.root)); } function createArrow(prev2) { const arrow = `