cotomy 0.1.59 → 0.1.62

package/dist/esm/view.js

@@ -0,0 +1,1198 @@
+import cuid from "cuid";
+import { CotomyDebugFeature, CotomyDebugSettings } from "./debug";
+class HandlerEntry {
+    constructor(handle, wrapper, options) {
+        this.handle = handle;
+        this.wrapper = wrapper;
+        this.options = options;
+    }
+    get current() {
+        return this.wrapper ?? this.handle;
+    }
+    equals(entryOrHandle, optionsOrMode, wrapper, mode) {
+        let targetHandle;
+        let targetWrapper;
+        let targetOptions;
+        let compareMode = "strict";
+        if (entryOrHandle instanceof HandlerEntry) {
+            targetHandle = entryOrHandle.handle;
+            targetWrapper = entryOrHandle.wrapper;
+            targetOptions = entryOrHandle.options;
+            compareMode = optionsOrMode ?? "strict";
+        }
+        else {
+            targetHandle = entryOrHandle;
+            if (typeof optionsOrMode === "string") {
+                compareMode = optionsOrMode;
+                targetWrapper = wrapper;
+                targetOptions = undefined;
+            }
+            else {
+                targetOptions = optionsOrMode;
+                targetWrapper = wrapper;
+                compareMode = mode ?? "strict";
+            }
+        }
+        if (this.handle !== targetHandle) {
+            return false;
+        }
+        if (compareMode === "strict" && this.wrapper !== targetWrapper) {
+            return false;
+        }
+        return HandlerEntry.optionsEquals(this.options, targetOptions);
+    }
+    static optionsEquals(left, right) {
+        const getBoolean = (options, key) => options?.[key] ?? false;
+        const getSignal = (options) => options?.signal;
+        const leftSignal = getSignal(left);
+        const rightSignal = getSignal(right);
+        const signalsEqual = leftSignal === rightSignal;
+        return getBoolean(left, "capture") === getBoolean(right, "capture")
+            && getBoolean(left, "once") === getBoolean(right, "once")
+            && getBoolean(left, "passive") === getBoolean(right, "passive")
+            && signalsEqual;
+    }
+}
+class HandlerRegistory {
+    constructor(target) {
+        this.target = target;
+        this._registory = new Map();
+    }
+    ensure(event) {
+        return this._registory.get(event) ?? this._registory.set(event, []).get(event);
+    }
+    find(event, entry) {
+        return this._registory.get(event)?.find(e => e.equals(entry)) ?? undefined;
+    }
+    add(event, entry) {
+        if (entry.options?.once) {
+            this.remove(event, entry);
+        }
+        if (!this.find(event, entry)) {
+            this.ensure(event).push(entry);
+            this.target.element.addEventListener(event, entry.current, entry.options);
+        }
+    }
+    remove(event, entry) {
+        if (!entry) {
+            const list = this._registory.get(event);
+            if (!list)
+                return;
+            list.forEach(e => this.target.element.removeEventListener(event, e.current, e.options?.capture ?? false));
+            this._registory.delete(event);
+            return;
+        }
+        const list = this._registory.get(event);
+        if (list) {
+            const remaining = [];
+            for (const e of list) {
+                if (e.equals(entry, "remove")) {
+                    this.target.element.removeEventListener(event, e.current, e.options?.capture ?? false);
+                }
+                else {
+                    remaining.push(e);
+                }
+            }
+            if (remaining.length === 0) {
+                this._registory.delete(event);
+            }
+            else {
+                this._registory.set(event, remaining);
+            }
+        }
+    }
+    get empty() {
+        return this._registory.size === 0;
+    }
+}
+class EventRegistry {
+    static get instance() {
+        return this._instance ?? (this._instance = new EventRegistry());
+    }
+    constructor() {
+        this._registry = new Map();
+    }
+    map(target) {
+        const scopeId = target.scopeId;
+        let registry = this._registry.get(scopeId);
+        if (!registry) {
+            registry = new HandlerRegistory(target);
+            this._registry.set(scopeId, registry);
+        }
+        return registry;
+    }
+    on(event, target, entry) {
+        const registry = this.map(target);
+        registry.add(event, entry);
+    }
+    off(event, target, entry) {
+        const registry = this._registry.get(target.scopeId);
+        if (!registry)
+            return;
+        if (entry) {
+            registry.remove(event, entry);
+        }
+        else {
+            registry.remove(event);
+        }
+        if (registry.empty) {
+            this._registry.delete(target.scopeId);
+        }
+    }
+    clear(target) {
+        this._registry.delete(target.scopeId);
+    }
+}
+export class CotomyElement {
+    static encodeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text ?? "";
+        return div.innerHTML;
+    }
+    static createHTMLElement(html) {
+        const wrapperMap = {
+            "tr": { prefix: "<table><tbody>", suffix: "</tbody></table>" },
+            "td": { prefix: "<table><tbody><tr>", suffix: "</tr></tbody></table>" },
+            "th": { prefix: "<table><tbody><tr>", suffix: "</tr></tbody></table>" },
+            "thead": { prefix: "<table>", suffix: "</table>" },
+            "tbody": { prefix: "<table>", suffix: "</table>" },
+            "tfoot": { prefix: "<table>", suffix: "</table>" },
+            "caption": { prefix: "<table>", suffix: "</table>" },
+            "colgroup": { prefix: "<table>", suffix: "</table>" },
+            "col": { prefix: "<table><colgroup>", suffix: "</colgroup></table>" },
+            "option": { prefix: "<select>", suffix: "</select>" },
+            "optgroup": { prefix: "<select>", suffix: "</select>" },
+            "legend": { prefix: "<fieldset>", suffix: "</fieldset>" },
+            "li": { prefix: "<ul>", suffix: "</ul>" }
+        };
+        const match = html.match(/<\s*([a-z0-9]+)/i);
+        if (!match) {
+            throw new Error(`Invalid HTML: cannot extract tag from "${html}"`);
+        }
+        const tag = match[1].toLowerCase();
+        const wrap = wrapperMap[tag];
+        const wrappedHtml = wrap ? `${wrap.prefix}${html}${wrap.suffix}` : html;
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(wrappedHtml, "text/html");
+        const errors = doc.querySelector("parsererror");
+        if (errors) {
+            throw new Error(`HTML parsing failed for tag <${tag}>: "${html}"`);
+        }
+        if (doc.body.children.length !== 1) {
+            throw new Error(`CotomyElement requires a single root element, but got ${doc.body.children.length}.`);
+        }
+        const element = doc.body.querySelector(tag);
+        if (!element) {
+            throw new Error(`Parsed but <${tag}> element not found: "${html}"`);
+        }
+        return element;
+    }
+    static first(selector, type) {
+        const element = document.querySelector(selector);
+        if (!element)
+            return undefined;
+        const ctor = (type ?? CotomyElement);
+        return new ctor(element);
+    }
+    static find(selector, type) {
+        const elements = document.querySelectorAll(selector);
+        const ctor = (type ?? CotomyElement);
+        return Array.from(elements).map(e => new ctor(e));
+    }
+    static contains(selector) {
+        return document.querySelector(selector) !== null;
+    }
+    static byId(id, type) {
+        return this.first(`#${id}`, type);
+    }
+    static containsById(id) {
+        return document.getElementById(id) !== null;
+    }
+    static empty(type) {
+        const ctor = (type ?? CotomyElement);
+        return new ctor(document.createElement("div")).attribute("data-cotomy-empty", "").style("display", "none");
+    }
+    constructor(element) {
+        this._parentElement = null;
+        this._scopeId = null;
+        if (element instanceof HTMLElement) {
+            this._element = element;
+        }
+        else if (typeof element === "string") {
+            this._element = CotomyElement.createHTMLElement(element);
+        }
+        else {
+            this._element = CotomyElement.createHTMLElement("html" in element ? element.html : `<${element.tagname}></${element.tagname}>`);
+            if ("tagname" in element && element.text) {
+                this._element.textContent = element.text;
+            }
+            if (element.css) {
+                this.useScopedCss(element.css);
+            }
+            if (CotomyDebugSettings.isEnabled(CotomyDebugFeature.Html)) {
+                if ("html" in element) {
+                    console.debug(`CotomyElement {html: "${element.html}" } is created`);
+                }
+                if ("tagname" in element) {
+                    console.debug(`CotomyElement {tagname: "${element.tagname}", text: "${element.text ?? ""}"} is created`);
+                }
+                if (element.css) {
+                    console.debug(`CotomyElement {css: "${element.css}" } is applied`);
+                }
+            }
+        }
+        this.removed(() => {
+            this._element = CotomyElement.createHTMLElement(`<div data-cotomy-invalidated style="display: none;"></div>`);
+            EventRegistry.instance.clear(this);
+        });
+    }
+    get scopeId() {
+        if (!this._scopeId) {
+            this._scopeId = `__cotomy_scope__${cuid()}`;
+            this.attribute(this._scopeId, "");
+        }
+        return this._scopeId;
+    }
+    get scopedSelector() {
+        return `[${this.scopeId}]`;
+    }
+    get stylable() {
+        return !["script", "style", "link", "meta"].includes(this.tagname);
+    }
+    get scopedCssElementId() {
+        return `css-${this.scopeId}`;
+    }
+    useScopedCss(css) {
+        if (css && this.stylable) {
+            const cssid = this.scopedCssElementId;
+            CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
+            const element = document.createElement("style");
+            const writeCss = css.replace(/\[scope\]/g, `[${this.scopeId}]`);
+            const node = document.createTextNode(writeCss);
+            element.appendChild(node);
+            element.id = cssid;
+            const head = CotomyElement.first("head")
+                || new CotomyElement({ html: `<head></head>` }).prependTo(new CotomyElement(document.documentElement));
+            head.append(new CotomyElement(element));
+            this.removed(() => {
+                CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
+            });
+        }
+        return this;
+    }
+    listenLayoutEvents() {
+        this.attribute(CotomyElement.LISTEN_LAYOUT_EVENTS_ATTRIBUTE, "");
+        return this;
+    }
+    get id() {
+        return this.attribute("id");
+    }
+    generateId(prefix = "__cotomy_elem__") {
+        if (!this.id) {
+            this.attribute("id", `${prefix}${cuid()}`);
+        }
+        return this;
+    }
+    get element() {
+        return this._element;
+    }
+    get tagname() {
+        return this.element.tagName.toLowerCase();
+    }
+    is(selector) {
+        const selectors = selector.split(/\s+(?![^\[]*\])|(?<=\>)\s+/);
+        let element = this.element;
+        for (let i = selectors.length - 1; i >= 0; i--) {
+            let subSelector = selectors[i].trim();
+            let directChild = false;
+            if (subSelector.startsWith(">")) {
+                directChild = true;
+                subSelector = subSelector.slice(1).trim();
+            }
+            if (!element || !element.matches(subSelector)) {
+                return false;
+            }
+            if (directChild) {
+                element = element.parentElement;
+            }
+            else {
+                if (i > 0) {
+                    while (element && !element.matches(selectors[i - 1].trim())) {
+                        element = element.parentElement;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    get empty() {
+        const nonEmptyTags = new Set([
+            "input", "select", "textarea", "img", "video", "audio", "br", "hr",
+            "iframe", "embed", "canvas", "object", "svg", "source", "track", "col",
+            "link", "meta", "base"
+        ]);
+        return nonEmptyTags.has(this.tagname)
+            || this._element.hasAttribute("data-cotomy-empty")
+            || this._element.innerHTML.trim() === "";
+    }
+    get attached() {
+        return document.contains(this.element);
+    }
+    get readonly() {
+        if ("readOnly" in this.element) {
+            return this.element.readOnly;
+        }
+        else {
+            return this.element.hasAttribute("readonly");
+        }
+    }
+    set readonly(readonly) {
+        if ("readOnly" in this.element) {
+            this.element.readOnly = readonly;
+        }
+        else {
+            if (readonly) {
+                this.attribute("readonly", "readonly");
+            }
+            else {
+                this.attribute("readonly", null);
+            }
+        }
+    }
+    get value() {
+        if ("value" in this.element) {
+            return this.element.value;
+        }
+        else {
+            return this.attribute("data-cotomy-value") ?? "";
+        }
+    }
+    set value(val) {
+        if ("value" in this.element) {
+            this.element.value = val;
+        }
+        else {
+            this.attribute("data-cotomy-value", val);
+        }
+    }
+    get text() {
+        return this.element.textContent ?? "";
+    }
+    set text(text) {
+        this.element.textContent = text ?? "";
+    }
+    get html() {
+        return this.element.innerHTML;
+    }
+    set html(html) {
+        this.element.innerHTML = html;
+    }
+    setFocus() {
+        this.element.focus();
+    }
+    get visible() {
+        if (!this.attached) {
+            return false;
+        }
+        if (!this.element.offsetParent && !document.contains(this.element)) {
+            return false;
+        }
+        const rect = this.element.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            const style = this.getComputedStyle();
+            return style.display !== "none" && style.visibility !== "hidden" && style.visibility !== "collapse";
+        }
+        return false;
+    }
+    get enabled() {
+        return !(this.element.hasAttribute("disabled") && this.element.getAttribute("disabled") !== null);
+    }
+    set enabled(value) {
+        if (value) {
+            this.element.removeAttribute("disabled");
+        }
+        else {
+            this.element.setAttribute("disabled", "disabled");
+        }
+    }
+    get invalidated() {
+        return this.element.hasAttribute("data-cotomy-invalidated");
+    }
+    remove() {
+        if (!this.invalidated) {
+            this._element.remove();
+        }
+    }
+    clear() {
+        this.find("*").forEach(e => e.remove());
+        this.text = "";
+        return this;
+    }
+    get width() {
+        return this.element.offsetWidth;
+    }
+    set width(width) {
+        let w = width.toString() + "px";
+        this.style("width", w);
+    }
+    get height() {
+        return this.element.offsetHeight;
+    }
+    set height(height) {
+        let h = height.toString() + "px";
+        this.style("height", h);
+    }
+    get innerWidth() {
+        return this.element.clientWidth;
+    }
+    get innerHeight() {
+        return this.element.clientHeight;
+    }
+    get outerWidth() {
+        const style = this.getComputedStyle();
+        const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        return this.element.offsetWidth + margin;
+    }
+    get outerHeight() {
+        const style = this.getComputedStyle();
+        const margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+        return this.element.offsetHeight + margin;
+    }
+    get scrollHeight() {
+        return this.element.scrollHeight;
+    }
+    get scrollWidth() {
+        return this.element.scrollWidth;
+    }
+    get scrollTop() {
+        return this.element.scrollTop;
+    }
+    get position() {
+        const rect = this.element.getBoundingClientRect();
+        return { top: rect.top, left: rect.left };
+    }
+    get absolutePosition() {
+        const rect = this.element.getBoundingClientRect();
+        return { top: rect.top + window.scrollY, left: rect.left + window.scrollX };
+    }
+    get screenPosition() {
+        const rect = this.element.getBoundingClientRect();
+        return { top: rect.top, left: rect.left };
+    }
+    get rect() {
+        const rect = this.element.getBoundingClientRect();
+        return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
+    }
+    get innerRect() {
+        const rect = this.element.getBoundingClientRect();
+        const style = this.getComputedStyle();
+        const padding = {
+            top: parseFloat(style.paddingTop),
+            right: parseFloat(style.paddingRight),
+            bottom: parseFloat(style.paddingBottom),
+            left: parseFloat(style.paddingLeft)
+        };
+        return {
+            top: rect.top + padding.top,
+            left: rect.left + padding.left,
+            width: rect.width - padding.left - padding.right,
+            height: rect.height - padding.top - padding.bottom
+        };
+    }
+    get outerRect() {
+        const rect = this.element.getBoundingClientRect();
+        const style = this.getComputedStyle();
+        const margin = {
+            top: parseFloat(style.marginTop),
+            right: parseFloat(style.marginRight),
+            bottom: parseFloat(style.marginBottom),
+            left: parseFloat(style.marginLeft)
+        };
+        return {
+            top: rect.top - margin.top,
+            left: rect.left - margin.left,
+            width: rect.width + margin.left + margin.right,
+            height: rect.height + margin.top + margin.bottom
+        };
+    }
+    get padding() {
+        const style = this.getComputedStyle();
+        return {
+            top: parseFloat(style.paddingTop),
+            right: parseFloat(style.paddingRight),
+            bottom: parseFloat(style.paddingBottom),
+            left: parseFloat(style.paddingLeft)
+        };
+    }
+    get margin() {
+        const style = this.getComputedStyle();
+        return {
+            top: parseFloat(style.marginTop),
+            right: parseFloat(style.marginRight),
+            bottom: parseFloat(style.marginBottom),
+            left: parseFloat(style.marginLeft)
+        };
+    }
+    get inViewport() {
+        const rect = this.element.getBoundingClientRect();
+        return rect.top < window.innerHeight && rect.bottom > 0;
+    }
+    get isAboveViewport() {
+        return this.element.getBoundingClientRect().bottom < 0;
+    }
+    get isBelowViewport() {
+        return this.element.getBoundingClientRect().top > window.innerHeight;
+    }
+    get isLeftViewport() {
+        return this.element.getBoundingClientRect().right < 0;
+    }
+    get isRightViewport() {
+        return this.element.getBoundingClientRect().left > window.innerWidth;
+    }
+    hasAttribute(name) {
+        return this.element.hasAttribute(name);
+    }
+    attribute(name, value) {
+        if (arguments.length === 1) {
+            return this.element.hasAttribute(name) ? this.element.getAttribute(name) : undefined;
+        }
+        else if (value === null) {
+            this.element.removeAttribute(name);
+            return this;
+        }
+        else {
+            this.element.setAttribute(name, value?.toString() ?? "");
+            return this;
+        }
+    }
+    hasClass(name) {
+        return this.element.classList.contains(name);
+    }
+    addClass(name) {
+        this.element.classList.add(name);
+        return this;
+    }
+    removeClass(name) {
+        this.element.classList.remove(name);
+        return this;
+    }
+    toggleClass(name, force) {
+        this.element.classList.toggle(name, force);
+        return this;
+    }
+    style(name, value) {
+        if (arguments.length === 1) {
+            return this.element.style.getPropertyValue(name);
+        }
+        else if (value == null) {
+            this.element.style.removeProperty(name);
+            return this;
+        }
+        else {
+            this.element.style.setProperty(name, value);
+            return this;
+        }
+    }
+    getComputedStyle() {
+        return window.getComputedStyle(this.element);
+    }
+    computedStyle(name) {
+        return window.getComputedStyle(this.element).getPropertyValue(name);
+    }
+    get parent() {
+        if (this._parentElement == null && this.element.parentElement !== null) {
+            this._parentElement = new CotomyElement(this.element.parentElement);
+        }
+        return this._parentElement ?? CotomyElement.empty();
+    }
+    get parents() {
+        let parents = [];
+        let currentElement = this.element.parentElement;
+        while (currentElement !== null) {
+            parents.push(new CotomyElement(currentElement));
+            currentElement = currentElement.parentElement;
+        }
+        return parents;
+    }
+    hasChildren(selector = "*") {
+        return this.element.querySelector(selector) !== null;
+    }
+    children(selector = "*", type) {
+        const children = Array.from(this.element.querySelectorAll(selector));
+        const directChildren = children.filter(child => child.parentElement === this.element);
+        const ctor = (type ?? CotomyElement);
+        return directChildren.filter((e) => e instanceof HTMLElement).map(e => new ctor(e));
+    }
+    firstChild(selector = "*", type) {
+        const elements = this.children(selector, type);
+        return elements.shift() ?? undefined;
+    }
+    lastChild(selector = "*", type) {
+        const elements = this.children(selector, type);
+        return elements.pop() ?? undefined;
+    }
+    closest(selector, type) {
+        const closestElement = this.element.closest(selector);
+        if (closestElement !== null && closestElement instanceof HTMLElement) {
+            const ctor = (type ?? CotomyElement);
+            return new ctor(closestElement);
+        }
+        else {
+            return undefined;
+        }
+    }
+    find(selector, type) {
+        const elements = Array.from(this.element.querySelectorAll(selector));
+        return elements.map(e => new (type ?? CotomyElement)(e));
+    }
+    first(selector = "*", type) {
+        const elements = this.find(selector, type);
+        return elements.shift() ?? undefined;
+    }
+    contains(selector) {
+        return this.find(selector).length > 0;
+    }
+    prepend(prepend) {
+        this._element.prepend(prepend.element);
+        return this;
+    }
+    append(target) {
+        this.element.append(target.element);
+        return this;
+    }
+    appendAll(targets) {
+        targets.forEach(e => this.append(e));
+        return this;
+    }
+    insertBefore(append) {
+        this.element.before(append.element);
+        return this;
+    }
+    insertAfter(append) {
+        this.element.after(append.element);
+        return this;
+    }
+    appendTo(target) {
+        target.element.append(this.element);
+        return this;
+    }
+    prependTo(target) {
+        target.element.prepend(this.element);
+        return this;
+    }
+    trigger(event, e) {
+        this.element.dispatchEvent(e ?? new Event(event));
+        return this;
+    }
+    on(event, handle, options) {
+        const entry = new HandlerEntry(handle, undefined, options);
+        EventRegistry.instance.on(event, this, entry);
+        return this;
+    }
+    onChild(event, selector, handle, options) {
+        const delegate = (e) => {
+            const target = e.target;
+            if (target && target.closest(selector)) {
+                return handle(e);
+            }
+        };
+        const entry = new HandlerEntry(handle, delegate, options);
+        EventRegistry.instance.on(event, this, entry);
+        return this;
+    }
+    once(event, handle, options) {
+        const mergedOptions = { ...(options ?? {}), once: true };
+        const entry = new HandlerEntry(handle, undefined, mergedOptions);
+        this.off(event, handle, mergedOptions);
+        EventRegistry.instance.on(event, this, entry);
+        return this;
+    }
+    off(event, handle, options) {
+        if (handle) {
+            const entry = new HandlerEntry(handle, undefined, options);
+            EventRegistry.instance.off(event, this, entry);
+        }
+        else {
+            EventRegistry.instance.off(event, this);
+        }
+        return this;
+    }
+    click(handle) {
+        if (handle) {
+            this.element.addEventListener("click", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("click");
+        }
+        return this;
+    }
+    dblclick(handle) {
+        if (handle) {
+            this.element.addEventListener("dblclick", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("dblclick");
+        }
+        return this;
+    }
+    mouseover(handle) {
+        if (handle) {
+            this.element.addEventListener("mouseover", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("mouseover");
+        }
+        return this;
+    }
+    mouseout(handle) {
+        if (handle) {
+            this.element.addEventListener("mouseout", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("mouseout");
+        }
+        return this;
+    }
+    mousedown(handle) {
+        if (handle) {
+            this.element.addEventListener("mousedown", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("mousedown");
+        }
+        return this;
+    }
+    mouseup(handle) {
+        if (handle) {
+            this.element.addEventListener("mouseup", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("mouseup");
+        }
+        return this;
+    }
+    mousemove(handle) {
+        if (handle) {
+            this.element.addEventListener("mousemove", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("mousemove");
+        }
+        return this;
+    }
+    mouseenter(handle) {
+        if (handle) {
+            this.element.addEventListener("mouseenter", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("mouseenter");
+        }
+        return this;
+    }
+    mouseleave(handle) {
+        if (handle) {
+            this.element.addEventListener("mouseleave", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("mouseleave");
+        }
+        return this;
+    }
+    dragstart(handle) {
+        if (handle) {
+            this.element.addEventListener("dragstart", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("dragstart");
+        }
+        return this;
+    }
+    dragend(handle) {
+        if (handle) {
+            this.element.addEventListener("dragend", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("dragend");
+        }
+        return this;
+    }
+    dragover(handle) {
+        if (handle) {
+            this.element.addEventListener("dragover", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("dragover");
+        }
+        return this;
+    }
+    dragenter(handle) {
+        if (handle) {
+            this.element.addEventListener("dragenter", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("dragenter");
+        }
+        return this;
+    }
+    dragleave(handle) {
+        if (handle) {
+            this.element.addEventListener("dragleave", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("dragleave");
+        }
+        return this;
+    }
+    drop(handle) {
+        if (handle) {
+            this.element.addEventListener("drop", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("drop");
+        }
+        return this;
+    }
+    drag(handle) {
+        if (handle) {
+            this.element.addEventListener("drag", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("drag");
+        }
+        return this;
+    }
+    removed(handle) {
+        this.element.addEventListener("removed", async (e) => await handle(e));
+        return this;
+    }
+    keydown(handle) {
+        if (handle) {
+            this.element.addEventListener("keydown", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("keydown");
+        }
+        return this;
+    }
+    keyup(handle) {
+        if (handle) {
+            this.element.addEventListener("keyup", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("keyup");
+        }
+        return this;
+    }
+    keypress(handle) {
+        if (handle) {
+            this.element.addEventListener("keypress", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("keypress");
+        }
+        return this;
+    }
+    change(handle) {
+        if (handle) {
+            this.element.addEventListener("change", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("change");
+        }
+        return this;
+    }
+    input(handle) {
+        if (handle) {
+            this.element.addEventListener("input", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("input");
+        }
+        return this;
+    }
+    static get intersectionObserver() {
+        return CotomyElement._intersectionObserver = CotomyElement._intersectionObserver
+            ?? new IntersectionObserver(entries => {
+                entries.filter(entry => entry.isIntersecting).forEach(entry => entry.target.dispatchEvent(new Event("inview")));
+                entries.filter(entry => !entry.isIntersecting).forEach(entry => entry.target.dispatchEvent(new Event("outview")));
+            });
+    }
+    inview(handle) {
+        if (handle) {
+            CotomyElement.intersectionObserver.observe(this.element);
+            this.element.addEventListener("inview", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("inview");
+        }
+        return this;
+    }
+    outview(handle) {
+        if (handle) {
+            CotomyElement.intersectionObserver.observe(this.element);
+            this.element.addEventListener("outview", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("outview");
+        }
+        return this;
+    }
+    focus(handle) {
+        if (handle) {
+            this.element.addEventListener("focus", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("focus");
+        }
+        return this;
+    }
+    blur(handle) {
+        if (handle) {
+            this.element.addEventListener("blur", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("blur");
+        }
+        return this;
+    }
+    focusin(handle) {
+        if (handle) {
+            this.element.addEventListener("focusin", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("focusin");
+        }
+        return this;
+    }
+    focusout(handle) {
+        if (handle) {
+            this.element.addEventListener("focusout", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("focusout");
+        }
+        return this;
+    }
+    filedrop(handle) {
+        this.element.addEventListener("drop", async (e) => {
+            e.preventDefault();
+            const dt = e.dataTransfer;
+            if (dt && dt.files) {
+                await handle(Array.from(dt.files));
+            }
+        });
+        return this;
+    }
+    resize(handle) {
+        this.listenLayoutEvents();
+        if (handle) {
+            this.element.addEventListener("cotomy:resize", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("cotomy:resize");
+        }
+        return this;
+    }
+    scroll(handle) {
+        this.listenLayoutEvents();
+        if (handle) {
+            this.element.addEventListener("cotomy:scroll", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("cotomy:scroll");
+        }
+        return this;
+    }
+    changelayout(handle) {
+        this.listenLayoutEvents();
+        if (handle) {
+            this.element.addEventListener("cotomy:changelayout", async (e) => await handle(e));
+        }
+        else {
+            this.trigger("cotomy:changelayout");
+        }
+        return this;
+    }
+}
+CotomyElement.LISTEN_LAYOUT_EVENTS_ATTRIBUTE = "data-cotomy-layout";
+CotomyElement._intersectionObserver = null;
+export class CotomyMetaElement extends CotomyElement {
+    static get(name) {
+        return CotomyElement.first(`meta[name="${name}" i]`, CotomyMetaElement)
+            ?? CotomyElement.empty(CotomyMetaElement);
+    }
+    get content() {
+        return this.attribute("content") ?? "";
+    }
+}
+export class CotomyWindow {
+    constructor() {
+        this._body = CotomyElement.empty();
+        this._mutationObserver = null;
+        this._reloading = false;
+        this._eventHandlers = {};
+    }
+    static get instance() {
+        return CotomyWindow._instance ?? (CotomyWindow._instance = new CotomyWindow());
+    }
+    get initialized() {
+        return this._body.attached;
+    }
+    initialize() {
+        if (!this.initialized) {
+            if (!document.body) {
+                throw new Error("<body> element not found. DOM may not be ready.");
+            }
+            this._body = CotomyElement.first("body");
+            const changeLayoutEvents = ["resize", "scroll", "orientationchange", "fullscreenchange", "cotomy:ready"];
+            changeLayoutEvents.forEach(e => {
+                window.addEventListener(e, () => {
+                    const changeLayoutEvent = new CustomEvent("cotomy:changelayout");
+                    window.dispatchEvent(changeLayoutEvent);
+                }, { passive: true });
+            });
+            document.addEventListener("dragover", e => {
+                e.stopPropagation();
+                e.preventDefault();
+            });
+            this.resize(() => {
+                document.querySelectorAll(`[${CotomyElement.LISTEN_LAYOUT_EVENTS_ATTRIBUTE}]`).forEach(e => {
+                    e.dispatchEvent(new CustomEvent("cotomy:resize"));
+                });
+            });
+            this.scroll(() => {
+                document.querySelectorAll(`[${CotomyElement.LISTEN_LAYOUT_EVENTS_ATTRIBUTE}]`).forEach(e => {
+                    e.dispatchEvent(new CustomEvent("cotomy:scroll"));
+                });
+            });
+            this.changeLayout(() => {
+                document.querySelectorAll(`[${CotomyElement.LISTEN_LAYOUT_EVENTS_ATTRIBUTE}]`).forEach(e => {
+                    e.dispatchEvent(new CustomEvent("cotomy:changelayout"));
+                });
+            });
+            this._mutationObserver = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    mutation.removedNodes.forEach(node => {
+                        if (node instanceof HTMLElement) {
+                            const element = new CotomyElement(node);
+                            element.trigger("removed");
+                        }
+                    });
+                });
+            });
+            this._mutationObserver.observe(this.body.element, { childList: true, subtree: true });
+        }
+    }
+    get reloading() {
+        return this._reloading;
+    }
+    reload() {
+        this._reloading = true;
+        location.reload();
+    }
+    get body() {
+        return this._body;
+    }
+    append(e) {
+        this._body.append(e);
+    }
+    moveNext(focused, shift = false) {
+        const selector = "input, a, select, button, textarea";
+        const focusableElements = Array.from(this.body.element.querySelectorAll(selector))
+            .map(e => new CotomyElement(e))
+            .filter(e => e.width > 0 && e.height > 0 && e.visible && e.enabled && !e.hasAttribute("readonly"));
+        const focusedIndex = focusableElements.map(e => e.element).indexOf(focused.element);
+        let nextIndex = focusedIndex + (shift ? -1 : 1);
+        if (nextIndex >= focusableElements.length) {
+            nextIndex = 0;
+        }
+        else if (nextIndex < 0) {
+            nextIndex = focusableElements.length - 1;
+        }
+        if (focusableElements[nextIndex]) {
+            focusableElements[nextIndex].setFocus();
+        }
+    }
+    trigger(event) {
+        window.dispatchEvent(new Event(event));
+    }
+    on(event, handle) {
+        if (!this._eventHandlers[event])
+            this._eventHandlers[event] = [];
+        this._eventHandlers[event].push(handle);
+        window.addEventListener(event, handle);
+    }
+    off(event, handle) {
+        if (handle) {
+            window.removeEventListener(event, handle);
+            this._eventHandlers[event] = this._eventHandlers[event]?.filter(h => h !== handle) ?? [];
+        }
+        else {
+            for (const h of this._eventHandlers[event] ?? []) {
+                window.removeEventListener(event, h);
+            }
+            delete this._eventHandlers[event];
+        }
+    }
+    handlers(event) {
+        return this._eventHandlers[event] ?? [];
+    }
+    load(handle) {
+        this.on("load", handle);
+    }
+    ready(handle) {
+        this.on("cotomy:ready", handle);
+    }
+    resize(handle) {
+        if (handle) {
+            this.on("resize", handle);
+        }
+        else {
+            this.trigger("resize");
+        }
+    }
+    scroll(handle) {
+        if (handle) {
+            this.on("scroll", handle);
+        }
+        else {
+            this.trigger("scroll");
+        }
+    }
+    changeLayout(handle) {
+        if (handle) {
+            this.on("cotomy:changelayout", handle);
+        }
+        else {
+            this.trigger("cotomy:changelayout");
+        }
+    }
+    pageshow(handle) {
+        if (handle) {
+            this.on("pageshow", handle);
+        }
+        else {
+            this.trigger("pageshow");
+        }
+    }
+    get scrollTop() {
+        return window.scrollY || document.documentElement.scrollTop;
+    }
+    get scrollLeft() {
+        return window.scrollX || document.documentElement.scrollLeft;
+    }
+    get width() {
+        return window.innerWidth;
+    }
+    get height() {
+        return window.innerHeight;
+    }
+    get documentWidth() {
+        return document.documentElement.scrollWidth;
+    }
+    get documentHeight() {
+        return document.documentElement.scrollHeight;
+    }
+}
+CotomyWindow._instance = null;
+//# sourceMappingURL=view.js.map