From 52ee8b52d1c18ff376a9233a2fe8fc522bcde8d4 Mon Sep 17 00:00:00 2001
From: Andy Pemberton <apemberton@captechventures.com>
Date: Fri, 19 Aug 2011 00:59:38 -0400
Subject: [PATCH] initial paging implementation

---
 .../scrollview/jquery.mobile.scrollview.css   | 23 +++++++++++
 .../scrollview/jquery.mobile.scrollview.js    | 41 +++++++++++++++++++
 experiments/scrollview/scrollview.js          |  4 +-
 3 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/experiments/scrollview/jquery.mobile.scrollview.css b/experiments/scrollview/jquery.mobile.scrollview.css
index 5112e431e31..a7ce46b30b8 100644
--- a/experiments/scrollview/jquery.mobile.scrollview.css
+++ b/experiments/scrollview/jquery.mobile.scrollview.css
@@ -63,3 +63,26 @@
 	width: 100%;
 	height: 5px;
 }
+
+.ui-scrollview-pager{
+	list-style:none;
+	margin:0;padding:0;
+	text-align:right;
+	position:absolute;
+	bottom:2px;
+	width:100%;
+	font-size:8px;
+}
+.ui-scrollview-pager li{
+	display:inline-block;
+	background:#666;
+	margin:0 5px;
+	border-radius:8px;
+	border:1px solid #ccc;
+	width:10px;
+	height:10px;
+	cursor:pointer;
+}
+.ui-scrollview-pager li.active{
+	background:#fff;
+}
diff --git a/experiments/scrollview/jquery.mobile.scrollview.js b/experiments/scrollview/jquery.mobile.scrollview.js
index b190c701c06..c56180f9f33 100644
--- a/experiments/scrollview/jquery.mobile.scrollview.js
+++ b/experiments/scrollview/jquery.mobile.scrollview.js
@@ -29,6 +29,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
 		showScrollBars:    true,
 		
 		pagingEnabled:     false,
+		pagerEnabled:     false,
 		delayedClickSelector: "a,input,textarea,select,button,.ui-btn",
 		delayedClickEnabled: false
 	},
@@ -79,6 +80,45 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
 		this._timerCB = function(){ self._handleMomentumScroll(); };
 	
 		this._addBehaviors();
+		this._setupPager();
+	},
+	
+	_setupPager: function(){
+		if(this.options.pagingEnabled && this.options.pagerEnabled && (this.options.direction === "x" || this.options.direction === "y")){
+			var self = this;
+			var dimension = (this.options.direction === "x") ? "width" : "height";
+			
+			var clipSize = parseInt(this._$clip.css(dimension), 10);
+			var viewSize = parseInt(this._$view.css(dimension), 10);
+			
+			var pages = parseInt(viewSize / clipSize);
+			
+			var pager ='<ul class="ui-scrollview-pager">';
+			for(i = 1; i <= pages; i++) {
+				pager += '<li';
+				if(i==1) pager += ' class="active"';
+				pager += '></li>';
+			}
+			pager += '</ul>';
+			this._$clip.append(pager);
+			
+			$('.ui-scrollview-pager li').click(function(e){
+				self.scrollTo($(this).index() * clipSize, 0, self.options.snapbackDuration);
+			});
+			
+		}
+	}, 
+	
+	_updatePager: function(){
+		if(this.options.pagingEnabled && this.options.pagerEnabled && (this.options.direction === "x" || this.options.direction === "y")){
+			var dimension = (this.options.direction === "x") ? "width" : "height";
+			
+			var clipSize = parseInt(this._$clip.css(dimension), 10);
+			var currPos = (this.options.direction === "x") ? this.getScrollPosition().x : this.getScrollPosition().y;
+			
+			var index = parseInt((currPos + (clipSize / 2)) / clipSize);
+			this._$clip.find('.ui-scrollview-pager li').eq(index).addClass('active').siblings().removeClass('active');
+		}
 	},
 
 	_startMScroll: function(speedX, speedY)
@@ -240,6 +280,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
 				self._setScrollPosition(sx + (dx * ec), sy + (dy * ec));
 				self._timerID = setTimeout(tfunc, self._timerInterval);
 			}
+			self._updatePager();
 		};
 
 		this._timerID = setTimeout(tfunc, this._timerInterval);
diff --git a/experiments/scrollview/scrollview.js b/experiments/scrollview/scrollview.js
index eb6cb020959..4ed1be0f5ca 100644
--- a/experiments/scrollview/scrollview.js
+++ b/experiments/scrollview/scrollview.js
@@ -37,8 +37,10 @@ $(":jqmData(role='page')").live("pageshow", function(event) {
 			var opts = {};
 			if (dir)
 				opts.direction = dir;
-			if (paging)
+			if (paging) {
 				opts.pagingEnabled = true;
+				opts.pagerEnabled = true;
+			}
 
 			var method = $this.jqmData("scroll-method");
 			if (method)