From ecc1cf65022481e7a5eafc6aa6294b55bcaaf1c8 Mon Sep 17 00:00:00 2001
From: taoeer <719012229@qq.com>
Date: Mon, 10 Apr 2017 10:09:12 +0800
Subject: [PATCH 1/2] add pull to loading

---
 demo/dom-list.html | 43 ++++++++++++++++------
 src/Scroller.js    | 89 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+), 11 deletions(-)
diff --git a/demo/dom-list.html b/demo/dom-list.html
index efcc1e7..a944b49 100644
--- a/demo/dom-list.html
+++ b/demo/dom-list.html
@@ -54,7 +54,7 @@
 		text-indent: 10px;
 	}
 	
-	.refresh{
+	.refresh, .loading{
 		background: #7b91aa;
 		color: white;
 		font-weight: bold;
@@ -71,20 +71,25 @@
 		transition: background-color 300ms;
 	}
 	
-	.refresh.active{
+	.refresh.active, .loading.active{
 		background: #006eb3;
 	}
 	
-	.refresh.running{
+	.refresh.running, .loading.running{
 		background: #00b373;
 	}
-	
+	.loading {
+		margin-top: 0;
+	}
 	</style>
 
 </head>
 <body>
 	<div id="container">
-		<div id="content"><div class="refresh">Pull to Refresh</div></div>
+		<div id="content">
+			<div class="refresh">Pull to Refresh</div>
+			<div class="loading">Pull to Loading</div>
+		</div>
 	</div>
 
 	<script type="text/javascript">
@@ -92,6 +97,7 @@
 	var container = document.getElementById("container");
 	var content = document.getElementById("content");
 	var refreshElem = content.getElementsByTagName("div")[0];
+	var loadingElem = content.getElementsByTagName("div")[1];
 
 
 	// Initialize Scroller
@@ -115,6 +121,22 @@
 			scroller.finishPullToRefresh();
 		}, 2000);
 	});
+
+	scroller.activatePullToLoading(50, function() {
+		loadingElem.className += " active";
+		loadingElem.innerHTML = "Release to Loading";
+	}, function() {
+		loadingElem.className = loadingElem.className.replace(" active", "");
+		loadingElem.innerHTML = "Pull to Loading";
+	}, function() {
+		loadingElem.className += " running";
+		loadingElem.innerHTML = "Loading...";
+		setTimeout(function() {
+			loadingElem.className = loadingElem.className.replace(" running", "");
+			insertItems(true);
+			scroller.finishPullToLoading();
+		}, 2000);
+	});
 	
 	
 	
@@ -128,7 +150,7 @@
 	
 	// Fill Scroller
 	
-	var insertItems = function() {
+	var insertItems = function(after) {
 		
 		for (var i=0; i<15; i++) {
 			
@@ -137,16 +159,15 @@
 			row.style.backgroundColor = i%2 > 0 ? "#ddd" : "";
 			row.innerHTML = Math.random();
 			
-			if (content.firstChild == content.lastChild) {
-				content.appendChild(row);
+			if (after) {
+				content.insertBefore(row, content.lastElementChild);
 			} else {
-				content.insertBefore(row, content.childNodes[1])
+				content.insertBefore(row, content.childNodes[2])
 			}
 		}
 
 		// Update Scroller dimensions for changed content
-		scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight-50);
-		
+		scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight-100);
 	};
 
 	insertItems();	
diff --git a/src/Scroller.js b/src/Scroller.js
index ff728d6..17cca87 100644
--- a/src/Scroller.js
+++ b/src/Scroller.js
@@ -192,6 +192,25 @@ var Scroller;
 		/** {Function} Callback to execute to start the actual refresh. Call {@link #refreshFinish} when done */
 		__refreshStart: null,
 
+
+		/*--------------------------------------------------------------------------------*/
+		/** {Integer} Height to assign to loading area */
+		__loadingHeight: null,
+
+		/** {Boolean} Whether the loading process is enabled when the event is released now */
+		__loadingActive: false,
+
+		/** {Function} Callback to execute on activation. This is for signalling the user about a loading is about to happen when he release */
+		__loadingActivate: null,
+
+		/** {Function} Callback to execute on deactivation. This is for signalling the user about the loading being cancelled */
+		__loadingDeactivate: null,
+
+		/** {Function} Callback to execute to start the actual loading. Call {@link #loadingFinish} when done */
+		__loadingStart: null,
+		/*--------------------------------------------------------------------------------*/
+
+
 		/** {Number} Zoom level */
 		__zoomLevel: 1,
 
@@ -395,6 +414,41 @@ var Scroller;
 		},
 
 
