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

web: add DoricRereshableNode

Browse Source
This commit is contained in:
pengfei.zhou 2021-04-15 11:35:58 +08:00 committed by osborn
parent 1a5ed94568
commit 365f415ead
7 changed files with 304 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
doric-web/dist/index.js vendored
View File

@ -4448,19 +4448,20 @@ var doric_web = (function (exports, axios, sandbox) {
if (((_a = this.context.rootNode.viewId) === null || _a === void 0 ? void 0 : _a.length) > 0) {
if (this.context.rootNode.viewId === ret.id) {
this.context.rootNode.blend(ret.props);
this.context.rootNode.onBlended();
}
else {
for (let map of this.context.headNodes.values()) {
const viewNode = map.get(ret.id);
if (viewNode) {
viewNode.blend(ret.props);
}
viewNode === null || viewNode === void 0 ? void 0 : viewNode.blend(ret.props);
viewNode === null || viewNode === void 0 ? void 0 : viewNode.onBlended();
}
}
}
else {
this.context.rootNode.viewId = ret.id;
this.context.rootNode.blend(ret.props);
this.context.rootNode.onBlended();
}
}
}
@ -4559,7 +4560,6 @@ var doric_web = (function (exports, axios, sandbox) {
}
this.onBlending();
this.layout();
this.onBlended();
}
onBlending() {
}
@ -4799,6 +4799,10 @@ var doric_web = (function (exports, axios, sandbox) {
super.onBlending();
this.configChildNode();
}
onBlended() {
super.onBlended();
this.childNodes.forEach(e => e.onBlended());
}
configChildNode() {
this.childViewIds.forEach((childViewId, index) => {
const model = this.getSubModel(childViewId);
@ -5279,8 +5283,10 @@ var doric_web = (function (exports, axios, sandbox) {
this.childNode = childNode;
}
}
layout() {
super.layout();
onBlended() {
var _a;
super.onBlended();
(_a = this.childNode) === null || _a === void 0 ? void 0 : _a.onBlended();
}
}
@ -5541,10 +5547,8 @@ var doric_web = (function (exports, axios, sandbox) {
}
}
blendSubNode(model) {
const viewNode = this.getSubNodeById(model.id);
if (viewNode) {
viewNode.blend(model.props);
}
var _a;
(_a = this.getSubNodeById(model.id)) === null || _a === void 0 ? void 0 : _a.blend(model.props);
}
getSubNodeById(viewId) {
if (viewId === this.loadMoreViewId) {
@ -5569,6 +5573,10 @@ var doric_web = (function (exports, axios, sandbox) {
});
return ret;
}
onBlended() {
super.onBlended();
this.childNodes.forEach(e => e.onBlended());
}
}
class DoricDraggableNode extends DoricStackNode {
@ -5637,31 +5645,151 @@ var doric_web = (function (exports, axios, sandbox) {
}
class DoricRefreshableNode extends DoricSuperNode {
blendSubNode(model) {
}
getSubNodeById(viewId) {
return undefined;
constructor() {
super(...arguments);
this.headerViewId = "";
this.contentViewId = "";
}
build() {
const ret = document.createElement('div');
ret.style.overflow = "scroll";
ret.style.overflow = "hidden";
const header = document.createElement('div');
const content = document.createElement('div');
header.style.width = "100%";
header.style.height = "200px";
header.style.backgroundColor = "red";
header.style.height = "auto";
content.style.width = "100%";
content.style.height = "100%";
content.style.backgroundColor = "blue";
ret.appendChild(header);
ret.appendChild(content);
ret.addEventListener("scroll", () => {
ret.scrollTop = 200;
let touchStart = 0;
ret.ontouchstart = (ev) => {
touchStart = ev.touches[0].pageY;
};
ret.ontouchmove = (ev) => {
ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart));
};
ret.ontouchcancel = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
});
};
ret.ontouchend = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
});
};
window.requestAnimationFrame(() => {
ret.scrollTop = header.offsetHeight;
});
this.headerContainer = header;
this.contentContainer = content;
return ret;
}
blendProps(v, propName, prop) {
if (propName === 'content') {
this.contentViewId = prop;
}
else if (propName === 'header') {
this.headerViewId = prop;
}
else if (propName === 'onRefresh') {
this.onRefreshCallback = () => {
this.callJSResponse(prop);
};
}
else {
super.blendProps(v, propName, prop);
}
}
blendSubNode(model) {
var _a;
(_a = this.getSubNodeById(model.id)) === null || _a === void 0 ? void 0 : _a.blend(model.props);
}
getSubNodeById(viewId) {
if (viewId === this.headerViewId) {
return this.headerNode;
}
else if (viewId === this.contentViewId) {
return this.contentNode;
}
return undefined;
}
onBlending() {
var _a, _b, _c, _d, _e, _f;
super.onBlending();
{
const headerModel = this.getSubModel(this.headerViewId);
if (headerModel) {
if (this.headerNode) {
if (this.headerNode.viewId !== this.headerViewId) {
if (this.reusable && this.headerNode.viewType === headerModel.type) {
this.headerNode.viewId = headerModel.id;
this.headerNode.blend(headerModel.props);
}
else {
(_a = this.headerContainer) === null || _a === void 0 ? void 0 : _a.removeChild(this.headerNode.view);
const headerNode = DoricViewNode.create(this.context, headerModel.type);
if (headerNode) {
headerNode.viewId = headerModel.id;
headerNode.init(this);
headerNode.blend(headerModel.props);
(_b = this.headerContainer) === null || _b === void 0 ? void 0 : _b.appendChild(headerNode.view);
this.headerNode = headerNode;
}
}
}
}
else {
const headerNode = DoricViewNode.create(this.context, headerModel.type);
if (headerNode) {
headerNode.viewId = headerModel.id;
headerNode.init(this);
headerNode.blend(headerModel.props);
(_c = this.headerContainer) === null || _c === void 0 ? void 0 : _c.appendChild(headerNode.view);
this.headerNode = headerNode;
}
}
}
}
{
const contentModel = this.getSubModel(this.contentViewId);
if (contentModel) {
if (this.contentNode) {
if (this.contentNode.viewId !== this.contentViewId) {
if (this.reusable && this.contentNode.viewType === contentModel.type) {
this.contentNode.viewId = contentModel.id;
this.contentNode.blend(contentModel.props);
}
else {
(_d = this.contentContainer) === null || _d === void 0 ? void 0 : _d.removeChild(this.contentNode.view);
const contentNode = DoricViewNode.create(this.context, contentModel.type);
if (contentNode) {
contentNode.viewId = contentModel.id;
contentNode.init(this);
contentNode.blend(contentModel.props);
(_e = this.contentContainer) === null || _e === void 0 ? void 0 : _e.appendChild(contentNode.view);
this.contentNode = contentNode;
}
}
}
}
else {
const contentNode = DoricViewNode.create(this.context, contentModel.type);
if (contentNode) {
contentNode.viewId = contentModel.id;
contentNode.init(this);
contentNode.blend(contentModel.props);
(_f = this.contentContainer) === null || _f === void 0 ? void 0 : _f.appendChild(contentNode.view);
this.contentNode = contentNode;
}
}
}
}
}
onBlended() {
this.view.scrollTop = 200;
super.onBlended();
}
}

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

7
doric-web/src/plugins/ShaderPlugin.ts
View File

@ -6,17 +6,18 @@ export class ShaderPlugin extends DoricPlugin {
if (this.context.rootNode.viewId?.length > 0) {
if (this.context.rootNode.viewId === ret.id) {
this.context.rootNode.blend(ret.props)
this.context.rootNode.onBlended()
} else {
for (let map of this.context.headNodes.values()) {
const viewNode = map.get(ret.id)
if (viewNode) {
viewNode.blend(ret.props)
}
viewNode?.blend(ret.props)
viewNode?.onBlended()
}
}
} else {
this.context.rootNode.viewId = ret.id
this.context.rootNode.blend(ret.props)
this.context.rootNode.onBlended()
}
}
}

