@web-atoms/web-controls 2.5.39 → 2.5.40

package/dist-esm/mobile-app/MobileApp.js

@@ -0,0 +1,665 @@
+import { __decorate, __metadata } from "tslib";
+import { AtomLoader } from "@web-atoms/core/dist/core/AtomLoader.js";
+import sleep from "@web-atoms/core/dist/core/sleep.js";
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import { NavigationService } from "@web-atoms/core/dist/services/NavigationService.js";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
+import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService.js";
+import PageNavigator from "../PageNavigator.js";
+import { StringHelper } from "@web-atoms/core/dist/core/StringHelper.js";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
+import { AtomDisposableList } from "@web-atoms/core/dist/core/AtomDisposableList.js";
+import Bind from "@web-atoms/core/dist/core/Bind.js";
+import { CancelToken } from "@web-atoms/core/dist/core/types.js";
+import { AncestorEnumerator, ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI.js";
+import { displayRouteSymbol } from "@web-atoms/core/dist/core/Command.js";
+import Route from "@web-atoms/core/dist/core/Route.js";
+import "./MobileApp.global.css";
+export function PullToRefresh() {
+    return XNode.create("div", null,
+        XNode.create("i", { class: "pull-icon fa-solid fa-down" }),
+        XNode.create("span", { class: "down", text: " Pull" }),
+        XNode.create("span", { class: "up", text: " Refresh" }),
+        XNode.create("i", { class: "loading fa-duotone fa-spinner fa-spin" }));
+}
+export class Drawer extends AtomControl {
+    init() { }
+    preCreate() {
+        this.element.dataset.drawerPage = "drawer-page";
+        this.bindEvent(this.element, "click", (e) => {
+            const target = e.target;
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (/input/i.test(target.tagName) && !/button|submit/i.test(target.type)) {
+                return;
+            }
+            this.closeDrawer();
+        });
+        this.runAfterInit(() => this.app.runAsync(() => this.init?.()));
+    }
+    closeDrawer() {
+        const ce = new CustomEvent("closeDrawer", { bubbles: true });
+        this.element.dispatchEvent(ce);
+    }
+}
+delete Drawer.prototype.init;
+let historyBackCalled = false;
+export class BasePage extends AtomControl {
+    close;
+    cancel;
+    closeWarning;
+    title;
+    titleRenderer;
+    iconRenderer;
+    actionRenderer;
+    footerRenderer;
+    actionBarRenderer;
+    headerRenderer;
+    pullToRefreshRenderer;
+    iconClass;
+    keep = false;
+    disableAutoFocus = false;
+    get route() {
+        return this.routeUrl;
+    }
+    set route(url) {
+        if (!url) {
+            return;
+        }
+        if (history.state?.url === url) {
+            return;
+        }
+        url = Route.encodeUrl(url);
+        if (this.routeUrl === url) {
+            return;
+        }
+        this.routeUrl = url;
+        this.routeDisposable?.dispose();
+        let last = void 0;
+        setTimeout(() => last = url, 100);
+        const state = { url };
+        history.pushState(state, "", url);
+        const eventRegistration = (e) => {
+            if (historyBackCalled) {
+                return;
+            }
+            if (e.state?.url === last) {
+                this.cancel();
+            }
+        };
+        window.addEventListener("popstate", eventRegistration);
+        const d = {
+            dispose() {
+                window.removeEventListener("popstate", eventRegistration);
+                if (history.state?.url === state.url) {
+                    historyBackCalled = true;
+                    history.back();
+                    setTimeout(() => historyBackCalled = false, 500);
+                }
+            }
+        };
+        this.routeDisposable = this.registerDisposable(d);
+    }
+    routeUrl;
+    routeDisposable;
+    viewModelTitle;
+    initialized;
+    contentElement;
+    pullToRefreshElement;
+    pullToRefreshDisposable;
+    scrollTop;
+    get hideToolbar() {
+        return /true/i.test(this.element?.getAttribute("data-hide-toolbar"));
+    }
+    set hideToolbar(v) {
+        if (v) {
+            this.element.setAttribute("data-hide-toolbar", "true");
+        }
+        else {
+            this.element.removeAttribute("data-hide-toolbar");
+        }
+    }
+    get hideDrawer() {
+        return /true/i.test(this.element?.getAttribute("data-hide-drawer"));
+    }
+    set hideDrawer(v) {
+        if (v) {
+            this.element.setAttribute("data-hide-drawer", "true");
+        }
+        else {
+            this.element.removeAttribute("data-hide-drawer");
+        }
+    }
+    cancelToken;
+    async requestCancel() {
+        if (this.closeWarning) {
+            if (!await PopupService.confirm({
+                message: this.closeWarning
+            })) {
+                return;
+            }
+        }
+        this.cancel();
+    }
+    onPropertyChanged(name) {
+        super.onPropertyChanged(name);
+        switch (name) {
+            case "footerRenderer":
+                this.recreate(name, "footer");
+                break;
+            case "iconRenderer":
+                this.recreate(name, "icon");
+                break;
+            case "titleRenderer":
+                this.recreate(name, "title");
+                break;
+            case "actionRenderer":
+                this.recreate(name, "action");
+                break;
+            case "headerRenderer":
+                this.recreate(name, "header");
+                break;
+            case "pullToRefreshRenderer":
+                this.pullToRefreshElement = this.recreate(name, "pull-to-refresh");
+                this.pullToRefreshElement?.remove();
+                this.enablePullToRefreshEvents();
+                break;
+            case "actionBarRenderer":
+                this.recreate(name, "action-bar");
+                break;
+        }
+    }
+    init() {
+    }
+    rendererChanged() {
+        for (const content of ChildEnumerator.where(this.element, ({ dataset: { pageElement } }) => !pageElement || pageElement === "content")) {
+            this.dispose(content);
+            content.remove();
+        }
+        const r = this.renderer;
+        if (!r) {
+            return;
+        }
+        delete this.render;
+        this.render(r);
+    }
+    recreate(renderer, name) {
+        const node = this[renderer]?.() ?? undefined;
+        for (const e of ChildEnumerator.enumerate(this.element)) {
+            if (e.dataset.pageElement === name) {
+                this.dispose(e);
+                e.remove();
+                break;
+            }
+        }
+        if (node) {
+            const na = node.attributes ??= {};
+            na["data-page-element"] = name;
+            super.render(XNode.create("div", null, node));
+            return this.element.querySelector(`[data-page-element="${name}"]`);
+        }
+        return null;
+    }
+    preCreate() {
+        this.element.dataset.basePage = "base-page";
+        this.iconClass = "";
+        this.viewModelTitle = null;
+        const c = new CancelToken();
+        this.cancelToken = c;
+        this.registerDisposable({
+            dispose() {
+                c.cancel();
+            }
+        });
+        this.runAfterInit(() => {
+            if (!this.element) {
+                return;
+            }
+            const anyAutofocus = this.element.querySelector(`*[autofocus]`);
+            if (!anyAutofocus) {
+                if (this.disableAutoFocus) {
+                    return;
+                }
+                const windowContent = this.element.querySelector(`[data-page-element="content"]`);
+                if (windowContent) {
+                    const firstInput = windowContent.querySelector("input,textarea");
+                    if (firstInput) {
+                        firstInput.focus();
+                        return;
+                    }
+                }
+                return;
+            }
+            anyAutofocus.focus();
+        });
+        setTimeout((p) => {
+            p.dataset.pageState = "ready";
+        }, 1, this.element);
+        this.titleRenderer = () => XNode.create("span", { "data-text-overflow": "ellipsis", class: "title-text", text: Bind.oneWay(() => this.viewModelTitle || this.title) });
+        this.iconRenderer = () => XNode.create("i", { "data-icon-button": "icon-button", class: Bind.oneWay(() => this.iconClass), eventClick: (e1) => this.dispatchIconClickEvent(e1) });
+        this.actionBarRenderer = () => XNode.create("div", null);
+        this.runAfterInit(() => {
+            this.pullToRefreshElement?.remove?.();
+            this.initialized = true;
+            this.enablePullToRefreshEvents();
+            try {
+                document.body.dispatchEvent(new CustomEvent("pageNavigated", {
+                    detail: {
+                        title: this.title,
+                        route: this.route || Object.getPrototypeOf(this)?.constructor?.name
+                    },
+                    bubbles: true,
+                    cancelable: true
+                }));
+            }
+            catch { }
+        });
+    }
+    render(node, e, creator) {
+        if (e || node?.attributes?.["data-page-element"]) {
+            super.render(node, e, creator);
+            return;
+        }
+        this.render = super.render;
+        const na = (node.attributes ??= {});
+        let extracted = {};
+        if (!na["data-page-element"]) {
+            na["data-page-element"] = "content";
+            extracted = this.extractControlProperties(node);
+        }
+        super.render(XNode.create("div", { viewModelTitle: Bind.oneWay(() => this.viewModel.title), ...extracted }, node), e, creator);
+        this.contentElement = this.element.querySelector("[data-page-element='content']");
+        if (document.body.hasAttribute("ios-keyboard")) {
+            return;
+        }
+        setTimeout(() => {
+            this.contentElement.scrollTop = 0;
+            this.contentElement.scrollLeft = 0;
+        }, 100);
+    }
+    enablePullToRefreshEvents() {
+        const e = this.pullToRefreshElement;
+        if (!e) {
+            this.pullToRefreshDisposable?.dispose();
+            this.pullToRefreshDisposable = void 0;
+            return e;
+        }
+        if (this.pullToRefreshDisposable) {
+            return;
+        }
+        let elementAdded = false;
+        const touchStart = (te) => {
+            if (!this.pullToRefreshElement) {
+                this.pullToRefreshDisposable?.dispose();
+                this.pullToRefreshDisposable = null;
+                return;
+            }
+            if (this.contentElement.scrollTop > 0) {
+                return;
+            }
+            const isMouseEvent = te.type === "mousedown";
+            const moveEventName = isMouseEvent ? "mousemove" : "touchmove";
+            const endEventName = isMouseEvent ? "mouseup" : "touchend";
+            const startY = isMouseEvent ? te.screenY : te.touches[0].screenY;
+            this.pullToRefreshElement.dataset.mode = "down";
+            if (isMouseEvent) {
+                te.stopPropagation();
+                te.preventDefault();
+            }
+            const d = new AtomDisposableList();
+            d.add(() => {
+                this.contentElement.style.removeProperty("touch-action");
+            });
+            d.add(this.bindEvent(this.contentElement, moveEventName, (me) => {
+                const screenY = isMouseEvent ? me.screenY : me.touches[0].screenY;
+                const diffX = Math.min(75, screenY - startY);
+                if (diffX > 5) {
+                    if (!elementAdded) {
+                        this.contentElement.style.touchAction = "none";
+                        elementAdded = true;
+                        this.element.appendChild(this.pullToRefreshElement);
+                    }
+                }
+                else {
+                    return;
+                }
+                this.contentElement.style.transform = `translateY(${diffX}px)`;
+                if (diffX > 50) {
+                    this.pullToRefreshElement.dataset.mode = "up";
+                }
+                else {
+                    this.pullToRefreshElement.dataset.mode = "down";
+                }
+            }, null, { passive: true }));
+            d.add(this.bindEvent(this.contentElement, endEventName, (ue) => {
+                ue.stopPropagation();
+                if (isMouseEvent) {
+                    ue.stopImmediatePropagation();
+                    ue.preventDefault();
+                }
+                d.dispose();
+                const done = () => {
+                    delete this.pullToRefreshElement.dataset.mode;
+                    this.contentElement.style.transform = ``;
+                    this.pullToRefreshElement.style.transform = "";
+                    this.pullToRefreshElement.remove();
+                    elementAdded = false;
+                };
+                const diffX = ue.screenY - startY;
+                if (diffX <= 50) {
+                    done();
+                    return;
+                }
+                const ce = new CustomEvent("reloadPage", { detail: this, bubbles: true, cancelable: true });
+                this.contentElement.dispatchEvent(ce);
+                if (ce.defaultPrevented) {
+                    done();
+                    return;
+                }
+                this.pullToRefreshElement.dataset.mode = "loading";
+                const promise = ce.promise;
+                if (!promise) {
+                    done();
+                    return;
+                }
+                promise.then(done, done);
+            }, null, { passive: !isMouseEvent }));
+        };
+        const ed = new AtomDisposableList();
+        ed.add(this.bindEvent(this.contentElement, "mousedown", touchStart));
+        ed.add(this.bindEvent(this.contentElement, "touchstart", touchStart, null, { passive: true }));
+        this.pullToRefreshDisposable = ed;
+    }
+    dispatchIconClickEvent(e) {
+        const ce = new CustomEvent("iconClick", { bubbles: true });
+        e.target.dispatchEvent(ce);
+    }
+    hide() {
+        const { element } = this;
+        if (!element) {
+            return;
+        }
+        element.setAttribute("data-page-state", "hidden");
+        if (this.keep) {
+            setTimeout(() => element.setAttribute("data-page-removed", "true"), 400);
+            return;
+        }
+        element._logicalParent = element.parentElement;
+        this.scrollTop = this.contentElement?.scrollTop;
+        setTimeout(() => {
+            element?.remove();
+        }, 400);
+    }
+    show() {
+        if (this.keep) {
+            this.element.removeAttribute("data-page-removed");
+        }
+        else {
+            this.element._logicalParent.appendChild(this.element);
+        }
+        setTimeout(() => {
+            if (this.scrollTop) {
+                this.contentElement.scrollTop = this.scrollTop;
+            }
+            this.element.setAttribute("data-page-state", "ready");
+        }, 1);
+    }
+}
+__decorate([
+    BindableProperty,
+    __metadata("design:type", String)
+], BasePage.prototype, "closeWarning", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", String)
+], BasePage.prototype, "title", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], BasePage.prototype, "titleRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], BasePage.prototype, "iconRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], BasePage.prototype, "actionRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], BasePage.prototype, "footerRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], BasePage.prototype, "actionBarRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], BasePage.prototype, "headerRenderer", void 0);
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Function)
+], BasePage.prototype, "pullToRefreshRenderer", void 0);
+delete BasePage.prototype.init;
+export class ContentPage extends BasePage {
+    parameters;
+}
+export class TabbedPage extends BasePage {
+}
+export default class MobileApp extends AtomControl {
+    static current;
+    static drawer = XNode.prepare("drawer", true, true);
+    static async pushPage(pageUri, parameters = {}, clearHistory = false) {
+        const mobileApp = this.current;
+        const page = await AtomLoader.loadClass(pageUri, parameters ?? {}, mobileApp.app);
+        const result = await mobileApp.loadPage(page, clearHistory);
+        return result;
+    }
+    drawer;
+    hideDrawer;
+    pages;
+    selectedPage;
+    defaultPage;
+    container;
+    popTo(w) {
+        this.app.runAsync(async () => {
+            while (this.selectedPage !== w) {
+                this.selectedPage.cancel();
+                await sleep(500);
+            }
+        });
+    }
+    async back() {
+        if (this.pages.length === 0) {
+            const drawer = this.drawer;
+            if (drawer && !this.hideDrawer) {
+                const drawerPage = new drawer(this.app);
+                const modalClose = (ce) => {
+                    let start = ce.target;
+                    const de = drawerPage.element;
+                    while (start) {
+                        if (start === de) {
+                            return;
+                        }
+                        start = start.parentElement;
+                    }
+                    ce.preventDefault();
+                    ce.stopImmediatePropagation?.();
+                    ce.target.dispatchEvent(new CustomEvent("closeDrawer", { bubbles: true }));
+                };
+                const dispatchCloseDrawer = (de) => {
+                    if (de.defaultPrevented) {
+                        return;
+                    }
+                    const target = de.target;
+                    if (AncestorEnumerator.find(target, (x) => x === drawerPage.element)) {
+                        return;
+                    }
+                    de.target.dispatchEvent(new CustomEvent("closeDrawer", { bubbles: true }));
+                };
+                this.element.appendChild(drawerPage.element);
+                setTimeout(() => {
+                    this.element.dataset.drawer = "visible";
+                    drawerPage.bindEvent(this.element, "click", dispatchCloseDrawer);
+                    drawerPage.bindEvent(document.body, "click", modalClose, null, true);
+                }, 10);
+                this.hideDrawer = () => {
+                    this.element.dataset.drawer = "";
+                    setTimeout(() => {
+                        const de = drawerPage.element;
+                        drawerPage.dispose();
+                        de.remove();
+                    }, 400);
+                    this.hideDrawer = undefined;
+                };
+                return false;
+            }
+            return true;
+        }
+        this.selectedPage.cancel("cancelled");
+        return false;
+    }
+    async init() {
+    }
+    preCreate() {
+        MobileApp.current = this;
+        window.addEventListener("backButton", (ce) => {
+            const { detail } = ce;
+            ce.preventDefault();
+            this.app.runAsync(async () => {
+                if (await this.back()) {
+                    detail();
+                }
+            });
+        });
+        this.drawer = null;
+        this.element.dataset.pageApp = "page-app";
+        const container = this.container = document.createElement("div");
+        container.dataset.container = "true";
+        this.element.appendChild(container);
+        this.pages = [];
+        this.selectedPage = null;
+        this.bindEvent(this.element, "iconClick", (e) => this.back());
+        this.bindEvent(this.element, "closeDrawer", (e) => {
+            this.hideDrawer?.();
+        });
+        const navigationService = this.app.resolve(NavigationService);
+        navigationService.registerNavigationHook((uri, { target, clearHistory }) => {
+            if (/^(app|root)$/.test(target)) {
+                return this.loadPageForReturn(uri, clearHistory);
+            }
+        });
+        this.runAfterInit(() => this.app.runAsync(() => this.init()));
+    }
+    async loadPageForReturn(url, clearHistory) {
+        this.defaultPage ??= url;
+        const page = await AtomLoader.loadControl(url, this.app);
+        if (url.query && url.query.title) {
+            page.title ||= url.query.title.toString();
+        }
+        const p = await this.loadPage(page, clearHistory);
+        try {
+            return await p;
+        }
+        catch (ex) {
+            if ((ex.message ? ex.message : ex) === "cancelled") {
+                console.warn(ex);
+                return;
+            }
+            throw ex;
+        }
+    }
+    async loadPage(page, clearHistory) {
+        page.title ||= StringHelper.fromPascalToTitleCase(Object.getPrototypeOf(page).constructor.name);
+        const { parameters } = page;
+        const route = parameters?.[displayRouteSymbol];
+        if (route) {
+            page.route = route;
+        }
+        const selectedPage = this.selectedPage;
+        if (selectedPage) {
+            selectedPage.hide();
+            this.pages.add(selectedPage);
+        }
+        const hasPages = !clearHistory && this.pages.length;
+        if (clearHistory) {
+            for (const iterator of this.pages) {
+                const e = iterator.element;
+                iterator.dispose();
+                e.remove();
+            }
+            this.pages.length = 0;
+            this.selectedPage = null;
+        }
+        if (!hasPages) {
+            page.element.dataset.pageState = "ready";
+            page.iconClass = "fas fa-bars";
+        }
+        else {
+            page.iconClass = "fas fa-arrow-left";
+        }
+        this.container.appendChild(page.element);
+        this.selectedPage = page;
+        const vm = page.viewModel;
+        const element = page.element;
+        return new Promise((resolve, reject) => {
+            const closeFactory = (callback, result) => (r) => {
+                if (clearHistory) {
+                    this.app.runAsync(() => this.loadPageForReturn(this.defaultPage, true));
+                    return;
+                }
+                element.removeAttribute("data-page-state");
+                const last = this.pages.pop();
+                last.show();
+                setTimeout(() => {
+                    page.dispose();
+                    element.remove();
+                    callback(r ?? result);
+                    this.selectedPage = last;
+                }, 300);
+            };
+            const cancel = closeFactory(reject, "cancelled");
+            const close = closeFactory(resolve);
+            if (vm) {
+                vm.cancel = cancel;
+                vm.close = close;
+            }
+            page.cancel = cancel;
+            page.close = close;
+        });
+    }
+}
+export const isMobileView = /Android|iPhone/i.test(navigator.userAgent)
+    || (window.visualViewport.width < 500)
+    || window.forceMobileLayout;
+const isPopupPage = Symbol("isPopupPage");
+class PopupWindowEx extends PopupWindow {
+    static [isPopupPage] = true;
+    static dialogOptions;
+}
+const root = (isMobileView ? ContentPage : PopupWindowEx);
+export class PopupWindowPage extends root {
+    static dialogOptions;
+}
+PageNavigator.pushPageForResult =
+    (page, parameters, clearHistory) => {
+        if (!isMobileView
+            && page[isPopupPage]) {
+            const popupPage = page;
+            const options = {
+                ...popupPage.dialogOptions ?? {},
+                parameters: {
+                    parameters
+                }
+            };
+            options.modal ??= true;
+            if (options.modal) {
+                return page.showModal(options);
+            }
+            return page.showWindow(options);
+        }
+        return MobileApp.pushPage(page, parameters, clearHistory);
+    };
+//# sourceMappingURL=MobileApp.js.map