@web-atoms/web-controls 2.1.202 → 2.1.205

package/src/basic/Editable.tsx

@@ -5,7 +5,7 @@ import IElement from "./IElement";
 type Getter = (item) => any;
 
 export interface IPropertyInfo {
-    key?: string,
+    key?: string;
     getter(item): any;
     setter(item, value): void;
 }
@@ -20,15 +20,15 @@ export function getPropertyInfo(propertyPath: string[] | string | IPropertyInfo)
                     item[propertyPath] = value;
                 }
             }
-        }
+        };
     }
     if (!Array.isArray(propertyPath)) {
         return propertyPath;
     }
     const last = propertyPath.pop();
-    let getterIntermediate = undefined;
+    let getterIntermediate;
     if (propertyPath.length > 0) {
-        getterIntermediate = function(item) {
+        getterIntermediate = (item) => {
             if (!item) {
                 return item;
             }
@@ -39,19 +39,19 @@ export function getPropertyInfo(propertyPath: string[] | string | IPropertyInfo)
                 }
             }
             return item;
-        }
+        };
     }
-    let setter = (item, value) => {
+    const setter = (item, value) => {
         if (item) {
             if (getterIntermediate) {
-                item = getterIntermediate(item)
+                item = getterIntermediate(item);
             }
             if (item) {
                 item[last] = value;
             }
         }
-    }
-    let getter = (item) => {
+    };
+    const getter = (item) => {
         if (!item) {
             return item;
         }
@@ -64,7 +64,7 @@ export function getPropertyInfo(propertyPath: string[] | string | IPropertyInfo)
         key: propertyPath.join(","),
         getter,
         setter
-    }
+    };
 }
 
 const handlers = {};