9
doric-web/src/shader/DoricListNode.ts
View File

@ -78,10 +78,7 @@ export class DoricListNode extends DoricSuperNode {
}
}
blendSubNode(model: DVModel) {
const viewNode = this.getSubNodeById(model.id)
if (viewNode) {
viewNode.blend(model.props)
}
this.getSubNodeById(model.id)?.blend(model.props)
}
getSubNodeById(viewId: string) {
@ -109,4 +106,8 @@ export class DoricListNode extends DoricSuperNode {
})
return ret
}
onBlended() {
super.onBlended()
this.childNodes.forEach(e => e.onBlended())
}
}

148
doric-web/src/shader/DoricRefreshableNode.ts
View File

@ -1,32 +1,154 @@
import { DoricSuperNode, DVModel } from "./DoricViewNode";
import { DoricSuperNode, DoricViewNode, DVModel } from "./DoricViewNode";
export class DoricRefreshableNode extends DoricSuperNode {
blendSubNode(model: DVModel) {
}
headerViewId = ""
headerNode?: DoricViewNode
getSubNodeById(viewId: string) {
return undefined
}
contentViewId = ""
contentNode?: DoricViewNode
onRefreshCallback?: Function
headerContainer?: HTMLDivElement
contentContainer?: HTMLDivElement
build() {
const ret = document.createElement('div')
ret.style.overflow = "scroll"
ret.style.overflow = "hidden"
const header = document.createElement('div')
const content = document.createElement('div')
header.style.width = "100%"
header.style.height = "200px"
header.style.backgroundColor = "red"
header.style.height = "auto"
content.style.width = "100%"
content.style.height = "100%"
content.style.backgroundColor = "blue"
ret.appendChild(header)
ret.appendChild(content)
ret.addEventListener("scroll", () => {
ret.scrollTop = 200
let touchStart = 0
ret.ontouchstart = (ev) => {
touchStart = ev.touches[0].pageY
}
ret.ontouchmove = (ev) => {
ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart))
}
ret.ontouchcancel = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
})
}
ret.ontouchend = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
})
}
window.requestAnimationFrame(() => {
ret.scrollTop = header.offsetHeight
})
this.headerContainer = header
this.contentContainer = content
return ret
}
blendProps(v: HTMLElement, propName: string, prop: any) {
if (propName === 'content') {
this.contentViewId = prop
} else if (propName === 'header') {
this.headerViewId = prop
} else if (propName === 'onRefresh') {
this.onRefreshCallback = () => {
this.callJSResponse(prop)
}
} else {
super.blendProps(v, propName, prop)
}
}
blendSubNode(model: DVModel) {
this.getSubNodeById(model.id)?.blend(model.props)
}
getSubNodeById(viewId: string) {
if (viewId === this.headerViewId) {
return this.headerNode
} else if (viewId === this.contentViewId) {
return this.contentNode
}
return undefined
}
onBlending() {
super.onBlending()
{
const headerModel = this.getSubModel(this.headerViewId)
if (headerModel) {
if (this.headerNode) {
if (this.headerNode.viewId !== this.headerViewId) {
if (this.reusable && this.headerNode.viewType === headerModel.type) {
this.headerNode.viewId = headerModel.id
this.headerNode.blend(headerModel.props)
} else {
this.headerContainer?.removeChild(this.headerNode.view)
const headerNode = DoricViewNode.create(this.context, headerModel.type)
if (headerNode) {
headerNode.viewId = headerModel.id
headerNode.init(this)
headerNode.blend(headerModel.props)
this.headerContainer?.appendChild(headerNode.view)
this.headerNode = headerNode
}
}
}
} else {
const headerNode = DoricViewNode.create(this.context, headerModel.type)
if (headerNode) {
headerNode.viewId = headerModel.id
headerNode.init(this)
headerNode.blend(headerModel.props)
this.headerContainer?.appendChild(headerNode.view)
this.headerNode = headerNode
}
}
}
}
{
const contentModel = this.getSubModel(this.contentViewId)
if (contentModel) {
if (this.contentNode) {
if (this.contentNode.viewId !== this.contentViewId) {
if (this.reusable && this.contentNode.viewType === contentModel.type) {
this.contentNode.viewId = contentModel.id
this.contentNode.blend(contentModel.props)
} else {
this.contentContainer?.removeChild(this.contentNode.view)
const contentNode = DoricViewNode.create(this.context, contentModel.type)
if (contentNode) {
contentNode.viewId = contentModel.id
contentNode.init(this)
contentNode.blend(contentModel.props)
this.contentContainer?.appendChild(contentNode.view)
this.contentNode = contentNode
}
}
}
} else {
const contentNode = DoricViewNode.create(this.context, contentModel.type)
if (contentNode) {
contentNode.viewId = contentModel.id
contentNode.init(this)
contentNode.blend(contentModel.props)
this.contentContainer?.appendChild(contentNode.view)
this.contentNode = contentNode
}
}
}
}
}
onBlended() {
super.onBlended()
}
}

5
doric-web/src/shader/DoricScrollerNode.ts
View File

@ -63,7 +63,8 @@ export class DoricScrollerNode extends DoricSuperNode {
}
}
layout() {
super.layout()
onBlended() {
super.onBlended()
this.childNode?.onBlended()
}
}

7
doric-web/src/shader/DoricViewNode.ts
View File

@ -403,10 +403,17 @@ export abstract class DoricGroupViewNode extends DoricSuperNode {
blend(props: { [index: string]: any }) {
super.blend(props)
}
onBlending() {
super.onBlending()
this.configChildNode()
}
onBlended() {
super.onBlended()
this.childNodes.forEach(e => e.onBlended())
}
configChildNode() {
this.childViewIds.forEach((childViewId, index) => {
const model = this.getSubModel(childViewId)