@web-atoms/web-controls 2.6.2 → 2.6.3

package/src/form/AtomForm.ts

@@ -1,121 +0,0 @@
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import AtomFormStyle from "./AtomFormStyle.js";
-import { refreshInherited } from "@web-atoms/core/dist/core/Hacks.js";
-
-export default class AtomForm extends AtomControl {
-
-    /** Submit event fired when enter was pressed on last input on mobile (Done button event) */
-    public eventSubmit: () => void;
-
-    public focusNextOnEnter: boolean = /mobile/i.test(navigator.userAgent);
-
-    // public append(e: AtomControl | HTMLElement | Text): AtomControl {
-
-    //     // you can create nested AtomForm
-    //     if (e instanceof AtomForm) {
-    //         return super.append(e);
-    //     }
-
-    //     if (!(e instanceof AtomField)) {
-    //         throw new Error(`Only AtomField or AtomFormGroup can be added inside AtomForm`);
-    //     }
-    //     const fieldContainer = this.createField(e);
-    //     return super.append(fieldContainer);
-    // }
-
-    // protected createField(e: AtomField): AtomFieldTemplate {
-    //     const field = new (this.fieldTemplate)(this.app);
-    //     field.field = e;
-    //     return field;
-    // }
-
-    protected preCreate(): void {
-        super.preCreate();
-        this.defaultControlStyle = AtomFormStyle;
-        this.runAfterInit(() => {
-
-            this.element.classList.add(this.controlStyle.name);
-
-            this.app.callLater(() => {
-                refreshInherited(this, "viewModel");
-                refreshInherited(this, "localViewModel");
-                refreshInherited(this, "data");
-            });
-
-            this.watchKeyInput();
-        });
-    }
-
-    protected watchKeyInput(): void {
-        this.bindEvent(this.element, "keypress", (e) => {
-            this.onKeyPress(e as any);
-        });
-    }
-
-    protected onKeyPress(e: KeyboardEvent): void {
-        if (!this.focusNextOnEnter) {
-            return;
-        }
-        const target = e.target as HTMLElement;
-        if (!/input/i.test(target.tagName)) {
-            return;
-        }
-        const input = target as HTMLInputElement;
-        if (e.keyCode === 13) {
-            if (/submit/i.test(input.className)) {
-                this.fireSubmitEvent(input);
-                return;
-            }
-
-            const next = this.focusNextInput(target);
-            if (next) {
-                next.focus();
-            } else {
-                this.fireSubmitEvent(input);
-            }
-        }
-    }
-
-    protected fireSubmitEvent(target: HTMLInputElement): void {
-
-        // fire change event...
-        target.dispatchEvent(new Event("change"));
-
-        this.app.callLater(() => {
-            const e = new CustomEvent("submit", { bubbles: false, cancelable: false });
-            this.element.dispatchEvent(e);
-        });
-    }
-
-    private focusNextInput(target: Element): HTMLInputElement | HTMLTextAreaElement {
-        let found = false;
-        let result: HTMLInputElement | HTMLTextAreaElement = null;
-        function find(e: Element): HTMLInputElement | HTMLTextAreaElement {
-            if (result) {
-                return;
-            }
-            const isText = /input|textarea/i.test(e.tagName);
-            if (found) {
-                if (isText) {
-                    result = e as any;
-                    return;
-                }
-            }
-
-            if (e === target) {
-                found = true;
-            }
-
-            const child = e.firstElementChild;
-            if (child) {
-                find(child);
-            }
-            const next = e.nextElementSibling;
-            if (next) {
-                find(next);
-            }
-        }
-        find(document.body);
-        return result;
-    }
-}

package/src/form/AtomFormGroup.ts

@@ -1,10 +0,0 @@
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import AtomForm from "./AtomForm.js";
-
-export default class AtomFormGroup extends AtomForm {
-
-    protected watchKeyInput(): void {
-        // do nothing...
-        // let parent form watch key input
-    }
-}

package/src/form/AtomFormStyle.ts

