@web-atoms/core 2.6.13 → 2.6.17

package/src/web/controls/AtomWindow.tsx

@@ -1,342 +0,0 @@
-import { App } from "../../App.js";
-import Bind from "../../core/Bind.js";
-import { BindableProperty } from "../../core/BindableProperty.js";
-import { IClassOf, IDisposable, IRect } from "../../core/types.js";
-import XNode from "../../core/XNode.js";
-import { AtomWindowViewModel } from "../../view-model/AtomWindowViewModel.js";
-import { AtomUI } from "../core/AtomUI.js";
-import { AtomTheme } from "../styles/AtomTheme.js";
-import { AtomWindowStyle } from "../styles/AtomWindowStyle.js";
-import { AtomControl } from "./AtomControl.js";
-import { AtomTemplate } from "./AtomTemplate.js";
-
-export function getTemplateParent(e: HTMLElement) {
-    const tp = e._templateParent;
-    if (tp) {
-        return tp;
-    }
-    const p = e._logicalParent || e.parentElement;
-    if (p) {
-        return getTemplateParent(p);
-    }
-}
-
-export class AtomWindowFrameTemplate extends AtomTemplate {
-
-    public get templateParent(): AtomWindow {
-        return getTemplateParent(this.element) as AtomWindow;
-    }
-
-    public commandPresenter: HTMLElement;
-
-    public titlePresenter: HTMLElement;
-
-    protected preCreate() {
-        this.titlePresenter = null;
-        this.commandPresenter = null;
-        this.contentPresenter = null;
-        super.preCreate();
-    }
-
-    protected create(): void {
-
-        // remember, if you do not wish to use dynamic themes
-        // then use one time binding
-        this.render(<div
-            class="frame"
-            styleWidth={Bind.oneWay(() => this.templateParent.width || undefined)}
-            styleHeight={Bind.oneWay(() => this.templateParent.height || undefined)}
-            styleLeft={Bind.oneWay(() => this.templateParent.x >= 0 ? `${this.templateParent.x}px` : undefined)}
-            styleTop={Bind.oneWay(() => this.templateParent.y >= 0 ? `${this.templateParent.y}px` : undefined)}
-            styleMarginTop={Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined)}
-            styleMarginLeft={Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined)}
-            styleMarginRight={Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined)}
-            styleMarginBottom={Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined)}>
-            <div
-                class="title-presenter"
-                presenter={Bind.presenter("titlePresenter")}/>
-            <div
-                class="content-presenter"
-                presenter={Bind.presenter("contentPresenter")}/>
-            <div
-                class="command-bar-presenter"
-                presenter={Bind.presenter("commandPresenter")}/>
-        </div>);
-        // this.bind(this.element, "styleClass", [["templateParent", "controlStyle", "frame"]]);
-        // this.bind(this.element, "styleWidth", [["templateParent", "width"]], false, (v) => v || undefined);
-        // this.bind(this.element, "styleHeight", [["templateParent", "height"]], false, (v) => v || undefined);
-        // this.bind(this.element, "styleLeft", [["templateParent", "x"]],
-        //     false, (v) => v >= 0 ? v + "px" : undefined);
-        // this.bind(this.element, "styleTop", [["templateParent", "y"]],
-        //     false, (v) => v >= 0 ? v + "px" : undefined);
-        // this.bind(this.element, "styleMarginTop", [["templateParent", "x"]], false, (v) => v >= 0 ? "0" : undefined);
-        // this.bind(this.element, "styleMarginLeft", [["templateParent", "x"]],
-        //  false, (v) => v >= 0 ? "0" : undefined);
-        // this.bind(this.element, "styleMarginRight", [["templateParent", "x"]],
-        // false, (v) => v >= 0 ? "0" : undefined);
-        // this.bind(this.element, "styleMarginBottom", [["templateParent", "x"]],
-        // false, (v) => v >= 0 ? "0" : undefined);
-        // // add title host
-        // const titlePresenter = document.createElement("div");
-        // this.bind(titlePresenter, "styleClass", [["templateParent", "controlStyle", "titlePresenter"]]);
-        // // titleHost.classList.add(style.titleHost.className);
-        // this.titlePresenter = titlePresenter;
-        // this.element.appendChild(titlePresenter);
-
-        // // add content presenter
-        // const cp = document.createElement("div");
-        // this.bind(cp, "styleClass", [["templateParent", "controlStyle", "content"]]);
-        // // cp.classList.add(style.content.className);
-        // this.contentPresenter = cp;
-        // this.element.appendChild(cp);
-
-        // // create command presenter
-        // const cdp = document.createElement("div");
-        // // cdp.classList.add(style.commandBar.className);
-        // this.bind(cdp, "styleClass", [["templateParent", "controlStyle", "commandBar"]]);
-        // this.commandPresenter = cdp;
-        // this.element.appendChild(cdp);
-
-    }
-
-}
-
-class AtomWindowTitleTemplate extends AtomControl {
-
-    public get templateParent(): AtomWindow {
-        return getTemplateParent(this.element) as AtomWindow;
-    }
-
-    protected create(): void {
-
-        this.render(<div
-            class="title-host">
-            <span
-                class="title"
-                text={Bind.oneWay(() => this.templateParent.title)}
-                />
-            <button
-                class="close-button"
-                eventClick={Bind.event(() => this.templateParent.close())}
-                />
-        </div>);
-
-        // this.bind(this.element, "styleClass", [["templateParent", "controlStyle", "titleHost"]]);
-
-        // // add title
-
-        // const title = document.createElement("span");
-        // this.bind(title, "styleClass", [["templateParent", "controlStyle", "title"]]);
-        // // title.classList.add(style.title.className);
-        // this.bind(title, "text", [["templateParent", "title"]], false);
-
-        // // add close button
-        // const closeButton = document.createElement("button");
-        // this.bind(closeButton, "styleClass", [["templateParent", "controlStyle", "closeButton"]]);
-        // // closeButton.textContent = "x";
-
-        // this.bindEvent(closeButton, "click", (e) => {
-        //     const w = getTemplateParent(this.element) as AtomWindow;
-        //     w.close();
-        // });
-
-        // // append title host > title
-
-        // this.append(title);
-        // this.append(closeButton);
-    }
-}
-
-export class AtomWindow extends AtomControl {
-
-    public static windowTemplate = XNode.prepare("windowTemplate", true, true);
-
-    public static commandTemplate = XNode.prepare("commandTemplate", true, true);
-
-    public static titleTemplate = XNode.prepare("titleTemplate", true, true);
-
-    public static frameTemplate = XNode.prepare("frameTemplate", true, true);
-
-    public get templateParent() {
-        return getTemplateParent(this.element);
-    }
-
-    public title: string = "";
-
-    public width: string = "";
-
-    public height: string = "";
-
-    public x: number = -1;
-
-    public y: number = -1;
-
-    public windowTemplate: IClassOf<AtomControl>;
-
-    public commandTemplate: IClassOf<AtomControl>;
-
-    public titleTemplate: IClassOf<AtomControl> = AtomWindowTitleTemplate;
-
-    public frameTemplate: IClassOf<AtomWindowFrameTemplate> = AtomWindowFrameTemplate;
-
-    private isReady: boolean = false;
-
-    public onPropertyChanged(name: string): void {
-        switch (name) {
-            case "windowTemplate":
-            case "commandTemplate":
-            case "frameTemplate":
-                this.invalidate();
-                break;
-        }
-    }
-
-    public close(): void {
-
-        const vm = this.viewModel as AtomWindowViewModel;
-        if (vm.cancel) {
-            this.app.runAsync(() => vm.cancel());
-            return;
-        }
-
-        const message = `atom-window-cancel:${(this as any).id}`;
-        const device = this.app.resolve(App);
-        device.broadcast(message, "cancelled");
-    }
-
-    public onUpdateUI(): void {
-        if (!(this.windowTemplate && this.frameTemplate)) {
-            return;
-        }
-
-        if (this.isReady) {
-            return;
-        }
-
-        this.bind(this.element, "title", [["viewModel", "title"]]);
-
-        // let us create frame first...
-        const frame = new (this.frameTemplate)(this.app);
-        const fe = frame.element;
-
-        // setup drag and drop for the frame...
-        const titleContent = new (this.titleTemplate)(this.app);
-        (titleContent.element)._templateParent = this;
-        frame.titlePresenter.appendChild(titleContent.element);
-
-        this.setupDragging(frame.titlePresenter);
-
-        this.element.classList.add("frame-host");
-
-        fe._logicalParent = this.element;
-        fe._templateParent = this;
-
-        if (!frame.contentPresenter) {
-            throw new Error("ContentPresenter must be set inside frameTemplate before creating window");
-        }
-
-        const content = new (this.windowTemplate)(this.app);
-        (content.element)._templateParent = this;
-        this.setElementClass(content.element, { content: 1 });
-        frame.contentPresenter.appendChild(content.element);
-
-        if (this.commandTemplate) {
-            if (!frame.commandPresenter) {
-                throw new Error("CommandPresenter must be set inside frameTemplate" +
-                    "before creating window if command template is present");
-            }
-            const command = new (this.commandTemplate)(this.app);
-            (command.element)._templateParent = this;
-            this.setElementClass(command.element, { "command-bar": 1 });
-            frame.commandPresenter.appendChild(command.element);
-        }
-        this.append(frame);
-
-        // lets center frame...
-        setTimeout(() => {
-            this.centerFrame(frame.element);
-        }, 100);
-        this.isReady = true;
-    }
-
-    protected preCreate() {
-        this.defaultControlStyle = AtomWindowStyle;
-        this.title = null;
-        this.width = "";
-        this.height = "";
-        this.x = -1;
-        this.y = -1;
-        this.windowTemplate = null;
-        this.commandTemplate = null;
-        this.titleTemplate = AtomWindowTitleTemplate;
-        this.frameTemplate = AtomWindowFrameTemplate;
-        super.preCreate();
-        this.render(<div
-            styleClass={Bind.oneTime(() => this.controlStyle.name)}
-            ></div>);
-    }
-
-    private centerFrame(e: HTMLElement): void {
-        /// window is destroyed probably..
-        if (!this.element) {
-            return;
-        }
-        const parent = this.element.parentElement;
-        if (parent as any === window || parent as any === document.body) {
-            return;
-        }
-        if (parent.offsetWidth <= 0 || parent.offsetHeight <= 0) {
-            setTimeout(() => {
-                this.centerFrame(e);
-            }, 100);
-            return;
-        }
-
-        if (e.offsetWidth <= 0 || e.offsetHeight <= 0) {
-            setTimeout(() => {
-                this.centerFrame(e);
-            }, 100);
-            return;
-        }
-
-        const x = (parent.offsetWidth - e.offsetWidth) / 2;
-        const y = (parent.offsetHeight - e.offsetHeight) / 2;
-        this.x = x;
-        this.y = y;
-        e.style.opacity = "1";
-        this.element.style.removeProperty("opacity");
-    }
-
-    private setupDragging(tp: HTMLElement): void {
-        this.bindEvent(tp, "mousedown", (startEvent: MouseEvent) => {
-            startEvent.preventDefault();
-            const disposables: IDisposable[] = [];
-            // const offset = AtomUI.screenOffset(tp);
-            const offset = { x: tp.parentElement.offsetLeft, y: tp.parentElement.offsetTop };
-            const rect: IRect = { x: startEvent.clientX, y: startEvent.clientY };
-            const cursor = tp.style.cursor;
-            tp.style.cursor = "move";
-            disposables.push(this.bindEvent(document.body, "mousemove", (moveEvent: MouseEvent) => {
-                const { clientX, clientY } = moveEvent;
-                const dx = clientX - rect.x;
-                const dy = clientY - rect.y;
-
-                offset.x += dx;
-                offset.y += dy;
-
-                this.x = offset.x;
-                this.y = offset.y;
-
-                rect.x = clientX;
-                rect.y = clientY;
-            }));
-            disposables.push(this.bindEvent(document.body, "mouseup", (endEvent: MouseEvent) => {
-                tp.style.cursor = cursor;
-                for (const iterator of disposables) {
-                    iterator.dispose();
-                }
-            }));
-        });
-    }
-
-}