+		/*-------------------------------------------------------------------------------------*/
+		activatePullToLoading: function(height, activateCallback, deactivateCallback, startCallback) {
+
+			var self = this;
+
+			self.__loadingHeight = height;
+			self.__loadingActivate = activateCallback;
+			self.__loadingDeactivate = deactivateCallback;
+			self.__loadingStart = startCallback;
+
+		},
+		triggerPullToLoading: function() {
+			// Use publish instead of scrollTo to allow scrolling to out of boundary position
+			// We don't need to normalize scrollLeft, zoomLevel, etc. here because we only y-scrolling when pull-to-refresh is enabled
+			this.__publish(this.__scrollLeft, -this.__loadingHeight, this.__zoomLevel, true);
+
+			if (this.__loadingStart) {
+				this.__loadingStart();
+			}
+		},
+		finishPullToLoading: function() {
+
+			var self = this;
+
+			self.__loadingActive = false;
+			if (self.__loadingDeactivate) {
+				self.__loadingDeactivate();
+			}
+
+			// self.scrollTo(self.__scrollLeft, self.__scrollTop, true);
+
+		},
+		/*-------------------------------------------------------------------------------------*/
+
+
 		/**
 		 * Returns the scroll position and zooming values
 		 *
@@ -862,6 +916,26 @@ var Scroller;
 								}
 							}
 
+							// Support pull-to-loading (only when only y is scrollable)
+							if (!self.__enableScrollX && self.__loadingHeight != null) {
+
+								if (!self.__loadingActive && scrollTop >= maxScrollTop + self.__loadingHeight) {
+
+									self.__loadingActive = true;
+									if (self.__loadingActivate) {
+										self.__loadingActivate();
+									}
+
+								} else if (self.__loadingActive && scrollTop < maxScrollTop + self.__loadingHeight) {
+
+									self.__loadingActive = false;
+									if (self.__loadingDeactivate) {
+										self.__loadingDeactivate();
+									}
+
+								}
+							}
+
 						} else if (scrollTop > maxScrollTop) {
 
 							scrollTop = maxScrollTop;
@@ -1010,6 +1084,12 @@ var Scroller;
 						self.__refreshStart();
 					}
 
+				} else if(self.__loadingActive && self.__loadingStart) {
+					self.__publish(self.__scrollLeft, self.__maxScrollTop + self.__loadingHeight, self.__zoomLevel, true);
+
+					if (self.__loadingStart) {
+						self.__loadingStart();
+					}
 				} else {
 
 					if (self.__interruptedAnimation || self.__isDragging) {
@@ -1026,6 +1106,15 @@ var Scroller;
 						}
 
 					}
+
+					if (self.__loadingActive) {
+
+						self.__loadingActive = false;
+						if (self.__loadingDeactivate) {
+							self.__loadingDeactivate();
+						}
+
+					}
 				}
 			}
 

From e8995086ad97009ee35b93d0853126ce28630271 Mon Sep 17 00:00:00 2001
From: taoeer <719012229@qq.com>
Date: Mon, 10 Apr 2017 10:18:27 +0800
Subject: [PATCH 2/2] add the pull-to-loading

---
 demo/dom-list.html |  3 +--
 src/Scroller.js    | 22 ++++++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/demo/dom-list.html b/demo/dom-list.html
index a944b49..20b0cbf 100644
--- a/demo/dom-list.html
+++ b/demo/dom-list.html
@@ -122,6 +122,7 @@
 		}, 2000);
 	});
 
+	// Activate pull-to-loading
 	scroller.activatePullToLoading(50, function() {
 		loadingElem.className += " active";
 		loadingElem.innerHTML = "Release to Loading";
@@ -138,8 +139,6 @@
 		}, 2000);
 	});
 	
-	
-	
 	// Setup Scroller
 
 	var rect = container.getBoundingClientRect();
diff --git a/src/Scroller.js b/src/Scroller.js
index 17cca87..6d345f0 100644
--- a/src/Scroller.js
+++ b/src/Scroller.js
@@ -415,6 +415,9 @@ var Scroller;
 
 
 		/*-------------------------------------------------------------------------------------*/
+		/**
+		 * Like `activatePullToRefresh` but the zone on the bottom
+		 */
 		activatePullToLoading: function(height, activateCallback, deactivateCallback, startCallback) {
 
 			var self = this;
@@ -425,15 +428,21 @@ var Scroller;
 			self.__loadingStart = startCallback;
 
 		},
+
+		/**
+		 * Like `triggerPullToRefresh`
+		 */
 		triggerPullToLoading: function() {
-			// Use publish instead of scrollTo to allow scrolling to out of boundary position
-			// We don't need to normalize scrollLeft, zoomLevel, etc. here because we only y-scrolling when pull-to-refresh is enabled
-			this.__publish(this.__scrollLeft, -this.__loadingHeight, this.__zoomLevel, true);
+			this.__publish(this.__scrollLeft, this.__maxScrollTop + this.__loadingHeight, this.__zoomLevel, true);
 
 			if (this.__loadingStart) {
 				this.__loadingStart();
 			}
 		},
+
+		/**
+		 * Like `finishPullToRefresh`
+		 */
 		finishPullToLoading: function() {
 
 			var self = this;
@@ -442,9 +451,6 @@ var Scroller;
 			if (self.__loadingDeactivate) {
 				self.__loadingDeactivate();
 			}
-
-			// self.scrollTo(self.__scrollLeft, self.__scrollTop, true);
-
 		},
 		/*-------------------------------------------------------------------------------------*/
 
@@ -1052,8 +1058,8 @@ var Scroller;
 						// Verify that we have enough velocity to start deceleration
 						if (Math.abs(self.__decelerationVelocityX) > minVelocityToStartDeceleration || Math.abs(self.__decelerationVelocityY) > minVelocityToStartDeceleration) {
 
-							// Deactivate pull-to-refresh when decelerating
-							if (!self.__refreshActive) {
+							// Deactivate pull-to-refresh and pull-to-loading when decelerating
+							if (!self.__refreshActive && !self.__loadingActive) {
 								self.__startDeceleration(timeStamp);
 							}
 						} else {
