update .gitignore
This commit is contained in:
parent
65f8a3c40c
commit
9174297980
3
.gitignore
vendored
3
.gitignore
vendored
@ -6,3 +6,6 @@
|
|||||||
/build
|
/build
|
||||||
/captures
|
/captures
|
||||||
.externalNativeBuild
|
.externalNativeBuild
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.settings/
|
@ -1,225 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
const colors = [
|
|
||||||
"#70a1ff",
|
|
||||||
"#7bed9f",
|
|
||||||
"#ff6b81",
|
|
||||||
"#a4b0be",
|
|
||||||
"#f0932b",
|
|
||||||
"#eb4d4b",
|
|
||||||
"#6ab04c",
|
|
||||||
"#e056fd",
|
|
||||||
"#686de0",
|
|
||||||
"#30336b",
|
|
||||||
].map(e => doric.Color.parse(e));
|
|
||||||
function box(idx = 0) {
|
|
||||||
return (new doric.Stack).also(it => {
|
|
||||||
it.width = it.height = 20;
|
|
||||||
it.backgroundColor = colors[idx || 0];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function title(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
function thisLabel(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
width: 60,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 15,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
let AnimatorDemo = class AnimatorDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
const view = box(2);
|
|
||||||
view.onClick = () => {
|
|
||||||
doric.modal(context).toast('Clicked');
|
|
||||||
};
|
|
||||||
const view2 = box(3);
|
|
||||||
let idx = 0;
|
|
||||||
doric.vlayout([
|
|
||||||
title("Animator Demo"),
|
|
||||||
doric.vlayout([
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('Reset').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
view.width = view.height = 20;
|
|
||||||
view.x = view.y = 0;
|
|
||||||
view.rotation = 0;
|
|
||||||
view.backgroundColor = colors[2];
|
|
||||||
view.corners = 0;
|
|
||||||
view.scaleX = 1;
|
|
||||||
view.scaleY = 1;
|
|
||||||
view.translationX = 0;
|
|
||||||
view.translationY = 0;
|
|
||||||
view.rotation = 0;
|
|
||||||
},
|
|
||||||
duration: 1500,
|
|
||||||
}).then(() => {
|
|
||||||
doric.modal(context).toast('Fininshed');
|
|
||||||
}).catch(e => {
|
|
||||||
doric.modal(context).toast(`${e}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('X').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
view.x = view.x || 0;
|
|
||||||
view.x += 100;
|
|
||||||
view2.x += 50;
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('Y').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
view.y = view.y || 0;
|
|
||||||
view.y += 100;
|
|
||||||
view2.y += 50;
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('Width').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
view.width += 100;
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('Height').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
view.height += 100;
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('BgColor').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
view.backgroundColor = colors[(idx++) % colors.length];
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('Rotation').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
if (view.rotation) {
|
|
||||||
view.rotation += 0.5;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
view.rotation = 0.5;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('Corner').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
if (typeof view.corners === 'number') {
|
|
||||||
view.corners += 10;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
view.corners = 10;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('scaleX').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
if (view.scaleX) {
|
|
||||||
view.scaleX += 0.1;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
view.scaleX = 1.1;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('scaleY').apply({
|
|
||||||
onClick: () => {
|
|
||||||
doric.animate(this)({
|
|
||||||
animations: () => {
|
|
||||||
if (view.scaleY) {
|
|
||||||
view.scaleY += 0.1;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
view.scaleY = 1.1;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.stack([
|
|
||||||
view,
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
}).in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
AnimatorDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], AnimatorDemo);
|
|
||||||
//# sourceMappingURL=AnimatorDemo.js.map
|
|
@ -1,239 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
const colors = [
|
|
||||||
"#70a1ff",
|
|
||||||
"#7bed9f",
|
|
||||||
"#ff6b81",
|
|
||||||
"#a4b0be",
|
|
||||||
"#f0932b",
|
|
||||||
"#eb4d4b",
|
|
||||||
"#6ab04c",
|
|
||||||
"#e056fd",
|
|
||||||
"#686de0",
|
|
||||||
"#30336b",
|
|
||||||
].map(e => doric.Color.parse(e));
|
|
||||||
function box(idx = 0) {
|
|
||||||
return (new doric.Stack).also(it => {
|
|
||||||
it.width = it.height = 20;
|
|
||||||
it.backgroundColor = colors[idx || 0];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function title(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
function thisLabel(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
width: 80,
|
|
||||||
height: 30,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 10,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
let AnimationDemo = class AnimationDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
const view = box(2);
|
|
||||||
const view2 = box(3);
|
|
||||||
view.onClick = () => {
|
|
||||||
doric.modal(context).toast('Clicked');
|
|
||||||
};
|
|
||||||
doric.vlayout([
|
|
||||||
title("Complicated Animation"),
|
|
||||||
doric.vlayout([
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('reset').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const rotation = new doric.RotationAnimation;
|
|
||||||
rotation.duration = 1000;
|
|
||||||
rotation.fromRotation = view.rotation || 0;
|
|
||||||
rotation.toRotation = 0;
|
|
||||||
const translation = new doric.TranslationAnimation;
|
|
||||||
translation.duration = 1000;
|
|
||||||
translation.fromTranslationX = view.translationX || 0;
|
|
||||||
translation.toTranslationX = 0;
|
|
||||||
translation.fromTranslationY = view.translationY || 0;
|
|
||||||
translation.toTranslationY = 0;
|
|
||||||
const scale = new doric.ScaleAnimation;
|
|
||||||
scale.duration = 1000;
|
|
||||||
scale.fromScaleX = view.scaleX || 1;
|
|
||||||
scale.toScaleX = 1;
|
|
||||||
scale.fromScaleY = view.scaleY || 1;
|
|
||||||
scale.toScaleY = 1;
|
|
||||||
const animationSet = new doric.AnimationSet;
|
|
||||||
animationSet.addAnimation(rotation);
|
|
||||||
animationSet.addAnimation(translation);
|
|
||||||
animationSet.addAnimation(scale);
|
|
||||||
view.doAnimation(context, animationSet).then(() => {
|
|
||||||
doric.modal(context).toast('Resetd');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('TranslationX').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const animation = new doric.TranslationAnimation;
|
|
||||||
animation.duration = 1000;
|
|
||||||
animation.fromTranslationX = view.translationX || 0;
|
|
||||||
animation.toTranslationX = animation.fromTranslationX + 100;
|
|
||||||
animation.fromTranslationY = view.translationY || 0;
|
|
||||||
animation.toTranslationY = view.translationY || 0;
|
|
||||||
view.doAnimation(context, animation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('TranslationY').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const animation = new doric.TranslationAnimation;
|
|
||||||
animation.duration = 1000;
|
|
||||||
animation.fromTranslationX = view.translationX || 0;
|
|
||||||
animation.toTranslationX = view.translationX || 0;
|
|
||||||
animation.fromTranslationY = view.translationY || 0;
|
|
||||||
animation.toTranslationY = animation.fromTranslationY + 100;
|
|
||||||
view.doAnimation(context, animation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('ScaleX').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const animation = new doric.ScaleAnimation;
|
|
||||||
animation.duration = 1000;
|
|
||||||
animation.fromScaleX = view.scaleX || 1;
|
|
||||||
animation.toScaleX = animation.fromScaleX + 1;
|
|
||||||
view.doAnimation(context, animation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('ScaleY').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const animation = new doric.ScaleAnimation;
|
|
||||||
animation.duration = 1000;
|
|
||||||
animation.fromScaleY = view.scaleY || 1;
|
|
||||||
animation.toScaleY = animation.fromScaleY + 1;
|
|
||||||
view.doAnimation(context, animation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('rotation').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const animation = new doric.RotationAnimation;
|
|
||||||
animation.duration = 1000;
|
|
||||||
animation.fromRotation = view.rotation || 0;
|
|
||||||
animation.toRotation = animation.fromRotation + 0.25;
|
|
||||||
view.doAnimation(context, animation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('group').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const rotation = new doric.RotationAnimation;
|
|
||||||
rotation.duration = 1000;
|
|
||||||
rotation.fromRotation = 0;
|
|
||||||
rotation.toRotation = 4;
|
|
||||||
const translation = new doric.TranslationAnimation;
|
|
||||||
translation.duration = 1000;
|
|
||||||
translation.fromTranslationX = view.translationX || 0;
|
|
||||||
translation.toTranslationX = 100;
|
|
||||||
const animationSet = new doric.AnimationSet;
|
|
||||||
animationSet.addAnimation(rotation);
|
|
||||||
animationSet.addAnimation(translation);
|
|
||||||
view.doAnimation(context, animationSet);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.hlayout([
|
|
||||||
thisLabel('Default').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const translation = new doric.TranslationAnimation;
|
|
||||||
translation.duration = 3000;
|
|
||||||
translation.fromTranslationX = 0;
|
|
||||||
translation.toTranslationX = 300;
|
|
||||||
translation.timingFunction = doric.TimingFunction.Default;
|
|
||||||
view.doAnimation(context, translation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('Linear').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const translation = new doric.TranslationAnimation;
|
|
||||||
translation.duration = 3000;
|
|
||||||
translation.fromTranslationX = 0;
|
|
||||||
translation.toTranslationX = 300;
|
|
||||||
translation.timingFunction = doric.TimingFunction.Linear;
|
|
||||||
view.doAnimation(context, translation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('EaseIn').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const translation = new doric.TranslationAnimation;
|
|
||||||
translation.duration = 3000;
|
|
||||||
translation.fromTranslationX = 0;
|
|
||||||
translation.toTranslationX = 300;
|
|
||||||
translation.timingFunction = doric.TimingFunction.EaseIn;
|
|
||||||
view.doAnimation(context, translation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('EaseOut').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const translation = new doric.TranslationAnimation;
|
|
||||||
translation.duration = 3000;
|
|
||||||
translation.fromTranslationX = 0;
|
|
||||||
translation.toTranslationX = 300;
|
|
||||||
translation.timingFunction = doric.TimingFunction.EaseOut;
|
|
||||||
view.doAnimation(context, translation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
thisLabel('EaseInEaseOut').apply({
|
|
||||||
onClick: () => {
|
|
||||||
const translation = new doric.TranslationAnimation;
|
|
||||||
translation.duration = 3000;
|
|
||||||
translation.fromTranslationX = 0;
|
|
||||||
translation.toTranslationX = 300;
|
|
||||||
translation.timingFunction = doric.TimingFunction.EaseInEaseOut;
|
|
||||||
view.doAnimation(context, translation);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
]).apply({ space: 10 }),
|
|
||||||
doric.stack([
|
|
||||||
view.also(v => {
|
|
||||||
v.x = 20;
|
|
||||||
v.y = 0;
|
|
||||||
v.width = 30;
|
|
||||||
v.left = 15;
|
|
||||||
}),
|
|
||||||
view2.also(v => {
|
|
||||||
v.x = v.y = 20;
|
|
||||||
v.y = 40;
|
|
||||||
v.scaleX = 1.5;
|
|
||||||
})
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
}).in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
AnimationDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], AnimationDemo);
|
|
||||||
//# sourceMappingURL=ComplicatedAnimations.js.map
|
|
@ -1,78 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
const colors = [
|
|
||||||
"#70a1ff",
|
|
||||||
"#7bed9f",
|
|
||||||
"#ff6b81",
|
|
||||||
"#a4b0be",
|
|
||||||
"#f0932b",
|
|
||||||
"#eb4d4b",
|
|
||||||
"#6ab04c",
|
|
||||||
"#e056fd",
|
|
||||||
"#686de0",
|
|
||||||
"#30336b",
|
|
||||||
].map(e => doric.Color.parse(e));
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let MyDemo = class MyDemo extends doric.Panel {
|
|
||||||
build(root) {
|
|
||||||
let refreshed;
|
|
||||||
let headerImage;
|
|
||||||
doric.stack([
|
|
||||||
refreshed = doric.refreshable({
|
|
||||||
onRefresh: () => {
|
|
||||||
refreshed.setRefreshing(context, false);
|
|
||||||
},
|
|
||||||
header: doric.pullable(doric.stack([]).apply({
|
|
||||||
backgroundColor: doric.Color.RED,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
width: 100,
|
|
||||||
height: 30,
|
|
||||||
}), {
|
|
||||||
startAnimation: () => {
|
|
||||||
},
|
|
||||||
stopAnimation: () => {
|
|
||||||
},
|
|
||||||
setPullingDistance: (distance) => {
|
|
||||||
headerImage.scaleX = headerImage.scaleY = (headerImage.height + distance * 2) / headerImage.height;
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
content: doric.list({
|
|
||||||
itemCount: 20,
|
|
||||||
renderItem: (idx) => {
|
|
||||||
return doric.listItem(doric.text({
|
|
||||||
text: `Item :${idx}`,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
width: root.width,
|
|
||||||
height: 50,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[idx % colors.length],
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}).apply({}),
|
|
||||||
}).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
}).also(v => {
|
|
||||||
v.top = 200;
|
|
||||||
}),
|
|
||||||
headerImage = doric.image({
|
|
||||||
imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg",
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
width: root.width,
|
|
||||||
height: 200,
|
|
||||||
scaleType: doric.ScaleType.ScaleAspectFill,
|
|
||||||
}),
|
|
||||||
]).in(root);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
MyDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], MyDemo);
|
|
||||||
//# sourceMappingURL=ComplicatedDemo.js.map
|
|
@ -1,128 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
var __metadata = (undefined && undefined.__metadata) || function (k, v) {
|
|
||||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
||||||
};
|
|
||||||
class CounterView extends doric.ViewHolder {
|
|
||||||
build(root) {
|
|
||||||
root.addChild(doric.vlayout([
|
|
||||||
doric.text({
|
|
||||||
textSize: 40,
|
|
||||||
layoutConfig: {
|
|
||||||
alignment: doric.Gravity.Center,
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
},
|
|
||||||
}).also(it => { this.number = it; }),
|
|
||||||
doric.text({
|
|
||||||
text: "点击计数",
|
|
||||||
textSize: 20,
|
|
||||||
border: {
|
|
||||||
width: 1,
|
|
||||||
color: doric.Color.parse('#000000'),
|
|
||||||
},
|
|
||||||
corners: 5,
|
|
||||||
layoutConfig: {
|
|
||||||
alignment: doric.Gravity.Center,
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
},
|
|
||||||
padding: {
|
|
||||||
left: 10,
|
|
||||||
right: 10,
|
|
||||||
top: 10,
|
|
||||||
bottom: 10,
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
color: doric.Color.parse("#00ff00"),
|
|
||||||
opacity: 0.5,
|
|
||||||
radius: 20,
|
|
||||||
offsetX: 10,
|
|
||||||
offsetY: 10,
|
|
||||||
}
|
|
||||||
}).also(it => { this.counter = it; }),
|
|
||||||
]).also(it => {
|
|
||||||
it.width = 200;
|
|
||||||
it.height = 200;
|
|
||||||
it.space = 20;
|
|
||||||
it.gravity = doric.Gravity.Center;
|
|
||||||
it.layoutConfig = {
|
|
||||||
alignment: doric.Gravity.Center
|
|
||||||
};
|
|
||||||
it.border = {
|
|
||||||
width: 1,
|
|
||||||
color: doric.Color.parse("#000000"),
|
|
||||||
};
|
|
||||||
it.shadow = {
|
|
||||||
color: doric.Color.parse("#ffff00"),
|
|
||||||
opacity: 0.5,
|
|
||||||
radius: 20,
|
|
||||||
offsetX: 10,
|
|
||||||
offsetY: 10,
|
|
||||||
};
|
|
||||||
it.corners = 20;
|
|
||||||
it.backgroundColor = doric.Color.parse('#ff00ff');
|
|
||||||
}));
|
|
||||||
root.addChild((new doric.Image).also(iv => {
|
|
||||||
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png";
|
|
||||||
iv.layoutConfig = {
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
bind(state) {
|
|
||||||
this.number.text = `${state.count}`;
|
|
||||||
}
|
|
||||||
setCounter(v) {
|
|
||||||
this.counter.onClick = v;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class CounterVM extends doric.ViewModel {
|
|
||||||
onAttached(s, vh) {
|
|
||||||
vh.counter.onClick = () => {
|
|
||||||
this.updateState(state => {
|
|
||||||
state.count++;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let MyPage = class MyPage extends doric.VMPanel {
|
|
||||||
getViewHolderClass() {
|
|
||||||
return CounterView;
|
|
||||||
}
|
|
||||||
getViewModelClass() {
|
|
||||||
return CounterVM;
|
|
||||||
}
|
|
||||||
getState() {
|
|
||||||
return {
|
|
||||||
count: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
log() {
|
|
||||||
doric.log("Hello.HEGO");
|
|
||||||
doric.logw("Hello.HEGO");
|
|
||||||
doric.loge("Hello.HEGO");
|
|
||||||
context.modal.toast('This is a toast.').then((r) => {
|
|
||||||
doric.loge(r);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
__decorate([
|
|
||||||
doric.NativeCall,
|
|
||||||
__metadata("design:type", Function),
|
|
||||||
__metadata("design:paramtypes", []),
|
|
||||||
__metadata("design:returntype", void 0)
|
|
||||||
], MyPage.prototype, "log", null);
|
|
||||||
MyPage = __decorate([
|
|
||||||
Entry
|
|
||||||
], MyPage);
|
|
||||||
//# sourceMappingURL=Counter.js.map
|
|
@ -1,392 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
const colors = [
|
|
||||||
"#70a1ff",
|
|
||||||
"#7bed9f",
|
|
||||||
"#ff6b81",
|
|
||||||
"#a4b0be",
|
|
||||||
"#f0932b",
|
|
||||||
"#eb4d4b",
|
|
||||||
"#6ab04c",
|
|
||||||
"#e056fd",
|
|
||||||
"#686de0",
|
|
||||||
"#30336b",
|
|
||||||
].map(e => doric.Color.parse(e));
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
function box(idx = 0) {
|
|
||||||
return (new doric.Stack).also(it => {
|
|
||||||
it.width = it.height = 20;
|
|
||||||
it.backgroundColor = colors[idx || 0];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function label(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
textSize: 16,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
let EffectsDemo = class EffectsDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
doric.hlayout([
|
|
||||||
doric.vlayout([
|
|
||||||
label("Origin view"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Border"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
border: {
|
|
||||||
width: 5,
|
|
||||||
color: colors[3]
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Corner"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: 10,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
bottom: 10
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Shadow"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
shadow: {
|
|
||||||
opacity: 1,
|
|
||||||
color: colors[1],
|
|
||||||
offsetX: 3,
|
|
||||||
offsetY: 3,
|
|
||||||
radius: 5,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
bottom: 10
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
]).apply({ space: 20 }),
|
|
||||||
doric.hlayout([
|
|
||||||
doric.vlayout([
|
|
||||||
label("Border,Corner"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
border: {
|
|
||||||
width: 5,
|
|
||||||
color: colors[3]
|
|
||||||
},
|
|
||||||
corners: 10,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Border,Shadow"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
border: {
|
|
||||||
width: 5,
|
|
||||||
color: colors[3]
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
opacity: 1,
|
|
||||||
color: colors[1],
|
|
||||||
offsetX: 3,
|
|
||||||
offsetY: 3,
|
|
||||||
radius: 5,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
bottom: 10
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Corner,Shadow"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: 10,
|
|
||||||
shadow: {
|
|
||||||
opacity: 1,
|
|
||||||
color: colors[1],
|
|
||||||
offsetX: 3,
|
|
||||||
offsetY: 3,
|
|
||||||
radius: 5,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
bottom: 10
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Border,Corner,Shadow"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
border: {
|
|
||||||
width: 5,
|
|
||||||
color: colors[3]
|
|
||||||
},
|
|
||||||
corners: 10,
|
|
||||||
shadow: {
|
|
||||||
opacity: 1,
|
|
||||||
color: colors[1],
|
|
||||||
offsetX: 3,
|
|
||||||
offsetY: 3,
|
|
||||||
radius: 5,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
]).apply({ space: 20 }),
|
|
||||||
doric.hlayout([
|
|
||||||
doric.vlayout([
|
|
||||||
label("Shadow"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: 50,
|
|
||||||
shadow: {
|
|
||||||
opacity: 1,
|
|
||||||
color: colors[1],
|
|
||||||
offsetX: 0,
|
|
||||||
offsetY: 0,
|
|
||||||
radius: 10,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 10,
|
|
||||||
right: 10,
|
|
||||||
bottom: 10,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Shadow,offset"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: 50,
|
|
||||||
shadow: {
|
|
||||||
opacity: 1,
|
|
||||||
color: colors[1],
|
|
||||||
offsetX: 5,
|
|
||||||
offsetY: 5,
|
|
||||||
radius: 5,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 10,
|
|
||||||
right: 10,
|
|
||||||
bottom: 10,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Shadow,opacity"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: 50,
|
|
||||||
shadow: {
|
|
||||||
opacity: 0.5,
|
|
||||||
color: colors[1],
|
|
||||||
offsetX: 5,
|
|
||||||
offsetY: 5,
|
|
||||||
radius: 5,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 10,
|
|
||||||
right: 10,
|
|
||||||
bottom: 10,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Shadow,color"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: 50,
|
|
||||||
shadow: {
|
|
||||||
opacity: 1,
|
|
||||||
color: colors[2],
|
|
||||||
offsetX: 5,
|
|
||||||
offsetY: 5,
|
|
||||||
radius: 5,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 10,
|
|
||||||
right: 10,
|
|
||||||
bottom: 10,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
]).apply({ space: 20 }),
|
|
||||||
doric.hlayout([
|
|
||||||
doric.vlayout([
|
|
||||||
label("Corner round"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: 50,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Corner left top"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: {
|
|
||||||
leftTop: 50,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Corner right top"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: {
|
|
||||||
rightTop: 50,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Corner left bottom"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: {
|
|
||||||
leftBottom: 50,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
label("Corner right bottom"),
|
|
||||||
box().apply({
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
corners: {
|
|
||||||
rightBottom: 50,
|
|
||||||
},
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().m({
|
|
||||||
left: 5,
|
|
||||||
right: 5,
|
|
||||||
bottom: 5,
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
}),
|
|
||||||
]).apply({ space: 20 }),
|
|
||||||
]).also(it => {
|
|
||||||
it.space = 20;
|
|
||||||
})).also(it => {
|
|
||||||
it.layoutConfig = doric.layoutConfig().atmost();
|
|
||||||
}).in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
EffectsDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], EffectsDemo);
|
|
||||||
//# sourceMappingURL=EffectsDemo.js.map
|
|
@ -1,53 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
const colors = [
|
|
||||||
"#70a1ff",
|
|
||||||
"#7bed9f",
|
|
||||||
"#ff6b81",
|
|
||||||
"#a4b0be",
|
|
||||||
"#f0932b",
|
|
||||||
"#eb4d4b",
|
|
||||||
"#6ab04c",
|
|
||||||
"#e056fd",
|
|
||||||
"#686de0",
|
|
||||||
"#30336b",
|
|
||||||
].map(e => doric.Color.parse(e));
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let FlowDemo = class FlowDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
doric.flowlayout({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
itemCount: 500,
|
|
||||||
columnCount: 3,
|
|
||||||
columnSpace: 10,
|
|
||||||
rowSpace: 10,
|
|
||||||
renderItem: (idx) => {
|
|
||||||
return new doric.FlowLayoutItem().apply({
|
|
||||||
backgroundColor: colors[idx % colors.length],
|
|
||||||
height: 50 + (idx % 3) * 20,
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
}).also(it => {
|
|
||||||
it.addChild(doric.text({
|
|
||||||
text: `${idx}`,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
textSize: 20,
|
|
||||||
layoutConfig: doric.layoutConfig().wrap().a(doric.Gravity.Center)
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
FlowDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], FlowDemo);
|
|
||||||
//# sourceMappingURL=FlowLayoutDemo.js.map
|
|
File diff suppressed because one or more lines are too long
@ -1,464 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
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 {
|
|
||||||
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.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
box(2),
|
|
||||||
box(4),
|
|
||||||
]).apply({
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.hlayout([
|
|
||||||
box(3),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
box(4),
|
|
||||||
]).apply({
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.hlayout([
|
|
||||||
box(3),
|
|
||||||
box(2),
|
|
||||||
boxStr('weight=1', 4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.hlayout([
|
|
||||||
boxStr('weight=1', 3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
box(4),
|
|
||||||
]).apply({
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.hlayout([
|
|
||||||
boxStr('weight=1', 3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
]).also(it => {
|
|
||||||
it.space = 20;
|
|
||||||
it.gravity = doric.gravity().center();
|
|
||||||
}),
|
|
||||||
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.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
box(2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
box(4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 100,
|
|
||||||
height: 200,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
box(3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
box(4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 100,
|
|
||||||
height: 200,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
box(3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
box(2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 100,
|
|
||||||
height: 200,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
boxStr('weight=1', 3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
box(4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 100,
|
|
||||||
height: 200,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
backgroundColor: doric.Color.parse('#eeeeee'),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
boxStr('weight=1', 3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 100,
|
|
||||||
height: 200,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
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().atmost();
|
|
||||||
})
|
|
||||||
.in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
LayoutDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], LayoutDemo);
|
|
||||||
//# sourceMappingURL=LayoutDemo.js.map
|
|
File diff suppressed because one or more lines are too long
@ -1,174 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let ModalDemo = class ModalDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
doric.text({
|
|
||||||
text: "Modal",
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.Gravity.Center,
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
label('toast on bottom'),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
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().exactly(),
|
|
||||||
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().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.modal(context).toast('This is a toast.', doric.Gravity.Center);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
doric.text({
|
|
||||||
text: "Alert",
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_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().exactly(),
|
|
||||||
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().w(doric.LayoutSpec.AT_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().exactly(),
|
|
||||||
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().w(doric.LayoutSpec.AT_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().exactly(),
|
|
||||||
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().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
|
||||||
gravity: doric.Gravity.Center,
|
|
||||||
space: 10,
|
|
||||||
})).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
}).in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
ModalDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], ModalDemo);
|
|
||||||
//# sourceMappingURL=ModalDemo.js.map
|
|
@ -1,124 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function title(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let NavbarDemo = class NavbarDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
title("Navbar Demo"),
|
|
||||||
label('isHidden').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.navbar(context).isHidden().then(e => doric.modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
|
|
||||||
doric.modal(context).alert(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
label('setHidden').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.navbar(context).isHidden()
|
|
||||||
.then(e => doric.navbar(context).setHidden(!e))
|
|
||||||
.catch(e => {
|
|
||||||
doric.modal(context).alert(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
label('setTitle').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.navbar(context).setTitle('Setted Title')
|
|
||||||
.catch(e => {
|
|
||||||
doric.modal(context).alert(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
label('setBgColor').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.navbar(context).setBgColor(doric.Color.YELLOW)
|
|
||||||
.catch(e => {
|
|
||||||
doric.modal(context).alert(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
label('Pop').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.navigator(context).pop();
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
})).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
}).in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
NavbarDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], NavbarDemo);
|
|
||||||
//# sourceMappingURL=NavbarDemo.js.map
|
|
@ -1,80 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let NaivgatorDemo = class NaivgatorDemo extends doric.Panel {
|
|
||||||
build(root) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
doric.text({
|
|
||||||
text: "Navigator Demo",
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
...[
|
|
||||||
'NavbarDemo',
|
|
||||||
'Counter', 'EffectsDemo', 'ImageDemo', 'LayoutDemo',
|
|
||||||
'ListDemo', 'ModalDemo', 'NavigatorDemo',
|
|
||||||
'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'
|
|
||||||
].map(e => label(e).apply({
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
onClick: () => {
|
|
||||||
doric.navigator(context).push(`assets://demo/${e}.js`, `${e}.js`);
|
|
||||||
},
|
|
||||||
})),
|
|
||||||
label('POP').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.navigator(context).pop();
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
})).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
}).in(root);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
NaivgatorDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], NaivgatorDemo);
|
|
||||||
//# sourceMappingURL=NavigatorDemo.js.map
|
|
@ -1,72 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function title(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let NetworkDemo = class NetworkDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
title("Network Demo"),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.network(context).get('https://m.baidu.com').then(e => {
|
|
||||||
doric.modal(context).alert(JSON.stringify(e));
|
|
||||||
}).catch(e => {
|
|
||||||
doric.modal(context).toast('Catched:' + JSON.stringify(e));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
})).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
}).in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
NetworkDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], NetworkDemo);
|
|
||||||
//# sourceMappingURL=NetworkDemo.js.map
|
|
@ -1,84 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function title(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let PopoverDemo = class PopoverDemo extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
title("Popover Demo"),
|
|
||||||
label('Popover').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.popover(context).show(doric.text({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly().a(doric.Gravity.Center),
|
|
||||||
text: "This is PopOver Window",
|
|
||||||
}).also(v => {
|
|
||||||
let idx = 0;
|
|
||||||
v.onClick = () => {
|
|
||||||
v.backgroundColor = colors[(++idx) % colors.length];
|
|
||||||
};
|
|
||||||
doric.modal(context).toast('Dismissed after 3 seconds');
|
|
||||||
setTimeout(() => {
|
|
||||||
doric.popover(context).dismiss();
|
|
||||||
}, 3000);
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
})).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
}).in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
PopoverDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], PopoverDemo);
|
|
||||||
//# sourceMappingURL=PopoverDemo.js.map
|
|
File diff suppressed because one or more lines are too long
@ -1,57 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
let ScrollerPanel = class ScrollerPanel extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
doric.scroller(doric.vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
width: 300,
|
|
||||||
height: 500,
|
|
||||||
backgroundColor: doric.Color.RED,
|
|
||||||
}),
|
|
||||||
doric.scroller(doric.vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
width: 300,
|
|
||||||
height: 500,
|
|
||||||
backgroundColor: doric.Color.BLUE,
|
|
||||||
})
|
|
||||||
]))
|
|
||||||
.apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.EXACTLY),
|
|
||||||
height: 500,
|
|
||||||
backgroundColor: doric.Color.YELLOW,
|
|
||||||
})
|
|
||||||
.in(rootView);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
ScrollerPanel = __decorate([
|
|
||||||
Entry
|
|
||||||
], ScrollerPanel);
|
|
||||||
//# sourceMappingURL=ScrollerDemo.js.map
|
|
@ -1,81 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
const colors = [
|
|
||||||
"#70a1ff",
|
|
||||||
"#7bed9f",
|
|
||||||
"#ff6b81",
|
|
||||||
"#a4b0be",
|
|
||||||
"#f0932b",
|
|
||||||
"#eb4d4b",
|
|
||||||
"#6ab04c",
|
|
||||||
"#e056fd",
|
|
||||||
"#686de0",
|
|
||||||
"#30336b",
|
|
||||||
].map(e => doric.Color.parse(e));
|
|
||||||
|
|
||||||
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 imageUrls = [
|
|
||||||
'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
|
|
||||||
'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
|
|
||||||
'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
|
|
||||||
'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
|
|
||||||
'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
|
|
||||||
'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
|
|
||||||
'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
|
|
||||||
'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
|
|
||||||
'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
|
|
||||||
];
|
|
||||||
let SliderPanel = class SliderPanel extends doric.Panel {
|
|
||||||
build(rootView) {
|
|
||||||
rootView.addChild(doric.vlayout([
|
|
||||||
doric.text({
|
|
||||||
text: "Gallery",
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
doric.slider({
|
|
||||||
itemCount: 100,
|
|
||||||
renderPage: (idx) => {
|
|
||||||
return doric.slideItem(doric.image({
|
|
||||||
imageUrl: imageUrls[idx % imageUrls.length],
|
|
||||||
scaleType: doric.ScaleType.ScaleAspectFit,
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST).h(doric.LayoutSpec.AT_MOST).a(doric.gravity().center()),
|
|
||||||
})).also(it => {
|
|
||||||
let start = idx;
|
|
||||||
it.onClick = () => {
|
|
||||||
it.backgroundColor = (colors[++start % colors.length]);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
weight: 1,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]).also(it => {
|
|
||||||
it.layoutConfig = {
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
SliderPanel = __decorate([
|
|
||||||
Entry
|
|
||||||
], SliderPanel);
|
|
||||||
//# sourceMappingURL=SliderDemo.js.map
|
|
@ -1,341 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var doric = require('doric');
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
var Direction;
|
|
||||||
(function (Direction) {
|
|
||||||
Direction[Direction["left"] = 0] = "left";
|
|
||||||
Direction[Direction["right"] = 1] = "right";
|
|
||||||
Direction[Direction["up"] = 2] = "up";
|
|
||||||
Direction[Direction["down"] = 3] = "down";
|
|
||||||
})(Direction || (Direction = {}));
|
|
||||||
var State;
|
|
||||||
(function (State) {
|
|
||||||
State[State["idel"] = 0] = "idel";
|
|
||||||
State[State["run"] = 1] = "run";
|
|
||||||
State[State["fail"] = 2] = "fail";
|
|
||||||
})(State || (State = {}));
|
|
||||||
class SnakeModel {
|
|
||||||
constructor(w, h) {
|
|
||||||
this.state = State.idel;
|
|
||||||
this.direction = Direction.right;
|
|
||||||
this.food = { x: -1, y: -1 };
|
|
||||||
this.head = {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
};
|
|
||||||
this.width = w;
|
|
||||||
this.height = h;
|
|
||||||
}
|
|
||||||
refreshFood() {
|
|
||||||
this.food.x = Math.floor(Math.random() * (this.width - 1));
|
|
||||||
this.food.y = Math.floor(Math.random() * (this.height - 1));
|
|
||||||
}
|
|
||||||
get tail() {
|
|
||||||
let node = this.head;
|
|
||||||
while (node.next !== undefined) {
|
|
||||||
node = node.next;
|
|
||||||
}
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
get score() {
|
|
||||||
let node = this.head;
|
|
||||||
let n = 0;
|
|
||||||
while (node.next !== undefined) {
|
|
||||||
n++;
|
|
||||||
node = node.next;
|
|
||||||
}
|
|
||||||
return n;
|
|
||||||
}
|
|
||||||
forward(node) {
|
|
||||||
switch (this.direction) {
|
|
||||||
case Direction.left:
|
|
||||||
node.x -= 1;
|
|
||||||
break;
|
|
||||||
case Direction.right:
|
|
||||||
node.x += 1;
|
|
||||||
break;
|
|
||||||
case Direction.up:
|
|
||||||
node.y -= 1;
|
|
||||||
break;
|
|
||||||
case Direction.down:
|
|
||||||
node.y += 1;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
step() {
|
|
||||||
if (this.state !== State.run) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let tail = this.tail;
|
|
||||||
while (tail.prev != undefined) {
|
|
||||||
tail.x = tail.prev.x;
|
|
||||||
tail.y = tail.prev.y;
|
|
||||||
tail = tail.prev;
|
|
||||||
}
|
|
||||||
this.forward(this.head);
|
|
||||||
if (this.head.x < 0 || this.head.x >= this.width
|
|
||||||
|| this.head.y < 0 || this.head.y >= this.height) {
|
|
||||||
//If out of bound
|
|
||||||
doric.loge('out of bound');
|
|
||||||
this.state = State.fail;
|
|
||||||
}
|
|
||||||
else if (this.head.x == this.food.x && this.head.y == this.food.y) {
|
|
||||||
//If eat food
|
|
||||||
let head = { x: this.food.x, y: this.food.y };
|
|
||||||
doric.log('eat food', head);
|
|
||||||
this.forward(head);
|
|
||||||
this.head.prev = head;
|
|
||||||
head.next = this.head;
|
|
||||||
this.head = head;
|
|
||||||
this.refreshFood();
|
|
||||||
}
|
|
||||||
if (this.crashAtSelf()) {
|
|
||||||
//If crash at self
|
|
||||||
doric.loge('crash at self');
|
|
||||||
this.state = State.fail;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
crashAtSelf() {
|
|
||||||
let cur = this.head.next;
|
|
||||||
while (cur !== undefined) {
|
|
||||||
if (cur.x == this.head.x && cur.y == this.head.y) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
cur = cur.next;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
reset() {
|
|
||||||
this.direction = Direction.right;
|
|
||||||
this.state = State.run;
|
|
||||||
this.head.x = 0;
|
|
||||||
this.head.y = 0;
|
|
||||||
this.head.next = undefined;
|
|
||||||
this.refreshFood();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class SnakeView extends doric.ViewHolder {
|
|
||||||
build(root) {
|
|
||||||
root.backgroundColor = doric.Color.parse('#000000');
|
|
||||||
doric.vlayout([
|
|
||||||
doric.text({
|
|
||||||
text: "Snake",
|
|
||||||
textSize: 20,
|
|
||||||
textColor: doric.Color.parse("#ffffff"),
|
|
||||||
layoutConfig: {
|
|
||||||
alignment: new doric.Gravity().centerX(),
|
|
||||||
margin: {
|
|
||||||
top: 20
|
|
||||||
},
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
(new doric.Stack).also(panel => {
|
|
||||||
panel.backgroundColor = doric.Color.parse('#00ff00');
|
|
||||||
this.panel = panel;
|
|
||||||
}),
|
|
||||||
doric.hlayout([
|
|
||||||
doric.text({
|
|
||||||
text: "Start",
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.parse("#ffffff"),
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
},
|
|
||||||
}).also(it => this.start = it),
|
|
||||||
]).also(it => {
|
|
||||||
it.layoutConfig = {
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
doric.vlayout([
|
|
||||||
doric.hlayout([
|
|
||||||
doric.text({
|
|
||||||
width: 50,
|
|
||||||
height: 50,
|
|
||||||
text: "↑",
|
|
||||||
textSize: 30,
|
|
||||||
textAlignment: new doric.Gravity().center(),
|
|
||||||
backgroundColor: doric.Color.parse('#ffff00'),
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
}).also(it => this.up = it)
|
|
||||||
]).also(it => {
|
|
||||||
it.layoutConfig = {
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
doric.hlayout([
|
|
||||||
doric.text({
|
|
||||||
width: 50,
|
|
||||||
height: 50,
|
|
||||||
text: "←",
|
|
||||||
textSize: 30,
|
|
||||||
textAlignment: new doric.Gravity().center(),
|
|
||||||
backgroundColor: doric.Color.parse('#ffff00'),
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
}).also(it => this.left = it),
|
|
||||||
doric.text({
|
|
||||||
width: 50,
|
|
||||||
height: 50,
|
|
||||||
text: "↓",
|
|
||||||
textSize: 30,
|
|
||||||
textAlignment: new doric.Gravity().center(),
|
|
||||||
backgroundColor: doric.Color.parse('#ffff00'),
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
}).also(it => this.down = it),
|
|
||||||
doric.text({
|
|
||||||
width: 50,
|
|
||||||
height: 50,
|
|
||||||
text: "→",
|
|
||||||
textSize: 30,
|
|
||||||
textAlignment: new doric.Gravity().center(),
|
|
||||||
backgroundColor: doric.Color.parse('#ffff00'),
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
heightSpec: doric.LayoutSpec.EXACTLY,
|
|
||||||
},
|
|
||||||
}).also(it => this.right = it),
|
|
||||||
]).also(it => {
|
|
||||||
it.layoutConfig = {
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
};
|
|
||||||
it.space = 10;
|
|
||||||
}),
|
|
||||||
]).also(controlArea => {
|
|
||||||
controlArea.gravity = new doric.Gravity().centerX();
|
|
||||||
controlArea.space = 10;
|
|
||||||
controlArea.layoutConfig = {
|
|
||||||
alignment: new doric.Gravity().centerX(),
|
|
||||||
widthSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
heightSpec: doric.LayoutSpec.WRAP_CONTENT,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
]).also(it => {
|
|
||||||
it.space = 20;
|
|
||||||
it.layoutConfig = {
|
|
||||||
alignment: new doric.Gravity().centerX().top(),
|
|
||||||
widthSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
heightSpec: doric.LayoutSpec.AT_MOST,
|
|
||||||
};
|
|
||||||
it.gravity = new doric.Gravity().centerX();
|
|
||||||
}).in(root);
|
|
||||||
}
|
|
||||||
bind(state) {
|
|
||||||
doric.log('build', state);
|
|
||||||
this.panel.width = state.width * 10;
|
|
||||||
this.panel.height = state.height * 10;
|
|
||||||
let node = state.head;
|
|
||||||
let nodes = [];
|
|
||||||
while (node != undefined) {
|
|
||||||
nodes.push(node);
|
|
||||||
node = node.next;
|
|
||||||
}
|
|
||||||
nodes.push(state.food);
|
|
||||||
nodes.forEach((e, index) => {
|
|
||||||
let item = this.panel.children[index];
|
|
||||||
if (item === undefined) {
|
|
||||||
item = new doric.Stack;
|
|
||||||
item.width = item.height = 10;
|
|
||||||
item.corners = 5;
|
|
||||||
item.shadow = {
|
|
||||||
color: doric.Color.GRAY,
|
|
||||||
opacity: 1,
|
|
||||||
radius: 3,
|
|
||||||
offsetX: 3,
|
|
||||||
offsetY: 3,
|
|
||||||
};
|
|
||||||
this.panel.addChild(item);
|
|
||||||
}
|
|
||||||
if (index === nodes.length - 1) {
|
|
||||||
item.backgroundColor = doric.Color.parse('#ffff00');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
item.backgroundColor = doric.Color.parse('#ff0000');
|
|
||||||
}
|
|
||||||
item.x = e.x * 10;
|
|
||||||
item.y = e.y * 10;
|
|
||||||
});
|
|
||||||
if (nodes.length < this.panel.children.length) {
|
|
||||||
this.panel.children.length = nodes.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class SnakeVM extends doric.ViewModel {
|
|
||||||
constructor() {
|
|
||||||
super(...arguments);
|
|
||||||
this.start = () => {
|
|
||||||
if (this.timerId !== undefined) {
|
|
||||||
clearInterval(this.timerId);
|
|
||||||
}
|
|
||||||
this.updateState(it => it.reset());
|
|
||||||
this.timerId = setInterval(() => {
|
|
||||||
this.updateState(it => it.step());
|
|
||||||
if (this.getState().state === State.fail) {
|
|
||||||
doric.loge('Game Over');
|
|
||||||
this.stop();
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
};
|
|
||||||
this.stop = () => {
|
|
||||||
if (this.timerId !== undefined) {
|
|
||||||
clearInterval(this.timerId);
|
|
||||||
this.timerId = undefined;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.left = () => {
|
|
||||||
this.updateState(it => it.direction = Direction.left);
|
|
||||||
};
|
|
||||||
this.right = () => {
|
|
||||||
this.updateState(it => it.direction = Direction.right);
|
|
||||||
};
|
|
||||||
this.up = () => {
|
|
||||||
this.updateState(it => it.direction = Direction.up);
|
|
||||||
};
|
|
||||||
this.down = () => {
|
|
||||||
this.updateState(it => it.direction = Direction.down);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
onAttached(state, v) {
|
|
||||||
doric.takeNonNull(v.start)(it => it.onClick = this.start);
|
|
||||||
doric.takeNonNull(v.left)(it => it.onClick = this.left);
|
|
||||||
doric.takeNonNull(v.right)(it => it.onClick = this.right);
|
|
||||||
doric.takeNonNull(v.up)(it => it.onClick = this.up);
|
|
||||||
doric.takeNonNull(v.down)(it => it.onClick = this.down);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let SnakePanel = class SnakePanel extends doric.VMPanel {
|
|
||||||
getViewModelClass() {
|
|
||||||
return SnakeVM;
|
|
||||||
}
|
|
||||||
getState() {
|
|
||||||
return new SnakeModel(35, 35);
|
|
||||||
}
|
|
||||||
getViewHolderClass() {
|
|
||||||
return SnakeView;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
SnakePanel = __decorate([
|
|
||||||
Entry
|
|
||||||
], SnakePanel);
|
|
||||||
//# sourceMappingURL=Snake.js.map
|
|
@ -1,119 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
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 storedKey = 'StoredKey';
|
|
||||||
const zone = 'StorageDemo';
|
|
||||||
let StorageDemo = class StorageDemo extends doric.Panel {
|
|
||||||
update() {
|
|
||||||
doric.storage(context).getItem(storedKey, zone).then(e => {
|
|
||||||
this.stored.text = e || "";
|
|
||||||
doric.log('Called in then');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
build(root) {
|
|
||||||
doric.scroller(doric.vlayout([
|
|
||||||
doric.text({
|
|
||||||
text: "Storage Demo",
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[1],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
label('Stored'),
|
|
||||||
doric.text({
|
|
||||||
layoutConfig: doric.layoutConfig().w(doric.LayoutSpec.AT_MOST),
|
|
||||||
textSize: 20,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[3],
|
|
||||||
textAlignment: doric.gravity().center(),
|
|
||||||
height: 50,
|
|
||||||
}).also(it => this.stored = it),
|
|
||||||
label('store a value').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.storage(context).getItem(storedKey, zone).then(e => {
|
|
||||||
doric.modal(context).prompt({
|
|
||||||
text: e,
|
|
||||||
title: "Please input text to store",
|
|
||||||
defaultText: "Default Value",
|
|
||||||
}).then(text => {
|
|
||||||
doric.storage(context).setItem(storedKey, text, zone).then(() => {
|
|
||||||
this.update();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
label('remove value').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.storage(context).remove(storedKey, zone).then(e => {
|
|
||||||
this.update();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
label('clear values').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().exactly(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.storage(context).clear(zone).then(e => {
|
|
||||||
this.update();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost().h(doric.LayoutSpec.WRAP_CONTENT),
|
|
||||||
gravity: doric.gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
})).apply({
|
|
||||||
layoutConfig: doric.layoutConfig().atmost(),
|
|
||||||
}).in(root);
|
|
||||||
this.update();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
StorageDemo = __decorate([
|
|
||||||
Entry
|
|
||||||
], StorageDemo);
|
|
||||||
//# sourceMappingURL=StorageDemo.js.map
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user