package/src/web/samples/MovieService.ts

@@ -1,12 +0,0 @@
-import { RegisterSingleton } from "../../di/RegisterSingleton.js";
-import { BaseService, Get } from "../../services/http/RestService.js";
-
-@RegisterSingleton
-export class MovieService extends BaseService {
-
-    @Get("@web-atoms/core/dist/web/samples/tabs/views/List.json")
-    public async countryList(): Promise<any> {
-        return null;
-    }
-
-}

package/src/web/samples/demo/app.ts

@@ -1,15 +0,0 @@
-import WebApp from "../../../web/WebApp.js";
-import { MovieList } from "./views/MovieList.js";
-import { MovieListViewModel } from "./views/MovieListViewModel.js";
-
-export class SampleApp extends WebApp {
-
-    public main(): void {
-        const ml = new MovieList(this);
-        ml.viewModel = this.get(MovieListViewModel);
-        document.body.appendChild(ml.element);
-    }
-
-}
-
-const app = new SampleApp();

package/src/web/samples/demo/views/MovieList.ts

@@ -1,77 +0,0 @@
-import { App } from "../../../../App.js";
-import { AtomControl } from "../../../controls/AtomControl.js";
-import { AtomGridSplitter } from "../../../controls/AtomGridSplitter.js";
-import { AtomGridView } from "../../../controls/AtomGridView.js";
-import { AtomItemsControl } from "../../../controls/AtomItemsControl.js";
-
-export class MovieList extends AtomGridView {
-
-    protected create(): void {
-
-        const style = this.element.style;
-        style.position = "absolute";
-        style.left = style.right = style.top = style.bottom = "0";
-
-        this.setPrimitiveValue(this.element, "columns", "30%,5,*");
-        this.setPrimitiveValue(this.element, "rows", "30,*");
-
-        const header = document.createElement("header");
-        header.textContent = "Header";
-        this.setPrimitiveValue(header, "cell", "0:3,0");
-        this.append(header);
-
-        const ul = new AtomItemsControl(this.app, document.createElement("ul"));
-        this.append(ul);
-        ul.itemTemplate = MovieListItemTemplate;
-        ul.bind(ul.element, "items", [["viewModel", "movies"]], false);
-        ul.bind(ul.element, "selectedItem", [["viewModel", "selectedMovie"]], true);
-
-        ul.setPrimitiveValue(ul.element, "cell", "0,1");
-
-        // const e = document.createElement("span");
-        // this.append(e);
-        // e.style.color = "red";
-        // this.bind(e, "text", [["viewModel", "errorSelectedMovie"]]);
-
-        const right = document.createElement("div");
-        right.textContent = "right";
-        right.style.backgroundColor = "green";
-        this.setPrimitiveValue(right, "cell", "2,1");
-        this.append(right);
-
-        const splitter = new AtomGridSplitter(this.app);
-        this.append(splitter);
-        splitter.setPrimitiveValue(splitter.element, "cell", "1,1");
-    }
-}
-
-class MovieListItemTemplate extends AtomControl {
-
-    constructor(app: App, e?: HTMLElement) {
-        super(app, e || document.createElement("li"));
-    }
-
-    protected create(): void {
-        this.element.style.margin = "2px";
-        const span = document.createElement("span");
-        this.append(span);
-        this.bind(span, "text", [["data", "label"], ["data", "category"]], false,
-            (label, category) => `${label} (${category})`);
-        this.bind(span, "styleFontWeight",
-            [["data"], ["viewModel", "selectedMovie"]], false,
-            (d, s) => {
-                return d === s ? "bold" : "";
-            });
-        this.bindEvent(span, "click", (e) => {
-            this.viewModel.onItemClick(this.data);
-        });
-
-        const button = document.createElement("button");
-        this.append(button);
-        button.textContent = "Delete";
-        button.style.marginLeft = "10px";
-        this.bindEvent(button, "click", (e) => {
-            this.viewModel.onDelete(this.data);
-        });
-    }
-}

