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

608
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],
box().apply({ textAlignment: doric.Gravity.Center,
height: 40 height: 50,
}),
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,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.hlayout([
box(3),
boxStr('weight=1', 2).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
doric.hlayout([
box(3),
box(2),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: 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({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
box(4),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: 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({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
boxStr('weight=1', 4).apply({
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
weight: 1,
}
}),
]).apply({
width: 200,
height: 30,
layoutConfig: {
widthSpec: doric.LayoutSpec.JUST,
heightSpec: doric.LayoutSpec.JUST,
},
backgroundColor: doric.Color.parse('#eeeeee'),
gravity: doric.gravity().center(),
}),
]).also(it => {
it.space = 20;
it.gravity = doric.gravity().center();
}), }),
doric.vlayout([ label('toast on bottom'),
label("Vertical Layout(Algin to Left)"), label('Click me').apply({
doric.vlayout([ width: 200,
box(1).apply({ height: 50,
width: 20 backgroundColor: colors[0],
}), textSize: 30,
box(1).apply({ textColor: doric.Color.WHITE,
width: 40 layoutConfig: doric.layoutConfig().just(),
}), onClick: () => {
box(1).apply({ doric.modal(context).toast('This is a toast.');
width: 60 }
}), }),
box(1).apply({ label('toast on top'),
width: 40 label('Click me').apply({
}), width: 200,
box(1).apply({ height: 50,
width: 20 backgroundColor: colors[0],
}), textSize: 30,
]).apply({ textColor: doric.Color.WHITE,
space: 20 layoutConfig: doric.layoutConfig().just(),
}), onClick: () => {
label("Vertical Layout(Algin to Right)"), doric.modal(context).toast('This is a toast.', doric.Gravity.Top);
doric.vlayout([ }
box(1).apply({ }),
width: 20 label('toast on center'),
}), label('Click me').apply({
box(1).apply({ width: 200,
width: 40 height: 50,
}), backgroundColor: colors[0],
box(1).apply({ textSize: 30,
width: 60 textColor: doric.Color.WHITE,
}), layoutConfig: doric.layoutConfig().just(),
box(1).apply({ onClick: () => {
width: 40 doric.modal(context).toast('This is a toast.', doric.Gravity.Center);
}), }
box(1).apply({ }),
width: 20 doric.text({
}), text: "Alert",
]).apply({ layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
space: 20, textSize: 30,
gravity: doric.gravity().right(), textColor: doric.Color.WHITE,
}), backgroundColor: colors[2],
label("Vertical Layout(Algin to Center)"), textAlignment: doric.Gravity.Center,
doric.vlayout([ height: 50,
box(1).apply({ }),
width: 20 label('Click me').apply({
}), width: 200,
box(1).apply({ height: 50,
width: 40 backgroundColor: colors[0],
}), textSize: 30,
box(1).apply({ textColor: doric.Color.WHITE,
width: 60 layoutConfig: doric.layoutConfig().just(),
}), onClick: () => {
box(1).apply({ doric.modal(context).alert({
width: 40 msg: 'This is alert.',
}), title: 'Alert title',
box(1).apply({ okLabel: "OkLabel"
width: 20 }).then(e => {
}), doric.modal(context).toast('Clicked OK.');
]).apply({ });
space: 20, }
gravity: doric.gravity().center(), }),
}), doric.text({
label("Vertical Layout(Weight)"), text: "Confirm",
doric.hlayout([ layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
doric.vlayout([ textSize: 30,
boxStr('weight=1', 3).apply({ textColor: doric.Color.WHITE,
layoutConfig: { backgroundColor: colors[3],
widthSpec: doric.LayoutSpec.MOST, textAlignment: doric.Gravity.Center,
heightSpec: doric.LayoutSpec.JUST, height: 50,
weight: 1, }),
}, label('Click me').apply({
}), width: 200,
box(2).apply({ height: 50,
layoutConfig: { backgroundColor: colors[0],
widthSpec: doric.LayoutSpec.MOST, textSize: 30,
heightSpec: doric.LayoutSpec.JUST, textColor: doric.Color.WHITE,
} layoutConfig: doric.layoutConfig().just(),
}), onClick: () => {
box(4).apply({ doric.modal(context).confirm({
layoutConfig: { msg: 'This is Confirm.',
widthSpec: doric.LayoutSpec.MOST, title: 'Confirm title',
heightSpec: doric.LayoutSpec.JUST, okLabel: "OkLabel",
} cancelLabel: 'CancelLabel',
}), }).then(() => {
]).apply({ doric.modal(context).toast('Clicked OK.');
width: 100, }, () => {
height: 200, doric.modal(context).toast('Clicked Cancel.');
layoutConfig: { });
widthSpec: doric.LayoutSpec.JUST, }
heightSpec: doric.LayoutSpec.JUST, }),
}, doric.text({
backgroundColor: doric.Color.parse('#eeeeee'), text: "Prompt",
gravity: doric.gravity().center(), layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
}), textSize: 30,
doric.vlayout([ textColor: doric.Color.WHITE,
box(3).apply({ backgroundColor: colors[4],
layoutConfig: { textAlignment: doric.Gravity.Center,
widthSpec: doric.LayoutSpec.MOST, height: 50,
heightSpec: doric.LayoutSpec.JUST, }),
}, label('Click me').apply({
}), width: 200,
boxStr('weight=1', 2).apply({ height: 50,
layoutConfig: { backgroundColor: colors[0],
widthSpec: doric.LayoutSpec.MOST, textSize: 30,
heightSpec: doric.LayoutSpec.JUST, textColor: doric.Color.WHITE,
weight: 1, layoutConfig: doric.layoutConfig().just(),
} onClick: () => {
}), doric.modal(context).prompt({
box(4).apply({ msg: 'This is Prompt.',
layoutConfig: { title: 'Prompt title',
widthSpec: doric.LayoutSpec.MOST, okLabel: "OkLabel",
heightSpec: doric.LayoutSpec.JUST, cancelLabel: 'CancelLabel',
} }).then(e => {
}), doric.modal(context).toast(`Clicked OK.Input:${e}`);
]).apply({ }, e => {
width: 100, doric.modal(context).toast(`Clicked Cancel.Input:${e}`);
height: 200, });
layoutConfig: { }
widthSpec: doric.LayoutSpec.JUST, }),
heightSpec: doric.LayoutSpec.JUST, ]).apply({
}, layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.FIT),
backgroundColor: doric.Color.parse('#eeeeee'), gravity: doric.Gravity.Center,
gravity: doric.gravity().center(), space: 10,
}), })).apply({
doric.vlayout([ layoutConfig: doric.layoutConfig().most(),
box(3).apply({ }).in(rootView);
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)
}
}
}