@oscarpalmer/oui 0.17.0 → 0.18.0

package/dist/js/tooltip.full.js

@@ -0,0 +1,679 @@
+function getString(value) {
+	if (typeof value === "string") return value;
+	if (value == null) return "";
+	if (typeof value !== "object") return String(value);
+	const asString = String(value.valueOf?.() ?? value);
+	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
+}
+
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
+}
+var EXPRESSION_WHITESPACE$1 = /^\s*$/;
+
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+
+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 >= CALCULATION_TOTAL) {
+				const median = values.sort().slice(2, -2).reduce((first, second) => first + second, 0) / (values.length - CALCULATION_TRIM);
+				resolve(median);
+			} else requestAnimationFrame(step);
+		}
+		requestAnimationFrame(step);
+	});
+}
+function noop() {}
+var CALCULATION_TOTAL = 10;
+var CALCULATION_TRIM = 4;
+calculate().then((value) => {
+});
+
+function createEventOptions(options) {
+	return {
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
+		passive: getBoolean(options?.passive, true),
+		signal: options?.signal
+	};
+}
+function on(target, type, listener, options) {
+	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
+	const extended = createEventOptions(options);
+	target.addEventListener(type, listener, extended);
+	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;
+}
+
+function attributable(attribute, add, remove) {
+    const observer = new MutationObserver(entries => {
+        const { length } = entries;
+        for (let index = 0; index < length; index += 1) {
+            const entry = entries[index];
+            if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+                if (entry.target.hasAttribute(attribute)) {
+                    handleAdded(attribute, [entry.target], add);
+                }
+                else {
+                    handleRemoved([entry.target], remove);
+                }
+            }
+            else if (entry.type === 'childList') {
+                handleAdded(attribute, entry.addedNodes, add);
+                handleRemoved(entry.removedNodes, remove);
+            }
+        }
+    });
+    observer.observe(document, {
+        attributeFilter: [attribute],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    requestAnimationFrame(() => {
+        handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+    });
+}
+function handleAdded(attribute, nodes, add) {
+    const elements = [...nodes].filter(node => node instanceof HTMLElement);
+    const { length } = elements;
+    for (let index = 0; index < length; index += 1) {
+        const element = elements[index];
+        if (element.hasAttribute(attribute)) {
+            add(element);
+        }
+    }
+}
+function handleRemoved(nodes, remove) {
+    const elements = [...nodes].filter(node => node instanceof HTMLElement);
+    const { length } = elements;
+    for (let index = 0; index < length; index += 1) {
+        remove(elements[index]);
+    }
+}
+
+class Floatable {
+    options;
+    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 = undefined;
+        this.options.content = undefined;
+    }
+    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) {
+        void state.order.pop()?.toggle(false, true);
+    }
+}
+function closeAll() {
+    const state = getState();
+    const floatables = [...(state?.active ?? [])];
+    state?.active.clear();
+    for (const floatable of floatables) {
+        void floatable.toggle(false, true);
+    }
+}
+function closeNonInteractive(state) {
+    for (const floatable of state.active) {
+        if (!floatable.options.interactive) {
+            void 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$1, '');
+    }
+    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$1(event) {
+    const related = findAncestor(event.target, SELECTOR_ALL);
+    if (!(related instanceof HTMLElement)) {
+        closeAll();
+    }
+    else if (related.hasAttribute(ATTRIBUTE_CONTENT$1)) {
+        closeAbove(related);
+    }
+    else if (!isDisabled(related)) {
+        toggle$1(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$1);
+    if (!(related instanceof HTMLElement)) {
+        return;
+    }
+    closeAbove(related);
+    const floatable = state.mapped.get(related);
+    if (floatable != null) {
+        void floatable.toggle(false);
+    }
+}
+function stop(floatable) {
+    if (floatable.frame != null) {
+        cancelAnimationFrame(floatable.frame);
+    }
+    floatable.frame = undefined;
+}
+function toggle$1(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$1);
+    if (content == null) {
+        closeAll();
+    }
+    else {
+        closeAbove(content);
+    }
+    void 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.inset = `${top}px auto auto ${left}px`;
+        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$1 = '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$1}]`;
+const SELECTOR_CONTENT$1 = `[${ATTRIBUTE_CONTENT$1}]`;
+//
+if (window._oscarpalmer_oui_floatable == null) {
+    Object.defineProperty(window, '_oscarpalmer_oui_floatable', {
+        enumerable: false,
+        value: {
+            active: new Set(),
+            mapped: new Map(),
+            order: [],
+        },
+        writable: false,
+    });
+    on(document, 'keydown', event => {
+        onKeyDown(event);
+    });
+    on(document, 'click', event => {
+        onClick$1(event);
+    });
+}
+
+class Tooltip {
+    attributes;
+    floatable;
+    timer;
+    constructor(anchor, content) {
+        this.attributes = content.attributes;
+        this.floatable = new Floatable({
+            anchor,
+            content: content.element,
+            defaultPosition: 'vertical',
+            interactive: false,
+            preferAbove: true,
+            positionAttribute: ATTRIBUTE_POSITION,
+        });
+        anchor.insertAdjacentElement('afterend', content.element);
+        TOOLTIPS_ALL.set(content.element, this);
+    }
+    destroy() {
+        const { attributes, floatable } = this;
+        TOOLTIPS_ACTIVE.delete(this);
+        TOOLTIPS_ALL.delete(floatable.options.anchor);
+        TOOLTIPS_ALL.delete(floatable.options.content);
+        reset(floatable.options.anchor, attributes);
+        floatable.options.content.remove();
+        floatable.destroy();
+        this.attributes = undefined;
+        this.floatable = undefined;
+    }
+}
+function addTooltip(anchor) {
+    if (TOOLTIPS_ALL.has(anchor)) {
+        return;
+    }
+    const content = getContent(anchor);
+    if (content != null) {
+        TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, content));
+    }
+}
+function closeTooltips(next) {
+    const tooltips = [...TOOLTIPS_ACTIVE];
+    for (const active of tooltips) {
+        if (active === next) {
+            continue;
+        }
+        if (active.timer != null) {
+            clearTimeout(active.timer);
+        }
+        active.floatable.options.content.removeAttribute('oui-tooltip-content-active');
+        requestAnimationFrame(() => {
+            active.timer = setTimeout(() => {
+                TOOLTIPS_ACTIVE.delete(active);
+                active.floatable.toggle(false);
+            }, delay);
+        });
+    }
+}
+function getContent(anchor) {
+    const attributes = {
+        ariaDescribedby: anchor.getAttribute('aria-describedby'),
+        ariaLabelledBy: anchor.getAttribute('aria-labelledby'),
+    };
+    const wrapper = getWrapper(anchor);
+    const labelledElements = getElements(attributes.ariaLabelledBy);
+    if (labelledElements.length > 0) {
+        anchor.setAttribute('aria-labelledby', wrapper.id);
+        for (const element of labelledElements) {
+            wrapper.append(element);
+        }
+        return {
+            attributes,
+            element: wrapper,
+        };
+    }
+    const describedElements = getElements(attributes.ariaDescribedby);
+    if (describedElements.length > 0) {
+        anchor.setAttribute('aria-describedby', wrapper.id);
+        for (const element of describedElements) {
+            wrapper.append(element);
+        }
+        return {
+            attributes,
+            element: wrapper,
+        };
+    }
+    let content = anchor.getAttribute('aria-label');
+    if (isNullableOrWhitespace(content)) {
+        content = anchor.getAttribute('aria-description');
+    }
+    if (isNullableOrWhitespace(content)) {
+        return;
+    }
+    const paragraph = document.createElement('p');
+    paragraph.textContent = content;
+    wrapper.append(paragraph);
+    return {
+        attributes,
+        element: wrapper,
+    };
+}
+function getElements(attribute) {
+    const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
+    const elements = [];
+    for (const id of ids) {
+        if (isNullableOrWhitespace(id)) {
+            continue;
+        }
+        const element = document.querySelector(`#${id}`);
+        if (element instanceof HTMLElement) {
+            const cloned = element.cloneNode(true);
+            cloned.hidden = false;
+            elements.push(cloned);
+        }
+    }
+    return elements;
+}
+function getWrapper(anchor) {
+    const wrapper = document.createElement('div');
+    wrapper.setAttribute(ATTRIBUTE_CONTENT, '');
+    wrapper.className = anchor.getAttribute(ATTRIBUTE_CLASS) ?? '';
+    wrapper.hidden = true;
+    wrapper.id = `${SELECTOR}-${++index}`;
+    wrapper.role = 'tooltip';
+    wrapper.tabIndex = -1;
+    return wrapper;
+}
+function onActivate(event) {
+    onToggle(event, true);
+}
+function onClick(event) {
+    if (findAncestor(event.target, SELECTOR_CONTENT) != null) {
+        event.stopPropagation();
+    }
+}
+function onDeactivate(event) {
+    onToggle(event, false);
+}
+function onToggle(event, activate) {
+    if (toggle != null) {
+        cancelAnimationFrame(toggle);
+    }
+    toggle = requestAnimationFrame(() => {
+        toggle = undefined;
+        const element = findAncestor(event.target, SELECTOR_FULL);
+        const tooltip = TOOLTIPS_ALL.get(element);
+        if (TOOLTIPS_ACTIVE.size > 0) {
+            closeTooltips(tooltip);
+        }
+        if (tooltip == null ||
+            tooltip.floatable.options.content.hasAttribute('oui-tooltip-content-active') === activate) {
+            return;
+        }
+        if (activate) {
+            if (tooltip.timer != null) {
+                clearTimeout(tooltip.timer);
+            }
+            TOOLTIPS_ACTIVE.add(tooltip);
+            tooltip.floatable.toggle(true);
+            requestAnimationFrame(() => {
+                tooltip.floatable.options.content.setAttribute('oui-tooltip-content-active', '');
+            });
+            return;
+        }
+        tooltip.floatable.options.content.removeAttribute('oui-tooltip-content-active');
+        tooltip.timer ??= setTimeout(() => {
+            TOOLTIPS_ACTIVE.delete(tooltip);
+            tooltip.floatable.toggle(false);
+        }, delay);
+    });
+}
+function removeTooltip(element) {
+    if (!element.hasAttribute(ATTRIBUTE_CONTENT)) {
+        TOOLTIPS_ALL.get(element)?.destroy();
+    }
+}
+function reset(anchor, attributes) {
+    if (attributes.ariaDescribedby == null) {
+        anchor.removeAttribute('aria-describedby');
+    }
+    else {
+        anchor.setAttribute('aria-describedby', attributes.ariaDescribedby);
+    }
+}
+function setDelay(value) {
+    delay = typeof value === 'number' && value >= 0 ? value : delay;
+}
+//
+const SELECTOR = 'oui-tooltip';
+const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
+const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
+const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
+const EXPRESSION_WHITESPACE = /\s+/;
+const TOOLTIPS_ACTIVE = new Set();
+const TOOLTIPS_ALL = new WeakMap();
+let delay = 250;
+let index = 0;
+let toggle;
+//
+attributable(SELECTOR, addTooltip, removeTooltip);
+on(document, 'click', onClick, { capture: true });
+on(document, 'focusin', onActivate);
+on(document, 'focusout', onDeactivate);
+on(document, 'mousemove', onActivate);
+on(document, 'touchstart', onActivate);
+
+export { setDelay };