package/src/web/samples/demo/views/MovieListViewModel.ts

@@ -1,52 +0,0 @@
-import { App } from "../../../../App.js";
-import { AtomBinder } from "../../../../core/AtomBinder.js";
-import { BindableProperty } from "../../../../core/BindableProperty.js";
-import { Inject } from "../../../../di/Inject.js";
-import { AtomViewModel, Validate } from "../../../../view-model/AtomViewModel.js";
-import { WindowService } from "../../../../web/services/WindowService.js";
-
-export interface IMovie {
-    label: string;
-    value?: string;
-    category: string;
-}
-
-export class MovieListViewModel extends AtomViewModel {
-
-    @BindableProperty
-    public movies: IMovie[] = [
-        { label: "First", category: "None" },
-        { label: "True Lies", category: "Action" },
-        { label: "Jurassic Park", category: "Adventure" },
-        { label: "Big", category: "Kids" },
-        { label: "Inception", category: "Suspense" },
-        { label: "Last", category: "None" },
-    ];
-
-    @BindableProperty
-    public selectedMovie: IMovie;
-
-    constructor(
-        @Inject app: App,
-        @Inject private windowService: WindowService) {
-        super(app);
-    }
-
-    @Validate
-    public get errorSelectedMovie(): string {
-        return this.selectedMovie ? "" : "Please select any movie";
-    }
-
-    public onItemClick(data: IMovie): void {
-        this.selectedMovie = data;
-    }
-
-    public async onDelete(data: IMovie): Promise<any> {
-        if (! (await this.windowService.confirm("Are you sure you want to delete?", "Confirm"))) {
-            return;
-        }
-        AtomBinder.removeItem(this.movies, data);
-        await this.windowService.alert("Movie deleted successfully.");
-    }
-
-}

