change h5 to web

doric-web/src/plugins/ModalPlugin.ts

@@ -0,0 +1,72 @@
+import { DoricPlugin } from '../DoricPlugin'
+import { TOP, CENTER_Y, BOTTOM, toPixelString } from '../shader/DoricViewNode'
+
+export class ModalPlugin extends DoricPlugin {
+    toast(args: {
+        msg?: string,
+        gravity?: number
+    }) {
+        const toastElement = document.createElement('div')
+        toastElement.style.position = "absolute"
+        toastElement.style.textAlign = "center"
+        toastElement.style.width = "100%"
+
+        const textElement = document.createElement('span')
+        textElement.innerText = args.msg || ""
+        textElement.style.backgroundColor = "#777777"
+        textElement.style.color = "white"
+        textElement.style.paddingLeft = '20px'
+        textElement.style.paddingRight = '20px'
+        textElement.style.paddingTop = '10px'
+        textElement.style.paddingBottom = '10px'
+        toastElement.appendChild(textElement)
+        document.body.appendChild(toastElement)
+        const gravity = args.gravity || BOTTOM
+        if ((gravity & TOP) == TOP) {
+            toastElement.style.top = toPixelString(30)
+        } else if ((gravity & BOTTOM) == BOTTOM) {
+            toastElement.style.bottom = toPixelString(30)
+        } else if ((gravity & CENTER_Y) == CENTER_Y) {
+            toastElement.style.top = toPixelString(document.body.offsetHeight / 2 - toastElement.offsetHeight / 2)
+        }
+        setTimeout(() => {
+            document.body.removeChild(toastElement)
+        }, 2000)
+        return Promise.resolve()
+    }
+    alert(args: {
+        title?: string,
+        msg?: string,
+        okLabel?: string,
+    }) {
+        window.alert(args.msg || "")
+        return Promise.resolve()
+    }
+    confirm(args: {
+        title?: string,
+        msg?: string,
+        okLabel?: string,
+        cancelLabel?: string,
+    }) {
+        if (window.confirm(args.msg || "")) {
+            return Promise.resolve()
+        } else {
+            return Promise.reject()
+        }
+    }
+    prompt(args: {
+        title?: string,
+        msg?: string,
+        okLabel?: string,
+        cancelLabel?: string,
+        defaultText?: string
+        text?: string
+    }) {
+        const result = window.prompt(args.msg || "", args.defaultText)
+        if (result) {
+            return Promise.resolve(result)
+        } else {
+            return Promise.reject(result)
+        }
+    }
+}

doric-web/src/plugins/PopoverPlugin.ts

@@ -0,0 +1,59 @@
+import { DoricPlugin } from '../DoricPlugin'
+import { DVModel, DoricViewNode } from '../shader/DoricViewNode';
+import { DoricContext } from '../DoricContext';
+
+export class PopoverPlugin extends DoricPlugin {
+    fullScreen = document.createElement('div')
+    constructor(context: DoricContext) {
+        super(context)
+        this.fullScreen.id = `PopOver__${context.contextId}`
+        this.fullScreen.style.position = 'fixed'
+        this.fullScreen.style.top = '0px'
+        this.fullScreen.style.width = "100%"
+        this.fullScreen.style.height = "100%"
+    }
+
+    show(model: DVModel) {
+        const viewNode = DoricViewNode.create(this.context, model.type)
+        if (viewNode === undefined) {
+            return Promise.reject(`Cannot create ViewNode for ${model.type}`)
+        }
+        viewNode.viewId = model.id
+        viewNode.init()
+        viewNode.blend(model.props)
+        this.fullScreen.appendChild(viewNode.view)
+        this.context.headNodes.set(model.id, viewNode)
+        if (!document.body.contains(this.fullScreen)) {
+            document.body.appendChild(this.fullScreen)
+        }
+        return Promise.resolve()
+    }
+
+    dismiss(args?: { id: string }) {
+        if (args) {
+            const viewNode = this.context.headNodes.get(args.id)
+            if (viewNode) {
+                this.fullScreen.removeChild(viewNode.view)
+            }
+            if (this.context.headNodes.size === 0) {
+                document.body.removeChild(this.fullScreen)
+            }
+        } else {
+            this.dismissAll()
+        }
+        return Promise.resolve()
+    }
+    dismissAll() {
+        for (let node of this.context.headNodes.values()) {
+            this.context.headNodes.delete(node.viewId)
+            this.fullScreen.removeChild(node.view)
+        }
+        if (document.body.contains(this.fullScreen)) {
+            document.body.removeChild(this.fullScreen)
+        }
+    }
+    onTearDown() {
+        super.onTearDown()
+        this.dismissAll()
+    }
+}

doric-web/src/plugins/ShaderPlugin.ts

@@ -0,0 +1,20 @@
+import { DoricPlugin } from "../DoricPlugin";
+import { DVModel } from "../shader/DoricViewNode";
+
+export class ShaderPlugin extends DoricPlugin {
+    render(ret: DVModel) {
+        if (this.context.rootNode.viewId?.length > 0) {
+            if (this.context.rootNode.viewId === ret.id) {
+                this.context.rootNode.blend(ret.props)
+            } else {
+                const viewNode = this.context.headNodes.get(ret.id)
+                if (viewNode) {
+                    viewNode.blend(ret.props)
+                }
+            }
+        } else {
+            this.context.rootNode.viewId = ret.id
+            this.context.rootNode.blend(ret.props)
+        }
+    }
+}

doric-web/src/plugins/StoragePlugin.ts

@@ -0,0 +1,41 @@
+import { DoricPlugin } from "../DoricPlugin";
+
+export class StoragePlugin extends DoricPlugin {
+    setItem(args: {
+        zone?: string,
+        key: string,
+        value: string
+    }) {
+        localStorage.setItem(`${args.zone}_${args.key}`, args.value)
+        return Promise.resolve()
+    }
+    getItem(args: {
+        zone?: string,
+        key: string,
+    }) {
+        return Promise.resolve(localStorage.getItem(`${args.zone}_${args.key}`))
+    }
+
+    remove(args: {
+        zone?: string,
+        key: string,
+    }) {
+        localStorage.removeItem(`${args.zone}_${args.key}`)
+        return Promise.resolve()
+    }
+    clear(args: {
+        zone: string,
+    }) {
+        let removingKeys = []
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i)
+            if (key && key.startsWith(`${args.zone}_`)) {
+                removingKeys.push(key)
+            }
+        }
+        removingKeys.forEach(e => {
+            localStorage.removeItem(e)
+        })
+        return Promise.resolve()
+    }
+}