MontoyaTech/ignite-html
MontoyaTech/ignite-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved the pull down refresh code and logic.

Browse Source
This commit is contained in:
MattMo 2022-06-30 09:19:27 -07:00
parent b981d8f7c1
commit 9af84da6a0
1 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
ignite-template.js
View File

@ -2402,9 +2402,13 @@ class list extends IgniteTemplate {
} }
onRefreshTouchStart(event) { onRefreshTouchStart(event) {
var touch = event.touches[0]; this.refreshTouchStartY = event.touches[0].clientY;
this.refreshTouchStartTop = this.element.parentElement.scrollTop;
this.refreshTouchStartY = touch.clientY; //Save the default overflow value if we don't have it yet.
if (!this.refreshTouchOverflow) {
this.refreshTouchOverflow = window.getComputedStyle(this.element.parentElement).getPropertyValue("overflow-y");
}
this.element.parentElement.addEventListener("touchmove", this.refreshTouchMoveListener); this.element.parentElement.addEventListener("touchmove", this.refreshTouchMoveListener);
this.element.parentElement.addEventListener("touchend", this.refreshTouchEndListener); this.element.parentElement.addEventListener("touchend", this.refreshTouchEndListener);
@ -2413,32 +2417,37 @@ class list extends IgniteTemplate {
onRefreshTouchMove(event) { onRefreshTouchMove(event) {
var touch = event.touches[0]; var touch = event.touches[0];
if (this.element.parentElement.scrollTop > 0) { var diff = touch.clientY - (this.refreshTouchStartY + this.refreshTouchStartTop + 15);
this.refreshTouchStartY = touch.clientY;
} else {
var diff = Math.max(touch.clientY - this.refreshTouchStartY, 0) / 2;
if (diff < (40 * window.devicePixelRatio)) { if (diff < 125) {
if (this.refreshPlaceholderElement instanceof IgniteTemplate) { if (this.refreshPlaceholderElement instanceof IgniteTemplate) {
this.refreshPlaceholderElement.element.style.setProperty("min-height", `${diff}px`); this.refreshPlaceholderElement.element.style.setProperty("min-height", `${Math.max(diff, 0)}px`);
this.refreshPlaceholderElement.element.style.setProperty("height", `${diff}px`); this.refreshPlaceholderElement.element.style.setProperty("height", `${Math.max(diff, 0)}px`);
} else {
this.refreshPlaceholderElement.style.setProperty("min-height", `${diff}px`);
this.refreshPlaceholderElement.style.setProperty("height", `${diff}px`);
}
} else { } else {
if (this.refreshPlaceholderElement instanceof IgniteTemplate) { this.refreshPlaceholderElement.style.setProperty("min-height", `${Math.max(diff, 0)}px`);
this.refreshPlaceholderElement.element.style.setProperty("min-height", "0px"); this.refreshPlaceholderElement.style.setProperty("height", `${Math.max(diff, 0)}px`);
this.refreshPlaceholderElement.element.style.setProperty("height", "0px");
} else {
this.refreshPlaceholderElement.style.setProperty("min-height", "0px");
this.refreshPlaceholderElement.style.setProperty("height", "0px");
}
this.element.parentElement.removeEventListener("touchmove", this.refreshTouchMoveListener);
this.refreshCallback();
} }
} else {
if (this.refreshPlaceholderElement instanceof IgniteTemplate) {
this.refreshPlaceholderElement.element.style.setProperty("min-height", "0px");
this.refreshPlaceholderElement.element.style.setProperty("height", "0px");
} else {
this.refreshPlaceholderElement.style.setProperty("min-height", "0px");
this.refreshPlaceholderElement.style.setProperty("height", "0px");
}
this.element.parentElement.removeEventListener("touchmove", this.refreshTouchMoveListener);
this.element.parentElement.removeEventListener("touchend", this.refreshTouchEndListener);
this.element.parentElement.style.removeProperty("overflow-y");
this.element.parentElement.style.setProperty("overflow-y", this.refreshTouchOverflow, "important");
this.refreshCallback();
return;
}
if (diff > 0 && this.element.parentElement.style["overflow-y"] != "hidden") {
this.element.parentElement.style.setProperty("overflow-y", "hidden", "important");
} }
} }
@ -2453,6 +2462,8 @@ class list extends IgniteTemplate {
this.element.parentElement.removeEventListener("touchmove", this.refreshTouchMoveListener); this.element.parentElement.removeEventListener("touchmove", this.refreshTouchMoveListener);
this.element.parentElement.removeEventListener("touchend", this.refreshTouchEndListener); this.element.parentElement.removeEventListener("touchend", this.refreshTouchEndListener);
this.element.parentElement.style.removeProperty("overflow-y");
this.element.parentElement.style.setProperty("overflow-y", this.refreshTouchOverflow, "important");
} }
onStyleChanged(name, newValue) { onStyleChanged(name, newValue) {