package/src/web/samples/tabs/app.ts

@@ -1,20 +0,0 @@
-import { NavigationService } from "../../../services/NavigationService.js";
-import { AtomTabbedPage } from "../../controls/AtomTabbedPage.js";
-import WebApp from "../../WebApp.js";
-
-export class TabApp extends WebApp {
-    public main(): void {
-        const page = new AtomTabbedPage(this);
-        this.root = page;
-
-        setTimeout(async () => {
-            const nav = this.resolve(NavigationService) as NavigationService;
-            await nav.openPage("web-atoms-core/dist/web/samples/tabs/views/Page1", {
-                message: "Page 1"
-            });
-            await nav.openPage("web-atoms-core/dist/web/samples/tabs/views/Page1", {
-                message: "Page 2"
-            });
-        }, 1000);
-    }
-}

package/src/web/samples/tabs/views/List.json

@@ -1,10 +0,0 @@
-[
-    {
-        "label": "Movie 1",
-        "value": "movie1"
-    },
-    {
-        "label": "Movie 2",
-        "value": "movie2"
-    }
-]

package/src/web/samples/tabs/views/List.ts

@@ -1,6 +0,0 @@
-import WebImage from "../../../../core/WebImage.js";
-
-// tslint:disable
-declare var UMD: any;
-export default new WebImage(UMD.resolvePath("web-atoms-core/dist/web/samples/tabs/views/List.json"));
-                

