@oscarpalmer/oui 0.19.0 → 0.20.0

package/dist/js/floatable.full.js

@@ -1,398 +0,0 @@
-function noop() {}
-function calculate() {
-	return new Promise((resolve) => {
-		const values = [];
-		let last;
-		function step(now) {
-			if (last != null) values.push(now - last);
-			last = now;
-			if (values.length >= TOTAL) resolve(values.sort().slice(TRIM_PART, -TRIM_PART).reduce((first, second) => first + second, 0) / (values.length - TRIM_TOTAL));
-			else requestAnimationFrame(step);
-		}
-		requestAnimationFrame(step);
-	});
-}
-var TOTAL = 10;
-var TRIM_PART = 2;
-var TRIM_TOTAL = 4;
-await calculate();
-function getBoolean(value, defaultValue) {
-	return typeof value === "boolean" ? value : defaultValue ?? false;
-}
-function isEventTarget(value) {
-	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
-}
-function addDelegatedHandler(doc, type, name, passive) {
-	if (DELEGATED.has(name)) return;
-	DELEGATED.add(name);
-	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, { passive });
-}
-function addDelegatedListener(target, type, name, listener, passive) {
-	target[name] ??= /* @__PURE__ */ new Set();
-	target[name].add(listener);
-	addDelegatedHandler(document, type, name, passive);
-	return () => {
-		removeDelegatedListener(target, name, listener);
-	};
-}
-function delegatedEventHandler(event) {
-	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
-	const items = event.composedPath();
-	const { length } = items;
-	let target = items[0];
-	Object.defineProperties(event, {
-		currentTarget: {
-			configurable: true,
-			get() {
-				return target;
-			}
-		},
-		target: {
-			configurable: true,
-			value: target
-		}
-	});
-	for (let index = 0; index < length; index += 1) {
-		const item = items[index];
-		const listeners = item[key];
-		if (item.disabled || listeners == null) continue;
-		target = item;
-		for (const listener of listeners) {
-			listener.call(item, event);
-			if (event.cancelBubble) return;
-		}
-	}
-}
-function getDelegatedName(target, type, options) {
-	if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `${EVENT_PREFIX}${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
-}
-function removeDelegatedListener(target, name, listener) {
-	const handlers = target[name];
-	if (handlers == null || !handlers.has(listener)) return false;
-	handlers.delete(listener);
-	if (handlers.size === 0) target[name] = void 0;
-	return true;
-}
-var DELEGATED = /* @__PURE__ */ new Set();
-var EVENT_PREFIX = "@";
-var EVENT_SUFFIX_ACTIVE = ":active";
-var EVENT_SUFFIX_PASSIVE = ":passive";
-var EVENT_TYPES = new Set([
-	"beforeinput",
-	"click",
-	"dblclick",
-	"contextmenu",
-	"focusin",
-	"focusout",
-	"input",
-	"keydown",
-	"keyup",
-	"mousedown",
-	"mousemove",
-	"mouseout",
-	"mouseover",
-	"mouseup",
-	"pointerdown",
-	"pointermove",
-	"pointerout",
-	"pointerover",
-	"pointerup",
-	"touchend",
-	"touchmove",
-	"touchstart"
-]);
-var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
-var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
-function createEventOptions(options) {
-	return {
-		capture: getBoolean(options?.capture),
-		once: getBoolean(options?.once),
-		passive: getBoolean(options?.passive, true),
-		signal: options?.signal instanceof AbortSignal ? options.signal : void 0
-	};
-}
-function on(target, type, listener, options) {
-	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
-	const extended = createEventOptions(options);
-	const delegated = getDelegatedName(target, type, extended);
-	if (delegated != null) return addDelegatedListener(target, type, delegated, listener, extended.passive);
-	target.addEventListener(type, listener, extended);
-	if (extended.once) return noop;
-	return () => {
-		target.removeEventListener(type, listener, extended);
-	};
-}
-function findAncestor(origin, selector) {
-	if (!(origin instanceof Element) || selector == null) return null;
-	if (typeof selector === "string") {
-		if (origin.matches?.(selector)) return origin;
-		return origin.closest(selector);
-	}
-	if (typeof selector !== "function") return null;
-	if (selector(origin)) return origin;
-	let parent = origin.parentElement;
-	while (parent != null && !selector(parent)) {
-		if (parent === document.body) return null;
-		parent = parent.parentElement;
-	}
-	return parent;
-}
-var Floatable = class {
-	active = false;
-	disabled = false;
-	frame;
-	ignoreFocus = false;
-	constructor(options) {
-		this.options = options;
-		initialize(this);
-	}
-	destroy() {
-		stop(this);
-		const state = getState();
-		state?.active.delete(this);
-		state?.mapped.delete(this.options.anchor);
-		state?.mapped.delete(this.options.content);
-		this.options.anchor = void 0;
-		this.options.content = void 0;
-	}
-	disable() {
-		if (this.disabled) return;
-		this.disabled = true;
-		stop(this);
-		getState()?.active.delete(this);
-	}
-	enable() {
-		if (!this.disabled) return;
-		this.disabled = false;
-		initialize(this);
-	}
-	toggle(active, ignoreFocus) {
-		if (this.disabled || this.active === active) return;
-		const state = getState();
-		if (state == null) return;
-		this.ignoreFocus = !active && (ignoreFocus ?? false);
-		stop(this);
-		if (active) state.active.add(this);
-		else state.active.delete(this);
-		if (this.options.interactive) if (active) state.order.push(this);
-		else {
-			const index = state.order.indexOf(this);
-			if (index > -1) state.order.splice(index, 1);
-		}
-		if (active) activate(this);
-		else deactivate(this);
-	}
-};
-function activate(floatable) {
-	floatable.active = true;
-	document.body.append(floatable.options.content);
-	floatable.options.content.hidden = false;
-	updatePosition(floatable);
-}
-function closeAbove(element) {
-	const state = getState();
-	if (state == null) return;
-	const index = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
-	if (index === -1 || index === state.order.length - 1) return;
-	while (index < state.order.length - 1) state.order.pop()?.toggle(false, true);
-}
-function closeAll() {
-	const state = getState();
-	const floatables = [...state?.active ?? []];
-	state?.active.clear();
-	for (const floatable of floatables) floatable.toggle(false, true);
-}
-function closeNonInteractive(state) {
-	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
-}
-function deactivate(floatable) {
-	floatable.active = false;
-	floatable.options.content.hidden = true;
-	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
-	floatable.options.onAfter?.(false);
-}
-function getState() {
-	return window._oscarpalmer_oui_floatable;
-}
-function getX(anchor, content, position) {
-	if (position.endsWith(POSITION_SUFFIX_END)) {
-		const end = anchor.right - content.width;
-		return end < 0 ? 0 : end;
-	}
-	if (position.endsWith(POSITION_SUFFIX_START)) {
-		const start = anchor.left;
-		return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
-	}
-	if (position.startsWith(POSITION_END)) return anchor.right;
-	if (position.startsWith(POSITION_START)) return anchor.left - content.width;
-	if (position.startsWith(POSITION_HORIZONTAL)) {
-		if (anchor.right + content.width <= window.innerWidth) return anchor.right;
-		return anchor.left - content.width;
-	}
-	const left = anchor.left + (anchor.width - content.width) / 2;
-	return left < 0 ? 0 : left;
-}
-function getY(anchor, content, position, preferAbove) {
-	if (position.startsWith(POSITION_ABOVE)) return anchor.top - content.height;
-	if (position.startsWith(POSITION_BELOW)) return anchor.bottom;
-	if (position.endsWith(POSITION_BOTTOM)) {
-		const bottom = anchor.bottom - content.height;
-		return bottom < 0 ? 0 : bottom;
-	}
-	if (position.endsWith(POSITION_TOP)) {
-		const top = anchor.top;
-		return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
-	}
-	if (position.startsWith(POSITION_VERTICAL)) {
-		if (preferAbove && anchor.top - content.height >= 0) return anchor.top - content.height;
-		if (anchor.bottom + content.height <= document.body.clientHeight) return anchor.bottom;
-		return anchor.top - content.height;
-	}
-	return anchor.top + (anchor.height - content.height) / 2;
-}
-function initialize(floatable) {
-	const { anchor, content, interactive } = floatable.options;
-	if (interactive) {
-		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
-		content.setAttribute(ATTRIBUTE_CONTENT, "");
-	}
-	content.style.position = "fixed";
-	content.style.inset = "0 auto auto 0";
-	content.style.zIndex = "10";
-	const state = getState();
-	state?.mapped.set(anchor, floatable);
-	state?.mapped.set(content, floatable);
-}
-function isDisabled(element) {
-	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
-}
-function onClick(event) {
-	const related = findAncestor(event.target, SELECTOR_ALL);
-	if (!(related instanceof HTMLElement)) closeAll();
-	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
-	else if (!isDisabled(related)) toggle(related);
-}
-function onKeyDown(event) {
-	if (event.key !== "Escape") return;
-	const state = getState();
-	if (state == null || state.active.size === 0) return;
-	closeNonInteractive(state);
-	const related = findAncestor(event.target, SELECTOR_CONTENT);
-	if (!(related instanceof HTMLElement)) return;
-	closeAbove(related);
-	const floatable = state.mapped.get(related);
-	if (floatable != null) floatable.toggle(false);
-}
-function stop(floatable) {
-	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
-	floatable.frame = void 0;
-}
-function toggle(anchor) {
-	const floatable = getState()?.mapped.get(anchor);
-	if (floatable == null) {
-		closeAll();
-		return;
-	}
-	const active = Boolean(floatable.active);
-	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
-	if (content == null) closeAll();
-	else closeAbove(content);
-	floatable.toggle(!active);
-}
-function updatePosition(floatable) {
-	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
-	if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
-	let previousAnchor;
-	let previousContent;
-	let calculated = false;
-	let runOnAfter = false;
-	function run() {
-		const anchor = floatable.options.anchor.getBoundingClientRect();
-		const content = floatable.options.content.getBoundingClientRect();
-		if (calculated) {
-			if (previousAnchor != null && previousContent != null) {
-				if (PROPERTIES.every((property) => anchor[property] === previousAnchor[property]) && PROPERTIES.every((property) => content[property] === previousContent[property])) {
-					floatable.frame = requestAnimationFrame(run);
-					return;
-				}
-			}
-		} else calculated = true;
-		update(anchor, content);
-	}
-	function update(anchor, content) {
-		previousAnchor = anchor;
-		previousContent = content;
-		const left = getX(anchor, content, position);
-		const top = getY(anchor, content, position, floatable.options.preferAbove);
-		if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
-		else floatable.options.content.style.height = "";
-		if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
-		else floatable.options.content.style.width = "";
-		floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-		floatable.frame = requestAnimationFrame(run);
-		if (!runOnAfter) {
-			runOnAfter = true;
-			floatable.options.onAfter?.(true);
-		}
-	}
-	floatable.frame = requestAnimationFrame(run);
-}
-const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
-const ATTRIBUTE_CONTENT = "oui-floatable-content";
-const INSERT_AFTEREND = "afterend";
-const POSITION_ABOVE = "above";
-const POSITION_BELOW = "below";
-const POSITION_BOTTOM = "bottom";
-const POSITION_END = "end";
-const POSITION_HORIZONTAL = "horizontal";
-const POSITION_START = "start";
-const POSITION_SUFFIX_END = "-end";
-const POSITION_SUFFIX_START = "-start";
-const POSITION_TOP = "top";
-const POSITION_VERTICAL = "vertical";
-const POSITIONS = new Set([
-	"above",
-	"above-end",
-	"above-start",
-	"below",
-	"below-end",
-	"below-start",
-	"end",
-	"end-bottom",
-	"end-top",
-	"horizontal",
-	"horizontal-bottom",
-	"horizontal-top",
-	"start",
-	"start-bottom",
-	"start-top",
-	"vertical",
-	"vertical-end",
-	"vertical-start"
-]);
-const PROPERTIES = [
-	"bottom",
-	"left",
-	"right",
-	"top"
-];
-const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-if (window._oscarpalmer_oui_floatable == null) {
-	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
-		enumerable: false,
-		value: {
-			active: /* @__PURE__ */ new Set(),
-			mapped: /* @__PURE__ */ new Map(),
-			order: []
-		},
-		writable: false
-	});
-	on(document, "keydown", (event) => {
-		onKeyDown(event);
-	});
-	on(document, "click", (event) => {
-		onClick(event);
-	});
-}
-export { Floatable, deactivate };