@web-atoms/core 2.6.14 → 2.6.17

package/src/web/WebApp.ts

@@ -1,192 +0,0 @@
-import { App } from "../App.js";
-import { AtomOnce } from "../core/AtomOnce.js";
-import { AtomUri } from "../core/AtomUri.js";
-import { ServiceCollection } from "../di/ServiceCollection.js";
-import { BusyIndicatorService } from "../services/BusyIndicatorService.js";
-import { NavigationService } from "../services/NavigationService.js";
-import { ChildEnumerator } from "./core/AtomUI.js";
-import { WebBusyIndicatorService } from "./services/WebBusyIndicatorService.js";
-import { WindowService } from "./services/WindowService.js";
-import { AtomStyleSheet } from "./styles/AtomStyleSheet.js";
-import { AtomTheme } from "./styles/AtomTheme.js";
-
-declare var UMD: any;
-
-export default class WebApp extends App {
-
-    public readonly initPromise: Promise<void>;
-
-    public get parentElement(): HTMLElement {
-        return document.body;
-    }
-
-    private mRoot: any;
-    public get root(): any {
-        return this.mRoot;
-    }
-
-    public set root(v: any) {
-        const old = this.mRoot;
-        if (old) {
-            old.dispose();
-        }
-        this.mRoot = v;
-        if (!v) {
-            return;
-        }
-        const pe = this.parentElement;
-        const de: HTMLElement[] = Array.from(pe.children) as HTMLElement[];
-        for (const iterator of de) {
-            iterator.remove();
-        }
-        pe.appendChild(v.element);
-    }
-
-    public get theme(): AtomStyleSheet {
-        return this.get(AtomStyleSheet);
-    }
-
-    public set theme(v: AtomStyleSheet) {
-        this.put(AtomTheme, v);
-        this.put(AtomStyleSheet, v);
-    }
-
-    private mContextId: number;
-    public get contextId(): string {
-        // let us set contextId
-        this.mContextId ??=  parseInt((this.url.hash.contextId || "0").toString(), 10);
-        if (!this.mContextId) {
-            //  create new context Id in session...
-            for (let index = 0; index < 100; index++) {
-                const cid = `contextId${index}`;
-                const cidData = sessionStorage.getItem(`contextId${index}`);
-                if (!cidData) {
-                    this.mContextId = index;
-                    sessionStorage.setItem(cid, cid);
-                    this.url.hash.contextId = index;
-                    this.syncUrl();
-                    break;
-                }
-            }
-        }
-        return `contextId_${this.mContextId}`;
-    }
-
-    private hashUpdater = new AtomOnce();
-
-    private styleElement: HTMLElement;
-
-    constructor() {
-        super();
-
-        this.url = new AtomUri(location.href);
-
-        this.put(NavigationService, this.resolve(WindowService));
-
-        this.put(WebApp, this);
-
-        this.put(BusyIndicatorService, this.resolve(WebBusyIndicatorService));
-
-        ServiceCollection.instance.registerSingleton(AtomStyleSheet, (sp) => sp.resolve(AtomTheme));
-
-        window.addEventListener("hashchange", () => {
-            this.hashUpdater.run(() => {
-                this.url = new AtomUri(location.href);
-            });
-        });
-
-        this.initPromise = new Promise<void>((resolve, reject) => {
-            this.onReady(resolve);
-        });
-
-        // following must be done automatically by the user as we may need different and newer version
-        // // registering font awesome
-        // this.installStyleSheet("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.9.0/css/all.css");
-        // this.installStyleSheet({
-        //     href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
-        //     integrity: "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
-        //     crossOrigin: "anonymous"
-        // });
-    }
-
-    public updateDefaultStyle(textContent: string) {
-        if (this.styleElement) {
-            if (this.styleElement.textContent === textContent) {
-                return;
-            }
-        }
-        const ss = document.createElement("style");
-
-        ss.textContent = textContent;
-        if (this.styleElement) {
-            this.styleElement.remove();
-        }
-        document.head.appendChild(ss);
-        this.styleElement = ss;
-    }
-
-    /**
-     * Do not use this method
-     */
-    public syncUrl(): void {
-        this.hashUpdater.run(() => {
-            const currentUrl = new AtomUri(location.href);
-            const sourceHash = this.url.hash;
-            const keyValues: Array<{ key: string, value: any}> = [];
-            let modified: boolean = false;
-            for (const key in sourceHash) {
-                if (/^\_\$\_/.test(key)) {
-                    continue;
-                }
-                if (sourceHash.hasOwnProperty(key)) {
-                    const element = sourceHash[key];
-                    const cv = currentUrl.hash[key];
-                    if (element !== undefined) {
-                        keyValues.push({ key, value: element });
-                    }
-                    if (cv === element) {
-                        continue;
-                    }
-                    modified = true;
-                }
-            }
-            if (!modified) {
-                return;
-            }
-            const hash = keyValues.map((s) => `${s.key}=${encodeURIComponent(s.value)}`).join("&");
-            location.hash = hash;
-        });
-    }
-
-    protected invokeReady(): void {
-        if (document.readyState === "complete") {
-            super.invokeReady();
-            return;
-        }
-        document.addEventListener("readystatechange", (e) => {
-            super.invokeReady();
-        });
-    }
-
-}
-
-declare global {
-    // tslint:disable-next-line: interface-name
-    interface Window {
-        // tslint:disable-next-line: ban-types
-        CustomEvent?: Function;
-    }
-}
-
-// tslint:disable-next-line: only-arrow-functions
-(function() {
-
-    if ( typeof window.CustomEvent === "function" ) { return false; }
-    function CustomEvent( event, params ) {
-        params = params || { bubbles: false, cancelable: false, detail: null };
-        const evt = document.createEvent( "CustomEvent" );
-        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
-        return evt;
-    }
-    (window as any).CustomEvent = CustomEvent;
-  })();