@@ -1,64 +0,0 @@
-import Colors, { ColorItem } from "@web-atoms/core/dist/core/Colors.js";
-import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle.js";
-import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration.js";
-
-export default class AtomFormStyle extends AtomStyle {
-
-    public get root(): IStyleDeclaration {
-        return {
-            subclasses: {
-                " > .form-field": this.field
-            }
-        };
-    }
-
-    public get field(): IStyleDeclaration {
-        return {
-            subclasses: {
-                ".has-error": {
-                    backgroundColor: Colors.red.withAlphaPercent(0.1)
-                },
-                ".field-hidden": {
-                    display: "none"
-                },
-                " > .help": {
-                    marginLeft: "5px",
-                    borderRadius: "50%",
-                    display: "inline-block",
-                    width: "10px",
-                    height: "10px",
-                    padding: "3px",
-                    textAlign: "center",
-                    color: Colors.white,
-                    backgroundColor: Colors.limeGreen,
-                    cursor: "pointer",
-                    fontSize: "70%"
-                },
-                " > .label": {
-                    fontSize: "70%",
-                    verticalAlign: "top",
-                },
-                " > .required": {
-                    fontSize: "70%",
-                    color: Colors.red,
-                    verticalAlign: "top",
-                },
-                " > .presenter": {
-                    display: "block",
-                    clear: "both"
-                },
-                " > .error": {
-                    display: "inline-block",
-                    clear: "both",
-                    color: Colors.white,
-                    backgroundColor: Colors.red,
-                    fontWeight: "bold",
-                    padding: "3px",
-                    borderRadius: "3px",
-                    fontSize: "70%"
-                }
-            }
-        };
-    }
-
-}

package/src/form/HelpPopup.tsx

@@ -1,15 +0,0 @@
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import {AtomControl} from "@web-atoms/core/dist/web/controls/AtomControl.js";
-
-export default class HelpPopup extends AtomControl {
-
-	public create(): void {
-
-		this.render(
-		<div
-			style="padding:10px; margin:5px; border: 1px solid lightgray; background-color: white; border-radius: 5px;">
-			<span text={Bind.oneWay(() => this.viewModel.message)}></span>
-		</div>);
-	}
-}

package/src/mobile/pages/AtomPageFrame.ts

