@oscarpalmer/oui 0.18.0 → 0.20.0

package/dist/js/splitter.full.js

@@ -1,605 +0,0 @@
-function isNumber(value) {
-	return typeof value === "number" && !Number.isNaN(value);
-}
-function isPlainObject(value) {
-	if (value === null || typeof value !== "object") return false;
-	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
-}
-
-function compact(array, strict) {
-	if (!Array.isArray(array)) return [];
-	const { length } = array;
-	const compacted = [];
-	for (let index = 0; index < length; index += 1) {
-		const item = array[index];
-		if (item != null) compacted.push(item);
-	}
-	return compacted;
-}
-
-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 join(value, delimiter) {
-	return compact(value).map(getString).join(delimiter );
-}
-function words(value) {
-	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
-}
-var EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
-
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
-}
-var EXPRESSION_WHITESPACE = /^\s*$/;
-
-function round(value, decimals) {
-	if (typeof value !== "number") return NaN;
-	const mod = 10 ** decimals;
-	return Math.round((value + Number.EPSILON) * mod) / mod;
-}
-
-function clamp(value, minimum, maximum, loop) {
-	if (![
-		value,
-		minimum,
-		maximum
-	].every(isNumber)) return NaN;
-	if (value < minimum) return loop === true ? maximum : minimum;
-	return value > maximum ? loop === true ? minimum : maximum : value;
-}
-
-function isEventTarget(value) {
-	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
-}
-function isHTMLOrSVGElement(value) {
-	return value instanceof HTMLElement || value instanceof SVGElement;
-}
-
-function camelCase(value) {
-	return toCase(value, "");
-}
-function capitalize(value) {
-	if (typeof value !== "string" || value.length === 0) return "";
-	return value.length === 1 ? value.toLocaleUpperCase() : `${value.charAt(0).toLocaleUpperCase()}${value.slice(1).toLocaleLowerCase()}`;
-}
-function toCase(value, delimiter, capitalizeAny, capitalizeFirst) {
-	if (typeof value !== "string") return "";
-	if (value.length < 1) return value;
-	const parts = words(value);
-	const partsLength = parts.length;
-	const result = [];
-	for (let partIndex = 0; partIndex < partsLength; partIndex += 1) {
-		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === "s" ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, "$1-$2").split("-");
-		const itemsLength = items.length;
-		const partResult = [];
-		let itemCount = 0;
-		for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
-			const item = items[itemIndex];
-			if (item.length === 0) continue;
-			if (itemCount === 0 && partIndex === 0 && true) partResult.push(item.toLocaleLowerCase());
-			else partResult.push(capitalize(item));
-			itemCount += 1;
-		}
-		result.push(join(partResult, delimiter));
-	}
-	return join(result, delimiter);
-}
-var EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
-var EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
-
-function getBoolean(value, defaultValue) {
-	return typeof value === "boolean" ? value : defaultValue ?? false;
-}
-function getStyleValue(element, property, computed) {
-	const name = camelCase(property);
-	return computed ? getComputedStyle(element)[name] : element.style[name];
-}
-
-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 getPosition(event) {
-	let x;
-	let y;
-	if (event instanceof MouseEvent) {
-		x = event.clientX;
-		y = event.clientY;
-	} else if (event instanceof TouchEvent) {
-		x = event.touches[0]?.clientX;
-		y = event.touches[0]?.clientY;
-	}
-	return typeof x === "number" && typeof y === "number" ? {
-		x,
-		y
-	} : void 0;
-}
-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 setElementValues(element, first, second, callback) {
-	if (!isHTMLOrSVGElement(element)) return;
-	if (isPlainObject(first)) {
-		const entries = Object.entries(first);
-		const { length } = entries;
-		for (let index = 0; index < length; index += 1) {
-			const [key, value] = entries[index];
-			callback(element, key, value);
-		}
-	} else if (typeof first === "string") callback(element, first, second);
-}
-function updateElementValue(element, key, value, set, remove, json) {
-	if (isNullableOrWhitespace(value)) remove.call(element, key);
-	else set.call(element, key, String(value));
-}
-
-function getStyles(element, properties, computed) {
-	const styles = {};
-	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) return styles;
-	const { length } = properties;
-	for (let index = 0; index < length; index += 1) {
-		const property = properties[index];
-		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
-	}
-	return styles;
-}
-function setStyles(element, styles) {
-	setElementValues(element, styles, null, updateStyleProperty);
-}
-function toggleStyles(element, styles) {
-	function toggle(set) {
-		hasSet = set;
-		let next;
-		if (set) {
-			values = getStyles(element, keys);
-			next = styles;
-		} else {
-			next = { ...values };
-			values = {};
-			for (const key of keys) values[key] = void 0;
-		}
-		setStyles(element, next);
-	}
-	const keys = Object.keys(styles);
-	let hasSet = false;
-	let values = {};
-	return {
-		set() {
-			if (!hasSet) toggle(true);
-		},
-		remove() {
-			if (hasSet) toggle(false);
-		}
-	};
-}
-function updateStyleProperty(element, key, value) {
-	updateElementValue(element, key, value, function(property, value$1) {
-		this.style[property] = value$1;
-	}, function(property) {
-		this.style[property] = "";
-	});
-}
-
-function getSupport() {
-	if (window == null || navigator == null) return false;
-	if ("matchMedia" in window) {
-		const media = matchMedia?.("(pointer: coarse)");
-		if (typeof media?.matches === "boolean" && media.matches) return true;
-	}
-	if ("ontouchstart" in window) return true;
-	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
-	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
-	return false;
-}
-var touch_default = (() => {
-	let support = getSupport();
-	const instance = Object.create({
-		get() {
-			return support;
-		},
-		update() {
-			support = getSupport();
-			return support;
-		}
-	});
-	Object.defineProperty(instance, "value", { get() {
-		return support;
-	} });
-	return instance;
-})();
-
-class OuiSplitterElement extends HTMLElement {
-    static observedAttributes = ['max', 'min', 'size', 'type'];
-    #splitter;
-    // Getters and setters
-    get max() {
-        return this.#splitter.values.max;
-    }
-    set max(value) {
-        this.setAttribute('max', String(value));
-    }
-    get min() {
-        return this.#splitter.values.min;
-    }
-    set min(value) {
-        this.setAttribute('min', String(value));
-    }
-    get size() {
-        return this.#splitter.values.now.current;
-    }
-    set size(value) {
-        this.setAttribute('size', String(value));
-    }
-    get type() {
-        return this.getAttribute('type') ?? 'vertical';
-    }
-    set type(value) {
-        this.setAttribute('type', value);
-    }
-    // Constructor
-    constructor() {
-        super();
-        const panels = [...this.children].filter(child => child instanceof HTMLElement);
-        if (panels.length !== 2) {
-            throw new Error(`${SELECTOR} must have exactly two panels.`);
-        }
-        this.#splitter = new Splitter(this, panels);
-    }
-    // Methods
-    connectedCallback() {
-        this.#splitter.updateConnections(1);
-    }
-    disconnectedCallback() {
-        this.#splitter.updateConnections(0);
-    }
-    attributeChangedCallback(name) {
-        switch (name) {
-            case 'max':
-            case 'min':
-            case 'size':
-                this.#splitter.updateValues();
-                break;
-            case 'type':
-                this.#splitter.updateOrientation();
-                break;
-        }
-    }
-}
-let index = 0;
-class Splitter {
-    element;
-    handle;
-    panels;
-    rectangle;
-    separator;
-    types;
-    values;
-    constructor(element, panels) {
-        this.element = element;
-        this.panels = panels;
-        if (isNullableOrWhitespace(element.id)) {
-            element.id = `oui_splitter_${++index}`;
-        }
-        this.values = getValues(element);
-        this.handle = createHandle();
-        this.rectangle = element.getBoundingClientRect();
-        this.separator = createSeparator(this);
-        this.separator.append(this.handle);
-        panels[0].insertAdjacentElement('afterend', this.separator);
-        this.updateOrientation();
-        this.updateValues();
-    }
-    updateConnections(add) {
-        const method = METHODS_CONNECT[add];
-        MAPPED_ELEMENTS[method](this.element, this);
-        MAPPED_ELEMENTS[method](this.handle, this);
-        MAPPED_ELEMENTS[method](this.separator, this);
-        if (this.types.auto) {
-            RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
-        }
-    }
-    updateOrientation() {
-        this.types = getTypes(this);
-        if (this.types.auto) {
-            RESIZE_OBSERVER.observe(this.element);
-        }
-        else {
-            RESIZE_OBSERVER.unobserve(this.element);
-        }
-        if (this.types.horizontal) {
-            this.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-        }
-        else {
-            this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-        }
-        setAriaOrientation(this);
-    }
-    updateValues() {
-        this.values = getValues(this.element);
-        requestAnimationFrame(() => {
-            setSize(this, this.values.now.current);
-            setAriaValue(this);
-        });
-    }
-}
-//
-function createHandle() {
-    const handle = document.createElement('span');
-    handle.setAttribute('aria-hidden', 'true');
-    handle.setAttribute(ATTRIBUTE_HANDLE, '');
-    return handle;
-}
-function createSeparator(splitter) {
-    const separator = document.createElement('div');
-    separator.role = 'separator';
-    separator.tabIndex = 0;
-    separator.setAttribute('aria-controls', splitter.element.id);
-    separator.setAttribute('aria-label', 'Resize panels');
-    separator.setAttribute(ATTRIBUTE_SEPARATOR, '');
-    return separator;
-}
-function getContained(min, value, max) {
-    return round(clamp(value, min, max), VALUE_DECIMALS);
-}
-function getSize(splitter, value) {
-    const { height, left, top, width } = splitter.rectangle;
-    const offset = value - (splitter.types.horizontal ? top : left);
-    const fraction = offset / (splitter.types.horizontal ? height : width);
-    return getContained(splitter.values.min, fraction, splitter.values.max);
-}
-function getTypes(splitter, width, height) {
-    const type = splitter.element.getAttribute('type')?.trim() ?? '';
-    if (type === 'horizontal') {
-        return {
-            auto: false,
-            horizontal: true,
-        };
-    }
-    if (type === 'auto') {
-        return {
-            auto: true,
-            horizontal: (height ?? splitter.rectangle.height) >
-                (width ?? splitter.rectangle.width),
-        };
-    }
-    return {
-        auto: false,
-        horizontal: false,
-    };
-}
-function getValue(element, name, defaultValue) {
-    const value = element.getAttribute(name);
-    if (isNullableOrWhitespace(value)) {
-        return defaultValue;
-    }
-    const parsed = Number.parseFloat(value);
-    if (Number.isNaN(parsed)) {
-        return defaultValue;
-    }
-    if (parsed < 0) {
-        return defaultValue;
-    }
-    return parsed > 1 ? parsed / NAVIGATION_MAXIMUM_TOTAL : parsed;
-}
-function getValues(element) {
-    const values = {
-        max: getValue(element, 'max', NAVIGATION_MAXIMUM_PERCENTAGE),
-        min: getValue(element, 'min', NAVIGATION_MINIMUM_PERCENTAGE),
-        now: {
-            current: 0.5,
-            previous: 0.5,
-        },
-    };
-    const value = getContained(values.min, getValue(element, 'size', values.now.current), values.max);
-    values.now.current = value;
-    values.now.previous = value;
-    return values;
-}
-function onEnd(reset) {
-    if (splitter == null) {
-        return;
-    }
-    splitter.handle.removeAttribute(ATTRIBUTE_ACTIVE);
-    splitter.separator.removeAttribute(ATTRIBUTE_ACTIVE);
-    if (reset) {
-        setSize(splitter, splitter.values.now.previous);
-    }
-    else {
-        splitter.values.now.previous = splitter.values.now.current;
-    }
-    splitter = undefined;
-    STYLING_TOGGLER.remove();
-}
-function onKeydown(event) {
-    switch (true) {
-        case KEYS_ALL.has(event.key):
-            onNavigate(event);
-            break;
-        case event.key === 'Escape':
-            onEnd(true);
-            break;
-    }
-}
-function onNavigate(event) {
-    const splitter = MAPPED_ELEMENTS.get(findAncestor(event.target, '[oui-splitter-separator]'));
-    if (splitter == null) {
-        return;
-    }
-    const { types, values } = splitter;
-    if (KEYS_ABSOLUTE.has(event.key)) {
-        setSize(splitter, event.key === 'End' ? values.max : values.min, true);
-        return;
-    }
-    if ((types.horizontal && !KEYS_HORIZONTAL.has(event.key)) ||
-        !(types.horizontal || KEYS_VERTICAL.has(event.key))) {
-        return;
-    }
-    const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
-    setSize(splitter, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
-}
-function onObservation(entries) {
-    if (frame != null) {
-        cancelAnimationFrame(frame);
-    }
-    frame = requestAnimationFrame(() => {
-        for (const entry of entries) {
-            const splitter = MAPPED_ELEMENTS.get(entry.target);
-            if (splitter == null) {
-                return;
-            }
-            splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
-            if (splitter.types.horizontal) {
-                splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-            }
-            else {
-                splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-            }
-            setAriaOrientation(splitter);
-        }
-        frame = undefined;
-    });
-}
-function onPointerdown(event) {
-    if ((event.type === 'mousedown' && touch_default.value) ||
-        (event.type === 'touchstart' && !touch_default.value)) {
-        return;
-    }
-    splitter = MAPPED_ELEMENTS.get(findAncestor(event.target, SELECTOR_HANDLE));
-    if (splitter == null) {
-        return;
-    }
-    if (touch_default.value) {
-        event.preventDefault();
-    }
-    splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, '');
-    splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, '');
-    splitter.rectangle = splitter.element.getBoundingClientRect();
-    STYLING_TOGGLER.set();
-}
-function onPointermove(event) {
-    if (splitter == null) {
-        return;
-    }
-    const position = getPosition(event);
-    if (position != null) {
-        splitter.values.now.current = getSize(splitter, splitter.types.horizontal ? position.y : position.x);
-        setSize(splitter, splitter.values.now.current);
-    }
-}
-function onPointerup() {
-    if (splitter != null) {
-        onEnd(false);
-    }
-}
-function setAriaOrientation(splitter) {
-    splitter.separator.setAttribute('aria-orientation', splitter.types.horizontal ? 'horizontal' : 'vertical');
-}
-function setAriaValue(splitter) {
-    splitter.separator.setAttribute('aria-valuemax', String(splitter.values.max));
-    splitter.separator.setAttribute('aria-valuemin', String(splitter.values.min));
-    splitter.separator.setAttribute('aria-valuenow', String(splitter.values.now.current));
-}
-function setSize(splitter, size, previous) {
-    splitter.values.now.current = size;
-    if (previous) {
-        splitter.values.now.previous = size;
-    }
-    splitter.element.style.setProperty('--oui-splitter-size', `${size}`);
-    setAriaValue(splitter);
-}
-//
-const SELECTOR = 'oui-splitter';
-const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
-const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
-const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
-const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
-const KEYS_ABSOLUTE = new Set(['End', 'Home']);
-const KEYS_HORIZONTAL = new Set(['ArrowDown', 'ArrowUp']);
-const KEYS_NEGATIVE = new Set(['ArrowLeft', 'ArrowUp']);
-const KEYS_VERTICAL = new Set(['ArrowLeft', 'ArrowRight']);
-const KEYS_ALL = new Set([
-    ...KEYS_ABSOLUTE,
-    ...KEYS_HORIZONTAL,
-    ...KEYS_VERTICAL,
-]);
-const MAPPED_ELEMENTS = new WeakMap();
-const METHODS_CONNECT = ['delete', 'set'];
-const METHODS_OBSERVE = ['unobserve', 'observe'];
-const NAVIGATION_MAXIMUM_PERCENTAGE = 0.9;
-const NAVIGATION_MAXIMUM_TOTAL = 100;
-const NAVIGATION_MINIMUM_PERCENTAGE = 0.1;
-const NAVIGATION_MODIFIER = 0.05;
-const RESIZE_OBSERVER = new ResizeObserver(onObservation);
-const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
-const STYLING_TOGGLER = toggleStyles(document.body, {
-    touchAction: 'none',
-    userSelect: 'none',
-    webkitUserSelect: 'none',
-});
-const VALUE_DECIMALS = 6;
-let frame;
-let splitter;
-//
-customElements.define(SELECTOR, OuiSplitterElement);
-on(document, 'keydown', onKeydown);
-on(document, 'mousedown', onPointerdown);
-on(document, 'pointermove', onPointermove);
-on(document, 'pointerup', onPointerup);
-on(document, 'touchcancel', onPointerup, { passive: false });
-on(document, 'touchstart', onPointerdown, { passive: false });
-
-export { OuiSplitterElement };