package/src/web/controls/AtomAlertWindow.tsx

@@ -1,111 +0,0 @@
-import { App } from "../../App.js";
-import Bind from "../../core/Bind.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import FormattedString from "../../core/FormattedString.js";
-import XNode from "../../core/XNode.js";
-import { Inject } from "../../di/Inject.js";
-import { AtomWindowViewModel } from "../../view-model/AtomWindowViewModel.js";
-import MarkdownService from "../services/MarkdownService.js";
-import AtomAlertWindowStyle from "../styles/AtomAlertWindowStyle.js";
-import { AtomControl } from "./AtomControl.js";
-import { AtomWindow } from "./AtomWindow.js";
-
-export default class AtomAlertWindow extends AtomWindow {
-
-    declare public viewModel: AtomAlertViewModel;
-
-    protected create(): void {
-        this.defaultControlStyle =  AtomAlertWindowStyle ;
-        this.viewModel = this.resolve(AtomAlertViewModel);
-
-        // this.windowTemplate = AtomAlertWindowTemplate;
-        // this.commandTemplate =  AtomAlertWindowCommandBar;
-        // this.bind(this.element, "title", [["viewModel", "title"]]);
-
-        this.render(<AtomWindow
-            title={Bind.oneWay(() => this.viewModel.title)}>
-            <AtomWindow.windowTemplate>
-                <div formattedText={Bind.oneWay(() => this.viewModel.message)}></div>
-            </AtomWindow.windowTemplate>
-            <AtomWindow.commandTemplate>
-                <div>
-                    <button
-                        class="yes-button"
-                        styleDisplay={Bind.oneWay(() => this.viewModel.okTitle ? "" : "none")}
-                        text={Bind.oneWay(() => this.viewModel.okTitle)}
-                        eventClick={() => this.viewModel.onOkClicked()}/>
-                    <button
-                        class="no-button"
-                        styleMarginBottom={Bind.oneWay(() => this.viewModel.cancelTitle ? "0" : "10px")}
-                        styleDisplay={Bind.oneWay(() => this.viewModel.cancelTitle ? "" : "none")}
-                        text={Bind.oneWay(() => this.viewModel.cancelTitle)}
-                        eventClick={() => this.viewModel.onCancelClicked()}/>
-                </div>
-            </AtomWindow.commandTemplate>
-        </AtomWindow>);
-    }
-}
-
-// class AtomAlertWindowTemplate extends AtomControl {
-
-//     protected create(): void {
-//         const div = document.createElement("div");
-
-//         this.append(div);
-
-//         this.bind(div, "formattedText", [["viewModel", "message"]]);
-
-//     }
-// }
-
-// class AtomAlertWindowCommandBar extends AtomControl {
-
-//     protected create(): void {
-
-//         const okButton = document.createElement("button");
-
-//         const cancelButton = document.createElement("button");
-//         this.append(okButton);
-//         this.append(cancelButton);
-//         this.setPrimitiveValue(okButton, "class", "yes-button" );
-//         this.setPrimitiveValue(cancelButton, "class", "no-button" );
-
-//         this.bind(okButton, "text", [["viewModel", "okTitle"]]);
-//         this.bind(cancelButton, "text", [["viewModel", "cancelTitle"]]);
-
-//         this.bind(okButton, "styleDisplay", [["viewModel", "okTitle"]], false, (v) => v ? "" : "none");
-//         this.bind(okButton, "styleMarginBottom", [["viewModel", "cancelTitle"]], false, (v) => v ? "0" : "10px");
-//         this.bind(cancelButton, "styleDisplay", [["viewModel", "cancelTitle"]], false, (v) => v ? "" : "none");
-
-//         this.bindEvent(okButton, "click", (e) => {
-//             this.viewModel.onOkClicked();
-//         });
-
-//         this.bindEvent(cancelButton, "click", (e) => {
-
-//             this.viewModel.onCancelClicked();
-//         });
-//     }
-// }
-class AtomAlertViewModel extends AtomWindowViewModel {
-
-    // @BindableProperty
-    declare public title: string;
-
-    @BindableProperty
-    public message: string;
-
-    @BindableProperty
-    public okTitle: string;
-
-    @BindableProperty
-    public cancelTitle: string;
-
-    public onOkClicked(): void {
-        this.close(true);
-    }
-
-    public onCancelClicked(): void {
-        this.cancel();
-    }
-}