@@ -1,248 +0,0 @@
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import { AtomFrame } from "@web-atoms/core/dist/web/controls/AtomFrame.js";
-import AtomPageFrameTemplate from "./AtomPageFrameTemplate.js";
-import Page from "./Page.js";
-import PageFrameViewModel from "./PageFrameViewModel.js";
-import TitleTemplate from "./TitleTemplate.js";
-import { refreshInherited } from "@web-atoms/core/dist/core/Hacks.js";
-
-export default class AtomPageFrame extends AtomFrame {
-
-    public static frameTemplate = XNode.prepare("frameTemplate", true, true);
-
-    public static titleTemplate = XNode.prepare("titleTemplate", true, true);
-
-    @BindableProperty
-    public menuUrl: string;
-
-    public frameTemplate: any;
-
-    public titleTemplate: any;
-
-    @BindableProperty
-    public tabsTemplate: any;
-
-    private tabs: AtomControl;
-
-    private tabsPresenter: HTMLElement;
-
-    private created: boolean = false;
-
-    private frame: AtomPageFrameTemplate;
-
-    private previousCommands: AtomControl;
-
-    private previousTabs: AtomControl;
-
-    public preCreate(): void {
-        super.preCreate();
-        this.menuUrl = null;
-        this.tabsTemplate = null;
-        this.frameTemplate = AtomPageFrameTemplate;
-        this.titleTemplate = TitleTemplate;
-        this.created = false;
-        this.previousCommands = null;
-        this.previousTabs = null;
-
-        this.name = "root";
-        this.runAfterInit(() => {
-            this.saveScrollPosition = true;
-        });
-        this.localViewModel = this.resolve(PageFrameViewModel, () => ({
-            owner: this
-        }));
-        // this.bindEvent(window as any, "popstate", (e) => {
-        //     this.popStack(false);
-        // });
-    }
-
-    public clearStack(): void {
-        for (const iterator of this.stack) {
-            const e = iterator.page.element;
-            iterator.page.dispose();
-            e.remove();
-        }
-        this.stack.length = 0;
-    }
-
-    public onUpdateUI(): void {
-        if (this.created) {
-            return;
-        }
-
-        this.frame = new (this.frameTemplate)(this.app);
-
-        const title = new (this.titleTemplate)(this.app);
-
-        (this.frame.titlePresenter as HTMLElement).appendChild(title.element);
-
-        this.element.appendChild(this.frame.element);
-
-        this.pagePresenter = this.frame.pagePresenter;
-
-        this.tabsPresenter = this.frame.tabsPresenter;
-
-        this.frame.bind(this.frame.element, "tabs", [["this", "previousTabs"]], false, null, this);
-
-        this.created = true;
-
-        this.attachTabs(this.tabs);
-
-    }
-
-    public push(ctrl: AtomControl): void {
-        if (!this.frame) {
-            setTimeout(() => {
-                this.push(ctrl);
-            }, 100);
-            return;
-        }
-        (ctrl as any).title = null;
-        super.push(ctrl);
-    }
-
-    public onPropertyChanged(name: keyof AtomPageFrame): void {
-        switch (name) {
-            case "current":
-                this.bindCommands(this.current as Page);
-                this.bindTabs(this.current as Page);
-                break;
-            case "tabsTemplate":
-                this.createTabs();
-                break;
-        }
-    }
-
-    public pushUrl(url: string): void {
-        if (url === this.url) {
-            return;
-        }
-        // check if we have this url in stack as last item..
-        if (this.stack.length > 0) {
-            const last = this.stack[this.stack.length - 1];
-            if (last.url === url) {
-                this.popStack();
-                return;
-            }
-        }
-
-        this.url = url;
-    }
-
-    // public popStack(windowClosed?: boolean): void {
-    //     // check if top history location is different after popping stack
-    //     if (this.keepStack && windowClosed) {
-    //         history.back();
-    //         return;
-    //     }
-    //     return super.popStack(windowClosed);
-    // }
-
-    protected createTabs(): void {
-        if (!this.tabsTemplate) {
-            this.tabs = null;
-            this.disposeTabs();
-            return;
-        }
-        this.tabs = (new (this.tabsTemplate)(this.app));
-        this.tabs.element._logicalParent = this.element;
-        this.attachTabs(this.tabs);
-    }
-
-    protected setUrl(url: string): void {
-        super.setUrl(url);
-        this.localViewModel.url = url;
-    }
-
-    protected disposeTabs(): void {
-        if (!this.previousTabs) {
-            return;
-        }
-        const e = this.previousTabs.element;
-        this.previousTabs.dispose();
-        if (e) {
-            e.remove();
-        }
-        this.previousTabs = null;
-    }
-
-    protected bindTabs(v: Page): void {
-        if (!this.frame) {
-            return;
-        }
-
-        if (!this.tabsPresenter) {
-            return;
-        }
-
-        if (this.previousTabs) {
-            if (this.tabs !== this.previousTabs) {
-                this.disposeTabs();
-            }
-        }
-
-        if (!v.tabsTemplate) {
-            if (this.tabs && this.tabs !== this.previousTabs) {
-                this.attachTabs(this.tabs);
-            }
-            return;
-        }
-
-        const t = (new (v.tabsTemplate)(this.app)) as AtomControl;
-        t.element._logicalParent = v.element;
-        this.attachTabs(t);
-    }
-
-    protected bindCommands(v: Page): void {
-
-        if (!this.frame) {
-            return;
-        }
-
-        if (!this.frame.commandPresenter) {
-            return;
-        }
-
-        // remove existing commands...
-        if (this.previousCommands) {
-            const e = this.previousCommands.element;
-            // e is null if the control was already
-            // destroyed when page was switched from stack
-            if (e) {
-                this.previousCommands.dispose();
-                e.remove();
-            }
-            this.previousCommands = null;
-        }
-
-        if (!v.commandTemplate) {
-            return;
-        }
-
-        const c: AtomControl = new (v.commandTemplate)(this.app);
-        this.previousCommands = c;
-        c.element._logicalParent = v.element;
-        this.frame.commandPresenter.appendChild(c.element);
-    }
-
-    private attachTabs(t: AtomControl) {
-        if (!t || !t.element) {
-            return;
-        }
-        if (!this.tabsPresenter) {
-            setTimeout(() => {
-                this.attachTabs(t);
-            }, 100);
-            return;
-        }
-        this.tabsPresenter.innerHTML = "";
-        this.tabsPresenter.append(t.element);
-        this.previousTabs = t;
-        refreshInherited(t, "data");
-        refreshInherited(t, "viewModel");
-        refreshInherited(t, "localViewModel");
-    }
-
-}

