2910 lines
81 KiB
JavaScript
2910 lines
81 KiB
JavaScript
/*!
|
|
* Splide.js
|
|
* Version : 3.6.9
|
|
* 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 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 isHTMLElement(elm) && (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, right) {
|
|
if (object) {
|
|
let keys = Object.keys(object);
|
|
keys = right ? keys.reverse() : keys;
|
|
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, prop, value) {
|
|
if (isUndefined(value)) {
|
|
return getComputedStyle(elm)[prop];
|
|
}
|
|
if (!isNull(value)) {
|
|
const { style: style2 } = elm;
|
|
value = `${value}`;
|
|
if (style2[prop] !== value) {
|
|
style2[prop] = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
function display(elm, display2) {
|
|
style(elm, "display", display2);
|
|
}
|
|
|
|
function focus(elm) {
|
|
elm["setActive"] && elm["setActive"]() || elm.focus({ preventScroll: true });
|
|
}
|
|
|
|
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 : 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_SHIFTED = "shifted";
|
|
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 = "updated";
|
|
const EVENT_RESIZE = "resize";
|
|
const EVENT_RESIZED = "resized";
|
|
const EVENT_REPOSITIONED = "repositioned";
|
|
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, callback) {
|
|
forEachEvent(targets, events, (target, event2) => {
|
|
listeners = listeners.filter((listener) => {
|
|
if (listener[0] === target && listener[1] === event2 && (!callback || listener[2] === callback)) {
|
|
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 set(time) {
|
|
interval = time;
|
|
}
|
|
function isPaused() {
|
|
return paused;
|
|
}
|
|
return {
|
|
start,
|
|
rewind,
|
|
pause,
|
|
cancel,
|
|
set,
|
|
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);
|
|
const { breakpoints } = options;
|
|
if (breakpoints) {
|
|
const isMin = options.mediaQuery === "min";
|
|
points = Object.keys(breakpoints).sort((n, m) => isMin ? +m - +n : +n - +m).map((point) => [
|
|
point,
|
|
matchMedia(`(${isMin ? "min" : "max"}-width:${point}px)`)
|
|
]);
|
|
observe();
|
|
}
|
|
}
|
|
function mount() {
|
|
if (points) {
|
|
addEventListener("resize", throttledObserve);
|
|
}
|
|
}
|
|
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, DEFAULT_EVENT_PRIORITY - 2);
|
|
on(EVENT_UPDATED, update);
|
|
}
|
|
function destroy() {
|
|
[root, track, list].forEach((elm) => {
|
|
removeAttribute(elm, "style");
|
|
});
|
|
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,
|
|
autoplay,
|
|
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
|
|
});
|
|
}
|
|
|
|
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 styles = getAttribute(slide, "style");
|
|
const isClone = slideIndex > -1;
|
|
const container = child(slide, `.${CLASS_CONTAINER}`);
|
|
const focusableNodes = options.focusableNodes && queryAll(slide, options.focusableNodes);
|
|
let destroyed;
|
|
function mount() {
|
|
if (!isClone) {
|
|
slide.id = `${root.id}-slide${pad(index + 1)}`;
|
|
}
|
|
bind(slide, "click keydown", (e) => {
|
|
emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
|
|
});
|
|
on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
|
|
on(EVENT_NAVIGATION_MOUNTED, initNavigation);
|
|
if (updateOnMove) {
|
|
on(EVENT_MOVE, onMove);
|
|
}
|
|
}
|
|
function destroy() {
|
|
destroyed = true;
|
|
destroyEvents();
|
|
removeClass(slide, STATUS_CLASSES);
|
|
removeAttribute(slide, ALL_ATTRIBUTES);
|
|
setAttribute(slide, "style", styles);
|
|
}
|
|
function initNavigation() {
|
|
const idx = isClone ? slideIndex : index;
|
|
const label = format(options.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);
|
|
setAttribute(slide, ROLE, "menuitem");
|
|
updateActivity(isActive());
|
|
}
|
|
function onMove() {
|
|
if (!destroyed) {
|
|
update();
|
|
}
|
|
}
|
|
function update() {
|
|
if (!destroyed) {
|
|
const { index: currIndex } = Splide2;
|
|
updateActivity(isActive());
|
|
updateVisibility(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, self);
|
|
}
|
|
}
|
|
function updateVisibility(visible) {
|
|
const hidden = !visible && (!isActive() || isClone);
|
|
setAttribute(slide, ARIA_HIDDEN, hidden || null);
|
|
setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : null);
|
|
if (focusableNodes) {
|
|
focusableNodes.forEach((node) => {
|
|
setAttribute(node, TAB_INDEX, hidden ? -1 : null);
|
|
});
|
|
}
|
|
if (visible !== hasClass(slide, CLASS_VISIBLE)) {
|
|
toggleClass(slide, CLASS_VISIBLE, visible);
|
|
emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
|
|
}
|
|
}
|
|
function style$1(prop, value, useContainer) {
|
|
style(useContainer && container || slide, prop, value);
|
|
}
|
|
function isActive() {
|
|
const { index: curr } = Splide2;
|
|
return curr === index || options.cloneStatus && curr === slideIndex;
|
|
}
|
|
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 (!isClone && (options.rewind || Splide2.is(LOOP))) {
|
|
diff = min(diff, Splide2.length - diff);
|
|
}
|
|
return diff <= distance;
|
|
}
|
|
const self = {
|
|
index,
|
|
slideIndex,
|
|
slide,
|
|
container,
|
|
isClone,
|
|
mount,
|
|
destroy,
|
|
update,
|
|
style: style$1,
|
|
isWithin
|
|
};
|
|
return self;
|
|
}
|
|
|
|
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);
|
|
on([EVENT_MOUNTED, EVENT_REFRESH], () => {
|
|
Slides2.sort((Slide1, Slide2) => Slide1.index - Slide2.index);
|
|
});
|
|
}
|
|
function init() {
|
|
slides.forEach((slide, index) => {
|
|
register(slide, index, -1);
|
|
});
|
|
}
|
|
function destroy() {
|
|
forEach$1((Slide2) => {
|
|
Slide2.destroy();
|
|
});
|
|
empty(Slides2);
|
|
}
|
|
function refresh() {
|
|
destroy();
|
|
init();
|
|
}
|
|
function update() {
|
|
forEach$1((Slide2) => {
|
|
Slide2.update();
|
|
});
|
|
}
|
|
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 style(prop, value, useContainer) {
|
|
forEach$1((Slide2) => {
|
|
Slide2.style(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,
|
|
update,
|
|
register,
|
|
get,
|
|
getIn,
|
|
getAt,
|
|
add,
|
|
remove: remove$1,
|
|
forEach: forEach$1,
|
|
filter,
|
|
style,
|
|
getLength,
|
|
isEnough
|
|
};
|
|
}
|
|
|
|
function Layout(Splide2, Components2, options) {
|
|
const { on, bind, emit } = EventInterface(Splide2);
|
|
const { Slides } = Components2;
|
|
const { resolve } = Components2.Direction;
|
|
const { root, track, list } = Components2.Elements;
|
|
const { getAt } = Slides;
|
|
let vertical;
|
|
let rootRect;
|
|
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() {
|
|
rootRect = null;
|
|
vertical = options.direction === TTB;
|
|
style(root, "maxWidth", unit(options.width));
|
|
style(track, resolve("paddingLeft"), cssPadding(false));
|
|
style(track, resolve("paddingRight"), cssPadding(true));
|
|
resize();
|
|
}
|
|
function resize() {
|
|
const newRect = rect(root);
|
|
if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
|
|
style(track, "height", cssTrackHeight());
|
|
Slides.style(resolve("marginRight"), unit(options.gap));
|
|
Slides.style("width", cssSlideWidth() || null);
|
|
setSlidesHeight();
|
|
rootRect = newRect;
|
|
emit(EVENT_RESIZED);
|
|
}
|
|
}
|
|
function setSlidesHeight() {
|
|
Slides.style("height", cssSlideHeight() || null, true);
|
|
}
|
|
function cssPadding(right) {
|
|
const { padding } = options;
|
|
const prop = resolve(right ? "right" : "left");
|
|
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"}`))) || 0;
|
|
}
|
|
return {
|
|
mount,
|
|
listSize,
|
|
slideSize,
|
|
sliderSize,
|
|
totalSize,
|
|
getPadding
|
|
};
|
|
}
|
|
|
|
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);
|
|
emit(EVENT_RESIZE);
|
|
}
|
|
}
|
|
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 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 Transition;
|
|
function mount() {
|
|
Transition = Components2.Transition;
|
|
on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
|
|
}
|
|
function destroy() {
|
|
removeAttribute(list, "style");
|
|
}
|
|
function reposition() {
|
|
if (!isBusy()) {
|
|
Components2.Scroll.cancel();
|
|
jump(Splide2.index);
|
|
emit(EVENT_REPOSITIONED);
|
|
}
|
|
}
|
|
function move(dest, index, prev, callback) {
|
|
if (!isBusy()) {
|
|
const { set } = Splide2.state;
|
|
const position = getPosition();
|
|
if (dest !== index) {
|
|
Transition.cancel();
|
|
translate(shift(position, dest > index), true);
|
|
}
|
|
set(MOVING);
|
|
emit(EVENT_MOVE, index, prev, dest);
|
|
Transition.start(index, () => {
|
|
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, preventLoop) {
|
|
if (!Splide2.is(FADE)) {
|
|
const destination = preventLoop ? position : loop(position);
|
|
list.style.transform = `translate${resolve("X")}(${destination}px)`;
|
|
position !== destination && emit(EVENT_SHIFTED);
|
|
}
|
|
}
|
|
function loop(position) {
|
|
if (Splide2.is(LOOP)) {
|
|
const diff = orient(position - getPosition());
|
|
const exceededMin = exceededLimit(false, position) && diff < 0;
|
|
const exceededMax = exceededLimit(true, position) && diff > 0;
|
|
if (exceededMin || exceededMax) {
|
|
position = shift(position, exceededMax);
|
|
}
|
|
}
|
|
return position;
|
|
}
|
|
function shift(position, backwards) {
|
|
const excess = position - getLimit(backwards);
|
|
const size = sliderSize();
|
|
position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1);
|
|
return position;
|
|
}
|
|
function cancel() {
|
|
translate(getPosition());
|
|
Transition.cancel();
|
|
}
|
|
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 isBusy() {
|
|
return Splide2.state.is(MOVING) && options.waitForTransition;
|
|
}
|
|
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,
|
|
destroy,
|
|
move,
|
|
jump,
|
|
translate,
|
|
shift,
|
|
cancel,
|
|
toIndex,
|
|
toPosition,
|
|
getPosition,
|
|
getLimit,
|
|
isBusy,
|
|
exceededLimit
|
|
};
|
|
}
|
|
|
|
function Controller(Splide2, Components2, options) {
|
|
const { on } = EventInterface(Splide2);
|
|
const { Move } = Components2;
|
|
const { getPosition, getLimit } = Move;
|
|
const { isEnough, getLength } = Components2.Slides;
|
|
const isLoop = Splide2.is(LOOP);
|
|
const isSlide = Splide2.is(SLIDE);
|
|
let currIndex = options.start || 0;
|
|
let prevIndex = currIndex;
|
|
let slideCount;
|
|
let perMove;
|
|
let perPage;
|
|
function mount() {
|
|
init();
|
|
on([EVENT_UPDATED, EVENT_REFRESH], init, DEFAULT_EVENT_PRIORITY - 1);
|
|
}
|
|
function init() {
|
|
slideCount = getLength(true);
|
|
perMove = options.perMove;
|
|
perPage = options.perPage;
|
|
currIndex = clamp(currIndex, 0, slideCount - 1);
|
|
}
|
|
function go(control, allowSameIndex, callback) {
|
|
const dest = parse(control);
|
|
if (options.useScroll) {
|
|
scroll(dest, true, true, options.speed, callback);
|
|
} else {
|
|
const index = loop(dest);
|
|
if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
|
|
setIndex(index);
|
|
Move.move(dest, index, prevIndex, callback);
|
|
}
|
|
}
|
|
}
|
|
function scroll(destination, useIndex, snap, duration, callback) {
|
|
const dest = useIndex ? destination : toDest(destination);
|
|
Components2.Scroll.scroll(useIndex || snap ? Move.toPosition(dest, true) : destination, duration, () => {
|
|
setIndex(Move.toIndex(Move.getPosition()));
|
|
callback && 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 {
|
|
index = isLoop ? control : 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 && isSlide) {
|
|
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 || hasFocus() ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
|
|
} else if (options.rewind) {
|
|
dest = dest < 0 ? end : 0;
|
|
} else {
|
|
dest = -1;
|
|
}
|
|
}
|
|
} else {
|
|
if (!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 toDest(destination) {
|
|
const closest = Move.toIndex(destination);
|
|
return isSlide ? clamp(closest, 0, getEnd()) : closest;
|
|
}
|
|
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,
|
|
scroll,
|
|
getNext,
|
|
getPrev,
|
|
getAdjacent,
|
|
getEnd,
|
|
setIndex,
|
|
getIndex,
|
|
toIndex,
|
|
toPage,
|
|
toDest,
|
|
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 = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${options.arrowPath || PATH}" />`;
|
|
return parseHtml(arrow);
|
|
}
|
|
function update() {
|
|
const index = Splide2.index;
|
|
const prevIndex = Controller.getPrev();
|
|
const nextIndex = Controller.getNext();
|
|
const prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
|
|
const nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
|
|
prev.disabled = prevIndex < 0;
|
|
next.disabled = nextIndex < 0;
|
|
setAttribute(prev, ARIA_LABEL, prevLabel);
|
|
setAttribute(next, ARIA_LABEL, nextLabel);
|
|
emit(EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex);
|
|
}
|
|
return {
|
|
arrows,
|
|
mount,
|
|
destroy
|
|
};
|
|
}
|
|
|
|
const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
|
|
|
|
function Autoplay(Splide2, Components2, options) {
|
|
const { on, bind, emit } = EventInterface(Splide2);
|
|
const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
|
|
const { isPaused } = interval;
|
|
const { Elements } = Components2;
|
|
let hovered;
|
|
let focused;
|
|
let paused;
|
|
function mount() {
|
|
const { autoplay } = options;
|
|
if (autoplay) {
|
|
initButton(true);
|
|
initButton(false);
|
|
listen();
|
|
if (autoplay !== "pause") {
|
|
play();
|
|
}
|
|
}
|
|
}
|
|
function initButton(forPause) {
|
|
const prop = forPause ? "pause" : "play";
|
|
const button = Elements[prop];
|
|
if (button) {
|
|
setAttribute(button, ARIA_CONTROLS, Elements.track.id);
|
|
setAttribute(button, ARIA_LABEL, options.i18n[prop]);
|
|
bind(button, "click", forPause ? pause : play);
|
|
}
|
|
}
|
|
function listen() {
|
|
const { root } = Elements;
|
|
if (options.pauseOnHover) {
|
|
bind(root, "mouseenter mouseleave", (e) => {
|
|
hovered = e.type === "mouseenter";
|
|
autoToggle();
|
|
});
|
|
}
|
|
if (options.pauseOnFocus) {
|
|
bind(root, "focusin focusout", (e) => {
|
|
focused = e.type === "focusin";
|
|
autoToggle();
|
|
});
|
|
}
|
|
on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
|
|
on(EVENT_MOVE, updateInterval);
|
|
}
|
|
function play() {
|
|
if (isPaused() && Components2.Slides.isEnough()) {
|
|
interval.start(!options.resetProgress);
|
|
focused = hovered = paused = false;
|
|
emit(EVENT_AUTOPLAY_PLAY);
|
|
}
|
|
}
|
|
function pause(manual = true) {
|
|
if (!isPaused()) {
|
|
interval.pause();
|
|
emit(EVENT_AUTOPLAY_PAUSE);
|
|
}
|
|
paused = manual;
|
|
}
|
|
function autoToggle() {
|
|
if (!paused) {
|
|
if (!hovered && !focused) {
|
|
play();
|
|
} else {
|
|
pause(false);
|
|
}
|
|
}
|
|
}
|
|
function update(rate) {
|
|
const { bar } = Elements;
|
|
bar && style(bar, "width", `${rate * 100}%`);
|
|
emit(EVENT_AUTOPLAY_PLAYING, rate);
|
|
}
|
|
function updateInterval() {
|
|
const Slide = Components2.Slides.getAt(Splide2.index);
|
|
interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
|
|
}
|
|
return {
|
|
mount,
|
|
destroy: interval.cancel,
|
|
play,
|
|
pause,
|
|
isPaused
|
|
};
|
|
}
|
|
|
|
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));
|
|
}
|
|
}
|
|
function destroy() {
|
|
apply(false);
|
|
}
|
|
function apply(cover) {
|
|
Components2.Slides.forEach((Slide) => {
|
|
const img = child(Slide.container || Slide.slide, "img");
|
|
if (img && img.src) {
|
|
toggle(cover, img, Slide);
|
|
}
|
|
});
|
|
}
|
|
function toggle(cover, img, Slide) {
|
|
Slide.style("background", cover ? `center/cover no-repeat url("${img.src}")` : "", true);
|
|
display(img, cover ? "none" : "");
|
|
}
|
|
return {
|
|
mount,
|
|
destroy
|
|
};
|
|
}
|
|
|
|
const BOUNCE_DIFF_THRESHOLD = 10;
|
|
const BOUNCE_DURATION = 600;
|
|
const FRICTION_FACTOR = 0.6;
|
|
const BASE_VELOCITY = 1.5;
|
|
const MIN_DURATION = 800;
|
|
|
|
function Scroll(Splide2, Components2, options) {
|
|
const { on, emit } = EventInterface(Splide2);
|
|
const { Move } = Components2;
|
|
const { getPosition, getLimit, exceededLimit } = Move;
|
|
let interval;
|
|
let scrollCallback;
|
|
function mount() {
|
|
on(EVENT_MOVE, clear);
|
|
on([EVENT_UPDATED, EVENT_REFRESH], cancel);
|
|
}
|
|
function scroll(destination, duration, callback, suppressConstraint) {
|
|
const start = getPosition();
|
|
let friction = 1;
|
|
duration = duration || computeDuration(abs(destination - start));
|
|
scrollCallback = callback;
|
|
clear();
|
|
interval = RequestInterval(duration, onScrolled, (rate) => {
|
|
const position = getPosition();
|
|
const target = start + (destination - start) * easing(rate);
|
|
const diff = (target - getPosition()) * friction;
|
|
Move.translate(position + diff);
|
|
if (Splide2.is(SLIDE) && !suppressConstraint && exceededLimit()) {
|
|
friction *= FRICTION_FACTOR;
|
|
if (abs(diff) < BOUNCE_DIFF_THRESHOLD) {
|
|
bounce(exceededLimit(false));
|
|
}
|
|
}
|
|
}, 1);
|
|
emit(EVENT_SCROLL);
|
|
interval.start();
|
|
}
|
|
function bounce(backwards) {
|
|
scroll(getLimit(!backwards), BOUNCE_DURATION, null, true);
|
|
}
|
|
function onScrolled() {
|
|
const position = getPosition();
|
|
const index = Move.toIndex(position);
|
|
if (!between(index, 0, Splide2.length - 1)) {
|
|
Move.translate(Move.shift(position, index > 0), true);
|
|
}
|
|
scrollCallback && scrollCallback();
|
|
emit(EVENT_SCROLLED);
|
|
}
|
|
function computeDuration(distance) {
|
|
return max(distance / BASE_VELOCITY, MIN_DURATION);
|
|
}
|
|
function clear() {
|
|
if (interval) {
|
|
interval.cancel();
|
|
}
|
|
}
|
|
function cancel() {
|
|
if (interval && !interval.isPaused()) {
|
|
clear();
|
|
onScrolled();
|
|
}
|
|
}
|
|
function easing(t) {
|
|
const { easingFunc } = options;
|
|
return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
|
|
}
|
|
return {
|
|
mount,
|
|
destroy: clear,
|
|
scroll,
|
|
cancel
|
|
};
|
|
}
|
|
|
|
const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };
|
|
|
|
const FRICTION = 5;
|
|
const LOG_INTERVAL = 200;
|
|
const POINTER_DOWN_EVENTS = "touchstart mousedown";
|
|
const POINTER_MOVE_EVENTS = "touchmove mousemove";
|
|
const POINTER_UP_EVENTS = "touchend touchcancel mouseup";
|
|
|
|
function Drag(Splide2, Components2, options) {
|
|
const { on, emit, bind, unbind } = EventInterface(Splide2);
|
|
const { Move, Scroll, Controller } = Components2;
|
|
const { track } = Components2.Elements;
|
|
const { resolve, orient } = Components2.Direction;
|
|
const { getPosition, exceededLimit } = Move;
|
|
let basePosition;
|
|
let baseEvent;
|
|
let prevBaseEvent;
|
|
let lastEvent;
|
|
let isFree;
|
|
let dragging;
|
|
let hasExceeded = false;
|
|
let clickPrevented;
|
|
let disabled;
|
|
let target;
|
|
function mount() {
|
|
bind(track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
|
|
bind(track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS);
|
|
bind(track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS);
|
|
bind(track, "click", onClick, { capture: true });
|
|
bind(track, "dragstart", prevent);
|
|
on([EVENT_MOUNTED, EVENT_UPDATED], init);
|
|
}
|
|
function init() {
|
|
const { drag } = options;
|
|
disable(!drag);
|
|
isFree = drag === "free";
|
|
}
|
|
function onPointerDown(e) {
|
|
if (!disabled) {
|
|
const { noDrag } = options;
|
|
const isTouch = isTouchEvent(e);
|
|
const isDraggable = !noDrag || !matches(e.target, noDrag);
|
|
clickPrevented = false;
|
|
if (isDraggable && (isTouch || !e.button)) {
|
|
if (!Move.isBusy()) {
|
|
target = isTouch ? track : window;
|
|
prevBaseEvent = null;
|
|
lastEvent = null;
|
|
bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS);
|
|
bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS);
|
|
Move.cancel();
|
|
Scroll.cancel();
|
|
save(e);
|
|
} else {
|
|
prevent(e, true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function onPointerMove(e) {
|
|
if (!lastEvent) {
|
|
emit(EVENT_DRAG);
|
|
}
|
|
lastEvent = e;
|
|
if (e.cancelable) {
|
|
const diff = coordOf(e) - coordOf(baseEvent);
|
|
if (dragging) {
|
|
Move.translate(basePosition + constrain(diff));
|
|
const expired = timeOf(e) - timeOf(baseEvent) > LOG_INTERVAL;
|
|
const exceeded = hasExceeded !== (hasExceeded = exceededLimit());
|
|
if (expired || exceeded) {
|
|
save(e);
|
|
}
|
|
emit(EVENT_DRAGGING);
|
|
clickPrevented = true;
|
|
prevent(e);
|
|
} else {
|
|
let { dragMinThreshold: thresholds } = options;
|
|
thresholds = isObject(thresholds) ? thresholds : { mouse: 0, touch: +thresholds || 10 };
|
|
dragging = abs(diff) > (isTouchEvent(e) ? thresholds.touch : thresholds.mouse);
|
|
if (isSliderDirection()) {
|
|
prevent(e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function onPointerUp(e) {
|
|
unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
|
|
unbind(target, POINTER_UP_EVENTS, onPointerUp);
|
|
const { index } = Splide2;
|
|
if (lastEvent) {
|
|
if (dragging || e.cancelable && isSliderDirection()) {
|
|
const velocity = computeVelocity(e);
|
|
const destination = computeDestination(velocity);
|
|
if (isFree) {
|
|
Controller.scroll(destination);
|
|
} else if (Splide2.is(FADE)) {
|
|
Controller.go(index + orient(sign(velocity)));
|
|
} else {
|
|
Controller.go(Controller.toDest(destination), true);
|
|
}
|
|
prevent(e);
|
|
}
|
|
emit(EVENT_DRAGGED);
|
|
} else {
|
|
if (!isFree && getPosition() !== Move.toPosition(index)) {
|
|
Controller.go(index, true);
|
|
}
|
|
}
|
|
dragging = false;
|
|
}
|
|
function save(e) {
|
|
prevBaseEvent = baseEvent;
|
|
baseEvent = e;
|
|
basePosition = getPosition();
|
|
}
|
|
function onClick(e) {
|
|
if (!disabled && clickPrevented) {
|
|
prevent(e, true);
|
|
}
|
|
}
|
|
function isSliderDirection() {
|
|
const diffX = abs(coordOf(lastEvent) - coordOf(baseEvent));
|
|
const diffY = abs(coordOf(lastEvent, true) - coordOf(baseEvent, true));
|
|
return diffX > diffY;
|
|
}
|
|
function computeVelocity(e) {
|
|
if (Splide2.is(LOOP) || !hasExceeded) {
|
|
const base = baseEvent === lastEvent && prevBaseEvent || baseEvent;
|
|
const diffCoord = coordOf(lastEvent) - coordOf(base);
|
|
const diffTime = timeOf(e) - timeOf(base);
|
|
const isFlick = timeOf(e) - timeOf(lastEvent) < LOG_INTERVAL;
|
|
if (diffTime && isFlick) {
|
|
return diffCoord / diffTime;
|
|
}
|
|
}
|
|
return 0;
|
|
}
|
|
function computeDestination(velocity) {
|
|
return getPosition() + sign(velocity) * min(abs(velocity) * (options.flickPower || 600), isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1));
|
|
}
|
|
function coordOf(e, orthogonal) {
|
|
return (isTouchEvent(e) ? e.touches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
|
|
}
|
|
function timeOf(e) {
|
|
return e.timeStamp;
|
|
}
|
|
function constrain(diff) {
|
|
return diff / (hasExceeded && Splide2.is(SLIDE) ? FRICTION : 1);
|
|
}
|
|
function isTouchEvent(e) {
|
|
return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
|
|
}
|
|
function isDragging() {
|
|
return dragging;
|
|
}
|
|
function disable(value) {
|
|
disabled = value;
|
|
}
|
|
return {
|
|
mount,
|
|
disable,
|
|
isDragging
|
|
};
|
|
}
|
|
|
|
const IE_ARROW_KEYS = ["Left", "Right", "Up", "Down"];
|
|
const KEYBOARD_EVENT = "keydown";
|
|
function Keyboard(Splide2, Components2, options) {
|
|
const { on, bind, unbind } = EventInterface(Splide2);
|
|
const { root } = Splide2;
|
|
const { resolve } = Components2.Direction;
|
|
let target;
|
|
let disabled;
|
|
function mount() {
|
|
init();
|
|
on(EVENT_UPDATED, onUpdated);
|
|
on(EVENT_MOVE, onMove);
|
|
}
|
|
function init() {
|
|
const { keyboard } = options;
|
|
if (keyboard) {
|
|
if (keyboard === "focused") {
|
|
target = root;
|
|
setAttribute(root, TAB_INDEX, 0);
|
|
} else {
|
|
target = window;
|
|
}
|
|
bind(target, KEYBOARD_EVENT, onKeydown);
|
|
}
|
|
}
|
|
function destroy() {
|
|
unbind(target, KEYBOARD_EVENT);
|
|
if (isHTMLElement(target)) {
|
|
removeAttribute(target, TAB_INDEX);
|
|
}
|
|
}
|
|
function disable(value) {
|
|
disabled = value;
|
|
}
|
|
function onMove() {
|
|
const _disabled = disabled;
|
|
disabled = true;
|
|
nextTick(() => {
|
|
disabled = _disabled;
|
|
});
|
|
}
|
|
function onUpdated() {
|
|
destroy();
|
|
init();
|
|
}
|
|
function onKeydown(e) {
|
|
if (!disabled) {
|
|
const { key } = e;
|
|
const normalizedKey = includes(IE_ARROW_KEYS, key) ? `Arrow${key}` : key;
|
|
if (normalizedKey === resolve("ArrowLeft")) {
|
|
Splide2.go("<");
|
|
} else if (normalizedKey === resolve("ArrowRight")) {
|
|
Splide2.go(">");
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
mount,
|
|
destroy,
|
|
disable
|
|
};
|
|
}
|
|
|
|
const SRC_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-lazy`;
|
|
const SRCSET_DATA_ATTRIBUTE = `${SRC_DATA_ATTRIBUTE}-srcset`;
|
|
const IMAGE_SELECTOR = `[${SRC_DATA_ATTRIBUTE}], [${SRCSET_DATA_ATTRIBUTE}]`;
|
|
|
|
function LazyLoad(Splide2, Components2, options) {
|
|
const { on, off, bind, emit } = EventInterface(Splide2);
|
|
const isSequential = options.lazyLoad === "sequential";
|
|
let images = [];
|
|
let index = 0;
|
|
function mount() {
|
|
if (options.lazyLoad) {
|
|
init();
|
|
on(EVENT_REFRESH, refresh);
|
|
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) => {
|
|
const src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
|
|
const srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
|
|
if (src !== _img.src || srcset !== _img.srcset) {
|
|
const className = options.classes.spinner;
|
|
const parent = _img.parentElement;
|
|
const _spinner = child(parent, `.${className}`) || create("span", className, parent);
|
|
setAttribute(_spinner, ROLE, "presentation");
|
|
images.push({ _img, _Slide, src, srcset, _spinner });
|
|
!_img.src && display(_img, "none");
|
|
}
|
|
});
|
|
});
|
|
if (isSequential) {
|
|
loadNext();
|
|
}
|
|
}
|
|
function destroy() {
|
|
index = 0;
|
|
images = [];
|
|
}
|
|
function observe() {
|
|
images = images.filter((data) => {
|
|
const distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
|
|
if (data._Slide.isWithin(Splide2.index, distance)) {
|
|
return load(data);
|
|
}
|
|
return true;
|
|
});
|
|
if (!images.length) {
|
|
off(EVENT_MOVED);
|
|
}
|
|
}
|
|
function load(data) {
|
|
const { _img } = data;
|
|
addClass(data._Slide.slide, CLASS_LOADING);
|
|
bind(_img, "load error", (e) => {
|
|
onLoad(data, e.type === "error");
|
|
});
|
|
["src", "srcset"].forEach((name) => {
|
|
if (data[name]) {
|
|
setAttribute(_img, name, data[name]);
|
|
removeAttribute(_img, name === "src" ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE);
|
|
}
|
|
});
|
|
}
|
|
function onLoad(data, error) {
|
|
const { _Slide } = data;
|
|
removeClass(_Slide.slide, CLASS_LOADING);
|
|
if (!error) {
|
|
remove(data._spinner);
|
|
display(data._img, "");
|
|
emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
|
|
emit(EVENT_RESIZE);
|
|
}
|
|
if (isSequential) {
|
|
loadNext();
|
|
}
|
|
}
|
|
function loadNext() {
|
|
if (index < images.length) {
|
|
load(images[index++]);
|
|
}
|
|
}
|
|
return {
|
|
mount,
|
|
destroy
|
|
};
|
|
}
|
|
|
|
function Pagination(Splide2, Components2, options) {
|
|
const { on, emit, bind, unbind } = EventInterface(Splide2);
|
|
const { Slides, Elements, Controller } = Components2;
|
|
const { hasFocus, getIndex } = Controller;
|
|
const items = [];
|
|
let list;
|
|
function mount() {
|
|
init();
|
|
on([EVENT_UPDATED, EVENT_REFRESH], init);
|
|
on([EVENT_MOVE, EVENT_SCROLLED], update);
|
|
}
|
|
function init() {
|
|
destroy();
|
|
if (options.pagination && Slides.isEnough()) {
|
|
createPagination();
|
|
emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide2.index));
|
|
update();
|
|
}
|
|
}
|
|
function destroy() {
|
|
if (list) {
|
|
remove(list);
|
|
items.forEach((item) => {
|
|
unbind(item.button, "click");
|
|
});
|
|
empty(items);
|
|
list = null;
|
|
}
|
|
}
|
|
function createPagination() {
|
|
const { length } = Splide2;
|
|
const { classes, i18n, perPage } = options;
|
|
const parent = options.pagination === "slider" && Elements.slider || Elements.root;
|
|
const max = hasFocus() ? length : ceil(length / perPage);
|
|
list = create("ul", classes.pagination, parent);
|
|
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(" "));
|
|
setAttribute(button, ARIA_LABEL, format(text, i + 1));
|
|
items.push({ li, button, page: i });
|
|
}
|
|
}
|
|
function onClick(page) {
|
|
Controller.go(`>${page}`, true, () => {
|
|
const Slide = Slides.getAt(Controller.toIndex(page));
|
|
Slide && focus(Slide.slide);
|
|
});
|
|
}
|
|
function getAt(index) {
|
|
return items[Controller.toPage(index)];
|
|
}
|
|
function update() {
|
|
const prev = getAt(getIndex(true));
|
|
const curr = getAt(getIndex());
|
|
if (prev) {
|
|
removeClass(prev.button, CLASS_ACTIVE);
|
|
removeAttribute(prev.button, ARIA_CURRENT);
|
|
}
|
|
if (curr) {
|
|
addClass(curr.button, CLASS_ACTIVE);
|
|
setAttribute(curr.button, ARIA_CURRENT, true);
|
|
}
|
|
emit(EVENT_PAGINATION_UPDATED, { list, items }, prev, curr);
|
|
}
|
|
return {
|
|
items,
|
|
mount,
|
|
destroy,
|
|
getAt,
|
|
update
|
|
};
|
|
}
|
|
|
|
const TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
|
|
function Sync(Splide2, Components2, options) {
|
|
const { list } = Components2.Elements;
|
|
const events = [];
|
|
function mount() {
|
|
Splide2.splides.forEach((target) => {
|
|
!target.isParent && sync(target.splide);
|
|
});
|
|
if (options.isNavigation) {
|
|
navigate();
|
|
}
|
|
}
|
|
function destroy() {
|
|
removeAttribute(list, ALL_ATTRIBUTES);
|
|
events.forEach((event) => {
|
|
event.destroy();
|
|
});
|
|
empty(events);
|
|
}
|
|
function remount() {
|
|
destroy();
|
|
mount();
|
|
}
|
|
function sync(splide) {
|
|
[Splide2, splide].forEach((instance) => {
|
|
const event = EventInterface(instance);
|
|
const target = instance === Splide2 ? splide : Splide2;
|
|
event.on(EVENT_MOVE, (index, prev, dest) => {
|
|
target.go(target.is(LOOP) ? dest : index);
|
|
});
|
|
events.push(event);
|
|
});
|
|
}
|
|
function navigate() {
|
|
const event = EventInterface(Splide2);
|
|
const { on } = event;
|
|
on(EVENT_CLICK, onClick);
|
|
on(EVENT_SLIDE_KEYDOWN, onKeydown);
|
|
on([EVENT_MOUNTED, EVENT_UPDATED], update);
|
|
setAttribute(list, ROLE, "menu");
|
|
events.push(event);
|
|
event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
|
|
}
|
|
function update() {
|
|
setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
|
|
}
|
|
function onClick(Slide) {
|
|
Splide2.go(Slide.index);
|
|
}
|
|
function onKeydown(Slide, e) {
|
|
if (includes(TRIGGER_KEYS, e.key)) {
|
|
onClick(Slide);
|
|
prevent(e);
|
|
}
|
|
}
|
|
return {
|
|
mount,
|
|
destroy,
|
|
remount
|
|
};
|
|
}
|
|
|
|
function Wheel(Splide2, Components2, options) {
|
|
const { bind } = EventInterface(Splide2);
|
|
function mount() {
|
|
if (options.wheel) {
|
|
bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
|
|
}
|
|
}
|
|
function onWheel(e) {
|
|
if (e.cancelable) {
|
|
const { deltaY } = e;
|
|
if (deltaY) {
|
|
const backwards = deltaY < 0;
|
|
Splide2.go(backwards ? "<" : ">");
|
|
shouldPrevent(backwards) && prevent(e);
|
|
}
|
|
}
|
|
}
|
|
function shouldPrevent(backwards) {
|
|
return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
|
|
}
|
|
return {
|
|
mount
|
|
};
|
|
}
|
|
|
|
var ComponentConstructors = /*#__PURE__*/Object.freeze({
|
|
__proto__: null,
|
|
Options: Options,
|
|
Direction: Direction,
|
|
Elements: Elements,
|
|
Slides: Slides,
|
|
Layout: Layout,
|
|
Clones: Clones,
|
|
Move: Move,
|
|
Controller: Controller,
|
|
Arrows: Arrows,
|
|
Autoplay: Autoplay,
|
|
Cover: Cover,
|
|
Scroll: Scroll,
|
|
Drag: Drag,
|
|
Keyboard: Keyboard,
|
|
LazyLoad: LazyLoad,
|
|
Pagination: Pagination,
|
|
Sync: Sync,
|
|
Wheel: Wheel
|
|
});
|
|
|
|
const 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"
|
|
};
|
|
|
|
const DEFAULTS = {
|
|
type: "slide",
|
|
speed: 400,
|
|
waitForTransition: true,
|
|
perPage: 1,
|
|
cloneStatus: true,
|
|
arrows: true,
|
|
pagination: true,
|
|
interval: 5e3,
|
|
pauseOnHover: true,
|
|
pauseOnFocus: true,
|
|
resetProgress: true,
|
|
keyboard: true,
|
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
drag: true,
|
|
direction: "ltr",
|
|
slideFocus: true,
|
|
trimSpace: true,
|
|
focusableNodes: "a, button, textarea, input, select, iframe",
|
|
classes: CLASSES,
|
|
i18n: I18N
|
|
};
|
|
|
|
function Fade(Splide2, Components2, options) {
|
|
const { on } = EventInterface(Splide2);
|
|
function mount() {
|
|
on([EVENT_MOUNTED, EVENT_REFRESH], () => {
|
|
nextTick(() => {
|
|
Components2.Slides.style("transition", `opacity ${options.speed}ms ${options.easing}`);
|
|
});
|
|
});
|
|
}
|
|
function start(index, done) {
|
|
const { track } = Components2.Elements;
|
|
style(track, "height", unit(rect(track).height));
|
|
nextTick(() => {
|
|
done();
|
|
style(track, "height", "");
|
|
});
|
|
}
|
|
return {
|
|
mount,
|
|
start,
|
|
cancel: noop
|
|
};
|
|
}
|
|
|
|
function Slide(Splide2, Components2, options) {
|
|
const { bind } = EventInterface(Splide2);
|
|
const { Move, Controller } = Components2;
|
|
const { list } = Components2.Elements;
|
|
let endCallback;
|
|
function mount() {
|
|
bind(list, "transitionend", (e) => {
|
|
if (e.target === list && endCallback) {
|
|
cancel();
|
|
endCallback();
|
|
}
|
|
});
|
|
}
|
|
function start(index, done) {
|
|
const destination = Move.toPosition(index, true);
|
|
const position = Move.getPosition();
|
|
const speed = getSpeed(index);
|
|
if (abs(destination - position) >= 1 && speed >= 1) {
|
|
apply(`transform ${speed}ms ${options.easing}`);
|
|
Move.translate(destination, true);
|
|
endCallback = done;
|
|
} else {
|
|
Move.jump(index);
|
|
done();
|
|
}
|
|
}
|
|
function cancel() {
|
|
apply("");
|
|
}
|
|
function getSpeed(index) {
|
|
const { rewindSpeed } = options;
|
|
if (Splide2.is(SLIDE) && rewindSpeed) {
|
|
const prev = Controller.getIndex(true);
|
|
const end = Controller.getEnd();
|
|
if (prev === 0 && index >= end || prev >= end && index === 0) {
|
|
return rewindSpeed;
|
|
}
|
|
}
|
|
return options.speed;
|
|
}
|
|
function apply(transition) {
|
|
style(list, "transition", transition);
|
|
}
|
|
return {
|
|
mount,
|
|
start,
|
|
cancel
|
|
};
|
|
}
|
|
|
|
const _Splide = class {
|
|
constructor(target, options) {
|
|
this.event = EventBus();
|
|
this.Components = {};
|
|
this.state = State(CREATED);
|
|
this.splides = [];
|
|
this._options = {};
|
|
this._Extensions = {};
|
|
const root = isString(target) ? query(document, target) : target;
|
|
assert(root, `${root} is invalid.`);
|
|
this.root = root;
|
|
merge(DEFAULTS, _Splide.defaults);
|
|
merge(merge(this._options, DEFAULTS), options || {});
|
|
}
|
|
mount(Extensions, Transition) {
|
|
const { state, Components: Components2 } = this;
|
|
assert(state.is([CREATED, DESTROYED]), "Already mounted!");
|
|
state.set(CREATED);
|
|
this._Components = Components2;
|
|
this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);
|
|
this._Extensions = Extensions || this._Extensions;
|
|
const Constructors = assign({}, ComponentConstructors, this._Extensions, { Transition: this._Transition });
|
|
forOwn(Constructors, (Component, key) => {
|
|
const component = Component(this, Components2, this._options);
|
|
Components2[key] = component;
|
|
component.setup && component.setup();
|
|
});
|
|
forOwn(Components2, (component) => {
|
|
component.mount && component.mount();
|
|
});
|
|
this.emit(EVENT_MOUNTED);
|
|
addClass(this.root, CLASS_INITIALIZED);
|
|
state.set(IDLE);
|
|
this.emit(EVENT_READY);
|
|
return this;
|
|
}
|
|
sync(splide) {
|
|
this.splides.push({ splide });
|
|
splide.splides.push({ splide: this, isParent: true });
|
|
if (this.state.is(IDLE)) {
|
|
this._Components.Sync.remount();
|
|
splide.Components.Sync.remount();
|
|
}
|
|
return this;
|
|
}
|
|
go(control) {
|
|
this._Components.Controller.go(control);
|
|
return this;
|
|
}
|
|
on(events, callback) {
|
|
this.event.on(events, callback, null, DEFAULT_USER_EVENT_PRIORITY);
|
|
return this;
|
|
}
|
|
off(events) {
|
|
this.event.off(events);
|
|
return this;
|
|
}
|
|
emit(event) {
|
|
this.event.emit(event, ...slice(arguments, 1));
|
|
return this;
|
|
}
|
|
add(slides, index) {
|
|
this._Components.Slides.add(slides, index);
|
|
return this;
|
|
}
|
|
remove(matcher) {
|
|
this._Components.Slides.remove(matcher);
|
|
return this;
|
|
}
|
|
is(type) {
|
|
return this._options.type === type;
|
|
}
|
|
refresh() {
|
|
this.emit(EVENT_REFRESH);
|
|
return this;
|
|
}
|
|
destroy(completely = true) {
|
|
const { event, state } = this;
|
|
if (state.is(CREATED)) {
|
|
event.on(EVENT_READY, this.destroy.bind(this, completely), this);
|
|
} else {
|
|
forOwn(this._Components, (component) => {
|
|
component.destroy && component.destroy(completely);
|
|
}, true);
|
|
event.emit(EVENT_DESTROY);
|
|
event.destroy();
|
|
completely && empty(this.splides);
|
|
state.set(DESTROYED);
|
|
}
|
|
return this;
|
|
}
|
|
get options() {
|
|
return this._options;
|
|
}
|
|
set options(options) {
|
|
const { _options } = this;
|
|
merge(_options, options);
|
|
if (!this.state.is(CREATED)) {
|
|
this.emit(EVENT_UPDATED, _options);
|
|
}
|
|
}
|
|
get length() {
|
|
return this._Components.Slides.getLength(true);
|
|
}
|
|
get index() {
|
|
return this._Components.Controller.getIndex();
|
|
}
|
|
};
|
|
let Splide = _Splide;
|
|
Splide.defaults = {};
|
|
Splide.STATES = STATES;
|
|
|
|
const CLASS_RENDERED = "is-rendered";
|
|
|
|
const RENDERER_DEFAULT_CONFIG = {
|
|
listTag: "ul",
|
|
slideTag: "li"
|
|
};
|
|
|
|
class Style {
|
|
constructor(id, options) {
|
|
this.styles = {};
|
|
this.id = id;
|
|
this.options = options;
|
|
}
|
|
rule(selector, prop, value, breakpoint) {
|
|
breakpoint = breakpoint || "default";
|
|
const selectors = this.styles[breakpoint] = this.styles[breakpoint] || {};
|
|
const styles = selectors[selector] = selectors[selector] || {};
|
|
styles[prop] = value;
|
|
}
|
|
build() {
|
|
let css = "";
|
|
if (this.styles.default) {
|
|
css += this.buildSelectors(this.styles.default);
|
|
}
|
|
Object.keys(this.styles).sort((n, m) => this.options.mediaQuery === "min" ? +n - +m : +m - +n).forEach((breakpoint) => {
|
|
if (breakpoint !== "default") {
|
|
css += `@media screen and (max-width: ${breakpoint}px) {`;
|
|
css += this.buildSelectors(this.styles[breakpoint]);
|
|
css += `}`;
|
|
}
|
|
});
|
|
return css;
|
|
}
|
|
buildSelectors(selectors) {
|
|
let css = "";
|
|
forOwn(selectors, (styles, selector) => {
|
|
selector = `#${this.id} ${selector}`.trim();
|
|
css += `${selector} {`;
|
|
forOwn(styles, (value, prop) => {
|
|
if (value || value === 0) {
|
|
css += `${prop}: ${value};`;
|
|
}
|
|
});
|
|
css += "}";
|
|
});
|
|
return css;
|
|
}
|
|
}
|
|
|
|
class SplideRenderer {
|
|
constructor(contents, options, config, defaults) {
|
|
this.slides = [];
|
|
this.options = {};
|
|
this.breakpoints = [];
|
|
merge(DEFAULTS, defaults || {});
|
|
merge(merge(this.options, DEFAULTS), options || {});
|
|
this.contents = contents;
|
|
this.config = assign({}, RENDERER_DEFAULT_CONFIG, config || {});
|
|
this.id = this.config.id || uniqueId("splide");
|
|
this.Style = new Style(this.id, this.options);
|
|
this.Direction = Direction(null, null, this.options);
|
|
assert(this.contents.length, "Provide at least 1 content.");
|
|
this.init();
|
|
}
|
|
static clean(splide) {
|
|
const { on } = EventInterface(splide);
|
|
const { root } = splide;
|
|
const clones = queryAll(root, `.${CLASS_CLONE}`);
|
|
on(EVENT_MOUNTED, () => {
|
|
remove(child(root, "style"));
|
|
});
|
|
remove(clones);
|
|
}
|
|
init() {
|
|
this.parseBreakpoints();
|
|
this.initSlides();
|
|
this.registerRootStyles();
|
|
this.registerTrackStyles();
|
|
this.registerSlideStyles();
|
|
this.registerListStyles();
|
|
}
|
|
initSlides() {
|
|
push(this.slides, this.contents.map((content, index) => {
|
|
content = isString(content) ? { html: content } : content;
|
|
content.styles = content.styles || {};
|
|
content.attrs = content.attrs || {};
|
|
this.cover(content);
|
|
const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
|
|
assign(content.attrs, {
|
|
class: `${classes} ${content.attrs.class || ""}`.trim(),
|
|
style: this.buildStyles(content.styles)
|
|
});
|
|
return content;
|
|
}));
|
|
if (this.isLoop()) {
|
|
this.generateClones(this.slides);
|
|
}
|
|
}
|
|
registerRootStyles() {
|
|
this.breakpoints.forEach(([width, options]) => {
|
|
this.Style.rule(" ", "max-width", unit(options.width), width);
|
|
});
|
|
}
|
|
registerTrackStyles() {
|
|
const { Style: Style2 } = this;
|
|
const selector = `.${CLASS_TRACK}`;
|
|
this.breakpoints.forEach(([width, options]) => {
|
|
Style2.rule(selector, this.resolve("paddingLeft"), this.cssPadding(options, false), width);
|
|
Style2.rule(selector, this.resolve("paddingRight"), this.cssPadding(options, true), width);
|
|
Style2.rule(selector, "height", this.cssTrackHeight(options), width);
|
|
});
|
|
}
|
|
registerListStyles() {
|
|
const { Style: Style2 } = this;
|
|
const selector = `.${CLASS_LIST}`;
|
|
this.breakpoints.forEach(([width, options]) => {
|
|
Style2.rule(selector, "transform", this.buildTranslate(options), width);
|
|
if (!this.cssSlideHeight(options)) {
|
|
Style2.rule(selector, "aspect-ratio", this.cssAspectRatio(options), width);
|
|
}
|
|
});
|
|
}
|
|
registerSlideStyles() {
|
|
const { Style: Style2 } = this;
|
|
const selector = `.${CLASS_SLIDE}`;
|
|
this.breakpoints.forEach(([width, options]) => {
|
|
Style2.rule(selector, "width", this.cssSlideWidth(options), width);
|
|
Style2.rule(selector, "height", this.cssSlideHeight(options) || "100%", width);
|
|
Style2.rule(selector, this.resolve("marginRight"), unit(options.gap) || "0px", width);
|
|
Style2.rule(`${selector} > img`, "display", options.cover ? "none" : "inline", width);
|
|
});
|
|
}
|
|
buildTranslate(options) {
|
|
const { resolve, orient } = this.Direction;
|
|
const values = [];
|
|
values.push(this.cssOffsetClones(options));
|
|
values.push(this.cssOffsetGaps(options));
|
|
if (this.isCenter(options)) {
|
|
values.push(this.buildCssValue(orient(-50), "%"));
|
|
values.push(...this.cssOffsetCenter(options));
|
|
}
|
|
return values.filter(Boolean).map((value) => `translate${resolve("X")}(${value})`).join(" ");
|
|
}
|
|
cssOffsetClones(options) {
|
|
const { resolve, orient } = this.Direction;
|
|
const cloneCount = this.getCloneCount();
|
|
if (this.isFixedWidth(options)) {
|
|
const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
|
|
return this.buildCssValue(orient(value) * cloneCount, unit2);
|
|
}
|
|
const percent = 100 * cloneCount / options.perPage;
|
|
return `${orient(percent)}%`;
|
|
}
|
|
cssOffsetCenter(options) {
|
|
const { resolve, orient } = this.Direction;
|
|
if (this.isFixedWidth(options)) {
|
|
const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
|
|
return [this.buildCssValue(orient(value / 2), unit2)];
|
|
}
|
|
const values = [];
|
|
const { perPage, gap } = options;
|
|
values.push(`${orient(50 / perPage)}%`);
|
|
if (gap) {
|
|
const { value, unit: unit2 } = this.parseCssValue(gap);
|
|
const gapOffset = (value / perPage - value) / 2;
|
|
values.push(this.buildCssValue(orient(gapOffset), unit2));
|
|
}
|
|
return values;
|
|
}
|
|
cssOffsetGaps(options) {
|
|
const cloneCount = this.getCloneCount();
|
|
if (cloneCount && options.gap) {
|
|
const { orient } = this.Direction;
|
|
const { value, unit: unit2 } = this.parseCssValue(options.gap);
|
|
if (this.isFixedWidth(options)) {
|
|
return this.buildCssValue(orient(value * cloneCount), unit2);
|
|
}
|
|
const { perPage } = options;
|
|
const gaps = cloneCount / perPage;
|
|
return this.buildCssValue(orient(gaps * value), unit2);
|
|
}
|
|
return "";
|
|
}
|
|
resolve(prop) {
|
|
return camelToKebab(this.Direction.resolve(prop));
|
|
}
|
|
cssPadding(options, right) {
|
|
const { padding } = options;
|
|
const prop = this.Direction.resolve(right ? "right" : "left", true);
|
|
return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
|
|
}
|
|
cssTrackHeight(options) {
|
|
let height = "";
|
|
if (this.isVertical()) {
|
|
height = this.cssHeight(options);
|
|
assert(height, '"height" is missing.');
|
|
height = `calc(${height} - ${this.cssPadding(options, false)} - ${this.cssPadding(options, true)})`;
|
|
}
|
|
return height;
|
|
}
|
|
cssHeight(options) {
|
|
return unit(options.height);
|
|
}
|
|
cssSlideWidth(options) {
|
|
return options.autoWidth ? "" : unit(options.fixedWidth) || (this.isVertical() ? "" : this.cssSlideSize(options));
|
|
}
|
|
cssSlideHeight(options) {
|
|
return unit(options.fixedHeight) || (this.isVertical() ? options.autoHeight ? "" : this.cssSlideSize(options) : this.cssHeight(options));
|
|
}
|
|
cssSlideSize(options) {
|
|
const gap = unit(options.gap);
|
|
return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
|
|
}
|
|
cssAspectRatio(options) {
|
|
const { heightRatio } = options;
|
|
return heightRatio ? `${1 / heightRatio}` : "";
|
|
}
|
|
buildCssValue(value, unit2) {
|
|
return `${value}${unit2}`;
|
|
}
|
|
parseCssValue(value) {
|
|
if (isString(value)) {
|
|
const number = parseFloat(value) || 0;
|
|
const unit2 = value.replace(/\d*(\.\d*)?/, "") || "px";
|
|
return { value: number, unit: unit2 };
|
|
}
|
|
return { value, unit: "px" };
|
|
}
|
|
parseBreakpoints() {
|
|
const { breakpoints } = this.options;
|
|
this.breakpoints.push(["default", this.options]);
|
|
if (breakpoints) {
|
|
forOwn(breakpoints, (options, width) => {
|
|
this.breakpoints.push([width, merge(merge({}, this.options), options)]);
|
|
});
|
|
}
|
|
}
|
|
isFixedWidth(options) {
|
|
return !!options[this.Direction.resolve("fixedWidth")];
|
|
}
|
|
isLoop() {
|
|
return this.options.type === LOOP;
|
|
}
|
|
isCenter(options) {
|
|
if (options.focus === "center") {
|
|
if (this.isLoop()) {
|
|
return true;
|
|
}
|
|
if (this.options.type === SLIDE) {
|
|
return !this.options.trimSpace;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
isVertical() {
|
|
return this.options.direction === TTB;
|
|
}
|
|
buildClasses() {
|
|
const { options } = this;
|
|
return [
|
|
CLASS_ROOT,
|
|
`${CLASS_ROOT}--${options.type}`,
|
|
`${CLASS_ROOT}--${options.direction}`,
|
|
options.drag && `${CLASS_ROOT}--draggable`,
|
|
options.isNavigation && `${CLASS_ROOT}--nav`,
|
|
CLASS_ACTIVE,
|
|
!this.config.hidden && CLASS_RENDERED
|
|
].filter(Boolean).join(" ");
|
|
}
|
|
buildAttrs(attrs) {
|
|
let attr = "";
|
|
forOwn(attrs, (value, key) => {
|
|
attr += value ? ` ${camelToKebab(key)}="${value}"` : "";
|
|
});
|
|
return attr.trim();
|
|
}
|
|
buildStyles(styles) {
|
|
let style = "";
|
|
forOwn(styles, (value, key) => {
|
|
style += ` ${camelToKebab(key)}:${value};`;
|
|
});
|
|
return style.trim();
|
|
}
|
|
renderSlides() {
|
|
const { slideTag: tag } = this.config;
|
|
return this.slides.map((content) => {
|
|
return `<${tag} ${this.buildAttrs(content.attrs)}>${content.html || ""}</${tag}>`;
|
|
}).join("");
|
|
}
|
|
cover(content) {
|
|
const { styles, html = "" } = content;
|
|
if (this.options.cover && !this.options.lazyLoad) {
|
|
const src = html.match(/<img.*?src\s*=\s*(['"])(.+?)\1.*?>/);
|
|
if (src && src[2]) {
|
|
styles.background = `center/cover no-repeat url('${src[2]}')`;
|
|
}
|
|
}
|
|
}
|
|
generateClones(contents) {
|
|
const { classes } = this.options;
|
|
const count = this.getCloneCount();
|
|
const slides = contents.slice();
|
|
while (slides.length < count) {
|
|
push(slides, slides);
|
|
}
|
|
push(slides.slice(-count).reverse(), slides.slice(0, count)).forEach((content, index) => {
|
|
const attrs = assign({}, content.attrs, { class: `${content.attrs.class} ${classes.clone}` });
|
|
const clone = assign({}, content, { attrs });
|
|
index < count ? contents.unshift(clone) : contents.push(clone);
|
|
});
|
|
}
|
|
getCloneCount() {
|
|
if (this.isLoop()) {
|
|
const { options } = this;
|
|
if (options.clones) {
|
|
return options.clones;
|
|
}
|
|
const perPage = max(...this.breakpoints.map(([, options2]) => options2.perPage));
|
|
return perPage * ((options.flickMaxPages || 1) + 1);
|
|
}
|
|
return 0;
|
|
}
|
|
renderArrows() {
|
|
let html = "";
|
|
html += `<div class="${this.options.classes.arrows}">`;
|
|
html += this.renderArrow(true);
|
|
html += this.renderArrow(false);
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
renderArrow(prev) {
|
|
const { classes, i18n } = this.options;
|
|
const attrs = {
|
|
class: `${classes.arrow} ${prev ? classes.prev : classes.next}`,
|
|
type: "button",
|
|
ariaLabel: prev ? i18n.prev : i18n.next
|
|
};
|
|
return `<button ${this.buildAttrs(attrs)}><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${this.options.arrowPath || PATH}" /></svg></button>`;
|
|
}
|
|
html() {
|
|
const { rootClass, listTag, arrows, beforeTrack, afterTrack, slider, beforeSlider, afterSlider } = this.config;
|
|
let html = "";
|
|
html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
|
|
html += `<style>${this.Style.build()}</style>`;
|
|
if (slider) {
|
|
html += beforeSlider || "";
|
|
html += `<div class="splide__slider">`;
|
|
}
|
|
html += beforeTrack || "";
|
|
if (arrows) {
|
|
html += this.renderArrows();
|
|
}
|
|
html += `<div class="splide__track">`;
|
|
html += `<${listTag} class="splide__list">`;
|
|
html += this.renderSlides();
|
|
html += `</${listTag}>`;
|
|
html += `</div>`;
|
|
html += afterTrack || "";
|
|
if (slider) {
|
|
html += `</div>`;
|
|
html += afterSlider || "";
|
|
}
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
}
|
|
|
|
exports.CLASSES = CLASSES;
|
|
exports.CLASS_ACTIVE = CLASS_ACTIVE;
|
|
exports.CLASS_ARROW = CLASS_ARROW;
|
|
exports.CLASS_ARROWS = CLASS_ARROWS;
|
|
exports.CLASS_ARROW_NEXT = CLASS_ARROW_NEXT;
|
|
exports.CLASS_ARROW_PREV = CLASS_ARROW_PREV;
|
|
exports.CLASS_AUTOPLAY = CLASS_AUTOPLAY;
|
|
exports.CLASS_CLONE = CLASS_CLONE;
|
|
exports.CLASS_CONTAINER = CLASS_CONTAINER;
|
|
exports.CLASS_INITIALIZED = CLASS_INITIALIZED;
|
|
exports.CLASS_LIST = CLASS_LIST;
|
|
exports.CLASS_LOADING = CLASS_LOADING;
|
|
exports.CLASS_NEXT = CLASS_NEXT;
|
|
exports.CLASS_PAGINATION = CLASS_PAGINATION;
|
|
exports.CLASS_PAGINATION_PAGE = CLASS_PAGINATION_PAGE;
|
|
exports.CLASS_PAUSE = CLASS_PAUSE;
|
|
exports.CLASS_PLAY = CLASS_PLAY;
|
|
exports.CLASS_PREV = CLASS_PREV;
|
|
exports.CLASS_PROGRESS = CLASS_PROGRESS;
|
|
exports.CLASS_PROGRESS_BAR = CLASS_PROGRESS_BAR;
|
|
exports.CLASS_ROOT = CLASS_ROOT;
|
|
exports.CLASS_SLIDE = CLASS_SLIDE;
|
|
exports.CLASS_SLIDER = CLASS_SLIDER;
|
|
exports.CLASS_SPINNER = CLASS_SPINNER;
|
|
exports.CLASS_TRACK = CLASS_TRACK;
|
|
exports.CLASS_VISIBLE = CLASS_VISIBLE;
|
|
exports.EVENT_ACTIVE = EVENT_ACTIVE;
|
|
exports.EVENT_ARROWS_MOUNTED = EVENT_ARROWS_MOUNTED;
|
|
exports.EVENT_ARROWS_UPDATED = EVENT_ARROWS_UPDATED;
|
|
exports.EVENT_AUTOPLAY_PAUSE = EVENT_AUTOPLAY_PAUSE;
|
|
exports.EVENT_AUTOPLAY_PLAY = EVENT_AUTOPLAY_PLAY;
|
|
exports.EVENT_AUTOPLAY_PLAYING = EVENT_AUTOPLAY_PLAYING;
|
|
exports.EVENT_CLICK = EVENT_CLICK;
|
|
exports.EVENT_DESTROY = EVENT_DESTROY;
|
|
exports.EVENT_DRAG = EVENT_DRAG;
|
|
exports.EVENT_DRAGGED = EVENT_DRAGGED;
|
|
exports.EVENT_DRAGGING = EVENT_DRAGGING;
|
|
exports.EVENT_HIDDEN = EVENT_HIDDEN;
|
|
exports.EVENT_INACTIVE = EVENT_INACTIVE;
|
|
exports.EVENT_LAZYLOAD_LOADED = EVENT_LAZYLOAD_LOADED;
|
|
exports.EVENT_MOUNTED = EVENT_MOUNTED;
|
|
exports.EVENT_MOVE = EVENT_MOVE;
|
|
exports.EVENT_MOVED = EVENT_MOVED;
|
|
exports.EVENT_NAVIGATION_MOUNTED = EVENT_NAVIGATION_MOUNTED;
|
|
exports.EVENT_PAGINATION_MOUNTED = EVENT_PAGINATION_MOUNTED;
|
|
exports.EVENT_PAGINATION_UPDATED = EVENT_PAGINATION_UPDATED;
|
|
exports.EVENT_READY = EVENT_READY;
|
|
exports.EVENT_REFRESH = EVENT_REFRESH;
|
|
exports.EVENT_REPOSITIONED = EVENT_REPOSITIONED;
|
|
exports.EVENT_RESIZE = EVENT_RESIZE;
|
|
exports.EVENT_RESIZED = EVENT_RESIZED;
|
|
exports.EVENT_SCROLL = EVENT_SCROLL;
|
|
exports.EVENT_SCROLLED = EVENT_SCROLLED;
|
|
exports.EVENT_SHIFTED = EVENT_SHIFTED;
|
|
exports.EVENT_SLIDE_KEYDOWN = EVENT_SLIDE_KEYDOWN;
|
|
exports.EVENT_UPDATED = EVENT_UPDATED;
|
|
exports.EVENT_VISIBLE = EVENT_VISIBLE;
|
|
exports.EventBus = EventBus;
|
|
exports.EventInterface = EventInterface;
|
|
exports.RequestInterval = RequestInterval;
|
|
exports.STATUS_CLASSES = STATUS_CLASSES;
|
|
exports.Splide = Splide;
|
|
exports.SplideRenderer = SplideRenderer;
|
|
exports.State = State;
|
|
exports.Throttle = Throttle;
|
|
exports["default"] = Splide;
|