package/src/web/controls/AtomContentControl.ts

@@ -1,52 +0,0 @@
-import { AtomBinder } from "../../core/AtomBinder.js";
-import { AtomStyle } from "../styles/AtomStyle.js";
-import { IStyleDeclaration } from "../styles/IStyleDeclaration.js";
-import { AtomControl } from "./AtomControl.js";
-
-export class AtomContentControl extends AtomControl {
-
-    private mContent: AtomControl;
-    public get content(): AtomControl {
-        return this.mContent;
-    }
-
-    public set content(c: AtomControl) {
-        const old = this.mContent;
-        if (old) {
-            old.element.remove();
-        }
-        this.mContent = c;
-        if (c) {
-            this.element.appendChild(c.element);
-            const style = c.element.style;
-            c.invalidate();
-        }
-        AtomBinder.refreshValue(this, "content");
-    }
-
-    protected preCreate(): void {
-        super.preCreate();
-        this.defaultControlStyle = AtomContentStyle;
-        this.runAfterInit(() => {
-            this.element.classList.add(this.controlStyle.name);
-        });
-    }
-}
-
-export class AtomContentStyle extends AtomStyle {
-
-    public get root(): IStyleDeclaration {
-        return {
-            subclasses: {
-                " > *": {
-                    position: "absolute",
-                    top: "0",
-                    left: "0",
-                    right: "0",
-                    bottom: "0",
-                }
-            }
-        };
-    }
-
-}

package/src/web/controls/AtomFrame.ts

