mirror of
https://github.com/inventree/inventree-website.git
synced 2025-11-04 07:25:46 +00:00
3645 lines
94 KiB
JavaScript
3645 lines
94 KiB
JavaScript
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
|
|
/*!
|
|
* Splide.js
|
|
* Version : 4.0.7
|
|
* License : MIT
|
|
* Copyright: 2022 Naotoshi Fujita
|
|
*/
|
|
var MEDIA_PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
|
|
var CREATED = 1;
|
|
var MOUNTED = 2;
|
|
var IDLE = 3;
|
|
var MOVING = 4;
|
|
var SCROLLING = 5;
|
|
var DRAGGING = 6;
|
|
var DESTROYED = 7;
|
|
var STATES = {
|
|
CREATED: CREATED,
|
|
MOUNTED: MOUNTED,
|
|
IDLE: IDLE,
|
|
MOVING: MOVING,
|
|
SCROLLING: SCROLLING,
|
|
DRAGGING: DRAGGING,
|
|
DESTROYED: DESTROYED
|
|
};
|
|
|
|
function empty(array) {
|
|
array.length = 0;
|
|
}
|
|
|
|
function slice(arrayLike, start, end) {
|
|
return Array.prototype.slice.call(arrayLike, start, end);
|
|
}
|
|
|
|
function apply(func) {
|
|
return func.bind.apply(func, [null].concat(slice(arguments, 1)));
|
|
}
|
|
|
|
var nextTick = setTimeout;
|
|
|
|
var noop = function noop() {};
|
|
|
|
function raf(func) {
|
|
return requestAnimationFrame(func);
|
|
}
|
|
|
|
function typeOf(type, subject) {
|
|
return typeof subject === type;
|
|
}
|
|
|
|
function isObject(subject) {
|
|
return !isNull(subject) && typeOf("object", subject);
|
|
}
|
|
|
|
var isArray = Array.isArray;
|
|
var isFunction = apply(typeOf, "function");
|
|
var isString = apply(typeOf, "string");
|
|
var isUndefined = apply(typeOf, "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.apply(array, toArray(items));
|
|
return array;
|
|
}
|
|
|
|
function toggleClass(elm, classes, add) {
|
|
if (elm) {
|
|
forEach(classes, function (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, function (node) {
|
|
var parent = (ref || node).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) {
|
|
var children2 = parent ? slice(parent.children) : [];
|
|
return selector ? children2.filter(function (child) {
|
|
return matches(child, selector);
|
|
}) : children2;
|
|
}
|
|
|
|
function child(parent, selector) {
|
|
return selector ? children(parent, selector)[0] : parent.firstElementChild;
|
|
}
|
|
|
|
var ownKeys = Object.keys;
|
|
|
|
function forOwn(object, iteratee, right) {
|
|
if (object) {
|
|
var keys = ownKeys(object);
|
|
keys = right ? keys.reverse() : keys;
|
|
|
|
for (var i = 0; i < keys.length; i++) {
|
|
var key = keys[i];
|
|
|
|
if (key !== "__proto__") {
|
|
if (iteratee(object[key], key) === false) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return object;
|
|
}
|
|
|
|
function assign(object) {
|
|
slice(arguments, 1).forEach(function (source) {
|
|
forOwn(source, function (value, key) {
|
|
object[key] = source[key];
|
|
});
|
|
});
|
|
return object;
|
|
}
|
|
|
|
function merge(object) {
|
|
slice(arguments, 1).forEach(function (source) {
|
|
forOwn(source, function (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 omit(object, keys) {
|
|
toArray(keys || ownKeys(object)).forEach(function (key) {
|
|
delete object[key];
|
|
});
|
|
}
|
|
|
|
function removeAttribute(elms, attrs) {
|
|
forEach(elms, function (elm) {
|
|
forEach(attrs, function (attr) {
|
|
elm && elm.removeAttribute(attr);
|
|
});
|
|
});
|
|
}
|
|
|
|
function setAttribute(elms, attrs, value) {
|
|
if (isObject(attrs)) {
|
|
forOwn(attrs, function (value2, name) {
|
|
setAttribute(elms, name, value2);
|
|
});
|
|
} else {
|
|
forEach(elms, function (elm) {
|
|
isNull(value) || value === "" ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
|
|
});
|
|
}
|
|
}
|
|
|
|
function create(tag, attrs, parent) {
|
|
var 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)) {
|
|
elm.style[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, function (node) {
|
|
if (node && node.parentNode) {
|
|
node.parentNode.removeChild(node);
|
|
}
|
|
});
|
|
}
|
|
|
|
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 selector ? slice(parent.querySelectorAll(selector)) : [];
|
|
}
|
|
|
|
function removeClass(elm, classes) {
|
|
toggleClass(elm, classes, false);
|
|
}
|
|
|
|
function timeOf(e) {
|
|
return e.timeStamp;
|
|
}
|
|
|
|
function unit(value) {
|
|
return isString(value) ? value : value ? value + "px" : "";
|
|
}
|
|
|
|
var PROJECT_CODE = "splide";
|
|
var DATA_ATTRIBUTE = "data-" + PROJECT_CODE;
|
|
|
|
function assert(condition, message) {
|
|
if (!condition) {
|
|
throw new Error("[" + PROJECT_CODE + "] " + (message || ""));
|
|
}
|
|
}
|
|
|
|
var min = Math.min,
|
|
max = Math.max,
|
|
floor = Math.floor,
|
|
ceil = Math.ceil,
|
|
abs = Math.abs;
|
|
|
|
function approximatelyEqual(x, y, epsilon) {
|
|
return abs(x - y) < epsilon;
|
|
}
|
|
|
|
function between(number, minOrMax, maxOrMin, exclusive) {
|
|
var minimum = min(minOrMax, maxOrMin);
|
|
var maximum = max(minOrMax, maxOrMin);
|
|
return exclusive ? minimum < number && number < maximum : minimum <= number && number <= maximum;
|
|
}
|
|
|
|
function clamp(number, x, y) {
|
|
var minimum = min(x, y);
|
|
var 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, function (replacement) {
|
|
string = string.replace("%s", "" + replacement);
|
|
});
|
|
return string;
|
|
}
|
|
|
|
function pad(number) {
|
|
return number < 10 ? "0" + number : "" + number;
|
|
}
|
|
|
|
var ids = {};
|
|
|
|
function uniqueId(prefix) {
|
|
return "" + prefix + pad(ids[prefix] = (ids[prefix] || 0) + 1);
|
|
}
|
|
|
|
function EventBinder() {
|
|
var listeners = [];
|
|
|
|
function bind(targets, events, callback, options) {
|
|
forEachEvent(targets, events, function (target, event, namespace) {
|
|
var isEventTarget = ("addEventListener" in target);
|
|
var remover = isEventTarget ? target.removeEventListener.bind(target, event, callback, options) : target["removeListener"].bind(target, callback);
|
|
isEventTarget ? target.addEventListener(event, callback, options) : target["addListener"](callback);
|
|
listeners.push([target, event, namespace, callback, remover]);
|
|
});
|
|
}
|
|
|
|
function unbind(targets, events, callback) {
|
|
forEachEvent(targets, events, function (target, event, namespace) {
|
|
listeners = listeners.filter(function (listener) {
|
|
if (listener[0] === target && listener[1] === event && listener[2] === namespace && (!callback || listener[3] === callback)) {
|
|
listener[4]();
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
});
|
|
}
|
|
|
|
function dispatch(target, type, detail) {
|
|
var e;
|
|
var bubbles = true;
|
|
|
|
if (typeof CustomEvent === "function") {
|
|
e = new CustomEvent(type, {
|
|
bubbles: bubbles,
|
|
detail: detail
|
|
});
|
|
} else {
|
|
e = document.createEvent("CustomEvent");
|
|
e.initCustomEvent(type, bubbles, false, detail);
|
|
}
|
|
|
|
target.dispatchEvent(e);
|
|
return e;
|
|
}
|
|
|
|
function forEachEvent(targets, events, iteratee) {
|
|
forEach(targets, function (target) {
|
|
target && forEach(events, function (events2) {
|
|
events2.split(" ").forEach(function (eventNS) {
|
|
var fragment = eventNS.split(".");
|
|
iteratee(target, fragment[0], fragment[1]);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function destroy() {
|
|
listeners.forEach(function (data) {
|
|
data[4]();
|
|
});
|
|
empty(listeners);
|
|
}
|
|
|
|
return {
|
|
bind: bind,
|
|
unbind: unbind,
|
|
dispatch: dispatch,
|
|
destroy: destroy
|
|
};
|
|
}
|
|
|
|
var EVENT_MOUNTED = "mounted";
|
|
var EVENT_READY = "ready";
|
|
var EVENT_MOVE = "move";
|
|
var EVENT_MOVED = "moved";
|
|
var EVENT_SHIFTED = "shifted";
|
|
var EVENT_CLICK = "click";
|
|
var EVENT_ACTIVE = "active";
|
|
var EVENT_INACTIVE = "inactive";
|
|
var EVENT_VISIBLE = "visible";
|
|
var EVENT_HIDDEN = "hidden";
|
|
var EVENT_SLIDE_KEYDOWN = "slide:keydown";
|
|
var EVENT_REFRESH = "refresh";
|
|
var EVENT_UPDATED = "updated";
|
|
var EVENT_RESIZE = "resize";
|
|
var EVENT_RESIZED = "resized";
|
|
var EVENT_DRAG = "drag";
|
|
var EVENT_DRAGGING = "dragging";
|
|
var EVENT_DRAGGED = "dragged";
|
|
var EVENT_SCROLL = "scroll";
|
|
var EVENT_SCROLLED = "scrolled";
|
|
var EVENT_DESTROY = "destroy";
|
|
var EVENT_ARROWS_MOUNTED = "arrows:mounted";
|
|
var EVENT_ARROWS_UPDATED = "arrows:updated";
|
|
var EVENT_PAGINATION_MOUNTED = "pagination:mounted";
|
|
var EVENT_PAGINATION_UPDATED = "pagination:updated";
|
|
var EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
|
|
var EVENT_AUTOPLAY_PLAY = "autoplay:play";
|
|
var EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
|
|
var EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
|
|
var EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
|
|
|
|
function EventInterface(Splide2) {
|
|
var bus = Splide2 ? Splide2.event.bus : document.createDocumentFragment();
|
|
var binder = EventBinder();
|
|
|
|
function on(events, callback) {
|
|
binder.bind(bus, toArray(events).join(" "), function (e) {
|
|
callback.apply(callback, isArray(e.detail) ? e.detail : []);
|
|
});
|
|
}
|
|
|
|
function emit(event) {
|
|
binder.dispatch(bus, event, slice(arguments, 1));
|
|
}
|
|
|
|
if (Splide2) {
|
|
Splide2.event.on(EVENT_DESTROY, binder.destroy);
|
|
}
|
|
|
|
return assign(binder, {
|
|
bus: bus,
|
|
on: on,
|
|
off: apply(binder.unbind, bus),
|
|
emit: emit
|
|
});
|
|
}
|
|
|
|
function RequestInterval(interval, onInterval, onUpdate, limit) {
|
|
var now = Date.now;
|
|
var startTime;
|
|
var rate = 0;
|
|
var id;
|
|
var paused = true;
|
|
var count = 0;
|
|
|
|
function update() {
|
|
if (!paused) {
|
|
rate = interval ? min((now() - startTime) / interval, 1) : 1;
|
|
onUpdate && onUpdate(rate);
|
|
|
|
if (rate >= 1) {
|
|
onInterval();
|
|
startTime = now();
|
|
|
|
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() {
|
|
id && cancelAnimationFrame(id);
|
|
rate = 0;
|
|
id = 0;
|
|
paused = true;
|
|
}
|
|
|
|
function set(time) {
|
|
interval = time;
|
|
}
|
|
|
|
function isPaused() {
|
|
return paused;
|
|
}
|
|
|
|
return {
|
|
start: start,
|
|
rewind: rewind,
|
|
pause: pause,
|
|
cancel: cancel,
|
|
set: set,
|
|
isPaused: isPaused
|
|
};
|
|
}
|
|
|
|
function State(initialState) {
|
|
var state = initialState;
|
|
|
|
function set(value) {
|
|
state = value;
|
|
}
|
|
|
|
function is(states) {
|
|
return includes(toArray(states), state);
|
|
}
|
|
|
|
return {
|
|
set: set,
|
|
is: is
|
|
};
|
|
}
|
|
|
|
function Throttle(func, duration) {
|
|
var interval;
|
|
|
|
function throttled() {
|
|
if (!interval) {
|
|
interval = RequestInterval(duration || 0, function () {
|
|
func();
|
|
interval = null;
|
|
}, null, 1);
|
|
interval.start();
|
|
}
|
|
}
|
|
|
|
return throttled;
|
|
}
|
|
|
|
function Media(Splide2, Components2, options) {
|
|
var state = Splide2.state;
|
|
var breakpoints = options.breakpoints || {};
|
|
var reducedMotion = options.reducedMotion || {};
|
|
var binder = EventBinder();
|
|
var queries = [];
|
|
|
|
function setup() {
|
|
var isMin = options.mediaQuery === "min";
|
|
ownKeys(breakpoints).sort(function (n, m) {
|
|
return isMin ? +n - +m : +m - +n;
|
|
}).forEach(function (key) {
|
|
register(breakpoints[key], "(" + (isMin ? "min" : "max") + "-width:" + key + "px)");
|
|
});
|
|
register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
|
|
update();
|
|
}
|
|
|
|
function destroy(completely) {
|
|
if (completely) {
|
|
binder.destroy();
|
|
}
|
|
}
|
|
|
|
function register(options2, query) {
|
|
var queryList = matchMedia(query);
|
|
binder.bind(queryList, "change", update);
|
|
queries.push([options2, queryList]);
|
|
}
|
|
|
|
function update() {
|
|
var destroyed = state.is(DESTROYED);
|
|
var direction = options.direction;
|
|
var merged = queries.reduce(function (merged2, entry) {
|
|
return merge(merged2, entry[1].matches ? entry[0] : {});
|
|
}, {});
|
|
omit(options);
|
|
set(merged);
|
|
|
|
if (options.destroy) {
|
|
Splide2.destroy(options.destroy === "completely");
|
|
} else if (destroyed) {
|
|
destroy(true);
|
|
Splide2.mount();
|
|
} else {
|
|
direction !== options.direction && Splide2.refresh();
|
|
}
|
|
}
|
|
|
|
function reduce(enable) {
|
|
if (matchMedia(MEDIA_PREFERS_REDUCED_MOTION).matches) {
|
|
enable ? merge(options, reducedMotion) : omit(options, ownKeys(reducedMotion));
|
|
}
|
|
}
|
|
|
|
function set(opts, user) {
|
|
merge(options, opts);
|
|
user && merge(Object.getPrototypeOf(options), opts);
|
|
|
|
if (!state.is(CREATED)) {
|
|
Splide2.emit(EVENT_UPDATED, options);
|
|
}
|
|
}
|
|
|
|
return {
|
|
setup: setup,
|
|
destroy: destroy,
|
|
reduce: reduce,
|
|
set: set
|
|
};
|
|
}
|
|
|
|
var ARROW = "Arrow";
|
|
var ARROW_LEFT = ARROW + "Left";
|
|
var ARROW_RIGHT = ARROW + "Right";
|
|
var ARROW_UP = ARROW + "Up";
|
|
var ARROW_DOWN = ARROW + "Down";
|
|
var LTR = "ltr";
|
|
var RTL = "rtl";
|
|
var TTB = "ttb";
|
|
var ORIENTATION_MAP = {
|
|
width: ["height"],
|
|
left: ["top", "right"],
|
|
right: ["bottom", "left"],
|
|
x: ["y"],
|
|
X: ["Y"],
|
|
Y: ["X"],
|
|
ArrowLeft: [ARROW_UP, ARROW_RIGHT],
|
|
ArrowRight: [ARROW_DOWN, ARROW_LEFT]
|
|
};
|
|
|
|
function Direction(Splide2, Components2, options) {
|
|
function resolve(prop, axisOnly, direction) {
|
|
direction = direction || options.direction;
|
|
var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
|
|
return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index] || prop.replace(/width|left|right/i, function (match, offset) {
|
|
var replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;
|
|
return offset > 0 ? replacement.charAt(0).toUpperCase() + replacement.slice(1) : replacement;
|
|
});
|
|
}
|
|
|
|
function orient(value) {
|
|
return value * (options.direction === RTL ? 1 : -1);
|
|
}
|
|
|
|
return {
|
|
resolve: resolve,
|
|
orient: orient
|
|
};
|
|
}
|
|
|
|
var ROLE = "role";
|
|
var TAB_INDEX = "tabindex";
|
|
var DISABLED = "disabled";
|
|
var ARIA_PREFIX = "aria-";
|
|
var ARIA_CONTROLS = ARIA_PREFIX + "controls";
|
|
var ARIA_CURRENT = ARIA_PREFIX + "current";
|
|
var ARIA_SELECTED = ARIA_PREFIX + "selected";
|
|
var ARIA_LABEL = ARIA_PREFIX + "label";
|
|
var ARIA_LABELLEDBY = ARIA_PREFIX + "labelledby";
|
|
var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
|
|
var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
|
|
var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
|
|
var ARIA_LIVE = ARIA_PREFIX + "live";
|
|
var ARIA_BUSY = ARIA_PREFIX + "busy";
|
|
var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
|
|
var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
|
|
var CLASS_ROOT = PROJECT_CODE;
|
|
var CLASS_TRACK = PROJECT_CODE + "__track";
|
|
var CLASS_LIST = PROJECT_CODE + "__list";
|
|
var CLASS_SLIDE = PROJECT_CODE + "__slide";
|
|
var CLASS_CLONE = CLASS_SLIDE + "--clone";
|
|
var CLASS_CONTAINER = CLASS_SLIDE + "__container";
|
|
var CLASS_ARROWS = PROJECT_CODE + "__arrows";
|
|
var CLASS_ARROW = PROJECT_CODE + "__arrow";
|
|
var CLASS_ARROW_PREV = CLASS_ARROW + "--prev";
|
|
var CLASS_ARROW_NEXT = CLASS_ARROW + "--next";
|
|
var CLASS_PAGINATION = PROJECT_CODE + "__pagination";
|
|
var CLASS_PAGINATION_PAGE = CLASS_PAGINATION + "__page";
|
|
var CLASS_PROGRESS = PROJECT_CODE + "__progress";
|
|
var CLASS_PROGRESS_BAR = CLASS_PROGRESS + "__bar";
|
|
var CLASS_TOGGLE = PROJECT_CODE + "__toggle";
|
|
var CLASS_TOGGLE_PLAY = CLASS_TOGGLE + "__play";
|
|
var CLASS_TOGGLE_PAUSE = CLASS_TOGGLE + "__pause";
|
|
var CLASS_SPINNER = PROJECT_CODE + "__spinner";
|
|
var CLASS_SR = PROJECT_CODE + "__sr";
|
|
var CLASS_INITIALIZED = "is-initialized";
|
|
var CLASS_ACTIVE = "is-active";
|
|
var CLASS_PREV = "is-prev";
|
|
var CLASS_NEXT = "is-next";
|
|
var CLASS_VISIBLE = "is-visible";
|
|
var CLASS_LOADING = "is-loading";
|
|
var CLASS_FOCUS_IN = "is-focus-in";
|
|
var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN];
|
|
var 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 closest(from, selector) {
|
|
if (isFunction(from.closest)) {
|
|
return from.closest(selector);
|
|
}
|
|
|
|
var elm = from;
|
|
|
|
while (elm && elm.nodeType === 1) {
|
|
if (matches(elm, selector)) {
|
|
break;
|
|
}
|
|
|
|
elm = elm.parentElement;
|
|
}
|
|
|
|
return elm;
|
|
}
|
|
|
|
var FRICTION = 5;
|
|
var LOG_INTERVAL = 200;
|
|
var POINTER_DOWN_EVENTS = "touchstart mousedown";
|
|
var POINTER_MOVE_EVENTS = "touchmove mousemove";
|
|
var POINTER_UP_EVENTS = "touchend touchcancel mouseup click";
|
|
|
|
function Elements(Splide2, Components2, options) {
|
|
var _EventInterface = EventInterface(Splide2),
|
|
on = _EventInterface.on,
|
|
bind = _EventInterface.bind;
|
|
|
|
var root = Splide2.root;
|
|
var i18n = options.i18n;
|
|
var elements = {};
|
|
var slides = [];
|
|
var rootClasses = [];
|
|
var trackClasses = [];
|
|
var track;
|
|
var list;
|
|
var isUsingKey;
|
|
|
|
function setup() {
|
|
collect();
|
|
init();
|
|
update();
|
|
}
|
|
|
|
function mount() {
|
|
on(EVENT_REFRESH, destroy);
|
|
on(EVENT_REFRESH, setup);
|
|
on(EVENT_UPDATED, update);
|
|
bind(document, POINTER_DOWN_EVENTS + " keydown", function (e) {
|
|
isUsingKey = e.type === "keydown";
|
|
}, {
|
|
capture: true
|
|
});
|
|
bind(root, "focusin", function () {
|
|
toggleClass(root, CLASS_FOCUS_IN, !!isUsingKey);
|
|
});
|
|
}
|
|
|
|
function destroy(completely) {
|
|
var attrs = ALL_ATTRIBUTES.concat("style");
|
|
empty(slides);
|
|
removeClass(root, rootClasses);
|
|
removeClass(track, trackClasses);
|
|
removeAttribute([track, list], attrs);
|
|
removeAttribute(root, completely ? attrs : ["style", ARIA_ROLEDESCRIPTION]);
|
|
}
|
|
|
|
function update() {
|
|
removeClass(root, rootClasses);
|
|
removeClass(track, trackClasses);
|
|
rootClasses = getClasses(CLASS_ROOT);
|
|
trackClasses = getClasses(CLASS_TRACK);
|
|
addClass(root, rootClasses);
|
|
addClass(track, trackClasses);
|
|
setAttribute(root, ARIA_LABEL, options.label);
|
|
setAttribute(root, ARIA_LABELLEDBY, options.labelledby);
|
|
}
|
|
|
|
function collect() {
|
|
track = find("." + 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 + ")"));
|
|
forOwn({
|
|
arrows: CLASS_ARROWS,
|
|
pagination: CLASS_PAGINATION,
|
|
prev: CLASS_ARROW_PREV,
|
|
next: CLASS_ARROW_NEXT,
|
|
bar: CLASS_PROGRESS_BAR,
|
|
toggle: CLASS_TOGGLE
|
|
}, function (className, key) {
|
|
elements[key] = find("." + className);
|
|
});
|
|
assign(elements, {
|
|
root: root,
|
|
track: track,
|
|
list: list,
|
|
slides: slides
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
var id = root.id || uniqueId(PROJECT_CODE);
|
|
var role = options.role;
|
|
root.id = id;
|
|
track.id = track.id || id + "-track";
|
|
list.id = list.id || id + "-list";
|
|
|
|
if (!getAttribute(root, ROLE) && root.tagName !== "SECTION" && role) {
|
|
setAttribute(root, ROLE, role);
|
|
}
|
|
|
|
setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
|
|
setAttribute(list, ROLE, "presentation");
|
|
}
|
|
|
|
function find(selector) {
|
|
var elm = query(root, selector);
|
|
return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : void 0;
|
|
}
|
|
|
|
function getClasses(base) {
|
|
return [base + "--" + options.type, base + "--" + options.direction, options.drag && base + "--draggable", options.isNavigation && base + "--nav", base === CLASS_ROOT && CLASS_ACTIVE];
|
|
}
|
|
|
|
return assign(elements, {
|
|
setup: setup,
|
|
mount: mount,
|
|
destroy: destroy
|
|
});
|
|
}
|
|
|
|
var SLIDE = "slide";
|
|
var LOOP = "loop";
|
|
var FADE = "fade";
|
|
|
|
function Slide$1(Splide2, index, slideIndex, slide) {
|
|
var event = EventInterface(Splide2);
|
|
var on = event.on,
|
|
emit = event.emit,
|
|
bind = event.bind;
|
|
var Components = Splide2.Components,
|
|
root = Splide2.root,
|
|
options = Splide2.options;
|
|
var isNavigation = options.isNavigation,
|
|
updateOnMove = options.updateOnMove,
|
|
i18n = options.i18n,
|
|
pagination = options.pagination,
|
|
slideFocus = options.slideFocus;
|
|
var resolve = Components.Direction.resolve;
|
|
var styles = getAttribute(slide, "style");
|
|
var label = getAttribute(slide, ARIA_LABEL);
|
|
var isClone = slideIndex > -1;
|
|
var container = child(slide, "." + CLASS_CONTAINER);
|
|
var focusableNodes = queryAll(slide, options.focusableNodes || "");
|
|
var destroyed;
|
|
|
|
function mount() {
|
|
if (!isClone) {
|
|
slide.id = root.id + "-slide" + pad(index + 1);
|
|
setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
|
|
setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide);
|
|
setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));
|
|
}
|
|
|
|
listen();
|
|
}
|
|
|
|
function listen() {
|
|
bind(slide, "click", apply(emit, EVENT_CLICK, self));
|
|
bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
|
|
on([EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED], update);
|
|
on(EVENT_NAVIGATION_MOUNTED, initNavigation);
|
|
|
|
if (updateOnMove) {
|
|
on(EVENT_MOVE, onMove);
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
destroyed = true;
|
|
event.destroy();
|
|
removeClass(slide, STATUS_CLASSES);
|
|
removeAttribute(slide, ALL_ATTRIBUTES);
|
|
setAttribute(slide, "style", styles);
|
|
setAttribute(slide, ARIA_LABEL, label || "");
|
|
}
|
|
|
|
function initNavigation() {
|
|
var controls = Splide2.splides.map(function (target) {
|
|
var Slide2 = target.splide.Components.Slides.getAt(index);
|
|
return Slide2 ? Slide2.slide.id : "";
|
|
}).join(" ");
|
|
setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
|
|
setAttribute(slide, ARIA_CONTROLS, controls);
|
|
setAttribute(slide, ROLE, slideFocus ? "button" : "");
|
|
slideFocus && removeAttribute(slide, ARIA_ROLEDESCRIPTION);
|
|
}
|
|
|
|
function onMove() {
|
|
if (!destroyed) {
|
|
update();
|
|
}
|
|
}
|
|
|
|
function update() {
|
|
if (!destroyed) {
|
|
var curr = Splide2.index;
|
|
updateActivity();
|
|
updateVisibility();
|
|
toggleClass(slide, CLASS_PREV, index === curr - 1);
|
|
toggleClass(slide, CLASS_NEXT, index === curr + 1);
|
|
}
|
|
}
|
|
|
|
function updateActivity() {
|
|
var active = isActive();
|
|
|
|
if (active !== hasClass(slide, CLASS_ACTIVE)) {
|
|
toggleClass(slide, CLASS_ACTIVE, active);
|
|
setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
|
|
emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
|
|
}
|
|
}
|
|
|
|
function updateVisibility() {
|
|
var visible = isVisible();
|
|
var hidden = !visible && (!isActive() || isClone);
|
|
|
|
if (!Splide2.state.is([MOVING, SCROLLING])) {
|
|
setAttribute(slide, ARIA_HIDDEN, hidden || "");
|
|
}
|
|
|
|
setAttribute(focusableNodes, TAB_INDEX, hidden ? -1 : "");
|
|
|
|
if (slideFocus) {
|
|
setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
|
|
}
|
|
|
|
if (visible !== hasClass(slide, CLASS_VISIBLE)) {
|
|
toggleClass(slide, CLASS_VISIBLE, visible);
|
|
emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
|
|
}
|
|
|
|
if (!visible && document.activeElement === slide) {
|
|
var Slide2 = Components.Slides.getAt(Splide2.index);
|
|
Slide2 && focus(Slide2.slide);
|
|
}
|
|
}
|
|
|
|
function style$1(prop, value, useContainer) {
|
|
style(useContainer && container || slide, prop, value);
|
|
}
|
|
|
|
function isActive() {
|
|
var curr = Splide2.index;
|
|
return curr === index || options.cloneStatus && curr === slideIndex;
|
|
}
|
|
|
|
function isVisible() {
|
|
if (Splide2.is(FADE)) {
|
|
return isActive();
|
|
}
|
|
|
|
var trackRect = rect(Components.Elements.track);
|
|
var slideRect = rect(slide);
|
|
var left = resolve("left", true);
|
|
var right = resolve("right", true);
|
|
return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]);
|
|
}
|
|
|
|
function isWithin(from, distance) {
|
|
var diff = abs(from - index);
|
|
|
|
if (!isClone && (options.rewind || Splide2.is(LOOP))) {
|
|
diff = min(diff, Splide2.length - diff);
|
|
}
|
|
|
|
return diff <= distance;
|
|
}
|
|
|
|
var self = {
|
|
index: index,
|
|
slideIndex: slideIndex,
|
|
slide: slide,
|
|
container: container,
|
|
isClone: isClone,
|
|
mount: mount,
|
|
destroy: destroy,
|
|
update: update,
|
|
style: style$1,
|
|
isWithin: isWithin
|
|
};
|
|
return self;
|
|
}
|
|
|
|
function Slides(Splide2, Components2, options) {
|
|
var _EventInterface2 = EventInterface(Splide2),
|
|
on = _EventInterface2.on,
|
|
emit = _EventInterface2.emit,
|
|
bind = _EventInterface2.bind;
|
|
|
|
var _Components2$Elements = Components2.Elements,
|
|
slides = _Components2$Elements.slides,
|
|
list = _Components2$Elements.list;
|
|
var Slides2 = [];
|
|
|
|
function mount() {
|
|
init();
|
|
on(EVENT_REFRESH, destroy);
|
|
on(EVENT_REFRESH, init);
|
|
on([EVENT_MOUNTED, EVENT_REFRESH], function () {
|
|
Slides2.sort(function (Slide1, Slide2) {
|
|
return Slide1.index - Slide2.index;
|
|
});
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
slides.forEach(function (slide, index) {
|
|
register(slide, index, -1);
|
|
});
|
|
}
|
|
|
|
function destroy() {
|
|
forEach$1(function (Slide2) {
|
|
Slide2.destroy();
|
|
});
|
|
empty(Slides2);
|
|
}
|
|
|
|
function update() {
|
|
forEach$1(function (Slide2) {
|
|
Slide2.update();
|
|
});
|
|
}
|
|
|
|
function register(slide, index, slideIndex) {
|
|
var object = Slide$1(Splide2, index, slideIndex, slide);
|
|
object.mount();
|
|
Slides2.push(object);
|
|
}
|
|
|
|
function get(excludeClones) {
|
|
return excludeClones ? filter(function (Slide2) {
|
|
return !Slide2.isClone;
|
|
}) : Slides2;
|
|
}
|
|
|
|
function getIn(page) {
|
|
var Controller = Components2.Controller;
|
|
var index = Controller.toIndex(page);
|
|
var max = Controller.hasFocus() ? 1 : options.perPage;
|
|
return filter(function (Slide2) {
|
|
return between(Slide2.index, index, index + max - 1);
|
|
});
|
|
}
|
|
|
|
function getAt(index) {
|
|
return filter(index)[0];
|
|
}
|
|
|
|
function add(items, index) {
|
|
forEach(items, function (slide) {
|
|
if (isString(slide)) {
|
|
slide = parseHtml(slide);
|
|
}
|
|
|
|
if (isHTMLElement(slide)) {
|
|
var ref = slides[index];
|
|
ref ? before(slide, ref) : append(list, slide);
|
|
addClass(slide, options.classes.slide);
|
|
observeImages(slide, apply(emit, EVENT_RESIZE));
|
|
}
|
|
});
|
|
emit(EVENT_REFRESH);
|
|
}
|
|
|
|
function remove$1(matcher) {
|
|
remove(filter(matcher).map(function (Slide2) {
|
|
return Slide2.slide;
|
|
}));
|
|
emit(EVENT_REFRESH);
|
|
}
|
|
|
|
function forEach$1(iteratee, excludeClones) {
|
|
get(excludeClones).forEach(iteratee);
|
|
}
|
|
|
|
function filter(matcher) {
|
|
return Slides2.filter(isFunction(matcher) ? matcher : function (Slide2) {
|
|
return isString(matcher) ? matches(Slide2.slide, matcher) : includes(toArray(matcher), Slide2.index);
|
|
});
|
|
}
|
|
|
|
function style(prop, value, useContainer) {
|
|
forEach$1(function (Slide2) {
|
|
Slide2.style(prop, value, useContainer);
|
|
});
|
|
}
|
|
|
|
function observeImages(elm, callback) {
|
|
var images = queryAll(elm, "img");
|
|
var length = images.length;
|
|
|
|
if (length) {
|
|
images.forEach(function (img) {
|
|
bind(img, "load error", function () {
|
|
if (! --length) {
|
|
callback();
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
|
|
function getLength(excludeClones) {
|
|
return excludeClones ? slides.length : Slides2.length;
|
|
}
|
|
|
|
function isEnough() {
|
|
return Slides2.length > options.perPage;
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
destroy: destroy,
|
|
update: update,
|
|
register: register,
|
|
get: get,
|
|
getIn: getIn,
|
|
getAt: getAt,
|
|
add: add,
|
|
remove: remove$1,
|
|
forEach: forEach$1,
|
|
filter: filter,
|
|
style: style,
|
|
getLength: getLength,
|
|
isEnough: isEnough
|
|
};
|
|
}
|
|
|
|
function Layout(Splide2, Components2, options) {
|
|
var _EventInterface3 = EventInterface(Splide2),
|
|
on = _EventInterface3.on,
|
|
bind = _EventInterface3.bind,
|
|
emit = _EventInterface3.emit;
|
|
|
|
var Slides = Components2.Slides;
|
|
var resolve = Components2.Direction.resolve;
|
|
var _Components2$Elements2 = Components2.Elements,
|
|
root = _Components2$Elements2.root,
|
|
track = _Components2$Elements2.track,
|
|
list = _Components2$Elements2.list;
|
|
var getAt = Slides.getAt,
|
|
styleSlides = Slides.style;
|
|
var vertical;
|
|
var rootRect;
|
|
|
|
function mount() {
|
|
init();
|
|
bind(window, "resize load", Throttle(apply(emit, 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() {
|
|
var newRect = rect(root);
|
|
|
|
if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
|
|
style(track, "height", cssTrackHeight());
|
|
styleSlides(resolve("marginRight"), unit(options.gap));
|
|
styleSlides("width", cssSlideWidth());
|
|
styleSlides("height", cssSlideHeight(), true);
|
|
rootRect = newRect;
|
|
emit(EVENT_RESIZED);
|
|
}
|
|
}
|
|
|
|
function cssPadding(right) {
|
|
var padding = options.padding;
|
|
var prop = resolve(right ? "right" : "left");
|
|
return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
|
|
}
|
|
|
|
function cssTrackHeight() {
|
|
var 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 ? null : unit(options.fixedWidth) || (vertical ? "" : cssSlideSize());
|
|
}
|
|
|
|
function cssSlideHeight() {
|
|
return unit(options.fixedHeight) || (vertical ? options.autoHeight ? null : cssSlideSize() : cssHeight());
|
|
}
|
|
|
|
function cssSlideSize() {
|
|
var 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) {
|
|
var Slide = getAt(index || 0);
|
|
return Slide ? rect(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
|
|
}
|
|
|
|
function totalSize(index, withoutGap) {
|
|
var Slide = getAt(index);
|
|
|
|
if (Slide) {
|
|
var right = rect(Slide.slide)[resolve("right")];
|
|
var 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() {
|
|
var 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: mount,
|
|
listSize: listSize,
|
|
slideSize: slideSize,
|
|
sliderSize: sliderSize,
|
|
totalSize: totalSize,
|
|
getPadding: getPadding
|
|
};
|
|
}
|
|
|
|
var MULTIPLIER = 2;
|
|
|
|
function Clones(Splide2, Components2, options) {
|
|
var _EventInterface4 = EventInterface(Splide2),
|
|
on = _EventInterface4.on,
|
|
emit = _EventInterface4.emit;
|
|
|
|
var Elements = Components2.Elements,
|
|
Slides = Components2.Slides;
|
|
var resolve = Components2.Direction.resolve;
|
|
var clones = [];
|
|
var cloneCount;
|
|
|
|
function mount() {
|
|
init();
|
|
on(EVENT_REFRESH, destroy);
|
|
on(EVENT_REFRESH, init);
|
|
on([EVENT_UPDATED, EVENT_RESIZE], observe);
|
|
}
|
|
|
|
function init() {
|
|
if (cloneCount = computeCloneCount()) {
|
|
generate(cloneCount);
|
|
emit(EVENT_RESIZE);
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
remove(clones);
|
|
empty(clones);
|
|
}
|
|
|
|
function observe() {
|
|
if (cloneCount < computeCloneCount()) {
|
|
emit(EVENT_REFRESH);
|
|
}
|
|
}
|
|
|
|
function generate(count) {
|
|
var slides = Slides.get().slice();
|
|
var length = slides.length;
|
|
|
|
if (length) {
|
|
while (slides.length < count) {
|
|
push(slides, slides);
|
|
}
|
|
|
|
push(slides.slice(-count), slides.slice(0, count)).forEach(function (Slide, index) {
|
|
var isHead = index < count;
|
|
var 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) {
|
|
var clone = elm.cloneNode(true);
|
|
addClass(clone, options.classes.clone);
|
|
clone.id = Splide2.root.id + "-clone" + pad(index + 1);
|
|
return clone;
|
|
}
|
|
|
|
function computeCloneCount() {
|
|
var clones2 = options.clones;
|
|
|
|
if (!Splide2.is(LOOP)) {
|
|
clones2 = 0;
|
|
} else if (!clones2) {
|
|
var fixedSize = options[resolve("fixedWidth")] && Components2.Layout.slideSize(0);
|
|
var fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
|
|
clones2 = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage * MULTIPLIER;
|
|
}
|
|
|
|
return clones2;
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
destroy: destroy
|
|
};
|
|
}
|
|
|
|
function Move(Splide2, Components2, options) {
|
|
var _EventInterface5 = EventInterface(Splide2),
|
|
on = _EventInterface5.on,
|
|
emit = _EventInterface5.emit;
|
|
|
|
var set = Splide2.state.set;
|
|
var _Components2$Layout = Components2.Layout,
|
|
slideSize = _Components2$Layout.slideSize,
|
|
getPadding = _Components2$Layout.getPadding,
|
|
totalSize = _Components2$Layout.totalSize,
|
|
listSize = _Components2$Layout.listSize,
|
|
sliderSize = _Components2$Layout.sliderSize;
|
|
var _Components2$Directio = Components2.Direction,
|
|
resolve = _Components2$Directio.resolve,
|
|
orient = _Components2$Directio.orient;
|
|
var _Components2$Elements3 = Components2.Elements,
|
|
list = _Components2$Elements3.list,
|
|
track = _Components2$Elements3.track;
|
|
var Transition;
|
|
|
|
function mount() {
|
|
Transition = Components2.Transition;
|
|
on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
|
|
}
|
|
|
|
function reposition() {
|
|
if (!Components2.Controller.isBusy()) {
|
|
Components2.Scroll.cancel();
|
|
jump(Splide2.index);
|
|
Components2.Slides.update();
|
|
}
|
|
}
|
|
|
|
function move(dest, index, prev, callback) {
|
|
if (dest !== index && canShift(dest > prev)) {
|
|
cancel();
|
|
translate(shift(getPosition(), dest > prev), true);
|
|
}
|
|
|
|
set(MOVING);
|
|
emit(EVENT_MOVE, index, prev, dest);
|
|
Transition.start(index, function () {
|
|
set(IDLE);
|
|
emit(EVENT_MOVED, index, prev, dest);
|
|
callback && callback();
|
|
});
|
|
}
|
|
|
|
function jump(index) {
|
|
translate(toPosition(index, true));
|
|
}
|
|
|
|
function translate(position, preventLoop) {
|
|
if (!Splide2.is(FADE)) {
|
|
var destination = preventLoop ? position : loop(position);
|
|
style(list, "transform", "translate" + resolve("X") + "(" + destination + "px)");
|
|
position !== destination && emit(EVENT_SHIFTED);
|
|
}
|
|
}
|
|
|
|
function loop(position) {
|
|
if (Splide2.is(LOOP)) {
|
|
var index = toIndex(position);
|
|
var exceededMax = index > Components2.Controller.getEnd();
|
|
var exceededMin = index < 0;
|
|
|
|
if (exceededMin || exceededMax) {
|
|
position = shift(position, exceededMax);
|
|
}
|
|
}
|
|
|
|
return position;
|
|
}
|
|
|
|
function shift(position, backwards) {
|
|
var excess = position - getLimit(backwards);
|
|
var size = sliderSize();
|
|
position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1);
|
|
return position;
|
|
}
|
|
|
|
function cancel() {
|
|
translate(getPosition());
|
|
Transition.cancel();
|
|
}
|
|
|
|
function toIndex(position) {
|
|
var Slides = Components2.Slides.get();
|
|
var index = 0;
|
|
var minDistance = Infinity;
|
|
|
|
for (var i = 0; i < Slides.length; i++) {
|
|
var slideIndex = Slides[i].index;
|
|
var distance = abs(toPosition(slideIndex, true) - position);
|
|
|
|
if (distance <= minDistance) {
|
|
minDistance = distance;
|
|
index = slideIndex;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
return index;
|
|
}
|
|
|
|
function toPosition(index, trimming) {
|
|
var position = orient(totalSize(index - 1) - offset(index));
|
|
return trimming ? trim(position) : position;
|
|
}
|
|
|
|
function getPosition() {
|
|
var 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) {
|
|
var focus = options.focus;
|
|
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 canShift(backwards) {
|
|
var shifted = orient(shift(getPosition(), backwards));
|
|
return backwards ? shifted >= 0 : shifted <= list[resolve("scrollWidth")] - rect(track)[resolve("width")];
|
|
}
|
|
|
|
function exceededLimit(max, position) {
|
|
position = isUndefined(position) ? getPosition() : position;
|
|
var exceededMin = max !== true && orient(position) < orient(getLimit(false));
|
|
var exceededMax = max !== false && orient(position) > orient(getLimit(true));
|
|
return exceededMin || exceededMax;
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
move: move,
|
|
jump: jump,
|
|
translate: translate,
|
|
shift: shift,
|
|
cancel: cancel,
|
|
toIndex: toIndex,
|
|
toPosition: toPosition,
|
|
getPosition: getPosition,
|
|
getLimit: getLimit,
|
|
exceededLimit: exceededLimit,
|
|
reposition: reposition
|
|
};
|
|
}
|
|
|
|
function Controller(Splide2, Components2, options) {
|
|
var _EventInterface6 = EventInterface(Splide2),
|
|
on = _EventInterface6.on;
|
|
|
|
var Move = Components2.Move;
|
|
var getPosition = Move.getPosition,
|
|
getLimit = Move.getLimit,
|
|
toPosition = Move.toPosition;
|
|
var _Components2$Slides = Components2.Slides,
|
|
isEnough = _Components2$Slides.isEnough,
|
|
getLength = _Components2$Slides.getLength;
|
|
var isLoop = Splide2.is(LOOP);
|
|
var isSlide = Splide2.is(SLIDE);
|
|
var getNext = apply(getAdjacent, false);
|
|
var getPrev = apply(getAdjacent, true);
|
|
var currIndex = options.start || 0;
|
|
var prevIndex = currIndex;
|
|
var slideCount;
|
|
var perMove;
|
|
var perPage;
|
|
|
|
function mount() {
|
|
init();
|
|
on([EVENT_UPDATED, EVENT_REFRESH], init);
|
|
}
|
|
|
|
function init() {
|
|
slideCount = getLength(true);
|
|
perMove = options.perMove;
|
|
perPage = options.perPage;
|
|
var index = clamp(currIndex, 0, slideCount - 1);
|
|
|
|
if (index !== currIndex) {
|
|
currIndex = index;
|
|
Move.reposition();
|
|
}
|
|
}
|
|
|
|
function go(control, allowSameIndex, callback) {
|
|
if (!isBusy()) {
|
|
var dest = parse(control);
|
|
var index = loop(dest);
|
|
|
|
if (index > -1 && (allowSameIndex || index !== currIndex)) {
|
|
setIndex(index);
|
|
Move.move(dest, index, prevIndex, callback);
|
|
}
|
|
}
|
|
}
|
|
|
|
function scroll(destination, duration, snap, callback) {
|
|
Components2.Scroll.scroll(destination, duration, snap, function () {
|
|
setIndex(loop(Move.toIndex(getPosition())));
|
|
callback && callback();
|
|
});
|
|
}
|
|
|
|
function parse(control) {
|
|
var index = currIndex;
|
|
|
|
if (isString(control)) {
|
|
var _ref = control.match(/([+\-<>])(\d+)?/) || [],
|
|
indicator = _ref[1],
|
|
number = _ref[2];
|
|
|
|
if (indicator === "+" || indicator === "-") {
|
|
index = computeDestIndex(currIndex + +("" + indicator + (+number || 1)), currIndex);
|
|
} 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 getAdjacent(prev, destination) {
|
|
var number = perMove || (hasFocus() ? 1 : perPage);
|
|
var dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex, !(perMove || hasFocus()));
|
|
|
|
if (dest === -1 && isSlide) {
|
|
if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) {
|
|
return prev ? 0 : getEnd();
|
|
}
|
|
}
|
|
|
|
return destination ? dest : loop(dest);
|
|
}
|
|
|
|
function computeDestIndex(dest, from, snapPage) {
|
|
if (isEnough()) {
|
|
var end = getEnd();
|
|
var index = computeMovableDestIndex(dest);
|
|
|
|
if (index !== dest) {
|
|
from = dest;
|
|
dest = index;
|
|
snapPage = false;
|
|
}
|
|
|
|
if (dest < 0 || dest > end) {
|
|
if (!perMove && (between(0, dest, from, true) || between(end, from, dest, true))) {
|
|
dest = toIndex(toPage(dest));
|
|
} else {
|
|
if (isLoop) {
|
|
dest = snapPage ? dest < 0 ? -(slideCount % perPage || perPage) : slideCount : dest;
|
|
} else if (options.rewind) {
|
|
dest = dest < 0 ? end : 0;
|
|
} else {
|
|
dest = -1;
|
|
}
|
|
}
|
|
} else {
|
|
if (snapPage && dest !== from) {
|
|
dest = toIndex(toPage(from) + (dest < from ? -1 : 1));
|
|
}
|
|
}
|
|
} else {
|
|
dest = -1;
|
|
}
|
|
|
|
return dest;
|
|
}
|
|
|
|
function computeMovableDestIndex(dest) {
|
|
if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
|
|
var position = getPosition();
|
|
|
|
while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
|
|
dest < currIndex ? --dest : ++dest;
|
|
}
|
|
}
|
|
|
|
return dest;
|
|
}
|
|
|
|
function loop(index) {
|
|
return isLoop ? (index + slideCount) % slideCount || 0 : index;
|
|
}
|
|
|
|
function getEnd() {
|
|
return max(slideCount - (hasFocus() || isLoop && perMove ? 1 : perPage), 0);
|
|
}
|
|
|
|
function toIndex(page) {
|
|
return clamp(hasFocus() ? page : perPage * page, 0, getEnd());
|
|
}
|
|
|
|
function toPage(index) {
|
|
return hasFocus() ? index : floor((index >= getEnd() ? slideCount - 1 : index) / perPage);
|
|
}
|
|
|
|
function toDest(destination) {
|
|
var 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;
|
|
}
|
|
|
|
function isBusy() {
|
|
return Splide2.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
go: go,
|
|
scroll: scroll,
|
|
getNext: getNext,
|
|
getPrev: getPrev,
|
|
getAdjacent: getAdjacent,
|
|
getEnd: getEnd,
|
|
setIndex: setIndex,
|
|
getIndex: getIndex,
|
|
toIndex: toIndex,
|
|
toPage: toPage,
|
|
toDest: toDest,
|
|
hasFocus: hasFocus,
|
|
isBusy: isBusy
|
|
};
|
|
}
|
|
|
|
var XML_NAME_SPACE = "http://www.w3.org/2000/svg";
|
|
var 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";
|
|
var SIZE = 40;
|
|
|
|
function Arrows(Splide2, Components2, options) {
|
|
var event = EventInterface(Splide2);
|
|
var on = event.on,
|
|
bind = event.bind,
|
|
emit = event.emit;
|
|
var classes = options.classes,
|
|
i18n = options.i18n;
|
|
var Elements = Components2.Elements,
|
|
Controller = Components2.Controller;
|
|
var userArrows = Elements.arrows,
|
|
track = Elements.track;
|
|
var wrapper = userArrows;
|
|
var prev = Elements.prev;
|
|
var next = Elements.next;
|
|
var created;
|
|
var wrapperClasses;
|
|
var arrows = {};
|
|
|
|
function mount() {
|
|
init();
|
|
on(EVENT_UPDATED, remount);
|
|
}
|
|
|
|
function remount() {
|
|
destroy();
|
|
mount();
|
|
}
|
|
|
|
function init() {
|
|
var enabled = options.arrows;
|
|
|
|
if (enabled && !(prev && next)) {
|
|
createArrows();
|
|
}
|
|
|
|
if (prev && next) {
|
|
assign(arrows, {
|
|
prev: prev,
|
|
next: next
|
|
});
|
|
display(wrapper, enabled ? "" : "none");
|
|
addClass(wrapper, wrapperClasses = CLASS_ARROWS + "--" + options.direction);
|
|
|
|
if (enabled) {
|
|
listen();
|
|
update();
|
|
setAttribute([prev, next], ARIA_CONTROLS, track.id);
|
|
emit(EVENT_ARROWS_MOUNTED, prev, next);
|
|
}
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
event.destroy();
|
|
removeClass(wrapper, wrapperClasses);
|
|
|
|
if (created) {
|
|
remove(userArrows ? [prev, next] : wrapper);
|
|
prev = next = null;
|
|
} else {
|
|
removeAttribute([prev, next], ALL_ATTRIBUTES);
|
|
}
|
|
}
|
|
|
|
function listen() {
|
|
on([EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED], update);
|
|
bind(next, "click", apply(go, ">"));
|
|
bind(prev, "click", apply(go, "<"));
|
|
}
|
|
|
|
function go(control) {
|
|
Controller.go(control, true);
|
|
}
|
|
|
|
function createArrows() {
|
|
wrapper = userArrows || create("div", classes.arrows);
|
|
prev = createArrow(true);
|
|
next = createArrow(false);
|
|
created = true;
|
|
append(wrapper, [prev, next]);
|
|
!userArrows && before(wrapper, track);
|
|
}
|
|
|
|
function createArrow(prev2) {
|
|
var 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 + "\" focusable=\"false\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
|
|
return parseHtml(arrow);
|
|
}
|
|
|
|
function update() {
|
|
var index = Splide2.index;
|
|
var prevIndex = Controller.getPrev();
|
|
var nextIndex = Controller.getNext();
|
|
var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
|
|
var 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: arrows,
|
|
mount: mount,
|
|
destroy: destroy
|
|
};
|
|
}
|
|
|
|
var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-interval";
|
|
|
|
function Autoplay(Splide2, Components2, options) {
|
|
var _EventInterface7 = EventInterface(Splide2),
|
|
on = _EventInterface7.on,
|
|
bind = _EventInterface7.bind,
|
|
emit = _EventInterface7.emit;
|
|
|
|
var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
|
|
var isPaused = interval.isPaused;
|
|
var Elements = Components2.Elements,
|
|
_Components2$Elements4 = Components2.Elements,
|
|
root = _Components2$Elements4.root,
|
|
toggle = _Components2$Elements4.toggle;
|
|
var autoplay = options.autoplay;
|
|
var hovered;
|
|
var focused;
|
|
var stopped = autoplay === "pause";
|
|
|
|
function mount() {
|
|
if (autoplay) {
|
|
listen();
|
|
toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.track.id);
|
|
stopped || play();
|
|
update();
|
|
}
|
|
}
|
|
|
|
function listen() {
|
|
if (options.pauseOnHover) {
|
|
bind(root, "mouseenter mouseleave", function (e) {
|
|
hovered = e.type === "mouseenter";
|
|
autoToggle();
|
|
});
|
|
}
|
|
|
|
if (options.pauseOnFocus) {
|
|
bind(root, "focusin focusout", function (e) {
|
|
focused = e.type === "focusin";
|
|
autoToggle();
|
|
});
|
|
}
|
|
|
|
if (toggle) {
|
|
bind(toggle, "click", function () {
|
|
stopped ? play() : pause(true);
|
|
});
|
|
}
|
|
|
|
on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
|
|
on(EVENT_MOVE, onMove);
|
|
}
|
|
|
|
function play() {
|
|
if (isPaused() && Components2.Slides.isEnough()) {
|
|
interval.start(!options.resetProgress);
|
|
focused = hovered = stopped = false;
|
|
update();
|
|
emit(EVENT_AUTOPLAY_PLAY);
|
|
}
|
|
}
|
|
|
|
function pause(stop) {
|
|
if (stop === void 0) {
|
|
stop = true;
|
|
}
|
|
|
|
stopped = !!stop;
|
|
update();
|
|
|
|
if (!isPaused()) {
|
|
interval.pause();
|
|
emit(EVENT_AUTOPLAY_PAUSE);
|
|
}
|
|
}
|
|
|
|
function autoToggle() {
|
|
if (!stopped) {
|
|
hovered || focused ? pause(false) : play();
|
|
}
|
|
}
|
|
|
|
function update() {
|
|
if (toggle) {
|
|
toggleClass(toggle, CLASS_ACTIVE, !stopped);
|
|
setAttribute(toggle, ARIA_LABEL, options.i18n[stopped ? "play" : "pause"]);
|
|
}
|
|
}
|
|
|
|
function onAnimationFrame(rate) {
|
|
var bar = Elements.bar;
|
|
bar && style(bar, "width", rate * 100 + "%");
|
|
emit(EVENT_AUTOPLAY_PLAYING, rate);
|
|
}
|
|
|
|
function onMove(index) {
|
|
var Slide = Components2.Slides.getAt(index);
|
|
interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
destroy: interval.cancel,
|
|
play: play,
|
|
pause: pause,
|
|
isPaused: isPaused
|
|
};
|
|
}
|
|
|
|
function Cover(Splide2, Components2, options) {
|
|
var _EventInterface8 = EventInterface(Splide2),
|
|
on = _EventInterface8.on;
|
|
|
|
function mount() {
|
|
if (options.cover) {
|
|
on(EVENT_LAZYLOAD_LOADED, apply(toggle, true));
|
|
on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply(cover, true));
|
|
}
|
|
}
|
|
|
|
function cover(cover2) {
|
|
Components2.Slides.forEach(function (Slide) {
|
|
var img = child(Slide.container || Slide.slide, "img");
|
|
|
|
if (img && img.src) {
|
|
toggle(cover2, img, Slide);
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggle(cover2, img, Slide) {
|
|
Slide.style("background", cover2 ? "center/cover no-repeat url(\"" + img.src + "\")" : "", true);
|
|
display(img, cover2 ? "none" : "");
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
destroy: apply(cover, false)
|
|
};
|
|
}
|
|
|
|
var BOUNCE_DIFF_THRESHOLD = 10;
|
|
var BOUNCE_DURATION = 600;
|
|
var FRICTION_FACTOR = 0.6;
|
|
var BASE_VELOCITY = 1.5;
|
|
var MIN_DURATION = 800;
|
|
|
|
function Scroll(Splide2, Components2, options) {
|
|
var _EventInterface9 = EventInterface(Splide2),
|
|
on = _EventInterface9.on,
|
|
emit = _EventInterface9.emit;
|
|
|
|
var set = Splide2.state.set;
|
|
var Move = Components2.Move;
|
|
var getPosition = Move.getPosition,
|
|
getLimit = Move.getLimit,
|
|
exceededLimit = Move.exceededLimit,
|
|
translate = Move.translate;
|
|
var interval;
|
|
var callback;
|
|
var friction = 1;
|
|
|
|
function mount() {
|
|
on(EVENT_MOVE, clear);
|
|
on([EVENT_UPDATED, EVENT_REFRESH], cancel);
|
|
}
|
|
|
|
function scroll(destination, duration, snap, onScrolled, noConstrain) {
|
|
var from = getPosition();
|
|
clear();
|
|
|
|
if (snap) {
|
|
var size = Components2.Layout.sliderSize();
|
|
var offset = sign(destination) * size * floor(abs(destination) / size) || 0;
|
|
destination = Move.toPosition(Components2.Controller.toDest(destination % size)) + offset;
|
|
}
|
|
|
|
var noDistance = approximatelyEqual(from, destination, 1);
|
|
friction = 1;
|
|
duration = noDistance ? 0 : duration || max(abs(destination - from) / BASE_VELOCITY, MIN_DURATION);
|
|
callback = onScrolled;
|
|
interval = RequestInterval(duration, onEnd, apply(update, from, destination, noConstrain), 1);
|
|
set(SCROLLING);
|
|
emit(EVENT_SCROLL);
|
|
interval.start();
|
|
}
|
|
|
|
function onEnd() {
|
|
set(IDLE);
|
|
callback && callback();
|
|
emit(EVENT_SCROLLED);
|
|
}
|
|
|
|
function update(from, to, noConstrain, rate) {
|
|
var position = getPosition();
|
|
var target = from + (to - from) * easing(rate);
|
|
var diff = (target - position) * friction;
|
|
translate(position + diff);
|
|
|
|
if (Splide2.is(SLIDE) && !noConstrain && exceededLimit()) {
|
|
friction *= FRICTION_FACTOR;
|
|
|
|
if (abs(diff) < BOUNCE_DIFF_THRESHOLD) {
|
|
scroll(getLimit(exceededLimit(true)), BOUNCE_DURATION, false, callback, true);
|
|
}
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
if (interval) {
|
|
interval.cancel();
|
|
}
|
|
}
|
|
|
|
function cancel() {
|
|
if (interval && !interval.isPaused()) {
|
|
clear();
|
|
onEnd();
|
|
}
|
|
}
|
|
|
|
function easing(t) {
|
|
var easingFunc = options.easingFunc;
|
|
return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
destroy: clear,
|
|
scroll: scroll,
|
|
cancel: cancel
|
|
};
|
|
}
|
|
|
|
var SCROLL_LISTENER_OPTIONS = {
|
|
passive: false,
|
|
capture: true
|
|
};
|
|
|
|
function Drag(Splide2, Components2, options) {
|
|
var _EventInterface10 = EventInterface(Splide2),
|
|
on = _EventInterface10.on,
|
|
emit = _EventInterface10.emit,
|
|
bind = _EventInterface10.bind,
|
|
unbind = _EventInterface10.unbind;
|
|
|
|
var state = Splide2.state;
|
|
var Move = Components2.Move,
|
|
Scroll = Components2.Scroll,
|
|
Controller = Components2.Controller,
|
|
track = Components2.Elements.track,
|
|
reduce = Components2.Media.reduce;
|
|
var _Components2$Directio2 = Components2.Direction,
|
|
resolve = _Components2$Directio2.resolve,
|
|
orient = _Components2$Directio2.orient;
|
|
var getPosition = Move.getPosition,
|
|
exceededLimit = Move.exceededLimit;
|
|
var basePosition;
|
|
var baseEvent;
|
|
var prevBaseEvent;
|
|
var isFree;
|
|
var dragging;
|
|
var exceeded = false;
|
|
var clickPrevented;
|
|
var disabled;
|
|
var 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() {
|
|
var drag = options.drag;
|
|
disable(!drag);
|
|
isFree = drag === "free";
|
|
}
|
|
|
|
function onPointerDown(e) {
|
|
clickPrevented = false;
|
|
|
|
if (!disabled) {
|
|
var isTouch = isTouchEvent(e);
|
|
|
|
if (isDraggable(e.target) && (isTouch || !e.button)) {
|
|
if (!Controller.isBusy()) {
|
|
target = isTouch ? track : window;
|
|
dragging = state.is([MOVING, SCROLLING]);
|
|
prevBaseEvent = 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 (!state.is(DRAGGING)) {
|
|
state.set(DRAGGING);
|
|
emit(EVENT_DRAG);
|
|
}
|
|
|
|
if (e.cancelable) {
|
|
if (dragging) {
|
|
Move.translate(basePosition + constrain(diffCoord(e)));
|
|
var expired = diffTime(e) > LOG_INTERVAL;
|
|
var hasExceeded = exceeded !== (exceeded = exceededLimit());
|
|
|
|
if (expired || hasExceeded) {
|
|
save(e);
|
|
}
|
|
|
|
clickPrevented = true;
|
|
emit(EVENT_DRAGGING);
|
|
prevent(e);
|
|
} else if (isSliderDirection(e)) {
|
|
dragging = shouldStart(e);
|
|
prevent(e);
|
|
}
|
|
}
|
|
}
|
|
|
|
function onPointerUp(e) {
|
|
if (state.is(DRAGGING)) {
|
|
state.set(IDLE);
|
|
emit(EVENT_DRAGGED);
|
|
}
|
|
|
|
if (dragging) {
|
|
move(e);
|
|
prevent(e);
|
|
}
|
|
|
|
unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
|
|
unbind(target, POINTER_UP_EVENTS, onPointerUp);
|
|
dragging = false;
|
|
}
|
|
|
|
function onClick(e) {
|
|
if (!disabled && clickPrevented) {
|
|
prevent(e, true);
|
|
}
|
|
}
|
|
|
|
function save(e) {
|
|
prevBaseEvent = baseEvent;
|
|
baseEvent = e;
|
|
basePosition = getPosition();
|
|
}
|
|
|
|
function move(e) {
|
|
var velocity = computeVelocity(e);
|
|
var destination = computeDestination(velocity);
|
|
var rewind = options.rewind && options.rewindByDrag;
|
|
reduce(false);
|
|
|
|
if (isFree) {
|
|
Controller.scroll(destination, 0, options.snap);
|
|
} else if (Splide2.is(FADE)) {
|
|
Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
|
|
} else if (Splide2.is(SLIDE) && exceeded && rewind) {
|
|
Controller.go(exceededLimit(true) ? ">" : "<");
|
|
} else {
|
|
Controller.go(Controller.toDest(destination), true);
|
|
}
|
|
|
|
reduce(true);
|
|
}
|
|
|
|
function shouldStart(e) {
|
|
var thresholds = options.dragMinThreshold;
|
|
var isObj = isObject(thresholds);
|
|
var mouse = isObj && thresholds.mouse || 0;
|
|
var touch = (isObj ? thresholds.touch : +thresholds) || 10;
|
|
return abs(diffCoord(e)) > (isTouchEvent(e) ? touch : mouse);
|
|
}
|
|
|
|
function isSliderDirection(e) {
|
|
return abs(diffCoord(e)) > abs(diffCoord(e, true));
|
|
}
|
|
|
|
function computeVelocity(e) {
|
|
if (Splide2.is(LOOP) || !exceeded) {
|
|
var time = diffTime(e);
|
|
|
|
if (time && time < LOG_INTERVAL) {
|
|
return diffCoord(e) / time;
|
|
}
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
function computeDestination(velocity) {
|
|
return getPosition() + sign(velocity) * min(abs(velocity) * (options.flickPower || 600), isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1));
|
|
}
|
|
|
|
function diffCoord(e, orthogonal) {
|
|
return coordOf(e, orthogonal) - coordOf(getBaseEvent(e), orthogonal);
|
|
}
|
|
|
|
function diffTime(e) {
|
|
return timeOf(e) - timeOf(getBaseEvent(e));
|
|
}
|
|
|
|
function getBaseEvent(e) {
|
|
return baseEvent === e && prevBaseEvent || baseEvent;
|
|
}
|
|
|
|
function coordOf(e, orthogonal) {
|
|
return (isTouchEvent(e) ? e.changedTouches[0] : e)["page" + resolve(orthogonal ? "Y" : "X")];
|
|
}
|
|
|
|
function constrain(diff) {
|
|
return diff / (exceeded && Splide2.is(SLIDE) ? FRICTION : 1);
|
|
}
|
|
|
|
function isDraggable(target2) {
|
|
var noDrag = options.noDrag;
|
|
return !matches(target2, "." + CLASS_PAGINATION_PAGE + ", ." + CLASS_ARROW) && (!noDrag || !matches(target2, noDrag));
|
|
}
|
|
|
|
function isTouchEvent(e) {
|
|
return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
|
|
}
|
|
|
|
function isDragging() {
|
|
return dragging;
|
|
}
|
|
|
|
function disable(value) {
|
|
disabled = value;
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
disable: disable,
|
|
isDragging: isDragging
|
|
};
|
|
}
|
|
|
|
var NORMALIZATION_MAP = {
|
|
Spacebar: " ",
|
|
Right: ARROW_RIGHT,
|
|
Left: ARROW_LEFT,
|
|
Up: ARROW_UP,
|
|
Down: ARROW_DOWN
|
|
};
|
|
|
|
function normalizeKey(key) {
|
|
key = isString(key) ? key : key.key;
|
|
return NORMALIZATION_MAP[key] || key;
|
|
}
|
|
|
|
var KEYBOARD_EVENT = "keydown";
|
|
|
|
function Keyboard(Splide2, Components2, options) {
|
|
var _EventInterface11 = EventInterface(Splide2),
|
|
on = _EventInterface11.on,
|
|
bind = _EventInterface11.bind,
|
|
unbind = _EventInterface11.unbind;
|
|
|
|
var root = Splide2.root;
|
|
var resolve = Components2.Direction.resolve;
|
|
var target;
|
|
var disabled;
|
|
|
|
function mount() {
|
|
init();
|
|
on(EVENT_UPDATED, destroy);
|
|
on(EVENT_UPDATED, init);
|
|
on(EVENT_MOVE, onMove);
|
|
}
|
|
|
|
function init() {
|
|
var keyboard = options.keyboard;
|
|
|
|
if (keyboard) {
|
|
target = keyboard === "global" ? window : root;
|
|
bind(target, KEYBOARD_EVENT, onKeydown);
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
unbind(target, KEYBOARD_EVENT);
|
|
}
|
|
|
|
function disable(value) {
|
|
disabled = value;
|
|
}
|
|
|
|
function onMove() {
|
|
var _disabled = disabled;
|
|
disabled = true;
|
|
nextTick(function () {
|
|
disabled = _disabled;
|
|
});
|
|
}
|
|
|
|
function onKeydown(e) {
|
|
if (!disabled) {
|
|
var key = normalizeKey(e);
|
|
|
|
if (key === resolve(ARROW_LEFT)) {
|
|
Splide2.go("<");
|
|
} else if (key === resolve(ARROW_RIGHT)) {
|
|
Splide2.go(">");
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
destroy: destroy,
|
|
disable: disable
|
|
};
|
|
}
|
|
|
|
var SRC_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-lazy";
|
|
var SRCSET_DATA_ATTRIBUTE = SRC_DATA_ATTRIBUTE + "-srcset";
|
|
var IMAGE_SELECTOR = "[" + SRC_DATA_ATTRIBUTE + "], [" + SRCSET_DATA_ATTRIBUTE + "]";
|
|
|
|
function LazyLoad(Splide2, Components2, options) {
|
|
var _EventInterface12 = EventInterface(Splide2),
|
|
on = _EventInterface12.on,
|
|
off = _EventInterface12.off,
|
|
bind = _EventInterface12.bind,
|
|
emit = _EventInterface12.emit;
|
|
|
|
var isSequential = options.lazyLoad === "sequential";
|
|
var events = [EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED];
|
|
var entries = [];
|
|
|
|
function mount() {
|
|
if (options.lazyLoad) {
|
|
init();
|
|
on(EVENT_REFRESH, init);
|
|
isSequential || on(events, observe);
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
empty(entries);
|
|
Components2.Slides.forEach(function (Slide) {
|
|
queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
|
|
var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
|
|
var srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
|
|
|
|
if (src !== img.src || srcset !== img.srcset) {
|
|
var className = options.classes.spinner;
|
|
var parent = img.parentElement;
|
|
var spinner = child(parent, "." + className) || create("span", className, parent);
|
|
entries.push([img, Slide, spinner]);
|
|
img.src || display(img, "none");
|
|
}
|
|
});
|
|
});
|
|
isSequential && loadNext();
|
|
}
|
|
|
|
function observe() {
|
|
entries = entries.filter(function (data) {
|
|
var distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
|
|
return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
|
|
});
|
|
entries.length || off(events);
|
|
}
|
|
|
|
function load(data) {
|
|
var img = data[0];
|
|
addClass(data[1].slide, CLASS_LOADING);
|
|
bind(img, "load error", apply(onLoad, data));
|
|
setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
|
|
setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
|
|
removeAttribute(img, SRC_DATA_ATTRIBUTE);
|
|
removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
|
|
}
|
|
|
|
function onLoad(data, e) {
|
|
var img = data[0],
|
|
Slide = data[1];
|
|
removeClass(Slide.slide, CLASS_LOADING);
|
|
|
|
if (e.type !== "error") {
|
|
remove(data[2]);
|
|
display(img, "");
|
|
emit(EVENT_LAZYLOAD_LOADED, img, Slide);
|
|
emit(EVENT_RESIZE);
|
|
}
|
|
|
|
isSequential && loadNext();
|
|
}
|
|
|
|
function loadNext() {
|
|
entries.length && load(entries.shift());
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
destroy: apply(empty, entries)
|
|
};
|
|
}
|
|
|
|
function Pagination(Splide2, Components2, options) {
|
|
var event = EventInterface(Splide2);
|
|
var on = event.on,
|
|
emit = event.emit,
|
|
bind = event.bind;
|
|
var Slides = Components2.Slides,
|
|
Elements = Components2.Elements,
|
|
Controller = Components2.Controller;
|
|
var hasFocus = Controller.hasFocus,
|
|
getIndex = Controller.getIndex,
|
|
go = Controller.go;
|
|
var resolve = Components2.Direction.resolve;
|
|
var items = [];
|
|
var list;
|
|
var paginationClasses;
|
|
|
|
function mount() {
|
|
destroy();
|
|
on([EVENT_UPDATED, EVENT_REFRESH], mount);
|
|
|
|
if (options.pagination && Slides.isEnough()) {
|
|
on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
|
|
createPagination();
|
|
update();
|
|
emit(EVENT_PAGINATION_MOUNTED, {
|
|
list: list,
|
|
items: items
|
|
}, getAt(Splide2.index));
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
if (list) {
|
|
remove(Elements.pagination ? slice(list.children) : list);
|
|
removeClass(list, paginationClasses);
|
|
empty(items);
|
|
list = null;
|
|
}
|
|
|
|
event.destroy();
|
|
}
|
|
|
|
function createPagination() {
|
|
var length = Splide2.length;
|
|
var classes = options.classes,
|
|
i18n = options.i18n,
|
|
perPage = options.perPage;
|
|
var max = hasFocus() ? length : ceil(length / perPage);
|
|
list = Elements.pagination || create("ul", classes.pagination, Elements.track.parentElement);
|
|
addClass(list, paginationClasses = CLASS_PAGINATION + "--" + getDirection());
|
|
setAttribute(list, ROLE, "tablist");
|
|
setAttribute(list, ARIA_LABEL, i18n.select);
|
|
setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? "vertical" : "");
|
|
|
|
for (var i = 0; i < max; i++) {
|
|
var li = create("li", null, list);
|
|
var button = create("button", {
|
|
class: classes.page,
|
|
type: "button"
|
|
}, li);
|
|
var controls = Slides.getIn(i).map(function (Slide) {
|
|
return Slide.slide.id;
|
|
});
|
|
var text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
|
|
bind(button, "click", apply(onClick, i));
|
|
|
|
if (options.paginationKeyboard) {
|
|
bind(button, "keydown", apply(onKeydown, i));
|
|
}
|
|
|
|
setAttribute(li, ROLE, "presentation");
|
|
setAttribute(button, ROLE, "tab");
|
|
setAttribute(button, ARIA_CONTROLS, controls.join(" "));
|
|
setAttribute(button, ARIA_LABEL, format(text, i + 1));
|
|
setAttribute(button, TAB_INDEX, -1);
|
|
items.push({
|
|
li: li,
|
|
button: button,
|
|
page: i
|
|
});
|
|
}
|
|
}
|
|
|
|
function onClick(page) {
|
|
go(">" + page, true);
|
|
}
|
|
|
|
function onKeydown(page, e) {
|
|
var length = items.length;
|
|
var key = normalizeKey(e);
|
|
var dir = getDirection();
|
|
var nextPage = -1;
|
|
|
|
if (key === resolve(ARROW_RIGHT, false, dir)) {
|
|
nextPage = ++page % length;
|
|
} else if (key === resolve(ARROW_LEFT, false, dir)) {
|
|
nextPage = (--page + length) % length;
|
|
} else if (key === "Home") {
|
|
nextPage = 0;
|
|
} else if (key === "End") {
|
|
nextPage = length - 1;
|
|
}
|
|
|
|
var item = items[nextPage];
|
|
|
|
if (item) {
|
|
focus(item.button);
|
|
go(">" + nextPage);
|
|
prevent(e, true);
|
|
}
|
|
}
|
|
|
|
function getDirection() {
|
|
return options.paginationDirection || options.direction;
|
|
}
|
|
|
|
function getAt(index) {
|
|
return items[Controller.toPage(index)];
|
|
}
|
|
|
|
function update() {
|
|
var prev = getAt(getIndex(true));
|
|
var curr = getAt(getIndex());
|
|
|
|
if (prev) {
|
|
var button = prev.button;
|
|
removeClass(button, CLASS_ACTIVE);
|
|
removeAttribute(button, ARIA_SELECTED);
|
|
setAttribute(button, TAB_INDEX, -1);
|
|
}
|
|
|
|
if (curr) {
|
|
var _button = curr.button;
|
|
addClass(_button, CLASS_ACTIVE);
|
|
setAttribute(_button, ARIA_SELECTED, true);
|
|
setAttribute(_button, TAB_INDEX, "");
|
|
}
|
|
|
|
emit(EVENT_PAGINATION_UPDATED, {
|
|
list: list,
|
|
items: items
|
|
}, prev, curr);
|
|
}
|
|
|
|
return {
|
|
items: items,
|
|
mount: mount,
|
|
destroy: destroy,
|
|
getAt: getAt,
|
|
update: update
|
|
};
|
|
}
|
|
|
|
var TRIGGER_KEYS = [" ", "Enter"];
|
|
|
|
function Sync(Splide2, Components2, options) {
|
|
var isNavigation = options.isNavigation,
|
|
slideFocus = options.slideFocus;
|
|
var events = [];
|
|
|
|
function setup() {
|
|
Splide2.options = {
|
|
slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus
|
|
};
|
|
}
|
|
|
|
function mount() {
|
|
Splide2.splides.forEach(function (target) {
|
|
if (!target.isParent) {
|
|
sync(Splide2, target.splide);
|
|
sync(target.splide, Splide2);
|
|
}
|
|
});
|
|
|
|
if (isNavigation) {
|
|
navigate();
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
events.forEach(function (event) {
|
|
event.destroy();
|
|
});
|
|
empty(events);
|
|
}
|
|
|
|
function remount() {
|
|
destroy();
|
|
mount();
|
|
}
|
|
|
|
function sync(splide, target) {
|
|
var event = EventInterface(splide);
|
|
event.on(EVENT_MOVE, function (index, prev, dest) {
|
|
target.go(target.is(LOOP) ? dest : index);
|
|
});
|
|
events.push(event);
|
|
}
|
|
|
|
function navigate() {
|
|
var event = EventInterface(Splide2);
|
|
var on = event.on;
|
|
on(EVENT_CLICK, onClick);
|
|
on(EVENT_SLIDE_KEYDOWN, onKeydown);
|
|
on([EVENT_MOUNTED, EVENT_UPDATED], update);
|
|
events.push(event);
|
|
event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
|
|
}
|
|
|
|
function update() {
|
|
setAttribute(Components2.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
|
|
}
|
|
|
|
function onClick(Slide) {
|
|
Splide2.go(Slide.index);
|
|
}
|
|
|
|
function onKeydown(Slide, e) {
|
|
if (includes(TRIGGER_KEYS, normalizeKey(e))) {
|
|
onClick(Slide);
|
|
prevent(e);
|
|
}
|
|
}
|
|
|
|
return {
|
|
setup: setup,
|
|
mount: mount,
|
|
destroy: destroy,
|
|
remount: remount
|
|
};
|
|
}
|
|
|
|
function Wheel(Splide2, Components2, options) {
|
|
var _EventInterface13 = EventInterface(Splide2),
|
|
bind = _EventInterface13.bind;
|
|
|
|
var lastTime = 0;
|
|
|
|
function mount() {
|
|
if (options.wheel) {
|
|
bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
|
|
}
|
|
}
|
|
|
|
function onWheel(e) {
|
|
if (e.cancelable) {
|
|
var deltaY = e.deltaY;
|
|
var backwards = deltaY < 0;
|
|
var timeStamp = timeOf(e);
|
|
|
|
var _min = options.wheelMinThreshold || 0;
|
|
|
|
var sleep = options.wheelSleep || 0;
|
|
|
|
if (abs(deltaY) > _min && timeStamp - lastTime > sleep) {
|
|
Splide2.go(backwards ? "<" : ">");
|
|
lastTime = timeStamp;
|
|
}
|
|
|
|
shouldPrevent(backwards) && prevent(e);
|
|
}
|
|
}
|
|
|
|
function shouldPrevent(backwards) {
|
|
return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
|
|
}
|
|
|
|
return {
|
|
mount: mount
|
|
};
|
|
}
|
|
|
|
var SR_REMOVAL_DELAY = 90;
|
|
|
|
function Live(Splide2, Components2, options) {
|
|
var _EventInterface14 = EventInterface(Splide2),
|
|
on = _EventInterface14.on;
|
|
|
|
var track = Components2.Elements.track;
|
|
var enabled = options.live && !options.isNavigation;
|
|
var sr = create("span", CLASS_SR);
|
|
var interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
|
|
|
|
function mount() {
|
|
if (enabled) {
|
|
disable(!Components2.Autoplay.isPaused());
|
|
setAttribute(track, ARIA_ATOMIC, true);
|
|
sr.textContent = "\u2026";
|
|
on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
|
|
on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
|
|
on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true));
|
|
}
|
|
}
|
|
|
|
function toggle(active) {
|
|
setAttribute(track, ARIA_BUSY, active);
|
|
|
|
if (active) {
|
|
append(track, sr);
|
|
interval.start();
|
|
} else {
|
|
remove(sr);
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
removeAttribute(track, [ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY]);
|
|
remove(sr);
|
|
}
|
|
|
|
function disable(disabled) {
|
|
if (enabled) {
|
|
setAttribute(track, ARIA_LIVE, disabled ? "off" : "polite");
|
|
}
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
disable: disable,
|
|
destroy: destroy
|
|
};
|
|
}
|
|
|
|
var ComponentConstructors = /*#__PURE__*/Object.freeze({
|
|
__proto__: null,
|
|
Media: Media,
|
|
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,
|
|
Live: Live
|
|
});
|
|
var I18N = {
|
|
prev: "Previous slide",
|
|
next: "Next slide",
|
|
first: "Go to first slide",
|
|
last: "Go to last slide",
|
|
slideX: "Go to slide %s",
|
|
pageX: "Go to page %s",
|
|
play: "Start autoplay",
|
|
pause: "Pause autoplay",
|
|
carousel: "carousel",
|
|
slide: "slide",
|
|
select: "Select a slide to show",
|
|
slideLabel: "%s of %s"
|
|
};
|
|
var DEFAULTS = {
|
|
type: "slide",
|
|
role: "region",
|
|
speed: 400,
|
|
perPage: 1,
|
|
cloneStatus: true,
|
|
arrows: true,
|
|
pagination: true,
|
|
paginationKeyboard: true,
|
|
interval: 5e3,
|
|
pauseOnHover: true,
|
|
pauseOnFocus: true,
|
|
resetProgress: true,
|
|
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
|
|
drag: true,
|
|
direction: "ltr",
|
|
trimSpace: true,
|
|
focusableNodes: "a, button, textarea, input, select, iframe",
|
|
live: true,
|
|
classes: CLASSES,
|
|
i18n: I18N,
|
|
reducedMotion: {
|
|
speed: 0,
|
|
rewindSpeed: 0,
|
|
autoplay: "pause"
|
|
}
|
|
};
|
|
|
|
function Fade(Splide2, Components2, options) {
|
|
var _EventInterface15 = EventInterface(Splide2),
|
|
on = _EventInterface15.on;
|
|
|
|
function mount() {
|
|
on([EVENT_MOUNTED, EVENT_REFRESH], function () {
|
|
nextTick(function () {
|
|
Components2.Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
|
|
});
|
|
});
|
|
}
|
|
|
|
function start(index, done) {
|
|
var track = Components2.Elements.track;
|
|
style(track, "height", unit(rect(track).height));
|
|
nextTick(function () {
|
|
done();
|
|
style(track, "height", "");
|
|
});
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
start: start,
|
|
cancel: noop
|
|
};
|
|
}
|
|
|
|
function Slide(Splide2, Components2, options) {
|
|
var _EventInterface16 = EventInterface(Splide2),
|
|
bind = _EventInterface16.bind;
|
|
|
|
var Move = Components2.Move,
|
|
Controller = Components2.Controller,
|
|
Scroll = Components2.Scroll;
|
|
var list = Components2.Elements.list;
|
|
var transition = apply(style, list, "transition");
|
|
var endCallback;
|
|
|
|
function mount() {
|
|
bind(list, "transitionend", function (e) {
|
|
if (e.target === list && endCallback) {
|
|
cancel();
|
|
endCallback();
|
|
}
|
|
});
|
|
}
|
|
|
|
function start(index, done) {
|
|
var destination = Move.toPosition(index, true);
|
|
var position = Move.getPosition();
|
|
var speed = getSpeed(index);
|
|
|
|
if (abs(destination - position) >= 1 && speed >= 1) {
|
|
if (options.useScroll) {
|
|
Scroll.scroll(destination, speed, false, done);
|
|
} else {
|
|
transition("transform " + speed + "ms " + options.easing);
|
|
Move.translate(destination, true);
|
|
endCallback = done;
|
|
}
|
|
} else {
|
|
Move.jump(index);
|
|
done();
|
|
}
|
|
}
|
|
|
|
function cancel() {
|
|
transition("");
|
|
Scroll.cancel();
|
|
}
|
|
|
|
function getSpeed(index) {
|
|
var rewindSpeed = options.rewindSpeed;
|
|
|
|
if (Splide2.is(SLIDE) && rewindSpeed) {
|
|
var prev = Controller.getIndex(true);
|
|
var end = Controller.getEnd();
|
|
|
|
if (prev === 0 && index >= end || prev >= end && index === 0) {
|
|
return rewindSpeed;
|
|
}
|
|
}
|
|
|
|
return options.speed;
|
|
}
|
|
|
|
return {
|
|
mount: mount,
|
|
start: start,
|
|
cancel: cancel
|
|
};
|
|
}
|
|
|
|
var _Splide = /*#__PURE__*/function () {
|
|
function _Splide(target, options) {
|
|
this.event = EventInterface();
|
|
this.Components = {};
|
|
this.state = State(CREATED);
|
|
this.splides = [];
|
|
this._o = {};
|
|
this._E = {};
|
|
var root = isString(target) ? query(document, target) : target;
|
|
assert(root, root + " is invalid.");
|
|
this.root = root;
|
|
options = merge({
|
|
label: getAttribute(root, ARIA_LABEL) || "",
|
|
labelledby: getAttribute(root, ARIA_LABELLEDBY) || ""
|
|
}, DEFAULTS, _Splide.defaults, options || {});
|
|
|
|
try {
|
|
merge(options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));
|
|
} catch (e) {
|
|
assert(false, "Invalid JSON");
|
|
}
|
|
|
|
this._o = Object.create(merge({}, options));
|
|
}
|
|
|
|
var _proto = _Splide.prototype;
|
|
|
|
_proto.mount = function mount(Extensions, Transition) {
|
|
var _this = this;
|
|
|
|
var state = this.state,
|
|
Components2 = this.Components;
|
|
assert(state.is([CREATED, DESTROYED]), "Already mounted!");
|
|
state.set(CREATED);
|
|
this._C = Components2;
|
|
this._T = Transition || this._T || (this.is(FADE) ? Fade : Slide);
|
|
this._E = Extensions || this._E;
|
|
var Constructors = assign({}, ComponentConstructors, this._E, {
|
|
Transition: this._T
|
|
});
|
|
forOwn(Constructors, function (Component, key) {
|
|
var component = Component(_this, Components2, _this._o);
|
|
Components2[key] = component;
|
|
component.setup && component.setup();
|
|
});
|
|
forOwn(Components2, function (component) {
|
|
component.mount && component.mount();
|
|
});
|
|
this.emit(EVENT_MOUNTED);
|
|
addClass(this.root, CLASS_INITIALIZED);
|
|
state.set(IDLE);
|
|
this.emit(EVENT_READY);
|
|
return this;
|
|
};
|
|
|
|
_proto.sync = function sync(splide) {
|
|
this.splides.push({
|
|
splide: splide
|
|
});
|
|
splide.splides.push({
|
|
splide: this,
|
|
isParent: true
|
|
});
|
|
|
|
if (this.state.is(IDLE)) {
|
|
this._C.Sync.remount();
|
|
|
|
splide.Components.Sync.remount();
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
_proto.go = function go(control) {
|
|
this._C.Controller.go(control);
|
|
|
|
return this;
|
|
};
|
|
|
|
_proto.on = function on(events, callback) {
|
|
this.event.on(events, callback);
|
|
return this;
|
|
};
|
|
|
|
_proto.off = function off(events) {
|
|
this.event.off(events);
|
|
return this;
|
|
};
|
|
|
|
_proto.emit = function emit(event) {
|
|
var _this$event;
|
|
|
|
(_this$event = this.event).emit.apply(_this$event, [event].concat(slice(arguments, 1)));
|
|
|
|
return this;
|
|
};
|
|
|
|
_proto.add = function add(slides, index) {
|
|
this._C.Slides.add(slides, index);
|
|
|
|
return this;
|
|
};
|
|
|
|
_proto.remove = function remove(matcher) {
|
|
this._C.Slides.remove(matcher);
|
|
|
|
return this;
|
|
};
|
|
|
|
_proto.is = function is(type) {
|
|
return this._o.type === type;
|
|
};
|
|
|
|
_proto.refresh = function refresh() {
|
|
this.emit(EVENT_REFRESH);
|
|
return this;
|
|
};
|
|
|
|
_proto.destroy = function destroy(completely) {
|
|
if (completely === void 0) {
|
|
completely = true;
|
|
}
|
|
|
|
var event = this.event,
|
|
state = this.state;
|
|
|
|
if (state.is(CREATED)) {
|
|
EventInterface(this).on(EVENT_READY, this.destroy.bind(this, completely));
|
|
} else {
|
|
forOwn(this._C, function (component) {
|
|
component.destroy && component.destroy(completely);
|
|
}, true);
|
|
event.emit(EVENT_DESTROY);
|
|
event.destroy();
|
|
completely && empty(this.splides);
|
|
state.set(DESTROYED);
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
_createClass(_Splide, [{
|
|
key: "options",
|
|
get: function get() {
|
|
return this._o;
|
|
},
|
|
set: function set(options) {
|
|
this._C.Media.set(options, true);
|
|
}
|
|
}, {
|
|
key: "length",
|
|
get: function get() {
|
|
return this._C.Slides.getLength(true);
|
|
}
|
|
}, {
|
|
key: "index",
|
|
get: function get() {
|
|
return this._C.Controller.getIndex();
|
|
}
|
|
}]);
|
|
|
|
return _Splide;
|
|
}();
|
|
|
|
var Splide = _Splide;
|
|
Splide.defaults = {};
|
|
Splide.STATES = STATES;
|
|
var CLASS_RENDERED = "is-rendered";
|
|
var RENDERER_DEFAULT_CONFIG = {
|
|
listTag: "ul",
|
|
slideTag: "li"
|
|
};
|
|
|
|
var Style = /*#__PURE__*/function () {
|
|
function Style(id, options) {
|
|
this.styles = {};
|
|
this.id = id;
|
|
this.options = options;
|
|
}
|
|
|
|
var _proto2 = Style.prototype;
|
|
|
|
_proto2.rule = function rule(selector, prop, value, breakpoint) {
|
|
breakpoint = breakpoint || "default";
|
|
var selectors = this.styles[breakpoint] = this.styles[breakpoint] || {};
|
|
var styles = selectors[selector] = selectors[selector] || {};
|
|
styles[prop] = value;
|
|
};
|
|
|
|
_proto2.build = function build() {
|
|
var _this2 = this;
|
|
|
|
var css = "";
|
|
|
|
if (this.styles.default) {
|
|
css += this.buildSelectors(this.styles.default);
|
|
}
|
|
|
|
Object.keys(this.styles).sort(function (n, m) {
|
|
return _this2.options.mediaQuery === "min" ? +n - +m : +m - +n;
|
|
}).forEach(function (breakpoint) {
|
|
if (breakpoint !== "default") {
|
|
css += "@media screen and (max-width: " + breakpoint + "px) {";
|
|
css += _this2.buildSelectors(_this2.styles[breakpoint]);
|
|
css += "}";
|
|
}
|
|
});
|
|
return css;
|
|
};
|
|
|
|
_proto2.buildSelectors = function buildSelectors(selectors) {
|
|
var _this3 = this;
|
|
|
|
var css = "";
|
|
forOwn(selectors, function (styles, selector) {
|
|
selector = ("#" + _this3.id + " " + selector).trim();
|
|
css += selector + " {";
|
|
forOwn(styles, function (value, prop) {
|
|
if (value || value === 0) {
|
|
css += prop + ": " + value + ";";
|
|
}
|
|
});
|
|
css += "}";
|
|
});
|
|
return css;
|
|
};
|
|
|
|
return Style;
|
|
}();
|
|
|
|
var SplideRenderer = /*#__PURE__*/function () {
|
|
function SplideRenderer(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();
|
|
}
|
|
|
|
SplideRenderer.clean = function clean(splide) {
|
|
var _EventInterface17 = EventInterface(splide),
|
|
on = _EventInterface17.on;
|
|
|
|
var root = splide.root;
|
|
var clones = queryAll(root, "." + CLASS_CLONE);
|
|
on(EVENT_MOUNTED, function () {
|
|
remove(child(root, "style"));
|
|
});
|
|
remove(clones);
|
|
};
|
|
|
|
var _proto3 = SplideRenderer.prototype;
|
|
|
|
_proto3.init = function init() {
|
|
this.parseBreakpoints();
|
|
this.initSlides();
|
|
this.registerRootStyles();
|
|
this.registerTrackStyles();
|
|
this.registerSlideStyles();
|
|
this.registerListStyles();
|
|
};
|
|
|
|
_proto3.initSlides = function initSlides() {
|
|
var _this4 = this;
|
|
|
|
push(this.slides, this.contents.map(function (content, index) {
|
|
content = isString(content) ? {
|
|
html: content
|
|
} : content;
|
|
content.styles = content.styles || {};
|
|
content.attrs = content.attrs || {};
|
|
|
|
_this4.cover(content);
|
|
|
|
var classes = _this4.options.classes.slide + " " + (index === 0 ? CLASS_ACTIVE : "");
|
|
assign(content.attrs, {
|
|
class: (classes + " " + (content.attrs.class || "")).trim(),
|
|
style: _this4.buildStyles(content.styles)
|
|
});
|
|
return content;
|
|
}));
|
|
|
|
if (this.isLoop()) {
|
|
this.generateClones(this.slides);
|
|
}
|
|
};
|
|
|
|
_proto3.registerRootStyles = function registerRootStyles() {
|
|
var _this5 = this;
|
|
|
|
this.breakpoints.forEach(function (_ref2) {
|
|
var width = _ref2[0],
|
|
options = _ref2[1];
|
|
|
|
_this5.Style.rule(" ", "max-width", unit(options.width), width);
|
|
});
|
|
};
|
|
|
|
_proto3.registerTrackStyles = function registerTrackStyles() {
|
|
var _this6 = this;
|
|
|
|
var Style2 = this.Style;
|
|
var selector = "." + CLASS_TRACK;
|
|
this.breakpoints.forEach(function (_ref3) {
|
|
var width = _ref3[0],
|
|
options = _ref3[1];
|
|
Style2.rule(selector, _this6.resolve("paddingLeft"), _this6.cssPadding(options, false), width);
|
|
Style2.rule(selector, _this6.resolve("paddingRight"), _this6.cssPadding(options, true), width);
|
|
Style2.rule(selector, "height", _this6.cssTrackHeight(options), width);
|
|
});
|
|
};
|
|
|
|
_proto3.registerListStyles = function registerListStyles() {
|
|
var _this7 = this;
|
|
|
|
var Style2 = this.Style;
|
|
var selector = "." + CLASS_LIST;
|
|
this.breakpoints.forEach(function (_ref4) {
|
|
var width = _ref4[0],
|
|
options = _ref4[1];
|
|
Style2.rule(selector, "transform", _this7.buildTranslate(options), width);
|
|
|
|
if (!_this7.cssSlideHeight(options)) {
|
|
Style2.rule(selector, "aspect-ratio", _this7.cssAspectRatio(options), width);
|
|
}
|
|
});
|
|
};
|
|
|
|
_proto3.registerSlideStyles = function registerSlideStyles() {
|
|
var _this8 = this;
|
|
|
|
var Style2 = this.Style;
|
|
var selector = "." + CLASS_SLIDE;
|
|
this.breakpoints.forEach(function (_ref5) {
|
|
var width = _ref5[0],
|
|
options = _ref5[1];
|
|
Style2.rule(selector, "width", _this8.cssSlideWidth(options), width);
|
|
Style2.rule(selector, "height", _this8.cssSlideHeight(options) || "100%", width);
|
|
Style2.rule(selector, _this8.resolve("marginRight"), unit(options.gap) || "0px", width);
|
|
Style2.rule(selector + " > img", "display", options.cover ? "none" : "inline", width);
|
|
});
|
|
};
|
|
|
|
_proto3.buildTranslate = function buildTranslate(options) {
|
|
var _this$Direction = this.Direction,
|
|
resolve = _this$Direction.resolve,
|
|
orient = _this$Direction.orient;
|
|
var values = [];
|
|
values.push(this.cssOffsetClones(options));
|
|
values.push(this.cssOffsetGaps(options));
|
|
|
|
if (this.isCenter(options)) {
|
|
values.push(this.buildCssValue(orient(-50), "%"));
|
|
values.push.apply(values, this.cssOffsetCenter(options));
|
|
}
|
|
|
|
return values.filter(Boolean).map(function (value) {
|
|
return "translate" + resolve("X") + "(" + value + ")";
|
|
}).join(" ");
|
|
};
|
|
|
|
_proto3.cssOffsetClones = function cssOffsetClones(options) {
|
|
var _this$Direction2 = this.Direction,
|
|
resolve = _this$Direction2.resolve,
|
|
orient = _this$Direction2.orient;
|
|
var cloneCount = this.getCloneCount();
|
|
|
|
if (this.isFixedWidth(options)) {
|
|
var _this$parseCssValue = this.parseCssValue(options[resolve("fixedWidth")]),
|
|
value = _this$parseCssValue.value,
|
|
unit2 = _this$parseCssValue.unit;
|
|
|
|
return this.buildCssValue(orient(value) * cloneCount, unit2);
|
|
}
|
|
|
|
var percent = 100 * cloneCount / options.perPage;
|
|
return orient(percent) + "%";
|
|
};
|
|
|
|
_proto3.cssOffsetCenter = function cssOffsetCenter(options) {
|
|
var _this$Direction3 = this.Direction,
|
|
resolve = _this$Direction3.resolve,
|
|
orient = _this$Direction3.orient;
|
|
|
|
if (this.isFixedWidth(options)) {
|
|
var _this$parseCssValue2 = this.parseCssValue(options[resolve("fixedWidth")]),
|
|
value = _this$parseCssValue2.value,
|
|
unit2 = _this$parseCssValue2.unit;
|
|
|
|
return [this.buildCssValue(orient(value / 2), unit2)];
|
|
}
|
|
|
|
var values = [];
|
|
var perPage = options.perPage,
|
|
gap = options.gap;
|
|
values.push(orient(50 / perPage) + "%");
|
|
|
|
if (gap) {
|
|
var _this$parseCssValue3 = this.parseCssValue(gap),
|
|
_value = _this$parseCssValue3.value,
|
|
_unit = _this$parseCssValue3.unit;
|
|
|
|
var gapOffset = (_value / perPage - _value) / 2;
|
|
values.push(this.buildCssValue(orient(gapOffset), _unit));
|
|
}
|
|
|
|
return values;
|
|
};
|
|
|
|
_proto3.cssOffsetGaps = function cssOffsetGaps(options) {
|
|
var cloneCount = this.getCloneCount();
|
|
|
|
if (cloneCount && options.gap) {
|
|
var orient = this.Direction.orient;
|
|
|
|
var _this$parseCssValue4 = this.parseCssValue(options.gap),
|
|
value = _this$parseCssValue4.value,
|
|
unit2 = _this$parseCssValue4.unit;
|
|
|
|
if (this.isFixedWidth(options)) {
|
|
return this.buildCssValue(orient(value * cloneCount), unit2);
|
|
}
|
|
|
|
var perPage = options.perPage;
|
|
var gaps = cloneCount / perPage;
|
|
return this.buildCssValue(orient(gaps * value), unit2);
|
|
}
|
|
|
|
return "";
|
|
};
|
|
|
|
_proto3.resolve = function resolve(prop) {
|
|
return camelToKebab(this.Direction.resolve(prop));
|
|
};
|
|
|
|
_proto3.cssPadding = function cssPadding(options, right) {
|
|
var padding = options.padding;
|
|
var prop = this.Direction.resolve(right ? "right" : "left", true);
|
|
return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
|
|
};
|
|
|
|
_proto3.cssTrackHeight = function cssTrackHeight(options) {
|
|
var 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;
|
|
};
|
|
|
|
_proto3.cssHeight = function cssHeight(options) {
|
|
return unit(options.height);
|
|
};
|
|
|
|
_proto3.cssSlideWidth = function cssSlideWidth(options) {
|
|
return options.autoWidth ? "" : unit(options.fixedWidth) || (this.isVertical() ? "" : this.cssSlideSize(options));
|
|
};
|
|
|
|
_proto3.cssSlideHeight = function cssSlideHeight(options) {
|
|
return unit(options.fixedHeight) || (this.isVertical() ? options.autoHeight ? "" : this.cssSlideSize(options) : this.cssHeight(options));
|
|
};
|
|
|
|
_proto3.cssSlideSize = function cssSlideSize(options) {
|
|
var gap = unit(options.gap);
|
|
return "calc((100%" + (gap && " + " + gap) + ")/" + (options.perPage || 1) + (gap && " - " + gap) + ")";
|
|
};
|
|
|
|
_proto3.cssAspectRatio = function cssAspectRatio(options) {
|
|
var heightRatio = options.heightRatio;
|
|
return heightRatio ? "" + 1 / heightRatio : "";
|
|
};
|
|
|
|
_proto3.buildCssValue = function buildCssValue(value, unit2) {
|
|
return "" + value + unit2;
|
|
};
|
|
|
|
_proto3.parseCssValue = function parseCssValue(value) {
|
|
if (isString(value)) {
|
|
var number = parseFloat(value) || 0;
|
|
var unit2 = value.replace(/\d*(\.\d*)?/, "") || "px";
|
|
return {
|
|
value: number,
|
|
unit: unit2
|
|
};
|
|
}
|
|
|
|
return {
|
|
value: value,
|
|
unit: "px"
|
|
};
|
|
};
|
|
|
|
_proto3.parseBreakpoints = function parseBreakpoints() {
|
|
var _this9 = this;
|
|
|
|
var breakpoints = this.options.breakpoints;
|
|
this.breakpoints.push(["default", this.options]);
|
|
|
|
if (breakpoints) {
|
|
forOwn(breakpoints, function (options, width) {
|
|
_this9.breakpoints.push([width, merge(merge({}, _this9.options), options)]);
|
|
});
|
|
}
|
|
};
|
|
|
|
_proto3.isFixedWidth = function isFixedWidth(options) {
|
|
return !!options[this.Direction.resolve("fixedWidth")];
|
|
};
|
|
|
|
_proto3.isLoop = function isLoop() {
|
|
return this.options.type === LOOP;
|
|
};
|
|
|
|
_proto3.isCenter = function isCenter(options) {
|
|
if (options.focus === "center") {
|
|
if (this.isLoop()) {
|
|
return true;
|
|
}
|
|
|
|
if (this.options.type === SLIDE) {
|
|
return !this.options.trimSpace;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
_proto3.isVertical = function isVertical() {
|
|
return this.options.direction === TTB;
|
|
};
|
|
|
|
_proto3.buildClasses = function buildClasses() {
|
|
var options = this.options;
|
|
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(" ");
|
|
};
|
|
|
|
_proto3.buildAttrs = function buildAttrs(attrs) {
|
|
var attr = "";
|
|
forOwn(attrs, function (value, key) {
|
|
attr += value ? " " + camelToKebab(key) + "=\"" + value + "\"" : "";
|
|
});
|
|
return attr.trim();
|
|
};
|
|
|
|
_proto3.buildStyles = function buildStyles(styles) {
|
|
var style = "";
|
|
forOwn(styles, function (value, key) {
|
|
style += " " + camelToKebab(key) + ":" + value + ";";
|
|
});
|
|
return style.trim();
|
|
};
|
|
|
|
_proto3.renderSlides = function renderSlides() {
|
|
var _this10 = this;
|
|
|
|
var tag = this.config.slideTag;
|
|
return this.slides.map(function (content) {
|
|
return "<" + tag + " " + _this10.buildAttrs(content.attrs) + ">" + (content.html || "") + "</" + tag + ">";
|
|
}).join("");
|
|
};
|
|
|
|
_proto3.cover = function cover(content) {
|
|
var styles = content.styles,
|
|
_content$html = content.html,
|
|
html = _content$html === void 0 ? "" : _content$html;
|
|
|
|
if (this.options.cover && !this.options.lazyLoad) {
|
|
var src = html.match(/<img.*?src\s*=\s*(['"])(.+?)\1.*?>/);
|
|
|
|
if (src && src[2]) {
|
|
styles.background = "center/cover no-repeat url('" + src[2] + "')";
|
|
}
|
|
}
|
|
};
|
|
|
|
_proto3.generateClones = function generateClones(contents) {
|
|
var classes = this.options.classes;
|
|
var count = this.getCloneCount();
|
|
var slides = contents.slice();
|
|
|
|
while (slides.length < count) {
|
|
push(slides, slides);
|
|
}
|
|
|
|
push(slides.slice(-count).reverse(), slides.slice(0, count)).forEach(function (content, index) {
|
|
var attrs = assign({}, content.attrs, {
|
|
class: content.attrs.class + " " + classes.clone
|
|
});
|
|
var clone = assign({}, content, {
|
|
attrs: attrs
|
|
});
|
|
index < count ? contents.unshift(clone) : contents.push(clone);
|
|
});
|
|
};
|
|
|
|
_proto3.getCloneCount = function getCloneCount() {
|
|
if (this.isLoop()) {
|
|
var options = this.options;
|
|
|
|
if (options.clones) {
|
|
return options.clones;
|
|
}
|
|
|
|
var perPage = max.apply(void 0, this.breakpoints.map(function (_ref6) {
|
|
var options2 = _ref6[1];
|
|
return options2.perPage;
|
|
}));
|
|
return perPage * ((options.flickMaxPages || 1) + 1);
|
|
}
|
|
|
|
return 0;
|
|
};
|
|
|
|
_proto3.renderArrows = function renderArrows() {
|
|
var html = "";
|
|
html += "<div class=\"" + this.options.classes.arrows + "\">";
|
|
html += this.renderArrow(true);
|
|
html += this.renderArrow(false);
|
|
html += "</div>";
|
|
return html;
|
|
};
|
|
|
|
_proto3.renderArrow = function renderArrow(prev) {
|
|
var _this$options = this.options,
|
|
classes = _this$options.classes,
|
|
i18n = _this$options.i18n;
|
|
var 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>";
|
|
};
|
|
|
|
_proto3.html = function html() {
|
|
var _this$config = this.config,
|
|
rootClass = _this$config.rootClass,
|
|
listTag = _this$config.listTag,
|
|
arrows = _this$config.arrows,
|
|
beforeTrack = _this$config.beforeTrack,
|
|
afterTrack = _this$config.afterTrack,
|
|
slider = _this$config.slider,
|
|
beforeSlider = _this$config.beforeSlider,
|
|
afterSlider = _this$config.afterSlider;
|
|
var 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;
|
|
};
|
|
|
|
return SplideRenderer;
|
|
}();
|
|
|
|
export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, DEFAULTS, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, EventInterface, FADE, LOOP, LTR, RTL, RequestInterval, SLIDE, STATUS_CLASSES, Splide, SplideRenderer, State, TTB, Throttle, Splide as default };
|