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

Removed old list refresh code.

Browse Source
This commit is contained in:
MattMo 2022-10-28 08:06:50 -07:00
parent 58f1ceb512
commit 84464863c7
1 changed files with 1 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
ignite-template.js
View File

@ -2125,10 +2125,8 @@ class list extends IgniteTemplate {
* @param {Array|IgniteProperty} list The list of items to construct within this template. * @param {Array|IgniteProperty} list The list of items to construct within this template.
* @param {Function(item, index, count)} forEachCallback A function that constructs a template foreach item. * @param {Function(item, index, count)} forEachCallback A function that constructs a template foreach item.
* @param {Boolean} reflect If true any items removed from the DOM will be removed from the list if they exist. By default this is false. * @param {Boolean} reflect If true any items removed from the DOM will be removed from the list if they exist. By default this is false.
* @param {Function} refreshCallback A function that is called when the user is requesting the list to refresh.
* @param {IgniteHtmlElement} refreshCallback A function that is called when the user is requesting the list to refresh.
*/ */
constructor(list, forEachCallback, reflect = false, refreshCallback = null, refreshPlaceholderElement = null) { constructor(list, forEachCallback, reflect = false) {
super(); super();
if (list instanceof IgniteProperty) { if (list instanceof IgniteProperty) {
@ -2147,12 +2145,6 @@ class list extends IgniteTemplate {
this.reflecting = reflect; this.reflecting = reflect;
this.reflectCallbacks = []; this.reflectCallbacks = [];
this.forEachCallback = forEachCallback; this.forEachCallback = forEachCallback;
this.refreshCallback = refreshCallback;
this.refreshPlaceholderElement = refreshPlaceholderElement;
this.refreshTouchStartY = 0;
this.refreshTouchStartListener = (e) => this.onRefreshTouchStart(e);
this.refreshTouchMoveListener = (e) => this.onRefreshTouchMove(e);
this.refreshTouchEndListener = (e) => this.onRefreshTouchEnd(e);
this.elements = []; this.elements = [];
this.tagName = "shadow list"; this.tagName = "shadow list";
} }
@ -2171,26 +2163,6 @@ class list extends IgniteTemplate {
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
if (this.refreshCallback) {
if (!this.refreshPlaceholderElement) {
this.refreshPlaceholderElement = document.createElement("div");
this.refreshPlaceholderElement.classList.add("ignite-html");
this.refreshPlaceholderElement.classList.add("refresh-placeholder");
this.refreshPlaceholderElement.element.style.setProperty("min-height", "0px");
this.refreshPlaceholderElement.element.style.setProperty("height", "0px");
parent.prepend(this.refreshPlaceholderElement);
} else {
this.refreshPlaceholderElement.construct(parent, this.element);
this.refreshPlaceholderElement.element.style.setProperty("min-height", "0px");
this.refreshPlaceholderElement.element.style.setProperty("height", "0px");
//Force the placeholder element to be at the top of the parent.
parent.prepend(this.refreshPlaceholderElement.element);
}
parent.addEventListener("touchstart", this.refreshTouchStartListener);
}
} else { } else {
parent = this.element.parentElement; parent = this.element.parentElement;
} }
@ -2401,71 +2373,6 @@ class list extends IgniteTemplate {
} }
} }
onRefreshTouchStart(event) {
this.refreshTouchStartY = event.touches[0].clientY;
this.refreshTouchStartTop = this.element.parentElement.scrollTop;
//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("touchend", this.refreshTouchEndListener);
}
onRefreshTouchMove(event) {
var touch = event.touches[0];
var diff = touch.clientY - (this.refreshTouchStartY + this.refreshTouchStartTop + 15);
if (diff < 125) {
if (this.refreshPlaceholderElement instanceof IgniteTemplate) {
this.refreshPlaceholderElement.element.style.setProperty("min-height", `${Math.max(diff, 0)}px`);
this.refreshPlaceholderElement.element.style.setProperty("height", `${Math.max(diff, 0)}px`);
} else {
this.refreshPlaceholderElement.style.setProperty("min-height", `${Math.max(diff, 0)}px`);
this.refreshPlaceholderElement.style.setProperty("height", `${Math.max(diff, 0)}px`);
}
} 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");
}
}
onRefreshTouchEnd(event) {
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");
}
onStyleChanged(name, newValue) { onStyleChanged(name, newValue) {
this.elements.forEach((element) => { this.elements.forEach((element) => {
element.style.setProperty(name, newValue, this._styles[name].priority); element.style.setProperty(name, newValue, this._styles[name].priority);