Extracted a pager control from slideshow and menugrid

Author: jzaefferer

grid-spf/menugrid.html

@@ -14,6 +14,7 @@
 	<script src="../ui/jquery.ui.position.js"></script>
 	<script src="datasource.js"></script>
 	<script src="grid.js"></script>
+	<script src="pager.js"></script>
 
 	<script>
 	$(function() {
@@ -91,6 +92,10 @@
 			movies.option("filter", filters).refresh();
 		});
 
+		$("#pager").pager({
+			source: movies
+		});
+		return;
 		var buttons = $("#pager").buttonset().find("button").click(function() {
 			var method = $(this).data("page");
 			movies[method]();

grid-spf/pager.js

@@ -0,0 +1,32 @@
+$.widget( "spf.pager", {
+	options: {
+		source: null,
+		pageSize: 2
+	},
+	_create: function() {
+		var that = this;
+
+		// TODO add a datasource method for this
+		$( this.options.source ).bind( "datasourcerefresh", function() {
+			that.refresh();
+		});
+		
+		this.buttons = this.element.delegate("button", "click", function() {
+			var method = $(this).data("page");
+			var source = that.options.source;
+			source[method]();
+			source.refresh();
+		}).buttonset().find("button");
+	},
+	refresh: function() {	
+		this.buttons.button("enable");
+		
+		var source = this.options.source;
+		if (!source._skip) {
+			this.buttons.slice(0, 2).button("disable")
+		}
+		if (source._skip + source._take >= source.totalCount) {
+			this.buttons.slice(2, 4).button("disable")
+		}
+	}
+});

grid-spf/photoslideshow.html

@@ -12,8 +12,9 @@
 	<script src="../ui/jquery.ui.position.js"></script>
 	<script src="../ui/jquery.ui.button.js"></script>
 	<script src="datasource.js"></script>
+	<script src="pager.js"></script>
 	<script src="slideshow.js"></script>
-	<script type="text/x-kite" id="controls-tmpl">
+	<script type="text/x-kite" id="pager-tmpl">
 		<div class="controls">
 			<button data-page="first">First</button>
 			<button data-page="prev">Prev</button>
@@ -52,6 +53,11 @@
 		$( "#slideshow" ).slideshow({
 			source: datasource
 		});
+		
+		$( kite( "#pager-tmpl" )() ).insertBefore( "#slideshow" ).pager({
+			source: datasource
+		})
+		
 
 		$( "#page-size" ).change(function() {
 			datasource.option("paging", {
@@ -60,6 +66,8 @@
 				skip: datasource._skip
 			}).refresh();
 		});
+
+		datasource.refresh();
 	});
 
 	</script>

grid-spf/photoslideshow_remote.html

@@ -13,12 +13,12 @@
 	<script src="../ui/jquery.ui.button.js"></script>
 	<script src="datasource.js"></script>
 	<script src="slideshow.js"></script>
-	<script type="text/x-kite" id="controls-tmpl">
+	<script src="pager.js"></script>
+	<script type="text/x-kite" id="pager-tmpl">
 		<div class="controls">
 			<button data-page="first">First</button>
 			<button data-page="prev">Prev</button>
 			<button data-page="next">Next</button>
-			<button data-page="last">Last</button>
 		</div>
 	</script>
 	<script type="text/x-kite" id="photo-tmpl">
@@ -65,6 +65,10 @@
 		$( "#slideshow" ).slideshow({
 			source: datasource
 		});
+		
+		$( kite( "#pager-tmpl" )() ).insertBefore( "#slideshow" ).pager({
+			source: datasource
+		});
 
 		$( "#filter" ).change(function() {
 			datasource.option("filter", {
@@ -79,6 +83,8 @@
 				skip: datasource._skip
 			}).refresh();
 		});
+		
+		datasource.refresh();
 	});
 
 	</script>

grid-spf/slideshow.js

@@ -10,15 +10,6 @@ $.widget( "spf.slideshow", {
 		$( this.options.source ).bind( "datasourcerefresh", function() {
 			that.refresh();
 		});
-		
-		this.buttons = $( kite( "#controls-tmpl" )() ).insertBefore( this.element ).delegate("button", "click", function() {
-			var method = $(this).data("page");
-			var source = that.options.source;
-			source[method]();
-			source.refresh();
-		}).buttonset().find("button");
-
-		this.options.source.refresh();
 	},
 	refresh: function() {
 		var photosHtml = [];
@@ -30,15 +21,5 @@ $.widget( "spf.slideshow", {
 
 		this.element.empty();
 		this.element.html( photosHtml.join("") );
-		
-		this.buttons.button("enable");
-		
-		var source = this.options.source;
-		if (!source._skip) {
-			this.buttons.slice(0, 2).button("disable")
-		}
-		if (source._skip + source._take >= source.totalCount) {
-			this.buttons.slice(2, 4).button("disable")
-		}
 	}
 });