Continued development of pull-to-refresh

demo/dom-list.html

@@ -13,7 +13,7 @@
 	<style type="text/css">
 
 	#container{
-		width: 400px;
+		width: 300px;
 		height: 400px;
 		border: 5px solid black;
 		position: absolute;
@@ -49,20 +49,26 @@
 		height: 50px;
 		width: 100%;
 		display: block;
-		text-align: center;
+		text-align: left;
 		font-size: 20px;
 		line-height: 50px;
+		text-indent: 10px;
 	}
 
 	.refresh{
-		background: #aaa;
+		background: #7b91aa;
 		color: white;
 		font-weight: bold;
 		height: 50px;
 		margin-top: -50px;
 		text-align: center;
 		font-size: 16px;
 		line-height: 50px;
+		-webkit-transition: background-color 300ms;
+	}
+
+	.refresh.active{
+		background: #006eb3;
 	}
 
 	</style>
@@ -81,6 +87,8 @@
 	var container = document.getElementById("container");
 	var content = document.getElementById("content");
 
+	var refreshElem = content.getElementsByTagName("div")[0];
+
 	// Content Generator
 	var frag = document.createDocumentFragment();
 	for (var row=1; row<=50; row++) {
@@ -97,6 +105,17 @@
 		scrollingX: false
 	});
 
+	// Activate pull-to-refresh
+	scroller.activatePullToRefresh(50, function() {
+		refreshElem.className += " active";
+	}, function() {
+		refreshElem.className = refreshElem.className.replace(" active", "");
+	}, function() {
+		window.setTimeout(function() {
+			scroller.finishPullToRefresh();
+		}, 3000);
+	});
+
 
 	// Setup Scroller
 
@@ -108,8 +127,6 @@
 
 	// Event Handler
 
-	var supportsZoom = true;
-
 	if ('ontouchstart' in window) {
 
 		container.addEventListener("touchstart", function(e) {

src/Scroller.js

@@ -154,6 +154,9 @@ var Scroller;
 		/** {Integer} Snapping height for content */
 		__snapHeight: 100,
 
+		/** {Integer} Height to assign to refresh area */
+		__refreshHeight: null,
+
 		/** {Number} Zoom level */
 		__zoomLevel: 1,
 
@@ -304,6 +307,26 @@ var Scroller;
 		},
 
 
+		__refreshActive: false,
+		__refreshActivate: null,
+		__refreshDeactivate: null,
+		__refreshStart: null,
+
+		activatePullToRefresh: function(height, activateCallback, deactivateCallback, startCallback) {
+			this.__refreshHeight = height;
+			this.__refreshActivate = activateCallback;
+			this.__refreshDeactivate = deactivateCallback;
+			this.__refreshStart = startCallback;
+		},
+
+
+		finishPullToRefresh: function() {
+			console.debug("Finished Refresh")
+			this.__refreshActive = false;
+			this.scrollTo(this.__scrollLeft, this.__scrollTop, true);
+		},
+
+
 		/**
 		 * Returns the scroll position and zooming values
 		 *
@@ -727,6 +750,26 @@ var Scroller;
 						if (self.options.bouncing) {
 
 							scrollTop += (moveY / 2);
+
+							// Support pull-to-refresh
+							if (self.__refreshHeight != null) {
+
+								if (!self.__refreshActive && scrollTop <= -self.__refreshHeight) {
+
+									self.__refreshActive = true;
+									if (self.__refreshActivate) {
+										self.__refreshActivate();
+									}
+
+								} else if (self.__refreshActive && scrollTop > -self.__refreshHeight) {
+
+									self.__refreshActive = false;
+									if (self.__refreshDeactivate) {
+										self.__refreshDeactivate();
+									}
+
+								}
+							}
 
 						} else if (scrollTop > maxScrollTop) {
 
@@ -837,9 +880,20 @@ 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) {
+
+								self.__refreshActive = false;
+								if (self.__refreshDeactivate) {
+									self.__refreshDeactivate();
+								}
+
+							}
+
 							self.__startDeceleration(timeStamp);
+
 						}
-
 					}
 				}
 			}
@@ -851,8 +905,17 @@ var Scroller;
 			// have modified the scroll positions or even showed the scrollbars though.
 			if (!self.__isDecelerating) {
 
-				self.scrollTo(self.__scrollLeft, self.__scrollTop, true, self.__zoomLevel);
-
+				if (this.__refreshActive) {
+
+					// 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 scrollY when supporting pull-to-refresh
+					self.__publish(self.__scrollLeft, -self.__refreshHeight, self.__zoomLevel, true);
+
+				} else {
+
+					self.scrollTo(self.__scrollLeft, self.__scrollTop, true, self.__zoomLevel);
+
+				}
 			}
 
 			// Fully cleanup list