tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add ModalPlugin

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-21 17:44:17 +08:00
parent 2bdcc3535b
commit 689e2713f0
5 changed files with 289 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

568
dist/Counter.js vendored
View File

@ -2,463 +2,173 @@
var doric = require('doric'); var doric = require('doric');
const colors = [
"#70a1ff",
"#7bed9f",
"#ff6b81",
"#a4b0be",
"#f0932b",
"#eb4d4b",
"#6ab04c",
"#e056fd",
"#686de0",
"#30336b",
].map(e => doric.Color.parse(e));
function label(str) {
return doric.text({
text: str,
textSize: 16,
});
}
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r; return c > 3 && r && Object.defineProperty(target, key, r), r;
}; };
const colors = [ let ModalDemo = class ModalDemo extends doric.Panel {
"#f0932b",
"#eb4d4b",
"#6ab04c",
"#e056fd",
"#686de0",
"#30336b",
];
function box(idx = 0) {
return (new doric.Stack).also(it => {
it.width = it.height = 20;
it.backgroundColor = doric.Color.parse(colors[idx || 0]);
});
}
function boxStr(str, idx = 0) {
return (new doric.Text).also(it => {
it.width = it.height = 20;
it.text = str;
it.textColor = doric.Color.parse('#ffffff');
it.backgroundColor = doric.Color.parse(colors[idx || 0]);
});
}
function label(str) {
return doric.text({
text: str,
textSize: 16,
});
}
let LayoutDemo = class LayoutDemo extends doric.Panel {
build(rootView) { build(rootView) {
doric.scroller(doric.hlayout([ doric.scroller(doric.vlayout([
doric.vlayout([ doric.text({
label("Horizontal Layout(Align to Top)"), text: "Modal",
doric.hlayout([ layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
box().apply({ textSize: 30,
height: 20 textColor: doric.Color.WHITE,
backgroundColor: colors[1],
textAlignment: doric.Gravity.Center,
height: 50,
}), }),
box().apply({ label('toast on bottom'),
height: 40 label('Click me').apply({
}),
box().apply({
height: 60
}),
box().apply({
height: 40
}),
box().apply({
height: 20
}),
]).also(it => {
it.space = 20;
}),
label("Horizontal Layout(Align to Bottom)"),
doric.hlayout([
box().apply({
height: 20
}),
box().apply({
height: 40
}),
box().apply({
height: 60
}),
box().apply({
height: 40
}),
box().apply({
height: 20
}),
]).also(it => {
it.space = 20;
it.gravity = doric.gravity().bottom();
}),
label("Horizontal Layout(Align to Center)"),
doric.hlayout([
box().apply({
height: 20
}),
box().apply({
height: 40
}),
box().apply({
height: 60
}),
box().apply({
height: 40
}),
box().apply({
height: 20
}),
]).also(it => {
it.space = 20;
it.gravity = doric.gravity().center();
}),
label("Horizontal Layout(Weight)"),
doric.hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(2),
box(4),
]).apply({
width: 200, width: 200,
height: 30, height: 50,
layoutConfig: { backgroundColor: colors[0],
widthSpec: doric.LayoutSpec.JUST, textSize: 30,
heightSpec: doric.LayoutSpec.JUST, textColor: doric.Color.WHITE,
}, layoutConfig: doric.layoutConfig().just(),
backgroundColor: doric.Color.parse('#eeeeee'), onClick: () => {
gravity: doric.gravity().center(), doric.modal(context).toast('This is a toast.');
}),
doric.hlayout([
box(3),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
} }
}), }),
box(4), label('toast on top'),
]).apply({ label('Click me').apply({
width: 200, width: 200,
height: 30, height: 50,
layoutConfig: { backgroundColor: colors[0],
widthSpec: doric.LayoutSpec.JUST, textSize: 30,
heightSpec: doric.LayoutSpec.JUST, textColor: doric.Color.WHITE,
}, layoutConfig: doric.layoutConfig().just(),
backgroundColor: doric.Color.parse('#eeeeee'), onClick: () => {
gravity: doric.gravity().center(), doric.modal(context).toast('This is a toast.', doric.Gravity.Top);
}),
doric.hlayout([
box(3),
box(2),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
} }
}), }),
]).apply({ label('toast on center'),
label('Click me').apply({
width: 200, width: 200,
height: 30, height: 50,
layoutConfig: { backgroundColor: colors[0],
widthSpec: doric.LayoutSpec.JUST, textSize: 30,
heightSpec: doric.LayoutSpec.JUST, textColor: doric.Color.WHITE,
}, layoutConfig: doric.layoutConfig().just(),
backgroundColor: doric.Color.parse('#eeeeee'), onClick: () => {
gravity: doric.gravity().center(), doric.modal(context).toast('This is a toast.', doric.Gravity.Center);
}),
doric.hlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
} }
}), }),
boxStr('weight=1', 2).apply({ doric.text({
layoutConfig: { text: "Alert",
widthSpec: doric.LayoutSpec.JUST, layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
heightSpec: doric.LayoutSpec.JUST, textSize: 30,
weight: 1, textColor: doric.Color.WHITE,
} backgroundColor: colors[2],
textAlignment: doric.Gravity.Center,
height: 50,
}), }),
box(4), label('Click me').apply({
]).apply({
width: 200, width: 200,
height: 30, height: 50,
layoutConfig: { backgroundColor: colors[0],
widthSpec: doric.LayoutSpec.JUST, textSize: 30,
heightSpec: doric.LayoutSpec.JUST, textColor: doric.Color.WHITE,
}, layoutConfig: doric.layoutConfig().just(),
backgroundColor: doric.Color.parse('#eeeeee'), onClick: () => {
gravity: doric.gravity().center(), doric.modal(context).alert({
}), msg: 'This is alert.',
doric.hlayout([ title: 'Alert title',
boxStr('weight=1', 3).apply({ okLabel: "OkLabel"
layoutConfig: { }).then(e => {
widthSpec: doric.LayoutSpec.JUST, doric.modal(context).toast('Clicked OK.');
heightSpec: doric.LayoutSpec.JUST, });
weight: 1,
} }
}), }),
boxStr('weight=1', 2).apply({ doric.text({
layoutConfig: { text: "Confirm",
widthSpec: doric.LayoutSpec.JUST, layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
heightSpec: doric.LayoutSpec.JUST, textSize: 30,
weight: 1, textColor: doric.Color.WHITE,
} backgroundColor: colors[3],
textAlignment: doric.Gravity.Center,
height: 50,
}), }),
boxStr('weight=1', 4).apply({ label('Click me').apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 200, width: 200,
height: 30, height: 50,
layoutConfig: { backgroundColor: colors[0],
widthSpec: doric.LayoutSpec.JUST, textSize: 30,
heightSpec: doric.LayoutSpec.JUST, textColor: doric.Color.WHITE,
}, layoutConfig: doric.layoutConfig().just(),
backgroundColor: doric.Color.parse('#eeeeee'), onClick: () => {
gravity: doric.gravity().center(), doric.modal(context).confirm({
}), msg: 'This is Confirm.',
]).also(it => { title: 'Confirm title',
it.space = 20; okLabel: "OkLabel",
it.gravity = doric.gravity().center(); cancelLabel: 'CancelLabel',
}), }).then(() => {
doric.vlayout([ doric.modal(context).toast('Clicked OK.');
label("Vertical Layout(Algin to Left)"), }, () => {
doric.vlayout([ doric.modal(context).toast('Clicked Cancel.');
box(1).apply({ });
width: 20
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 60
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 20
}),
]).apply({
space: 20
}),
label("Vertical Layout(Algin to Right)"),
doric.vlayout([
box(1).apply({
width: 20
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 60
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 20
}),
]).apply({
space: 20,
gravity: doric.gravity().right(),
}),
label("Vertical Layout(Algin to Center)"),
doric.vlayout([
box(1).apply({
width: 20
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 60
}),
box(1).apply({
width: 40
}),
box(1).apply({
width: 20
}),
]).apply({
space: 20,
gravity: doric.gravity().center(),
}),
label("Vertical Layout(Weight)"),
doric.hlayout([
doric.vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
},
}),
box(2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
} }
}), }),
box(4).apply({ doric.text({
layoutConfig: { text: "Prompt",
widthSpec: doric.LayoutSpec.MOST, layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
heightSpec: doric.LayoutSpec.JUST, textSize: 30,
textColor: doric.Color.WHITE,
backgroundColor: colors[4],
textAlignment: doric.Gravity.Center,
height: 50,
}),
label('Click me').apply({
width: 200,
height: 50,
backgroundColor: colors[0],
textSize: 30,
textColor: doric.Color.WHITE,
layoutConfig: doric.layoutConfig().just(),
onClick: () => {
doric.modal(context).prompt({
msg: 'This is Prompt.',
title: 'Prompt title',
okLabel: "OkLabel",
cancelLabel: 'CancelLabel',
}).then(e => {
doric.modal(context).toast(`Clicked OK.Input:${e}`);
}, e => {
doric.modal(context).toast(`Clicked Cancel.Input:${e}`);
});
} }
}), }),
]).apply({ ]).apply({
width: 100, layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.FIT),
height: 200, gravity: doric.Gravity.Center,
layoutConfig: { space: 10,
widthSpec: doric.LayoutSpec.JUST, })).apply({
heightSpec: doric.LayoutSpec.JUST, layoutConfig: doric.layoutConfig().most(),
}, }).in(rootView);
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
box(3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
box(3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
},
}),
box(2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
},
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.vlayout([
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
},
}),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.MOST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 100,
height: 200,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
]).also(it => {
it.space = 20;
}),
]).also(it => {
it.space = 20;
it.gravity = doric.gravity().left();
})
]).also(it => {
it.space = 20;
})).also(it => {
it.layoutConfig = doric.layoutConfig().most();
})
.in(rootView);
} }
}; };
LayoutDemo = __decorate([ ModalDemo = __decorate([
Entry Entry
], LayoutDemo); ], ModalDemo);
//# sourceMappingURL=LayoutDemo.js.map //# sourceMappingURL=ModalDemo.js.map