package/src/web/samples/tabs/views/ListDataUrl.ts

@@ -1,9 +0,0 @@
-import WebImage from "../../../../core/WebImage.js";
-
-// tslint:disable
-
-const base64 = ["Ww0KICAgIHsNCiAgICAgICAgImxhYmVsIjogIk1vdmllIDEiLA0KICAgICAgICAidmFsdWUiOiAibW92",
-		"aWUxIg0KICAgIH0sDQogICAgew0KICAgICAgICAibGFiZWwiOiAiTW92aWUgMiIsDQogICAgICAgICJ2",
-		"YWx1ZSI6ICJtb3ZpZTIiDQogICAgfQ0KXQ=="];
-
-export default new WebImage(`data:image/jpeg;base64,${base64.join("")}`);

package/src/web/samples/tabs/views/Page1.tsx

@@ -1,49 +0,0 @@
-import { App } from "../../../../App.js";
-import Bind from "../../../../core/Bind.js";
-import { BindableProperty } from "../../../../core/BindableProperty.js";
-import XNode from "../../../../core/XNode.js";
-import { Inject } from "../../../../di/Inject.js";
-import { AtomWindowViewModel } from "../../../../view-model/AtomWindowViewModel.js";
-import { AtomGridView } from "../../../controls/AtomGridView.js";
-import { AtomListBox } from "../../../controls/AtomListBox.js";
-import { MovieService } from "../../MovieService.js";
-
-export default class Page1 extends AtomGridView {
-    protected create(): void {
-
-        this.viewModel = this.resolve(Page1ViewModel);
-
-        this.columns = "45%,*,45%";
-        this.rows = "45%,*,45%";
-
-        this.render(
-        <AtomListBox
-            row={1}
-            column={1}>
-            <AtomListBox.itemTemplate>
-                <span text={Bind.oneWay((x) => x.data.label)}></span>
-            </AtomListBox.itemTemplate>
-        </AtomListBox>);
-    }
-}
-
-class Page1ViewModel extends AtomWindowViewModel {
-
-    @BindableProperty
-    public message: string;
-
-    @BindableProperty
-    public items: any;
-
-    constructor(
-        @Inject app: App,
-        @Inject public readonly movieService: MovieService
-    ) {
-        super(app);
-    }
-
-    public async init(): Promise<any> {
-        this.items = await this.movieService.countryList();
-        this.closeWarning = "Are you sure you want to close this?";
-    }
-}

