h5:add popover implementation
This commit is contained in:
parent
b9a3d94cb5
commit
9101c8cd88
81
doric-h5/dist/index.js
vendored
81
doric-h5/dist/index.js
vendored
@ -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);
|
||||
}
|
||||
}
|
||||
|
2
doric-h5/dist/index.js.map
vendored
2
doric-h5/dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -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)
|
||||
}
|
||||
}
|
@ -6,4 +6,7 @@ export class DoricPlugin {
|
||||
constructor(context: DoricContext) {
|
||||
this.context = context
|
||||
}
|
||||
onTearDown() {
|
||||
|
||||
}
|
||||
}
|
@ -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)
|
||||
|
59
doric-h5/src/plugins/PopoverPlugin.ts
Normal file
59
doric-h5/src/plugins/PopoverPlugin.ts
Normal file
@ -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()
|
||||
}
|
||||
}
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
@ -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':
|
||||
|
Reference in New Issue
Block a user