From 9af84da6a00b1789d297520375941667a8f3d180 Mon Sep 17 00:00:00 2001
From: MattMo <matt@montoyatech.com>
Date: Thu, 30 Jun 2022 09:19:27 -0700
Subject: [PATCH] Improved the pull down refresh code and logic.

---
 ignite-template.js | 63 +++++++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/ignite-template.js b/ignite-template.js
index f65dd2b..0db8e55 100644
--- a/ignite-template.js
+++ b/ignite-template.js
@@ -2402,10 +2402,14 @@ class list extends IgniteTemplate {
     }
 
     onRefreshTouchStart(event) {
-        var touch = event.touches[0];
-
-        this.refreshTouchStartY = touch.clientY;
+        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);
     }
@@ -2413,32 +2417,37 @@ class list extends IgniteTemplate {
     onRefreshTouchMove(event) {
         var touch = event.touches[0];
 
-        if (this.element.parentElement.scrollTop > 0) {
-            this.refreshTouchStartY = touch.clientY;
-        } else {
-            var diff = Math.max(touch.clientY - this.refreshTouchStartY, 0) / 2;
+        var diff = touch.clientY - (this.refreshTouchStartY + this.refreshTouchStartTop + 15);
 
-            if (diff < (40 * window.devicePixelRatio)) {
-                if (this.refreshPlaceholderElement instanceof IgniteTemplate) {
-                    this.refreshPlaceholderElement.element.style.setProperty("min-height", `${diff}px`);
-                    this.refreshPlaceholderElement.element.style.setProperty("height", `${diff}px`);
-                } else {
-                    this.refreshPlaceholderElement.style.setProperty("min-height", `${diff}px`);
-                    this.refreshPlaceholderElement.style.setProperty("height", `${diff}px`);
-                }
+        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 {
-                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.refreshCallback();
+                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");
         }
     }
 
@@ -2453,6 +2462,8 @@ class list extends IgniteTemplate {
 
         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) {