Skip to content
Browse files

SPF: Added nested datasource demo.

  • Loading branch information...
1 parent 5832e9f commit 9baba319f15805efe2320c1259295a79219043a7 @scottgonzalez scottgonzalez committed
Showing with 175 additions and 1 deletion.
  1. +1 −1 grid-spf/datasource.js
  2. +174 −0 grid-spf/photoslideshow_nested.html
View
2 grid-spf/datasource.js
@@ -44,7 +44,7 @@ $.widget( "ui.datasource", {
page: function( pageIndex ) {
var limit = this.options.paging.limit;
if ( pageIndex !== undefined ) {
- this.options.paging.offset = pageIndex * limit - limit;
+ this.option( "paging.offset", pageIndex * limit - limit );
}
return Math.ceil( this.options.paging.offset / limit + 1 );
},
View
174 grid-spf/photoslideshow_nested.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Photo Slideshow</title>
+ <link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
+ <link rel="stylesheet" href="grid.css">
+ <script src="../jquery-1.5.1.js"></script>
+ <script src="../external/kite.js"></script>
+ <script src="../ui/jquery.ui.core.js"></script>
+ <script src="../ui/jquery.ui.widget.js"></script>
+ <script src="../ui/jquery.ui.position.js"></script>
+ <script src="../ui/jquery.ui.button.js"></script>
+ <script src="datasource.js"></script>
+ <script src="slideshow.js"></script>
+ <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="prevStep">-1</button>
+ <span>
+ Page <input class="current" size="4"/>/<span class="total">0</span>,
+ Total records <span class="totalRecords">0</span>
+ </span>
+ <button data-page="nextStep">+1</button>
+ <button data-page="next">Next</button>
+ <button data-page="last">Last</button>
+ </div>
+ </script>
+ <script type="text/x-kite" id="photo-tmpl">
+ <a href="{{href}}" title="{{title}}">
+ <img src="{{src}}" width="{{width}}" height="{{height}}" alt="{{alt}}" />
+ </a>
+ </script>
+ <script>
+ $(function() {
+ var remote = $.ui.datasource({
+ paging: {
+ limit: 10
+ },
+ source: function( request, response ) {
+ $.ajax({
+ url: "http://api.flickr.com/services/rest/",
+ dataType: "jsonp",
+ jsonpCallback: "jsonFlickrApi",
+ data: {
+ format: "json",
+ api_key: "d86848d57cb3f7ad94f2ee9a3c90eff1",
+ method: "flickr.photos.search",
+ tags: request.filter,
+ sort: "relevance",
+ per_page: request.paging.limit,
+ page: request.page
+ },
+ success: function( data ) {
+ var result = $.map( data.photos.photo, function( photo ) {
+ return {
+ src: kite( "http://farm{{farm}}.static.flickr.com/{{server}}/{{id}}_{{secret}}_m.jpg", photo ),
+ href: kite( "http://www.flickr.com/photos/{{owner}}/{{id}}/", photo )
+ }
+ });
+
+ response( result, data.photos.total );
+ }
+ });
+ }
+ });
+
+ var cache = {};
+ $.widget( "ui.nestedDatasource", $.ui.datasource, {
+ widgetEventPrefix: "datasource",
+ options: {
+ remote: null
+ },
+
+ _create: function() {
+ var options = this.options;
+ options.source = function( request, response ) {
+ var i, length,
+ cached = true,
+ tags = request.filter,
+ pageSize = request.paging.limit,
+ page = request.page,
+ start = ( page - 1 ) * pageSize;
+
+ if ( !cache[ tags ] ) {
+ cache[ tags ] = [];
+ }
+
+ // check if we have cached data
+ for ( i = start; i < start + pageSize; i++ ) {
+ if ( !cache[ tags ][ i ] ) {
+ cached = false;
+ break;
+ }
+ }
+ if ( cached ) {
+ response( cache[ tags ].slice( start, start + pageSize ), cache[ tags ].total );
+ return;
+ }
+
+ options.remote.refresh(function() {
+ var total = cache[ tags ].total = remote.totalCount;
+ var data = remote.toArray();
+ for ( i = 0, length = data.length; i < length; i++ ) {
+ cache[ tags ][ start + i ] = data[ i ];
+ }
+ response( data.slice( 0, pageSize ), total );
+ });
+ };
+ this._super( "_create" );
+ },
+
+ _setOptions: function( options ) {
+ if ( "filter" in options ) {
+ remote.option( filter, options.filter );
+ }
+ if ( "paging" in options ) {
+ remote.option( "paging", {
+ limit: ( "limit" in options.paging ?
+ options.paging.limit : this.options.paging.limit ) * 5,
+ offset: ( "offset" in options.paging ?
+ options.paging.offset : this.options.paging.offset )
+ });
+ }
+ this._super( "_setOptions", options );
+ }
+ });
+
+ var datasource = $.ui.nestedDatasource({
+ paging: {
+ limit: 2
+ },
+ remote: remote
+ });
+
+ $( "#slideshow" ).slideshow({
+ source: datasource
+ });
+
+ $( kite( "#pager-tmpl" )() ).insertBefore( "#slideshow" ).pager({
+ source: datasource
+ });
+
+ $( "#page-size" ).change( function() {
+ datasource.option( "paging.limit", +$( this ).val() ).refresh();
+ });
+
+ $( "#filter" ).change(function() {
+ datasource.option( "filter", $( this ).val() ).refresh();
+ }).trigger( "change" );
+ });
+ </script>
+</head>
+<body>
+
+<h1>Photo Slideshow</h1>
+<p>features: paging</p>
+
+<hr>
+
+<p>
+ Per page: <input id="page-size" value="2">
+</p>
+<p>
+ Tags to look for (comma seperated): <input id="filter" value="jquery">
+</p>
+
+
+<div id="slideshow"></div>
+
+</body>
+</html>

0 comments on commit 9baba31

Please sign in to comment.
Something went wrong with that request. Please try again.