@@ -1,295 +0,0 @@
-import { App } from "../../App.js";
-import { Atom } from "../../Atom.js";
-import { AtomBinder } from "../../core/AtomBinder.js";
-import { AtomDispatcher } from "../../core/AtomDispatcher.js";
-import { AtomLoader } from "../../core/AtomLoader.js";
-import { AtomUri } from "../../core/AtomUri.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import { IClassOf, IDisposable, INotifyPropertyChanged } from "../../core/types.js";
-import { NavigationService } from "../../services/NavigationService.js";
-import { AtomWindowViewModel } from "../../view-model/AtomWindowViewModel.js";
-import { AtomUI } from "../core/AtomUI.js";
-import { WindowService } from "../services/WindowService.js";
-import AtomFrameStyle from "../styles/AtomFrameStyle.js";
-import { AtomControl } from "./AtomControl.js";
-
-export interface IPageItem {
-    url: string;
-    page: AtomControl;
-    scrollY: number;
-}
-
-/**
- * Creates and hosts an instance of AtomControl available at given URL. Query string parameters
- * from the url will be passed to view model as initial property values.
- *
- * By default stack is turned off, so elements and controls will be destroyed when new control is hosted.
- */
-export class AtomFrame
-    extends AtomControl
-    implements INotifyPropertyChanged {
-
-    public stack: IPageItem[];
-
-    public get canGoBack(): boolean {
-        return this.stack.length ? true : false;
-    }
-
-    public name: string;
-
-    public keepStack: boolean;
-
-    public current: AtomControl;
-
-    public pagePresenter: HTMLElement;
-
-    public currentDisposable: IDisposable;
-
-    public backCommand: () => void;
-
-    public saveScrollPosition: boolean;
-
-    private mUrl: string;
-    public get url(): string {
-        return this.mUrl;
-    }
-    public set url(value: string) {
-        if (this.mUrl === value) {
-            return;
-        }
-        if (value === undefined) {
-            return;
-        }
-        this.mUrl = value;
-        this.runAfterInit(() => {
-            this.app.runAsync(() => this.loadForReturn(value === null ? null : new AtomUri(value), true));
-        });
-    }
-
-    private navigationService: WindowService;
-
-    constructor(app: App, e?: HTMLElement) {
-        super(app, e || document.createElement("section"));
-    }
-
-    public async onBackCommand(): Promise<void> {
-        if (!this.stack.length) {
-            // tslint:disable-next-line: no-console
-            console.warn(`FrameStack is empty !!`);
-            return;
-        }
-
-        const ctrl: AtomControl = this.current;
-        if (ctrl) {
-            await this.navigationService.remove(ctrl);
-        }
-
-        // this.popStack();
-    }
-
-    /**
-     * This will pop page from the stack and set as current
-     * @param windowClosed true if current page was closed by User Action
-     */
-    public popStack(windowClosed?: boolean): void {
-        if (!this.stack.length) {
-            // tslint:disable-next-line: no-console
-            console.warn(`FrameStack is empty !!`);
-            return;
-        }
-        const last = this.stack.pop();
-        AtomBinder.refreshItems(this.stack);
-        const old = this.current;
-        this.current = last.page;
-        (this.current.element as HTMLElement).style.display = "";
-        if (old) {
-            this.navigationService.remove(old).catch((e) =>
-                // tslint:disable-next-line: no-console
-                console.log(e));
-        }
-        this.setUrl(last.url);
-        if (this.saveScrollPosition) {
-            setTimeout(() => {
-                window.scrollTo(0, last.scrollY);
-            }, 200);
-        }
-    }
-
-    public canChange(): Promise<boolean> {
-        const c = this.current;
-        if (!c) {
-            return Promise.resolve(true);
-        }
-        return this.navigationService.remove(c);
-    }
-
-    public push(ctrl: AtomControl): void {
-
-        if (this.current) {
-            if (this.keepStack) {
-                (this.current.element as HTMLElement).style.display = "none";
-                this.stack.add({
-                    url: (this.current as any)._$_url ,
-                    page: this.current,
-                    scrollY: this.navigationService.screen.scrollTop
-                });
-            } else {
-                if (this.current === ctrl) {
-                    return;
-                }
-                const c1: AtomControl = this.current;
-                const e1: HTMLElement = c1.element as HTMLElement;
-                if (e1) {
-                    this.navigationService.remove(c1);
-                }
-            }
-        }
-
-        const element: HTMLElement = ctrl.element as HTMLElement;
-        const e = this.pagePresenter || this.element;
-        (e).appendChild(element);
-
-        this.current = ctrl;
-
-        if (this.saveScrollPosition) {
-            window.scrollTo(0, 0);
-        }
-    }
-
-    public async load(url: AtomUri, clearHistory?: boolean): Promise<AtomControl> {
-
-        // we will not worry if we cannot close the page or not
-        // as we are moving in detail view, we will come back to page
-        // without loosing anything
-
-        if (clearHistory) {
-            if (! await this.canChange()) {
-                return;
-            }
-        }
-
-        const { view, disposables } =
-            await AtomLoader.loadView<AtomControl>(url, this.app, true, () => new AtomWindowViewModel(this.app));
-        const urlString = url.host ? url.toString() : url.pathAndQuery;
-        (view as any)._$_url = urlString;
-
-        this.push(view);
-
-        const e = view.element;
-
-        // this.navigationService.currentTarget = e;
-
-        this.setUrl(urlString);
-        disposables.add({
-            dispose: () => {
-                const closed = this.current === view;
-                e.innerHTML = "";
-                e.remove();
-                // this.navigationService.currentTarget = null;
-                this.popStack(closed);
-            }
-        });
-        return view;
-    }
-
-    public toUpperCase(s: string): string {
-        return s.split("-")
-            .filter((t) => t)
-            .map((t) => t.substr(0, 1).toUpperCase() + t.substr(1))
-            .join("");
-    }
-
-    protected setUrl(urlString: string) {
-        this.mUrl = urlString;
-        AtomBinder.refreshValue(this, "url");
-        AtomBinder.refreshValue(this, "canGoBack");
-    }
-
-    protected async loadForReturn(url: AtomUri, clearHistory?: boolean): Promise<any> {
-        const hasHistory = this.keepStack;
-        this.keepStack = !clearHistory;
-
-        if (url === null) {
-            if (hasHistory && clearHistory) {
-                this.clearStack();
-            }
-            return;
-        }
-
-        const page = await this.load(url, clearHistory);
-        if (hasHistory) {
-            if (clearHistory) {
-                this.clearStack();
-            }
-        }
-        try {
-            return await (page as any).returnPromise;
-        } catch (ex) {
-            // this will prevent warning in chrome for unhandled exception
-            if ((ex.message ? ex.message : ex) === "cancelled") {
-                // tslint:disable-next-line: no-console
-                console.warn(ex);
-                return;
-            }
-            // throw new Error( ex.stack ? (ex + "\r\n" + ex.stack ) : ex);
-            throw ex;
-        }
-    }
-
-    protected clearStack(): void {
-        // clear stack... irrespective of cancellation !!
-        for (const iterator of this.stack) {
-            const e = iterator.page.element;
-            if (e) {
-                iterator.page.dispose();
-                e.innerHTML = "";
-                e.remove();
-            }
-        }
-        this.stack.clear();
-    }
-
-    protected preCreate(): void {
-        this.name = null;
-        this.stack = [];
-        this.keepStack = false;
-        this.current = null;
-        this.currentDisposable = null;
-        this.saveScrollPosition = false;
-        this.navigationService = this.app.resolve(NavigationService) as WindowService;
-        this.defaultControlStyle = AtomFrameStyle;
-        this.pagePresenter = null;
-        this.mUrl = null;
-        AtomUI.assignID(this.element);
-        this.runAfterInit(() => {
-            this.setPrimitiveValue(this.element, "styleClass", this.controlStyle.name);
-        });
-        this.backCommand = () => this.app.runAsync(() => this.onBackCommand());
-
-        // hook navigation...
-
-        const d = this.navigationService.registerNavigationHook((url, {
-            target,
-            clearHistory,
-            cancelToken }) => {
-            if (this.name) {
-                if (target !== this.name) {
-                    return undefined;
-                }
-            } else {
-                if (
-                    target !== "frame"
-                    && url.protocol !== "frame:") {
-                    return undefined;
-                }
-            }
-            if (cancelToken) {
-                cancelToken.registerForCancel(() => {
-                    this.backCommand();
-                });
-            }
-            return this.loadForReturn(url, clearHistory);
-        });
-        this.registerDisposable(d);
-    }
-}