@@ -72,7 +72,7 @@ const handlers = {};
 function registerEvent(property: IPropertyInfo, changeEvents: string[], editorValuePath: (editor) => any) {
     property.key ??= property.setter + ":" + property.getter;
     const name = `${property.key}:${changeEvents.join(",")}`;
-    if(!handlers[name]) {
+    if (!handlers[name]) {
         handlers[name] = changeEvents;
         for (const iterator of changeEvents) {
             document.body.addEventListener(iterator, (e) => {
@@ -84,6 +84,7 @@ function registerEvent(property: IPropertyInfo, changeEvents: string[], editorVa
                     const [ _, repeater, item] = ri;
                     const oldValue = property.getter(item);
                     const value = editorValuePath(e.target);
+                    // tslint:disable-next-line: triple-equals
                     if (oldValue != value) {
                         property.setter(item, value);
                         repeater.refreshItem(item);
@@ -94,19 +95,10 @@ function registerEvent(property: IPropertyInfo, changeEvents: string[], editorVa
     }
 }
 
-
 export interface IEditable extends IElement {
     propertyPath: string[] | string | IPropertyInfo;
 }
 
-export default function Editable(
-    {
-        propertyPath
-    }: IEditable
-) {
-
-}
-
 export function EditableInput(
     {
         propertyPath,

package/src/html-editor/AtomHtmlEditor.tsx

@@ -6,9 +6,11 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import AtomRepeater from "../basic/AtomRepeater";
 import AddImage, { showImageDialog } from "./commands/AddImage";
 import AddLink from "./commands/AddLink";
 import Align from "./commands/Align";
+import AttachFile from "./commands/AttachFile";
 import Bold from "./commands/Bold";
 import ChangeColor from "./commands/ChangeColor";
 import ChangeFont from "./commands/ChangeFont";
@@ -39,6 +41,21 @@ const css = CSS(StyleRule()
     .child(StyleRule("iframe")
         .flexStretch()
     )
+    .child(StyleRule(".files")
+        .child(StyleRule(".file")
+            .flexLayout({ inline: true })
+            .borderColor(Colors.lightGray.withAlphaPercent(0.5))
+            .borderWidth(1)
+            .borderStyle("solid")
+            .borderRadius(15)
+            .paddingLeft(10)
+            .paddingRight(10)
+            .child(StyleRule("label")
+                .maxWidth(100)
+                .textEllipsis()
+            )
+        )
+    )
     .nested(StyleRule(".toolbar")
         .display("flex")
         .child(StyleRule(".command")
@@ -148,6 +165,9 @@ export default class AtomHtmlEditor extends AtomControl {
     @BindableProperty
     public version: number;
 
+    @BindableProperty
+    public files: File[];
+
     public editor: HTMLDivElement;
 
     public eventDocumentCreated: (e: CustomEvent<HTMLDivElement>) => void;
@@ -200,6 +220,7 @@ export default class AtomHtmlEditor extends AtomControl {
 
     protected preCreate() {
         this.version = 1;
+        this.files = [];
         this.runAfterInit(() => {
             this.setup();
         });
@@ -323,6 +344,7 @@ export default class AtomHtmlEditor extends AtomControl {
                 <IndentMore/>
                 <Separator/>
                 <AddImage/>
+                <AttachFile/>
                 <Separator/>
                 <AddLink/>
                 <Unlink/>
@@ -333,6 +355,19 @@ export default class AtomHtmlEditor extends AtomControl {
         }
         super.render(<div {... node.attributes}>
             { ... node.children as any[]}
+            <AtomRepeater
+                class="files"
+                event-item-delete={(ce) => this.files.remove(ce.detail)}
+                items={Bind.oneWay(() => this.files)}
+                itemRenderer={(file: File) => <div class="file">
+                    <i class="ri-attachment-2"/>
+                    <label text={file.name}/>
+                    <i
+                        data-click-event="item-delete"
+                        class="ri-close-circle-fill"
+                        />
+                </div>}
+                />
             <iframe class="editor-frame"/>
         </div>);
     }

package/src/html-editor/commands/AttachFile.tsx

@@ -0,0 +1,63 @@
+import AtomHtmlEditor from "../AtomHtmlEditor";
+import CommandButton from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
+
+function promptForFiles(
+    accept = "*",
+    multiple = true
+) {
+    const file = document.createElement("input");
+    file.type = "file";
+    file.multiple = multiple;
+    file.accept = accept;
+    file.style.position = "absolute";
+    file.style.left = "-1000px";
+    file.style.top = "-1000px";
+    document.body.append(file);
+    const previous = file;
+    return new Promise<File[]>((resolve, reject) => {
+        file.addEventListener("change", () => {
+            if (file.files.length) {
+                const files = Array.from(file.files);
+                resolve(files);
+            } else {
+                reject("cancelled");
+            }
+            if (previous) {
+                previous.remove();
+            }
+        });
+        file.dispatchEvent(new MouseEvent("click"));
+    });
+}
+
+export default function AttachFile({
+    eventInsertHtml = (source: AtomHtmlEditor, e: Event) => {
+        const ce = new CustomEvent("attachFile",
+        {
+            detail: {
+                source,
+                files: source.files
+            },
+            cancelable: true
+        });
+        source.element.dispatchEvent(ce);
+        if (ce.defaultPrevented) {
+            return;
+        }
+        source.app.runAsync(async () => {
+            const result = await promptForFiles();
+            source.files ??= [];
+            source.files.addAll(result);
+        })
+    },
+    insertCommand = HtmlCommands.insertImage
+}) {
+    return CommandButton({
+        icon: "ri-attachment-2",
+        insertCommand,
+        disabled: false,
+        title: "Insert Image",
+        eventInsertHtml
+    });
+}

package/src/html-editor/commands/CommandButton.tsx

@@ -37,7 +37,7 @@ function insert(callback: (s: AtomHtmlEditor, e: Event) => Promise<string> | str
     return async (s: AtomHtmlEditor, e: Event) => {
         let r = callback(s, e);
         if (typeof r !== "string") {
-            if (r.then) {
+            if (r?.then) {
                 r = await r;
             }
         }

package/src/mobile-app/MobileApp.tsx

@@ -0,0 +1,348 @@
+import { AtomLoader } from "@web-atoms/core/dist/core/AtomLoader";
+import { AtomUri } from "@web-atoms/core/dist/core/AtomUri";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import Colors from "@web-atoms/core/dist/core/Colors";
+import { CancelToken, IClassOf, IDisposable } from "@web-atoms/core/dist/core/types";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { AtomWindowViewModel } from "@web-atoms/core/dist/view-model/AtomWindowViewModel";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import PopupService, { ConfirmPopup, IPopup, PopupControl } from "@web-atoms/core/dist/web/services/PopupService";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+
+CSS(StyleRule()
+    .absolutePosition({ left: 0, top: 0, bottom: 0, right: 0})
+    .overflow("hidden")
+, "div[data-page-app=page-app]");
+
+CSS(StyleRule()
+    .absolutePosition({ left: 0, top: 0, bottom: 0, right: 0})
+    .overflow("hidden")
+    .transition("transform 0.3s ease-out")
+    .display("grid")
+    .gridTemplateRows("25px 1fr auto")
+    .gridTemplateColumns("25px 1fr auto")
+    .child(StyleRule("[data-icon-button=icon-button]")
+        .padding(5)
+    )
+    .child(StyleRule("[data-page-element=header]")
+        .gridRowStart("1")
+        .gridColumnStart("1")
+        .gridColumnEnd("span 3")
+        .backgroundColor(Colors.silver)
+    )
+    .child(StyleRule("[data-page-element=icon]")
+        .gridRowStart("1")
+        .gridColumnStart("1")
+    )
+    .child(StyleRule("[data-page-element=title]")
+        .gridRowStart("1")
+        .gridColumnStart("2")
+    )
+    .child(StyleRule("[data-page-element=action]")
+        .gridRowStart("1")
+        .gridColumnStart("3")
+    )
+    .child(StyleRule("[data-page-element=content]")
+        .gridRowStart("2")
+        .gridColumnStart("1")
+        .gridColumnEnd("span 3")
+    )
+    .child(StyleRule("[data-page-element=footer]")
+        .gridRowStart("3")
+        .gridColumnStart("1")
+        .gridColumnEnd("span 3")
+    )
+    .transform("translate(100%,0)" as any)
+    .and(StyleRule("[data-page-state=ready]")
+        .transform("translate(0,0)" as any)
+    )
+    .and(StyleRule("[data-page-state=hidden]")
+        .transform("translate(-100%,0)" as any)
+    )
+, "div[data-base-page=base-page]");
+
+export class BasePage extends AtomControl {
+
+    public close: (result) => void;
+
+    public cancel: (error?) => void;
+
+    @BindableProperty
+    public closeWarning: string;
+
+    @BindableProperty
+    public title?: string;
+
+    public titleRenderer: () => XNode;
+
+    public iconRenderer: () => XNode;
+
+    public actionRenderer: () => XNode;
+
+    public footerRenderer: () => XNode;
+
+    public headerBackgroundRenderer: () => XNode;
+
+    public iconClass: any;
+
+    public async requestCancel() {
+        if (this.closeWarning) {
+            if (!await ConfirmPopup.showModal<boolean>({
+                parameters: {
+                    message : this.closeWarning
+                }
+            })) {
+                return;
+            }
+        }
+        this.cancel();
+    }
+
+    protected preCreate(): void {
+        this.element.dataset.basePage = "base-page";
+        this.iconClass = "";
+        this.runAfterInit(() => {
+            if (!this.element) {
+                return;
+            }
+            const anyAutofocus = this.element.querySelector(`*[autofocus]`);
+            if (!anyAutofocus) {
+                const windowContent = this.element.querySelector(`[data-page-element="content"]`);
+                if (windowContent) {
+                    const firstInput = windowContent.querySelector("input,button,a,textarea") as HTMLInputElement;
+                    if (firstInput) {
+                        firstInput.focus();
+                        return;
+                    }
+                }
+                return;
+            }
+        });
+
+        setTimeout((p) => {
+            p.dataset.pageState = "ready";
+        }, 10, this.element);
+    }
+
+    protected render(node: XNode, e?: any, creator?: any): void {
+        this.render = super.render;
+        const titleContent = this.titleRenderer?.() ?? <span
+            class="title-text" text={Bind.oneWay(() => this.title)}/>;
+        const icon = this.iconRenderer?.() ?? <i
+            data-icon-button="icon-button"
+            class={Bind.oneWay(() => this.iconClass)}
+            eventClick={(e1) => this.dispatchIconClickEvent(e1)}/>;
+        const action = this.actionRenderer?.() ?? undefined;
+        const footer = this.footerRenderer?.() ?? undefined;
+        const header = this.headerBackgroundRenderer?.() ?? <div/>;
+        const a = node.attributes ??= {};
+        a["data-page-element"] = "content";
+        if (header) {
+            header.attributes ??= {};
+            header.attributes["data-page-element"] = "header";
+        }
+        if (icon) {
+            icon.attributes ??= {};
+            icon.attributes["data-page-element"] = "icon";
+        }
+        if (titleContent) {
+            titleContent.attributes ??= {};
+            titleContent.attributes["data-page-element"] = "title";
+        }
+        if (action) {
+            action.attributes ??= {};
+            action.attributes["data-page-element"] = "action";
+        }
+        if (footer) {
+            footer.attributes ??= {};
+            footer.attributes["data-page-element"] = "footer";
+        }
+        super.render(<div viewModelTitle={Bind.oneWay(() => this.viewModel.title)}>
+            { header }
+            { icon }
+            { titleContent }
+            { action }
+            { node }
+            { footer }
+        </div>);
+    }
+
+    protected dispatchIconClickEvent(e: Event) {
+        const ce = new CustomEvent("iconClick", { bubbles: true });
+        e.target.dispatchEvent(ce);
+    }
+}
+
+export class ContentPage extends BasePage {
+}
+
+export class TabbedPage extends BasePage {
+
+}
+
+export class Drawer extends AtomControl {
+    protected preCreate(): void {
+        this.bindEvent(this.element, "click", (e) => this.closeDrawer());
+    }
+
+    protected closeDrawer() {
+        const ce = new CustomEvent("closeDrawer", { bubbles: true });
+        this.element.dispatchEvent(ce);
+    }
+}
+
+export default class MobileApp extends AtomControl {
+
+    public static drawer = XNode.prepare("drawer", true, true);
+
+    public drawer: () => XNode;
+
+    public drawerCancelToken: CancelToken;
+
+    public pages: BasePage[];
+
+    public selectedPage: BasePage;
+
+    public icon: any;
+
+    public async back() {
+        if (this.pages.length === 0) {
+
+            const drawer = this.drawer;
+            if (drawer) {
+                const drawerNode = this.drawer();
+                const da = drawerNode.attributes ??= {};
+                da["event-click"] = (de: Event) => {
+                    de.target.dispatchEvent(new CustomEvent("closeDrawer", { bubbles: true }));
+                };
+                class DrawerPopup extends PopupControl {
+                    protected create(): void {
+                        this.render(<div event-close-drawer={() => cancelToken.cancel()}>
+                            { drawerNode }
+                        </div>);
+                    }
+                }
+                const cancelToken = new CancelToken();
+                this.drawerCancelToken = cancelToken;
+                DrawerPopup.showControl(this.icon, { cancelToken });
+            }
+
+            return;
+        }
+
+        this.selectedPage.cancel("cancelled");
+    }
+
+    protected preCreate(): void {
+        this.drawer = null;
+        this.element.dataset.pageApp = "page-app";
+        this.pages = [];
+        this.selectedPage = null;
+        this.bindEvent(this.element, "iconClick", (e) => { this.icon = e.target; return this.back(); });
+        this.bindEvent(this.element, "closeDrawer", (e) => {
+            this.drawerCancelToken?.cancel();
+            this.drawerCancelToken = undefined;
+        });
+        const navigationService = this.app.resolve(NavigationService);
+        navigationService.registerNavigationHook(
+            (uri, { target, clearHistory }) => {
+                if (target === "app") {
+                    return this.loadPageForReturn(uri, clearHistory);
+                }
+            }
+        );
+    }
+
+    protected async loadPageForReturn(url: AtomUri, clearHistory: boolean): Promise<any> {
+        const p = await this.loadPage(url, clearHistory);
+        try {
+            return await (p 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 ex;
+        }
+    }
+
+    protected async loadPage(url: AtomUri, clearHistory: boolean) {
+        const { view: page, disposables } =
+        await AtomLoader.loadView<BasePage>(url, this.app, false, () => new AtomWindowViewModel(this.app));
+        page.title = "Title";
+        if (url.query && url.query.title) {
+            page.title = url.query.title.toString();
+        }
+
+        page.bind(page.element, "title", [["viewModel", "title"]]);
+
+        const selectedPage = this.selectedPage;
+        if (selectedPage) {
+            selectedPage.element.dataset.pageState = "hidden";
+            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.element.appendChild(page.element);
+        this.selectedPage = page;
+
+        const vm = page.viewModel as AtomWindowViewModel;
+        const element = page.element;
+        return new Promise((resolve, reject) => {
+            const cancel: any = (error?) => {
+                // page.dispose();
+                // element.remove();
+                element.dataset.pageState = "";
+                const last = this.pages.pop();
+                last.element.dataset.pageState = "ready";
+                setTimeout(() => {
+                    page.dispose();
+                    element.remove();
+                    reject(error ?? "cancelled");
+                    this.selectedPage = last;
+                }, 300);
+            };
+            const close: any = (r) => {
+                // page.dispose();
+                // element.remove();
+                delete element.dataset.pageState;
+                const last = this.pages.pop();
+                last.element.dataset.pageState = "ready";
+                setTimeout(() => {
+                    page.dispose();
+                    element.remove();
+                    resolve(r);
+                    this.selectedPage = last;
+                }, 300);
+            };
+            vm.cancel = cancel;
+            page.cancel = cancel;
+            vm.close = close;
+            page.close = close;
+        });
+
+    }
+}