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

web:Refreshable developing

Browse Source
This commit is contained in:
pengfei.zhou 2021-04-15 18:34:06 +08:00 committed by osborn
parent e26ab7e1a5
commit 935eb8521b
5 changed files with 90 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4462,6 +4462,9 @@ var doric_web = (function (exports, axios, sandbox) {
function toPixelString(v) {
return `${v}px`;
}
function pixelString2Number(v) {
return parseFloat(v.substring(0, v.indexOf("px")));
}
function toRGBAString(color) {
let strs = [];
for (let i = 0; i < 32; i += 8) {
@ -4736,13 +4739,13 @@ var doric_web = (function (exports, axios, sandbox) {
this.backgroundColor = v;
}
getAlpha() {
return this.view.style.opacity;
return parseFloat(this.view.style.opacity);
}
setAlpha(v) {
this.view.style.opacity = `${v}`;
}
getCorners() {
return this.view.style.borderRadius;
return parseFloat(this.view.style.borderRadius);
}
setCorners(v) {
this.view.style.borderRadius = toPixelString(v);
@ -4994,13 +4997,19 @@ var doric_web = (function (exports, axios, sandbox) {
configSize() {
if (this.layoutConfig.widthSpec === exports.LayoutSpec.WRAP_CONTENT) {
const width = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetWidth);
const computedStyle = window.getComputedStyle(current.view);
return Math.max(prev, current.view.offsetWidth
+ pixelString2Number(computedStyle.marginLeft)
+ pixelString2Number(computedStyle.marginRight));
}, 0);
this.view.style.width = toPixelString(width);
}
if (this.layoutConfig.heightSpec === exports.LayoutSpec.WRAP_CONTENT) {
const height = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetHeight);
const computedStyle = window.getComputedStyle(current.view);
return Math.max(prev, current.view.offsetHeight
+ pixelString2Number(computedStyle.marginTop)
+ pixelString2Number(computedStyle.marginBottom));
}, 0);
this.view.style.height = toPixelString(height);
}
@ -5725,6 +5734,7 @@ var doric_web = (function (exports, axios, sandbox) {
super(...arguments);
this.headerViewId = "";
this.contentViewId = "";
this.refreshable = true;
}
build() {
const ret = document.createElement('div');
@ -5742,22 +5752,39 @@ var doric_web = (function (exports, axios, sandbox) {
ret.appendChild(content);
let touchStart = 0;
ret.ontouchstart = (ev) => {
if (!this.refreshable) {
return;
}
touchStart = ev.touches[0].pageY;
};
ret.ontouchmove = (ev) => {
ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart));
if (!this.refreshable) {
return;
}
ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart) * 0.68);
};
const touchend = () => {
var _a, _b;
if (!this.refreshable) {
return;
}
if (header.offsetHeight - ret.scrollTop >= (((_a = this.headerNode) === null || _a === void 0 ? void 0 : _a.getWidth()) || 0)) {
this.setRefreshing(true);
(_b = this.onRefreshCallback) === null || _b === void 0 ? void 0 : _b.call(this);
}
else {
// To idel
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
});
}
};
ret.ontouchcancel = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
});
touchend();
};
ret.ontouchend = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
});
touchend();
};
window.requestAnimationFrame(() => {
ret.scrollTop = header.offsetHeight;
@ -5889,7 +5916,10 @@ var doric_web = (function (exports, axios, sandbox) {
}
}
setRefreshable(v) {
console.log("setRefreshable", v);
this.refreshable = v;
if (!v) {
this.setRefreshing(false);
}
}
}
@ -6266,6 +6296,7 @@ ${content}
exports.destroyContext = destroyContext;
exports.injectGlobalObject = injectGlobalObject;
exports.loadJS = loadJS;
exports.pixelString2Number = pixelString2Number;
exports.registerJSBundle = registerJSBundle;
exports.registerPlugin = registerPlugin;
exports.registerViewNode = registerViewNode;

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

File diff suppressed because one or more lines are too long

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

@ -13,7 +13,7 @@ export class DoricRefreshableNode extends DoricSuperNode {
headerContainer?: HTMLDivElement
contentContainer?: HTMLDivElement
refreshable = true
build() {
const ret = document.createElement('div')
ret.style.overflow = "hidden"
@ -30,22 +30,37 @@ export class DoricRefreshableNode extends DoricSuperNode {
ret.appendChild(content)
let touchStart = 0
ret.ontouchstart = (ev) => {
if (!this.refreshable) {
return
}
touchStart = ev.touches[0].pageY
}
ret.ontouchmove = (ev) => {
ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart))
if (!this.refreshable) {
return
}
ret.scrollTop = Math.max(0, header.offsetHeight - (ev.touches[0].pageY - touchStart) * 0.68)
}
const touchend = () => {
if (!this.refreshable) {
return
}
if (header.offsetHeight - ret.scrollTop >= (this.headerNode?.getWidth() || 0)) {
this.setRefreshing(true)
this.onRefreshCallback?.()
} else {
// To idel
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
})
}
}
ret.ontouchcancel = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
})
touchend()
}
ret.ontouchend = () => {
ret.scrollTo({
top: header.offsetHeight,
behavior: "smooth"
})
touchend()
}
window.requestAnimationFrame(() => {
ret.scrollTop = header.offsetHeight
@ -172,6 +187,9 @@ export class DoricRefreshableNode extends DoricSuperNode {
}
setRefreshable(v: boolean) {
console.log("setRefreshable", v)
this.refreshable = v
if (!v) {
this.setRefreshing(false)
}
}
}

12
doric-web/src/shader/DoricStackNode.ts
View File

@ -1,4 +1,4 @@
import { DoricGroupViewNode, LayoutSpec, FrameSize, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from "./DoricViewNode";
import { DoricGroupViewNode, LayoutSpec, FrameSize, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, pixelString2Number } from "./DoricViewNode";
export class DoricStackNode extends DoricGroupViewNode {
@ -19,13 +19,19 @@ export class DoricStackNode extends DoricGroupViewNode {
configSize() {
if (this.layoutConfig.widthSpec === LayoutSpec.WRAP_CONTENT) {
const width = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetWidth)
const computedStyle = window.getComputedStyle(current.view)
return Math.max(prev, current.view.offsetWidth
+ pixelString2Number(computedStyle.marginLeft)
+ pixelString2Number(computedStyle.marginRight))
}, 0)
this.view.style.width = toPixelString(width)
}
if (this.layoutConfig.heightSpec === LayoutSpec.WRAP_CONTENT) {
const height = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetHeight)
const computedStyle = window.getComputedStyle(current.view)
return Math.max(prev, current.view.offsetHeight
+ pixelString2Number(computedStyle.marginTop)
+ pixelString2Number(computedStyle.marginBottom))
}, 0)
this.view.style.height = toPixelString(height)
}

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

@ -33,6 +33,10 @@ export function toPixelString(v: number) {
return `${v}px`
}
export function pixelString2Number(v: string) {
return parseFloat(v.substring(0, v.indexOf("px")))
}
export function toRGBAString(color: number) {
let strs = []
for (let i = 0; i < 32; i += 8) {
@ -369,7 +373,7 @@ export abstract class DoricViewNode {
}
getAlpha() {
return this.view.style.opacity
return parseFloat(this.view.style.opacity)
}
setAlpha(v: number) {
@ -377,7 +381,7 @@ export abstract class DoricViewNode {
}
getCorners() {
return this.view.style.borderRadius
return parseFloat(this.view.style.borderRadius)
}
setCorners(v: number) {