h5:add popover implementation

doric-h5/dist/index.js

@@ -3664,14 +3664,30 @@ return __module.exports;
         constructor(context) {
             this.context = context;
         }
+        onTearDown() {
+        }
     }
 
     class ShaderPlugin extends DoricPlugin {
         render(ret) {
+            var _a;
+            if (((_a = this.context.rootNode.viewId) === null || _a === void 0 ? void 0 : _a.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);
             }
         }
+    }
 
     var LayoutSpec;
     (function (LayoutSpec) {
@@ -3736,10 +3752,12 @@ return __module.exports;
             this.context = context;
         }
         init(superNode) {
+            if (superNode) {
                 this.superNode = superNode;
                 if (this instanceof DoricSuperViewNode) {
                     this.reusable = superNode.reusable;
                 }
+            }
             this.view = this.build();
             this.view.style.overflow = "hidden";
         }
@@ -3861,8 +3879,9 @@ return __module.exports;
                     this.offsetY = prop;
                     break;
                 case 'onClick':
-                    this.view.onclick = () => {
+                    this.view.onclick = (event) => {
                         this.callJSResponse(prop);
+                        event.stopPropagation();
                     };
                     break;
                 case 'corners':
@@ -4566,6 +4585,61 @@ return __module.exports;
         }
     }
 
+    class PopoverPlugin extends DoricPlugin {
+        constructor(context) {
+            super(context);
+            this.fullScreen = document.createElement('div');
+            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) {
+            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) {
+            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();
+        }
+    }
+
     const bundles = new Map;
     const plugins = new Map;
     const nodes = new Map;
@@ -4588,6 +4662,7 @@ return __module.exports;
     registerPlugin('modal', ModalPlugin);
     registerPlugin('storage', StoragePlugin);
     registerPlugin('navigator', NavigatorPlugin);
+    registerPlugin('popover', PopoverPlugin);
     registerViewNode('Stack', DoricStackNode);
     registerViewNode('VLayout', DoricVLayoutNode);
     registerViewNode('HLayout', DoricHLayoutNode);
@@ -4740,6 +4815,7 @@ ${content}
         constructor(content) {
             this.contextId = getContextId();
             this.pluginInstances = new Map;
+            this.headNodes = new Map;
             createContext(this.contextId, content);
             doricContexts.set(this.contextId, this);
             this.rootNode = new DoricStackNode(this);
@@ -4759,6 +4835,9 @@ ${content}
             this.invokeEntityMethod("__init__", frame, extra ? JSON.stringify(extra) : undefined);
         }
         teardown() {
+            for (let plugin of this.pluginInstances.values()) {
+                plugin.onTearDown();
+            }
             destroyContext(this.contextId);
         }
     }

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) {
+        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,11 +104,13 @@ export abstract class DoricViewNode {
         this.context = context
     }
 
-    init(superNode: DoricSuperViewNode) {
+    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':