@oscarpalmer/oui 0.16.0 → 0.18.0

package/dist/js/floatable.js

@@ -1,134 +1,261 @@
-class Floatable {
-  constructor(anchor, content) {
-    this.anchor = anchor;
-    this.content = content;
-    setStyles(content);
-  }
-  activate;
-  active = false;
-  deactivate;
-  frame;
-  destroy() {
-    this.activate = void 0;
-    this.deactivate = void 0;
-    this.frame = void 0;
-    this.anchor = void 0;
-    this.content = void 0;
-  }
-}
-function activate(floatable, active, order, time) {
-  stop(floatable);
-  if (floatable.active) {
-    return;
-  }
-  if (time == null || time === 0) {
-    onActivate(floatable, active, order);
-  } else {
-    floatable.activate = +setTimeout(() => {
-      onActivate(floatable, active, order);
-    }, time);
-  }
-}
-function deactivate(floatable, active, order, time) {
-  stop(floatable);
-  if (!floatable.active) {
-    return;
-  }
-  if (time == null || time === 0) {
-    onDeactivate(floatable, active, order);
-  } else {
-    floatable.deactivate = +setTimeout(() => {
-      onDeactivate(floatable, active, order);
-    }, time);
-  }
-}
-function getX(anchor, content) {
-  if (content.width + 2 * margin >= window.innerWidth) {
-    return {
-      left: margin,
-      right: margin
-    };
-  }
-  const left = anchor.left + (anchor.width - content.width) / 2;
-  const right = window.innerWidth - margin;
-  if (left < margin) {
-    return {
-      left: margin
-    };
-  }
-  if (left + content.width > right) {
-    return {
-      right: margin
-    };
-  }
-  return {
-    left
-  };
-}
-function getY(anchor, content) {
-  let top = anchor.top - content.height - margin;
-  if (top - margin >= 0) {
-    return top;
-  }
-  top = anchor.bottom + margin;
-  if (top + content.height + margin <= window.innerHeight) {
-    return top;
-  }
-  return anchor.top + (anchor.height - content.height) / 2;
-}
-function onActivate(floatable, active, order) {
-  floatable.active = true;
-  active.add(floatable);
-  if (order != null) {
-    order.push(floatable);
-  }
-  document.body.append(floatable.content);
-  floatable.content.hidden = false;
-  update(floatable);
-}
-function onDeactivate(floatable, active, order) {
-  floatable.active = false;
-  active.delete(floatable);
-  const index = order?.indexOf(floatable) ?? -1;
-  if (index > -1) {
-    order?.splice(index, 1);
-  }
-  floatable.content.hidden = true;
-  floatable.anchor.insertAdjacentElement("afterend", floatable.content);
-}
-function update(floatable) {
-  function run() {
-    const anchor = floatable.anchor.getBoundingClientRect();
-    const content = floatable.content.getBoundingClientRect();
-    const { left, right } = getX(anchor, content);
-    const top = getY(anchor, content);
-    floatable.content.style.inset = `${top}px ${right == null ? "auto" : `${right}px`} auto ${left == null ? "auto" : `${left}px`}`;
-    floatable.frame = requestAnimationFrame(run);
-  }
-  floatable.frame = requestAnimationFrame(run);
-}
-function setStyles(content) {
-  content.style.position = "fixed";
-  content.style.inset = "0 auto auto 0";
-  content.style.zIndex = "10";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+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);
-  }
-  if (floatable.activate != null) {
-    clearTimeout(floatable.activate);
-  }
-  if (floatable.deactivate != null) {
-    clearTimeout(floatable.deactivate);
-  }
-  floatable.activate = void 0;
-  floatable.deactivate = void 0;
-  floatable.frame = void 0;
-}
-const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
-export {
-  Floatable,
-  activate,
-  deactivate
-};
+	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);
+}
+var ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
+var ATTRIBUTE_CONTENT = "oui-floatable-content";
+var INSERT_AFTEREND = "afterend";
+var POSITION_ABOVE = "above";
+var POSITION_BELOW = "below";
+var POSITION_BOTTOM = "bottom";
+var POSITION_END = "end";
+var POSITION_HORIZONTAL = "horizontal";
+var POSITION_START = "start";
+var POSITION_SUFFIX_END = "-end";
+var POSITION_SUFFIX_START = "-start";
+var POSITION_TOP = "top";
+var POSITION_VERTICAL = "vertical";
+var 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"
+]);
+var PROPERTIES = [
+	"bottom",
+	"left",
+	"right",
+	"top"
+];
+var SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
+var 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 };