uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
1,476 lines (1,448 loc) • 59.2 kB
JavaScript
/*! UIkit 3.23.10 | https://www.getuikit.com | (c) 2014 - 2025 YOOtheme | MIT License */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
typeof define === 'function' && define.amd ? define('uikitslider', ['uikit-util'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.UIkitSlider = factory(global.UIkit.util));
})(this, (function (util) { 'use strict';
function callUpdate(instance, e = "update") {
if (!instance._connected) {
return;
}
if (!instance._updates.length) {
return;
}
if (!instance._queued) {
instance._queued = /* @__PURE__ */ new Set();
util.fastdom.read(() => {
if (instance._connected) {
runUpdates(instance, instance._queued);
}
instance._queued = null;
});
}
instance._queued.add(e.type || e);
}
function runUpdates(instance, types) {
for (const { read, write, events = [] } of instance._updates) {
if (!types.has("update") && !events.some((type) => types.has(type))) {
continue;
}
let result;
if (read) {
result = read.call(instance, instance._data, types);
if (result && util.isPlainObject(result)) {
util.assign(instance._data, result);
}
}
if (write && result !== false) {
util.fastdom.write(() => {
if (instance._connected) {
write.call(instance, instance._data, types);
}
});
}
}
}
function resize(options) {
return observe(util.observeResize, options, "resize");
}
function intersection(options) {
return observe(util.observeIntersection, options);
}
function lazyload(options = {}) {
return intersection({
handler: function(entries, observer) {
const { targets = this.$el, preload = 5 } = options;
for (const el of util.toNodes(util.isFunction(targets) ? targets(this) : targets)) {
util.$$('[loading="lazy"]', el).slice(0, preload - 1).forEach((el2) => util.removeAttr(el2, "loading"));
}
for (const el of entries.filter(({ isIntersecting }) => isIntersecting).map(({ target }) => target)) {
observer.unobserve(el);
}
},
...options
});
}
function scroll(options) {
return observe(
(target, handler) => ({
disconnect: util.on(toScrollTargets(target), "scroll", handler, { passive: true })
}),
options,
"scroll"
);
}
function observe(observe2, options, emit) {
return {
observe: observe2,
handler() {
callUpdate(this, emit);
},
...options
};
}
function toScrollTargets(elements) {
return util.toNodes(elements).map((node) => {
const { ownerDocument } = node;
const parent2 = util.scrollParent(node, true);
return parent2 === ownerDocument.scrollingElement ? ownerDocument : parent2;
});
}
var Class = {
connected() {
util.addClass(this.$el, this.$options.id);
}
};
var I18n = {
props: {
i18n: Object
},
data: {
i18n: null
},
methods: {
t(key, ...params) {
var _a, _b, _c;
let i = 0;
return ((_c = ((_a = this.i18n) == null ? void 0 : _a[key]) || ((_b = this.$options.i18n) == null ? void 0 : _b[key])) == null ? void 0 : _c.replace(
/%s/g,
() => params[i++] || ""
)) || "";
}
}
};
var SliderAutoplay = {
props: {
autoplay: Boolean,
autoplayInterval: Number,
pauseOnHover: Boolean
},
data: {
autoplay: false,
autoplayInterval: 7e3,
pauseOnHover: true
},
connected() {
util.attr(this.list, "aria-live", this.autoplay ? "off" : "polite");
this.autoplay && this.startAutoplay();
},
disconnected() {
this.stopAutoplay();
},
update() {
util.attr(this.slides, "tabindex", "-1");
},
events: [
{
name: "visibilitychange",
el: () => document,
filter: ({ autoplay }) => autoplay,
handler() {
if (document.hidden) {
this.stopAutoplay();
} else {
this.startAutoplay();
}
}
}
],
methods: {
startAutoplay() {
this.stopAutoplay();
this.interval = setInterval(() => {
if (!(this.stack.length || this.draggable && util.matches(this.$el, ":focus-within") && !util.matches(this.$el, ":focus") || this.pauseOnHover && util.matches(this.$el, ":hover"))) {
this.show("next");
}
}, this.autoplayInterval);
},
stopAutoplay() {
clearInterval(this.interval);
}
}
};
const pointerOptions = { passive: false, capture: true };
const pointerUpOptions = { passive: true, capture: true };
const pointerDown = "touchstart mousedown";
const pointerMove = "touchmove mousemove";
const pointerUp = "touchend touchcancel mouseup click input scroll";
var SliderDrag = {
props: {
draggable: Boolean
},
data: {
draggable: true,
threshold: 10
},
created() {
for (const key of ["start", "move", "end"]) {
const fn = this[key];
this[key] = (e) => {
const pos = util.getEventPos(e).x * (util.isRtl ? -1 : 1);
this.prevPos = pos === this.pos ? this.prevPos : this.pos;
this.pos = pos;
fn(e);
};
}
},
events: [
{
name: pointerDown,
passive: true,
delegate: ({ selList }) => `${selList} > *`,
handler(e) {
if (!this.draggable || this.parallax || !util.isTouch(e) && hasSelectableText(e.target) || e.target.closest(util.selInput) || e.button > 0 || this.length < 2) {
return;
}
this.start(e);
}
},
{
name: "dragstart",
handler(e) {
e.preventDefault();
}
},
{
// iOS workaround for slider stopping if swiping fast
name: pointerMove,
el: ({ list }) => list,
handler: util.noop,
...pointerOptions
}
],
methods: {
start() {
this.drag = this.pos;
if (this._transitioner) {
this.percent = this._transitioner.percent();
this.drag += this._transitioner.getDistance() * this.percent * this.dir;
this._transitioner.cancel();
this._transitioner.translate(this.percent);
this.dragging = true;
this.stack = [];
} else {
this.prevIndex = this.index;
}
util.on(document, pointerMove, this.move, pointerOptions);
util.on(document, pointerUp, this.end, pointerUpOptions);
util.css(this.list, "userSelect", "none");
},
move(e) {
const distance = this.pos - this.drag;
if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) {
return;
}
e.cancelable && e.preventDefault();
this.dragging = true;
this.dir = distance < 0 ? 1 : -1;
let { slides, prevIndex } = this;
let dis = Math.abs(distance);
let nextIndex = this.getIndex(prevIndex + this.dir);
let width = getDistance.call(this, prevIndex, nextIndex);
while (nextIndex !== prevIndex && dis > width) {
this.drag -= width * this.dir;
prevIndex = nextIndex;
dis -= width;
nextIndex = this.getIndex(prevIndex + this.dir);
width = getDistance.call(this, prevIndex, nextIndex);
}
this.percent = dis / width;
const prev = slides[prevIndex];
const next = slides[nextIndex];
const changed = this.index !== nextIndex;
const edge = prevIndex === nextIndex;
let itemShown;
for (const i of [this.index, this.prevIndex]) {
if (!util.includes([nextIndex, prevIndex], i)) {
util.trigger(slides[i], "itemhidden", [this]);
if (edge) {
itemShown = true;
this.prevIndex = prevIndex;
}
}
}
if (this.index === prevIndex && this.prevIndex !== prevIndex || itemShown) {
util.trigger(slides[this.index], "itemshown", [this]);
}
if (changed) {
this.prevIndex = prevIndex;
this.index = nextIndex;
if (!edge) {
util.trigger(prev, "beforeitemhide", [this]);
util.trigger(prev, "itemhide", [this]);
}
util.trigger(next, "beforeitemshow", [this]);
util.trigger(next, "itemshow", [this]);
}
this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next);
},
end() {
util.off(document, pointerMove, this.move, pointerOptions);
util.off(document, pointerUp, this.end, pointerUpOptions);
if (this.dragging) {
setTimeout(util.on(this.list, "click", (e) => e.preventDefault(), pointerOptions));
this.dragging = null;
if (this.index === this.prevIndex) {
this.percent = 1 - this.percent;
this.dir *= -1;
this._show(false, this.index, true);
this._transitioner = null;
} else {
const dirChange = (util.isRtl ? this.dir * (util.isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos;
this.index = dirChange ? this.index : this.prevIndex;
if (dirChange) {
util.trigger(this.slides[this.prevIndex], "itemhidden", [this]);
util.trigger(this.slides[this.index], "itemshown", [this]);
this.percent = 1 - this.percent;
}
this.show(
this.dir > 0 && !dirChange || this.dir < 0 && dirChange ? "next" : "previous",
true
);
}
}
util.css(this.list, { userSelect: "" });
this.drag = this.percent = null;
}
}
};
function getDistance(prev, next) {
return this._getTransitioner(prev, prev !== next && next).getDistance() || this.slides[prev].offsetWidth;
}
function hasSelectableText(el) {
return util.css(el, "userSelect") !== "none" && util.toArray(el.childNodes).some((el2) => el2.nodeType === 3 && el2.textContent.trim());
}
util.memoize((id, props) => {
const attributes = Object.keys(props);
const filter = attributes.concat(id).map((key) => [util.hyphenate(key), `data-${util.hyphenate(key)}`]).flat();
return { attributes, filter };
});
let id = 1;
function generateId(instance, el = null) {
return (el == null ? void 0 : el.id) || `${instance.$options.id}-${id++}`;
}
const keyMap = {
SPACE: 32,
END: 35,
HOME: 36,
LEFT: 37,
RIGHT: 39};
function maybeDefaultPreventClick(e) {
if (e.target.closest('a[href="#"],a[href=""]')) {
e.preventDefault();
}
}
var SliderNav = {
i18n: {
next: "Next slide",
previous: "Previous slide",
slideX: "Slide %s",
slideLabel: "%s of %s",
role: "String"
},
data: {
selNav: false,
role: "region"
},
computed: {
nav: ({ selNav }, $el) => util.$(selNav, $el),
navChildren() {
return util.children(this.nav);
},
selNavItem: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
navItems(_, $el) {
return util.$$(this.selNavItem, $el);
}
},
watch: {
nav(nav, prev) {
util.attr(nav, "role", "tablist");
this.padNavitems();
if (prev) {
this.$emit();
}
},
list(list) {
if (util.isTag(list, "ul")) {
util.attr(list, "role", "presentation");
}
},
navChildren(children2) {
util.attr(children2, "role", "presentation");
this.padNavitems();
this.updateNav();
},
navItems(items) {
for (const el of items) {
const cmd = util.data(el, this.attrItem);
const button = util.$("a,button", el) || el;
let ariaLabel;
let ariaControls = null;
if (util.isNumeric(cmd)) {
const item = util.toNumber(cmd);
const slide = this.slides[item];
if (slide) {
if (!slide.id) {
slide.id = generateId(this, slide);
}
ariaControls = slide.id;
}
ariaLabel = this.t("slideX", util.toFloat(cmd) + 1);
button.role = "tab";
} else {
if (this.list) {
if (!this.list.id) {
this.list.id = generateId(this, this.list);
}
ariaControls = this.list.id;
}
ariaLabel = this.t(cmd);
}
button.ariaControls = ariaControls;
button.ariaLabel = button.ariaLabel || ariaLabel;
}
},
slides(slides) {
slides.forEach(
(slide, i) => util.attr(slide, {
role: this.nav ? "tabpanel" : "group",
"aria-label": this.t("slideLabel", i + 1, this.length),
"aria-roledescription": this.nav ? null : "slide"
})
);
this.padNavitems();
}
},
connected() {
this.$el.role = this.role;
this.$el.ariaRoleDescription = "carousel";
},
update: [
{
write() {
this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
this.updateNav();
},
events: ["resize"]
}
],
events: [
{
name: "click keydown",
delegate: ({ selNavItem }) => selNavItem,
filter: ({ parallax }) => !parallax,
handler(e) {
if (e.target.closest("a,button") && (e.type === "click" || e.keyCode === keyMap.SPACE)) {
maybeDefaultPreventClick(e);
this.show(util.data(e.current, this.attrItem));
}
}
},
{
name: "itemshow",
handler() {
this.updateNav();
}
},
{
name: "keydown",
delegate: ({ selNavItem }) => selNavItem,
filter: ({ parallax }) => !parallax,
handler(e) {
const { current, keyCode } = e;
const cmd = util.data(current, this.attrItem);
if (!util.isNumeric(cmd)) {
return;
}
let i = keyCode === keyMap.HOME ? 0 : keyCode === keyMap.END ? "last" : keyCode === keyMap.LEFT ? "previous" : keyCode === keyMap.RIGHT ? "next" : -1;
if (~i) {
e.preventDefault();
this.show(i);
}
}
}
],
methods: {
updateNav() {
const index = this.getValidIndex();
for (const el of this.navItems) {
const cmd = util.data(el, this.attrItem);
const button = util.$("a,button", el) || el;
if (util.isNumeric(cmd)) {
const item = util.toNumber(cmd);
const active = item === index;
util.toggleClass(el, this.clsActive, active);
util.toggleClass(button, "uk-disabled", !!this.parallax);
button.ariaSelected = active;
button.tabIndex = active && !this.parallax ? null : -1;
if (active && button && util.matches(util.parent(el), ":focus-within")) {
button.focus();
}
} else {
util.toggleClass(
el,
"uk-invisible",
this.finite && (cmd === "previous" && index === 0 || cmd === "next" && index >= this.maxIndex)
);
}
}
},
padNavitems() {
if (!this.nav) {
return;
}
const children2 = [];
for (let i = 0; i < this.length; i++) {
const attr2 = `${this.attrItem}="${i}"`;
children2[i] = this.navChildren.findLast((el) => el.matches(`[${attr2}]`)) || util.$(`<li ${attr2}><a href></a></li>`);
}
if (!util.isEqual(children2, this.navChildren)) {
util.html(this.nav, children2);
}
}
}
};
const easeOutQuad = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
const easeOutQuart = "cubic-bezier(0.165, 0.84, 0.44, 1)";
var Slider = {
mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
props: {
clsActivated: String,
easing: String,
index: Number,
finite: Boolean,
velocity: Number
},
data: () => ({
easing: "ease",
finite: false,
velocity: 1,
index: 0,
prevIndex: -1,
stack: [],
percent: 0,
clsActive: "uk-active",
clsActivated: "",
clsEnter: "uk-slide-enter",
clsLeave: "uk-slide-leave",
clsSlideActive: "uk-slide-active",
Transitioner: false,
transitionOptions: {}
}),
connected() {
this.prevIndex = -1;
this.index = this.getValidIndex(this.$props.index);
this.stack = [];
},
disconnected() {
util.removeClass(this.slides, this.clsActive);
},
computed: {
duration: ({ velocity }, $el) => speedUp($el.offsetWidth / velocity),
list: ({ selList }, $el) => util.$(selList, $el),
maxIndex() {
return this.length - 1;
},
slides() {
return util.children(this.list);
},
length() {
return this.slides.length;
}
},
watch: {
slides(slides, prev) {
if (prev) {
this.$emit();
}
}
},
events: {
itemshow({ target }) {
util.addClass(target, this.clsEnter, this.clsSlideActive);
},
itemshown({ target }) {
util.removeClass(target, this.clsEnter);
},
itemhide({ target }) {
util.addClass(target, this.clsLeave);
},
itemhidden({ target }) {
util.removeClass(target, this.clsLeave, this.clsSlideActive);
}
},
methods: {
async show(index, force = false) {
var _a;
if (this.dragging || !this.length || this.parallax) {
return;
}
const { stack } = this;
const queueIndex = force ? 0 : stack.length;
const reset = () => {
stack.splice(queueIndex, 1);
if (stack.length) {
this.show(stack.shift(), true);
}
};
stack[force ? "unshift" : "push"](index);
if (!force && stack.length > 1) {
if (stack.length === 2) {
(_a = this._transitioner) == null ? void 0 : _a.forward(Math.min(this.duration, 200));
}
return;
}
const prevIndex = this.getIndex(this.index);
const prev = util.hasClass(this.slides, this.clsActive) && this.slides[prevIndex];
const nextIndex = this.getIndex(index, this.index);
const next = this.slides[nextIndex];
if (prev === next) {
reset();
return;
}
this.dir = getDirection(index, prevIndex);
this.prevIndex = prevIndex;
this.index = nextIndex;
if (prev && !util.trigger(prev, "beforeitemhide", [this]) || !util.trigger(next, "beforeitemshow", [this, prev])) {
this.index = this.prevIndex;
reset();
return;
}
prev && util.trigger(prev, "itemhide", [this]);
util.trigger(next, "itemshow", [this]);
await this._show(prev, next, force);
prev && util.trigger(prev, "itemhidden", [this]);
util.trigger(next, "itemshown", [this]);
stack.shift();
this._transitioner = null;
if (stack.length) {
requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
}
},
getIndex(index = this.index, prev = this.index) {
return util.clamp(
util.getIndex(index, this.slides, prev, this.finite),
0,
Math.max(0, this.maxIndex)
);
},
getValidIndex(index = this.index, prevIndex = this.prevIndex) {
return this.getIndex(index, prevIndex);
},
async _show(prev, next, force) {
this._transitioner = this._getTransitioner(prev, next, this.dir, {
easing: force ? next.offsetWidth < 600 ? easeOutQuad : easeOutQuart : this.easing,
...this.transitionOptions
});
if (!force && !prev) {
this._translate(1);
return;
}
const { length } = this.stack;
return this._transitioner[length > 1 ? "forward" : "show"](
length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration,
this.percent
);
},
_translate(percent, prev = this.prevIndex, next = this.index) {
const transitioner = this._getTransitioner(prev === next ? false : prev, next);
transitioner.translate(percent);
return transitioner;
},
_getTransitioner(prev = this.prevIndex, next = this.index, dir = this.dir || 1, options = this.transitionOptions) {
return new this.Transitioner(
util.isNumber(prev) ? this.slides[prev] : prev,
util.isNumber(next) ? this.slides[next] : next,
dir * (util.isRtl ? -1 : 1),
options
);
}
}
};
function getDirection(index, prevIndex) {
return index === "next" ? 1 : index === "previous" ? -1 : index < prevIndex ? -1 : 1;
}
function speedUp(x) {
return 0.5 * x + 300;
}
function startsWith(str, search) {
var _a;
return (_a = str == null ? void 0 : str.startsWith) == null ? void 0 : _a.call(str, search);
}
const { from: toArray } = Array;
function isFunction(obj) {
return typeof obj === "function";
}
function isObject(obj) {
return obj !== null && typeof obj === "object";
}
function isWindow(obj) {
return isObject(obj) && obj === obj.window;
}
function isDocument(obj) {
return nodeType(obj) === 9;
}
function isNode(obj) {
return nodeType(obj) >= 1;
}
function nodeType(obj) {
return !isWindow(obj) && isObject(obj) && obj.nodeType;
}
function isString(value) {
return typeof value === "string";
}
function isUndefined(value) {
return value === void 0;
}
function toNode(element) {
return element && toNodes(element)[0];
}
function toNodes(element) {
return isNode(element) ? [element] : Array.from(element || []).filter(isNode);
}
function memoize(fn) {
const cache = /* @__PURE__ */ Object.create(null);
return (key, ...args) => cache[key] || (cache[key] = fn(key, ...args));
}
function attr(element, name, value) {
var _a;
if (isObject(name)) {
for (const key in name) {
attr(element, key, name[key]);
}
return;
}
if (isUndefined(value)) {
return (_a = toNode(element)) == null ? void 0 : _a.getAttribute(name);
} else {
for (const el of toNodes(element)) {
if (isFunction(value)) {
value = value.call(el, attr(el, name));
}
if (value === null) {
removeAttr(el, name);
} else {
el.setAttribute(name, value);
}
}
}
}
function removeAttr(element, name) {
toNodes(element).forEach((element2) => element2.removeAttribute(name));
}
const inBrowser = typeof window !== "undefined";
const isVisibleFn = inBrowser && Element.prototype.checkVisibility || function() {
return this.offsetWidth || this.offsetHeight || this.getClientRects().length;
};
function isVisible(element) {
return toNodes(element).some((element2) => isVisibleFn.call(element2));
}
function parent(element) {
var _a;
return (_a = toNode(element)) == null ? void 0 : _a.parentElement;
}
function filter(element, selector) {
return toNodes(element).filter((element2) => matches(element2, selector));
}
function matches(element, selector) {
return toNodes(element).some((element2) => element2.matches(selector));
}
function children(element, selector) {
element = toNode(element);
const children2 = element ? toArray(element.children) : [];
return selector ? filter(children2, selector) : children2;
}
function index(element, ref) {
return children(parent(element)).indexOf(element);
}
function findAll(selector, context) {
return toNodes(_query(selector, toNode(context), "querySelectorAll"));
}
const addStarRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
const splitSelectorRe = /(\([^)]*\)|[^,])+/g;
const parseSelector = memoize((selector) => {
let isContextSelector = false;
if (!selector || !isString(selector)) {
return {};
}
const selectors = [];
for (let sel of selector.match(splitSelectorRe)) {
sel = sel.trim().replace(addStarRe, "$1 *");
isContextSelector || (isContextSelector = ["!", "+", "~", "-", ">"].includes(sel[0]));
selectors.push(sel);
}
return {
selector: selectors.join(","),
selectors,
isContextSelector
};
});
const positionRe = /(\([^)]*\)|\S)*/;
const parsePositionSelector = memoize((selector) => {
selector = selector.slice(1).trim();
const [position] = selector.match(positionRe);
return [position, selector.slice(position.length + 1)];
});
function _query(selector, context = document, queryFn) {
var _a;
const parsed = parseSelector(selector);
if (!parsed.isContextSelector) {
return parsed.selector ? _doQuery(context, queryFn, parsed.selector) : selector;
}
selector = "";
const isSingle = parsed.selectors.length === 1;
for (let sel of parsed.selectors) {
let positionSel;
let ctx = context;
if (sel[0] === "!") {
[positionSel, sel] = parsePositionSelector(sel);
ctx = (_a = context.parentElement) == null ? void 0 : _a.closest(positionSel);
if (!sel && isSingle) {
return ctx;
}
}
if (ctx && sel[0] === "-") {
[positionSel, sel] = parsePositionSelector(sel);
ctx = ctx.previousElementSibling;
ctx = matches(ctx, positionSel) ? ctx : null;
if (!sel && isSingle) {
return ctx;
}
}
if (!ctx) {
continue;
}
if (isSingle) {
if (sel[0] === "~" || sel[0] === "+") {
sel = `:scope > :nth-child(${index(ctx) + 1}) ${sel}`;
ctx = ctx.parentElement;
} else if (sel[0] === ">") {
sel = `:scope ${sel}`;
}
return _doQuery(ctx, queryFn, sel);
}
selector += `${selector ? "," : ""}${domPath(ctx)} ${sel}`;
}
if (!isDocument(context)) {
context = context.ownerDocument;
}
return _doQuery(context, queryFn, selector);
}
function _doQuery(context, queryFn, selector) {
try {
return context[queryFn](selector);
} catch (e) {
return null;
}
}
function domPath(element) {
const names = [];
while (element.parentNode) {
const id = attr(element, "id");
if (id) {
names.unshift(`#${escape(id)}`);
break;
} else {
let { tagName } = element;
if (tagName !== "HTML") {
tagName += `:nth-child(${index(element) + 1})`;
}
names.unshift(tagName);
element = element.parentNode;
}
}
return names.join(" > ");
}
function escape(css) {
return isString(css) ? CSS.escape(css) : "";
}
const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
function fragment(html2) {
const matches = singleTagRe.exec(html2);
if (matches) {
return document.createElement(matches[1]);
}
const container = document.createElement("template");
container.innerHTML = html2.trim();
return unwrapSingle(container.content.childNodes);
}
function unwrapSingle(nodes) {
return nodes.length > 1 ? nodes : nodes[0];
}
function $$(selector, context) {
return isHtml(selector) ? toNodes(fragment(selector)) : findAll(selector, context);
}
function isHtml(str) {
return isString(str) && startsWith(str.trim(), "<");
}
function getMaxPathLength(el) {
return isVisible(el) ? Math.ceil(
Math.max(0, ...$$("[stroke]", el).map((stroke) => {
var _a;
return ((_a = stroke.getTotalLength) == null ? void 0 : _a.call(stroke)) || 0;
}))
) : 0;
}
const props = {
x: transformFn,
y: transformFn,
rotate: transformFn,
scale: transformFn,
color: colorFn,
backgroundColor: colorFn,
borderColor: colorFn,
blur: filterFn,
hue: filterFn,
fopacity: filterFn,
grayscale: filterFn,
invert: filterFn,
saturate: filterFn,
sepia: filterFn,
opacity: cssPropFn,
stroke: strokeFn,
bgx: backgroundFn,
bgy: backgroundFn
};
const { keys } = Object;
({
props: fillObject(keys(props), "list"),
data: fillObject(keys(props), void 0)});
function transformFn(prop, el, stops) {
let unit = getUnit(stops) || { x: "px", y: "px", rotate: "deg" }[prop] || "";
let transformFn2;
if (prop === "x" || prop === "y") {
prop = `translate${util.ucfirst(prop)}`;
transformFn2 = (stop) => util.toFloat(util.toFloat(stop).toFixed(unit === "px" ? 0 : 6));
} else if (prop === "scale") {
unit = "";
transformFn2 = (stop) => {
var _a;
return getUnit([stop]) ? util.toPx(stop, "width", el, true) / el[`offset${((_a = stop.endsWith) == null ? void 0 : _a.call(stop, "vh")) ? "Height" : "Width"}`] : util.toFloat(stop);
};
}
if (stops.length === 1) {
stops.unshift(prop === "scale" ? 1 : 0);
}
stops = parseStops(stops, transformFn2);
return (css2, percent) => {
css2.transform = `${css2.transform || ""} ${prop}(${getValue(stops, percent)}${unit})`;
};
}
function colorFn(prop, el, stops) {
if (stops.length === 1) {
stops.unshift(getCssValue(el, prop, ""));
}
stops = parseStops(stops, (stop) => parseColor(el, stop));
return (css2, percent) => {
const [start, end, p] = getStop(stops, percent);
const value = start.map((value2, i) => {
value2 += p * (end[i] - value2);
return i === 3 ? util.toFloat(value2) : parseInt(value2, 10);
}).join(",");
css2[prop] = `rgba(${value})`;
};
}
function parseColor(el, color) {
return getCssValue(el, "color", color).split(/[(),]/g).slice(1, -1).concat(1).slice(0, 4).map(util.toFloat);
}
function filterFn(prop, el, stops) {
if (stops.length === 1) {
stops.unshift(0);
}
const unit = getUnit(stops) || { blur: "px", hue: "deg" }[prop] || "%";
prop = { fopacity: "opacity", hue: "hue-rotate" }[prop] || prop;
stops = parseStops(stops);
return (css2, percent) => {
const value = getValue(stops, percent);
css2.filter = `${css2.filter || ""} ${prop}(${value + unit})`;
};
}
function cssPropFn(prop, el, stops) {
if (stops.length === 1) {
stops.unshift(getCssValue(el, prop, ""));
}
stops = parseStops(stops);
return (css2, percent) => {
css2[prop] = getValue(stops, percent);
};
}
function strokeFn(prop, el, stops) {
if (stops.length === 1) {
stops.unshift(0);
}
const unit = getUnit(stops);
const length = getMaxPathLength(el);
stops = parseStops(stops.reverse(), (stop) => {
stop = util.toFloat(stop);
return unit === "%" ? stop * length / 100 : stop;
});
if (!stops.some(([value]) => value)) {
return util.noop;
}
util.css(el, "strokeDasharray", length);
return (css2, percent) => {
css2.strokeDashoffset = getValue(stops, percent);
};
}
function backgroundFn(prop, el, stops, props2) {
if (stops.length === 1) {
stops.unshift(0);
}
const attr = prop === "bgy" ? "height" : "width";
props2[prop] = parseStops(stops, (stop) => util.toPx(stop, attr, el));
const bgProps = ["bgx", "bgy"].filter((prop2) => prop2 in props2);
if (bgProps.length === 2 && prop === "bgx") {
return util.noop;
}
if (getCssValue(el, "backgroundSize", "") === "cover") {
return backgroundCoverFn(prop, el, stops, props2);
}
const positions = {};
for (const prop2 of bgProps) {
positions[prop2] = getBackgroundPos(el, prop2);
}
return setBackgroundPosFn(bgProps, positions, props2);
}
function backgroundCoverFn(prop, el, stops, props2) {
const dimImage = getBackgroundImageDimensions(el);
if (!dimImage.width) {
return util.noop;
}
const dimEl = {
width: el.offsetWidth,
height: el.offsetHeight
};
const bgProps = ["bgx", "bgy"].filter((prop2) => prop2 in props2);
const positions = {};
for (const prop2 of bgProps) {
const values = props2[prop2].map(([value]) => value);
const min = Math.min(...values);
const max = Math.max(...values);
const down = values.indexOf(min) < values.indexOf(max);
const diff = max - min;
positions[prop2] = `${(down ? -diff : 0) - (down ? min : max)}px`;
dimEl[prop2 === "bgy" ? "height" : "width"] += diff;
}
const dim = util.Dimensions.cover(dimImage, dimEl);
for (const prop2 of bgProps) {
const attr = prop2 === "bgy" ? "height" : "width";
const overflow = dim[attr] - dimEl[attr];
positions[prop2] = `max(${getBackgroundPos(el, prop2)},-${overflow}px) + ${positions[prop2]}`;
}
const fn = setBackgroundPosFn(bgProps, positions, props2);
return (css2, percent) => {
fn(css2, percent);
css2.backgroundSize = `${dim.width}px ${dim.height}px`;
css2.backgroundRepeat = "no-repeat";
};
}
function getBackgroundPos(el, prop) {
return getCssValue(el, `background-position-${prop.slice(-1)}`, "");
}
function setBackgroundPosFn(bgProps, positions, props2) {
return function(css2, percent) {
for (const prop of bgProps) {
const value = getValue(props2[prop], percent);
css2[`background-position-${prop.slice(-1)}`] = `calc(${positions[prop]} + ${value}px)`;
}
};
}
const loading = {};
const dimensions = {};
function getBackgroundImageDimensions(el) {
const src = util.css(el, "backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/, "$1");
if (dimensions[src]) {
return dimensions[src];
}
const image = new Image();
if (src) {
image.src = src;
if (!image.naturalWidth && !loading[src]) {
util.once(image, "error load", () => {
dimensions[src] = toDimensions(image);
util.trigger(el, util.createEvent("load", false));
});
loading[src] = true;
return toDimensions(image);
}
}
return dimensions[src] = toDimensions(image);
}
function toDimensions(image) {
return {
width: image.naturalWidth,
height: image.naturalHeight
};
}
function parseStops(stops, fn = util.toFloat) {
const result = [];
const { length } = stops;
let nullIndex = 0;
for (let i = 0; i < length; i++) {
let [value, percent] = util.isString(stops[i]) ? stops[i].trim().split(/ (?![^(]*\))/) : [stops[i]];
value = fn(value);
percent = percent ? util.toFloat(percent) / 100 : null;
if (i === 0) {
if (percent === null) {
percent = 0;
} else if (percent) {
result.push([value, 0]);
}
} else if (i === length - 1) {
if (percent === null) {
percent = 1;
} else if (percent !== 1) {
result.push([value, percent]);
percent = 1;
}
}
result.push([value, percent]);
if (percent === null) {
nullIndex++;
} else if (nullIndex) {
const leftPercent = result[i - nullIndex - 1][1];
const p = (percent - leftPercent) / (nullIndex + 1);
for (let j = nullIndex; j > 0; j--) {
result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
}
nullIndex = 0;
}
}
return result;
}
function getStop(stops, percent) {
const index = util.findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
return [
stops[index - 1][0],
stops[index][0],
(percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])
];
}
function getValue(stops, percent) {
const [start, end, p] = getStop(stops, percent);
return start + Math.abs(start - end) * p * (start < end ? 1 : -1);
}
const unitRe = /^-?\d+(?:\.\d+)?(\S+)?/;
function getUnit(stops, defaultUnit) {
var _a;
for (const stop of stops) {
const match = (_a = stop.match) == null ? void 0 : _a.call(stop, unitRe);
if (match) {
return match[1];
}
}
return defaultUnit;
}
function getCssValue(el, prop, value) {
const prev = el.style[prop];
const val = util.css(util.css(el, prop, value), prop);
el.style[prop] = prev;
return val;
}
function fillObject(keys2, value) {
return keys2.reduce((data, prop) => {
data[prop] = value;
return data;
}, {});
}
function ease(percent, easing) {
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, 1 - easing);
}
var SliderParallax = {
props: {
parallax: Boolean,
parallaxTarget: Boolean,
parallaxStart: String,
parallaxEnd: String,
parallaxEasing: Number
},
data: {
parallax: false,
parallaxTarget: false,
parallaxStart: 0,
parallaxEnd: 0,
parallaxEasing: 0
},
observe: [
resize({
target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
filter: ({ parallax }) => parallax
}),
scroll({ filter: ({ parallax }) => parallax })
],
computed: {
parallaxTarget({ parallaxTarget }, $el) {
return parallaxTarget && util.query(parallaxTarget, $el) || this.list;
}
},
update: {
read() {
if (!this.parallax) {
return false;
}
const target = this.parallaxTarget;
if (!target) {
return false;
}
const start = util.toPx(this.parallaxStart, "height", target, true);
const end = util.toPx(this.parallaxEnd, "height", target, true);
const percent = ease(util.scrolledOver(target, start, end), this.parallaxEasing);
return { parallax: this.getIndexAt(percent) };
},
write({ parallax }) {
const [prevIndex, slidePercent] = parallax;
const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
const prev = this.slides[prevIndex];
const next = this.slides[nextIndex];
const { triggerShow, triggerShown, triggerHide, triggerHidden } = useTriggers(this);
if (~this.prevIndex) {
for (const i of /* @__PURE__ */ new Set([this.index, this.prevIndex])) {
if (!util.includes([nextIndex, prevIndex], i)) {
triggerHide(this.slides[i]);
triggerHidden(this.slides[i]);
}
}
}
const changed = this.prevIndex !== prevIndex || this.index !== nextIndex;
this.dir = 1;
this.prevIndex = prevIndex;
this.index = nextIndex;
if (prev !== next) {
triggerHide(prev);
}
triggerShow(next);
if (changed) {
triggerShown(prev);
}
this._translate(prev === next ? 1 : slidePercent, prev, next);
},
events: ["scroll", "resize"]
},
methods: {
getIndexAt(percent) {
const index = percent * (this.length - 1);
return [Math.floor(index), index % 1];
}
}
};
function useTriggers(cmp) {
const { clsSlideActive, clsEnter, clsLeave } = cmp;
return { triggerShow, triggerShown, triggerHide, triggerHidden };
function triggerShow(el) {
if (util.hasClass(el, clsLeave)) {
triggerHide(el);
triggerHidden(el);
}
if (!util.hasClass(el, clsSlideActive)) {
util.trigger(el, "beforeitemshow", [cmp]);
util.trigger(el, "itemshow", [cmp]);
}
}
function triggerShown(el) {
if (util.hasClass(el, clsEnter)) {
util.trigger(el, "itemshown", [cmp]);
}
}
function triggerHide(el) {
if (!util.hasClass(el, clsSlideActive)) {
triggerShow(el);
}
if (util.hasClass(el, clsEnter)) {
triggerShown(el);
}
if (!util.hasClass(el, clsLeave)) {
util.trigger(el, "beforeitemhide", [cmp]);
util.trigger(el, "itemhide", [cmp]);
}
}
function triggerHidden(el) {
if (util.hasClass(el, clsLeave)) {
util.trigger(el, "itemhidden", [cmp]);
}
}
}
var SliderReactive = {
update: {
write() {
if (this.stack.length || this.dragging || this.parallax) {
return;
}
const index = this.getValidIndex();
if (!~this.prevIndex || this.index !== index) {
this.show(index);
} else {
this._translate(1);
}
},
events: ["resize"]
}
};
var SliderPreload = {
observe: lazyload({
target: ({ slides }) => slides,
targets: (instance) => instance.getAdjacentSlides()
}),
methods: {
getAdjacentSlides() {
return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
}
}
};
function translate(value = 0, unit = "%") {
return value ? `translate3d(${value + unit}, 0, 0)` : "";
}
function triggerUpdate(el, type, data) {
util.trigger(el, util.createEvent(type, false, false, data));
}
function withResolvers() {
let resolve;
return { promise: new Promise((res) => resolve = res), resolve };
}
function Transitioner(prev, next, dir, { center, easing, list }) {
const from = prev ? getLeft(prev, list, center) : getLeft(next, list, center) + util.dimensions(next).width * dir;
const to = next ? getLeft(next, list, center) : from + util.dimensions(prev).width * dir * (util.isRtl ? -1 : 1);
const { promise, resolve } = withResolvers();
return {
dir,
show(duration, percent = 0, linear) {
const timing = linear ? "linear" : easing;
duration -= Math.round(duration * util.clamp(percent, -1, 1));
util.css(list, "transitionProperty", "none");
this.translate(percent);
util.css(list, "transitionProperty", "");
percent = prev ? percent : util.clamp(percent, 0, 1);
triggerUpdate(this.getItemIn(), "itemin", { percent, duration, timing, dir });
prev && triggerUpdate(this.getItemIn(true), "itemout", {
percent: 1 - percent,
duration,
timing,
dir
});
util.Transition.start(
list,
{ transform: translate(-to * (util.isRtl ? -1 : 1), "px") },
duration,
timing
).then(resolve, util.noop);
return promise;
},
cancel() {
return util.Transition.cancel(list);
},
reset() {
util.css(list, "transform", "");
},
async forward(duration, percent = this.percent()) {
await this.cancel();
return this.show(duration, percent, true);
},
translate(percent) {
if (percent === this.percent()) {
return;
}
const distance = this.getDistance() * dir * (util.isRtl ? -1 : 1);
util.css(
list,
"transform",
translate(
util.clamp(
-to + (distance - distance * percent),
-getWidth(list),
util.dimensions(list).width
) * (util.isRtl ? -1 : 1),
"px"
)
);
const actives = this.getActives();
const itemIn = this.getItemIn();
const itemOut = this.getItemIn(true);
percent = prev ? util.clamp(percent, -1, 1) : 0;
for (const slide of util.children(list)) {
const isActive = util.includes(actives, slide);
const isIn = slide === itemIn;
const isOut = slide === itemOut;
const translateIn = isIn || !isOut && (isActive || dir * (util.isRtl ? -1 : 1) === -1 ^ getElLeft(slide, list) > getElLeft(prev || next));
triggerUpdate(slide, `itemtranslate${translateIn ? "in" : "out"}`, {
dir,
percent: isOut ? 1 - percent : isIn ? percent : isActive ? 1 : 0
});
}
},
percent() {
return Math.abs(
(new DOMMatrix(util.css(list, "transform")).m41 * (util.isRtl ? -1 : 1) + from) / (to - from)
);
},
getDistance() {
return Math.abs(to - from);
},
getItemIn(out = false) {
let actives = this.getActives();
let nextActives = inView(list, getLeft(next || prev, list, center));
if (out) {
const temp = actives;
actives = nextActives;
nextActives = temp;
}
return nextActives[util.findIndex(nextActives, (el) => !util.includes(actives, el))];
},
getActives() {
return inView(list, getLeft(prev || next, list, center));
}
};
}
function getLeft(el, list, center) {
const left = getElLeft(el, list);
return center ? left - centerEl(el, list) : Math.min(left, getMax(list));
}
function getMax(list) {
return Math.max(0, getWidth(list) - util.dimensions(list).width);
}
function getWidth(list, index) {
return util.sumBy(util.children(list).slice(0, index), (el) => util.dimensions(el).width);
}
function centerEl(el, list) {
return util.dimensions(list).width / 2 - util.dimensions(el).width / 2;
}
function getElLeft(el, list) {
return el && (util.position(el).left + (util.isRtl ? util.dimensions(el).width - util.dimensions(list).width : 0)) * (util.isRtl ? -1 : 1) || 0;
}
function inView(list, listLeft) {
listLeft -= 1;
const listWidth = util.dimensions(list).width;
const listRight = listLeft + listWidth + 2;
return util.children(list).filter((slide) => {
const slideLeft = getElLeft(slide, list);
const slideRight = slideLeft + Math.min(util.dimensions(slide).width, listWidth);
return slideLeft >= listLeft && slideRight <= listRight;
});
}
var Component = {
mixins: [Class, Slider, SliderReactive, SliderParallax, SliderPreload],
props: {
center: Boolean,
sets: Boolean,
active: String
},
data: {
center: false,
sets: false,
attrItem: "uk-slider-item",
selList: ".uk-slider-items",
selNav: ".uk-slider-nav",
clsContainer: "uk-slider-container",
active: "all",
Transitioner
},
computed: {
finite({ finite }) {
return finite || isFinite(this.list, this.center);
},
maxIndex() {
if (!this.finite || this.center && !this.sets) {
return this.length - 1;
}
if (this.center) {
return util.last(this.sets);
}
let lft =