h5:add popover implementation

doric-h5/src/DoricContext.ts

@@ -3,6 +3,7 @@ import { Panel } from 'doric'
 import { DoricPlugin } from "./DoricPlugin"
 import { createContext, destroyContext } from "./DoricDriver"
 import { DoricStackNode } from './shader/DoricStackNode'
+import { DoricViewNode } from './shader/DoricViewNode'
 const doricContexts: Map<string, DoricContext> = new Map
 
 let __contextId__ = 0
@@ -18,6 +19,8 @@ export class DoricContext {
     contextId = getContextId()
     pluginInstances: Map<string, DoricPlugin> = new Map
     rootNode: DoricStackNode
+    headNodes: Map<string, DoricViewNode> = new Map
+
     constructor(content: string) {
         createContext(this.contextId, content)
         doricContexts.set(this.contextId, this)
@@ -44,6 +47,9 @@ export class DoricContext {
     }
 
     teardown() {
+        for (let plugin of this.pluginInstances.values()) {
+            plugin.onTearDown()
+        }
         destroyContext(this.contextId)
     }
 }

doric-h5/src/DoricPlugin.ts

@@ -6,4 +6,7 @@ export class DoricPlugin {
     constructor(context: DoricContext) {
         this.context = context
     }
+    onTearDown() {
+
+    }
 }

doric-h5/src/DoricRegistry.ts

@@ -10,6 +10,7 @@ import { DoricScrollerNode } from "./shader/DoricScrollerNode"
 import { ModalPlugin } from './plugins/ModalPlugin'
 import { StoragePlugin } from "./plugins/StoragePlugin"
 import { NavigatorPlugin } from "./navigate/NavigatorPlugin"
+import { PopoverPlugin } from './plugins/PopoverPlugin'
 
 const bundles: Map<string, string> = new Map
 
@@ -48,6 +49,7 @@ registerPlugin('shader', ShaderPlugin)
 registerPlugin('modal', ModalPlugin)
 registerPlugin('storage', StoragePlugin)
 registerPlugin('navigator', NavigatorPlugin)
+registerPlugin('popover', PopoverPlugin)
 
 registerViewNode('Stack', DoricStackNode)
 registerViewNode('VLayout', DoricVLayoutNode)

doric-h5/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-h5/src/plugins/ShaderPlugin.ts

@@ -3,7 +3,18 @@ import { DVModel } from "../shader/DoricViewNode";
 
 export class ShaderPlugin extends DoricPlugin {
     render(ret: DVModel) {
-        this.context.rootNode.viewId = ret.id
-        this.context.rootNode.blend(ret.props)
+        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-h5/src/shader/DoricViewNode.ts

@@ -104,10 +104,12 @@ export abstract class DoricViewNode {
         this.context = context
     }
 
-    init(superNode: DoricSuperViewNode) {
-        this.superNode = superNode
-        if (this instanceof DoricSuperViewNode) {
-            this.reusable = superNode.reusable
+    init(superNode?: DoricSuperViewNode) {
+        if (superNode) {
+            this.superNode = superNode
+            if (this instanceof DoricSuperViewNode) {
+                this.reusable = superNode.reusable
+            }
         }
         this.view = this.build()
         this.view.style.overflow = "hidden"
@@ -247,8 +249,9 @@ export abstract class DoricViewNode {
                 this.offsetY = prop as number
                 break
             case 'onClick':
-                this.view.onclick = () => {
+                this.view.onclick = (event: Event) => {
                     this.callJSResponse(prop as string)
+                    event.stopPropagation()
                 }
                 break
             case 'corners':