package/src/web/samples/tabs/views/TabHost.ts

@@ -1,34 +0,0 @@
-import { App } from "../../../../App.js";
-import { Inject } from "../../../../di/Inject.js";
-import { NavigationService } from "../../../../services/NavigationService.js";
-import { AtomViewModel } from "../../../../view-model/AtomViewModel.js";
-import { AtomTabbedPage } from "../../../controls/AtomTabbedPage.js";
-
-export default class TabHost extends AtomTabbedPage {
-
-    protected create(): void {
-        this.tabChannelName = "app";
-        this.viewModel = this.resolve(TabHostViewModel);
-    }
-}
-
-class TabHostViewModel extends AtomViewModel {
-
-    constructor(
-        @Inject app: App,
-        @Inject private nav: NavigationService) {
-        super(app);
-    }
-
-    public async init(): Promise<any> {
-        await this.nav.openPage("tab://app/web-atoms-core/dist/web/samples/tabs/views/Page1", {
-            message: "Page 1",
-            title: "Page 1"
-        });
-        await this.nav.openPage("tab://app/web-atoms-core/dist/web/samples/tabs/views/Page1", {
-            message: "Page 2",
-            title: "Page 2"
-        });
-
-    }
-}

package/src/web/samples/window/WindowSample.tsx

@@ -1,16 +0,0 @@
-import Bind from "../../../core/Bind.js";
-import XNode from "../../../core/XNode.js";
-import { NavigationService } from "../../../services/NavigationService.js";
-import { AtomControl } from "../../controls/AtomControl.js";
-
-export default class WindowSample extends AtomControl {
-
-    public create() {
-        const ns = this.resolve(NavigationService);
-        this.render(<div>
-            <button eventClick={Bind.event(() => ns.alert("Alert"))} >Alert</button>
-            <button eventClick={Bind.event(() => ns.confirm("Confirm"))} >Confirm</button>
-        </div>);
-    }
-
-}