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');
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 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);
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;
};
const colors = [
"#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 {
let ModalDemo = class ModalDemo extends doric.Panel {
build(rootView) {
doric.scroller(doric.hlayout([
doric.vlayout([
label("Horizontal Layout(Align to Top)"),
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;
}),
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.scroller(doric.vlayout([
doric.text({
text: "Modal",
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
textSize: 30,
textColor: doric.Color.WHITE,
backgroundColor: colors[1],
textAlignment: doric.Gravity.Center,
height: 50,
}),
doric.vlayout([
label("Vertical Layout(Algin to Left)"),
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
}),
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({
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,
},
}),
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);
label('toast on bottom'),
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).toast('This is a toast.');
}
}),
label('toast on top'),
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).toast('This is a toast.', doric.Gravity.Top);
}
}),
label('toast on center'),
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).toast('This is a toast.', doric.Gravity.Center);
}
}),
doric.text({
text: "Alert",
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
textSize: 30,
textColor: doric.Color.WHITE,
backgroundColor: colors[2],
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).alert({
msg: 'This is alert.',
title: 'Alert title',
okLabel: "OkLabel"
}).then(e => {
doric.modal(context).toast('Clicked OK.');
});
}
}),
doric.text({
text: "Confirm",
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
textSize: 30,
textColor: doric.Color.WHITE,
backgroundColor: colors[3],
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).confirm({
msg: 'This is Confirm.',
title: 'Confirm title',
okLabel: "OkLabel",
cancelLabel: 'CancelLabel',
}).then(() => {
doric.modal(context).toast('Clicked OK.');
}, () => {
doric.modal(context).toast('Clicked Cancel.');
});
}
}),
doric.text({
text: "Prompt",
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
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({
layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.FIT),
gravity: doric.Gravity.Center,
space: 10,
})).apply({
layoutConfig: doric.layoutConfig().most(),
}).in(rootView);
}
};
LayoutDemo = __decorate([
ModalDemo = __decorate([
Entry
], LayoutDemo);
//# sourceMappingURL=LayoutDemo.js.map
], ModalDemo);
//# 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 plugins = new Map;
const nodes = new Map;
@ -4363,6 +4417,7 @@ return __module.exports;
return nodes.get(name);
}
registerPlugin('shader', ShaderPlugin);
registerPlugin('modal', ModalPlugin);
registerViewNode('Stack', DoricStackNode);
registerViewNode('VLayout', DoricVLayoutNode);
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 { DoricImageNode } from "./shader/DoricImageNode"
import { DoricScrollerNode } from "./shader/DoricScrollerNode"
import { ModalPlugin } from './plugins/ModalPlugin'
const bundles: Map<string, string> = new Map
@ -40,6 +41,7 @@ export function acquireViewNode(name: string) {
}
registerPlugin('shader', ShaderPlugin)
registerPlugin('modal', ModalPlugin)
registerViewNode('Stack', DoricStackNode)
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)
}
}
}