55
dist/index.js vendored
View File

@ -4344,6 +4344,60 @@ return __module.exports;
} }
} }
class ModalPlugin extends DoricPlugin {
toast(args) {
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) {
window.alert(args.msg || "");
return Promise.resolve();
}
confirm(args) {
if (window.confirm(args.msg || "")) {
return Promise.resolve();
}
else {
return Promise.reject();
}
}
prompt(args) {
const result = window.prompt(args.msg || "", args.defaultText);
if (result) {
return Promise.resolve(result);
}
else {
return Promise.reject(result);
}
}
}
const bundles = new Map; const bundles = new Map;
const plugins = new Map; const plugins = new Map;
const nodes = new Map; const nodes = new Map;
@ -4363,6 +4417,7 @@ return __module.exports;
return nodes.get(name); return nodes.get(name);
} }
registerPlugin('shader', ShaderPlugin); registerPlugin('shader', ShaderPlugin);
registerPlugin('modal', ModalPlugin);
registerViewNode('Stack', DoricStackNode); registerViewNode('Stack', DoricStackNode);
registerViewNode('VLayout', DoricVLayoutNode); registerViewNode('VLayout', DoricVLayoutNode);
registerViewNode('HLayout', DoricHLayoutNode); registerViewNode('HLayout', DoricHLayoutNode);

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
src/DoricRegistry.ts
View File

@ -7,6 +7,7 @@ import { DoricHLayoutNode } from './shader/DoricHLayoutNode'
import { DoricTextNode } from "./shader/DoricTextNode" import { DoricTextNode } from "./shader/DoricTextNode"
import { DoricImageNode } from "./shader/DoricImageNode" import { DoricImageNode } from "./shader/DoricImageNode"
import { DoricScrollerNode } from "./shader/DoricScrollerNode" import { DoricScrollerNode } from "./shader/DoricScrollerNode"
import { ModalPlugin } from './plugins/ModalPlugin'
const bundles: Map<string, string> = new Map const bundles: Map<string, string> = new Map
@ -40,6 +41,7 @@ export function acquireViewNode(name: string) {
} }
registerPlugin('shader', ShaderPlugin) registerPlugin('shader', ShaderPlugin)
registerPlugin('modal', ModalPlugin)
registerViewNode('Stack', DoricStackNode) registerViewNode('Stack', DoricStackNode)
registerViewNode('VLayout', DoricVLayoutNode) registerViewNode('VLayout', DoricVLayoutNode)

72
src/plugins/ModalPlugin.ts Normal file
View File

@ -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)
}
}
}