package/src/mobile/pages/AtomPageFrameStyle.ts

@@ -1,57 +0,0 @@
-import Colors from "@web-atoms/core/dist/core/Colors.js";
-import AtomFrameStyle from "@web-atoms/core/dist/web/styles/AtomFrameStyle.js";
-import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle.js";
-import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration.js";
-
-export default class AtomPageFrameStyle extends AtomStyle {
-
-    public get root(): IStyleDeclaration {
-        return {
-            subclasses: {
-                " .title-bar": {
-
-                    backgroundColor: Colors.lightSeaGreen,
-                    position: "fixed",
-                    left: 0,
-                    top: 0,
-                    right: 0,
-
-                    padding: "4px",
-                    subclasses: {
-                        " .icon": {
-                            display: "inline-block",
-                            marginRight: "4px"
-                        },
-                        " .title": {
-                            display: "inline-block"
-                        },
-                        " .commands": {
-                            display: "inline-block",
-                            float: "right"
-                        }
-                    }
-                },
-
-                " .page-presenter": {
-                    marginTop: "25px"
-                },
-
-                " .tabs": {
-                    position: "fixed",
-                    bottom: 0,
-                    left: 0,
-                    right: 0
-                }
-            }
-        };
-    }
-
-}
-
-export class FrameStyle extends AtomFrameStyle {
-
-    public get root(): IStyleDeclaration {
-        return {};
-    }
-
-}

package/src/mobile/pages/AtomPageFrameTemplate.tsx

@@ -1,59 +0,0 @@
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-import {BindableProperty} from "@web-atoms/core/dist/core/BindableProperty.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import {AtomControl} from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import AtomPageFrameStyle, { FrameStyle } from "./AtomPageFrameStyle.js";
-
-export default class AtomPageFrameTemplate extends AtomControl {
-
-	public  url: string;
-
-	public titlePresenter: HTMLElement ;
-
-	public commandPresenter: HTMLElement ;
-
-	public  pagePresenter: HTMLElement ;
-
-	public  tabsPresenter: HTMLElement ;
-
-	public  tabs: any  ;
-
-	public create(): void {
-
-		this.defaultControlStyle = AtomPageFrameStyle;
-
-		this.render(
-		<div class={this.controlStyle.name}>
-			<div class="title-bar">
-				<span
-					class={Bind.oneWay(() => `icon fas ${this.localViewModel.canGoBack ? "fa-arrow-left" : "fa-bars" }`)}
-					eventClick={Bind.event(() => this.localViewModel.iconClick())}></span>
-				<div
-					class="title"
-					presenter={Bind.presenter("titlePresenter")}></div>
-				<div
-					class="commands"
-					presenter={Bind.presenter("commandPresenter")}></div>
-			</div>
-
-			<div
-				class="page-presenter"
-				presenter={Bind.presenter("pagePresenter")}></div>
-
-			<div
-				class="tabs"
-				styleDisplay={Bind.oneWay(() => this.tabs ? "" : "none")}
-				presenter={Bind.presenter("tabsPresenter")}></div>
-		</div>
-		);
-	}
-
-	protected preCreate() {
-		this.url = null;
-		this.titlePresenter = null;
-		this.commandPresenter = null;
-		this.pagePresenter = null;
-		this.tabsPresenter = null;
-		this.tabs = null;
-	}
-}

package/src/mobile/pages/Page.ts

@@ -1,28 +0,0 @@
-import { App } from "@web-atoms/core/dist/App.js";
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-
-export default class Page extends AtomControl {
-
-    public static commandTemplate = XNode.prepare("commandTemplate", true, true);
-
-    public static tabsTemplate = XNode.prepare("tabsTemplate", true, true);
-
-    public title: string;
-
-    public tag: string;
-
-    public commandTemplate: any;
-
-    public tabsTemplate: any;
-
-    public preCreate(): void {
-        this.title = null;
-        this.tag = null;
-        this.commandTemplate = null;
-        this.tabsTemplate = null;
-        this.bind(this.element, "title", [["viewModel", "title"]]);
-    }
-
-}