Skip to content

Commit

Permalink
Add docs and comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Alexander committed Oct 26, 2012
1 parent 20dbe65 commit 02ff73d
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 4 deletions.
24 changes: 24 additions & 0 deletions datasource.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,33 +1,54 @@
/*
* Flickr DataSource for Fuel UX Datagrid
* https://github.com/adamalex/fuelux-dgdemo
*
* Copyright (c) 2012 Adam Alexander
* Demo source released to public domain.
*/

var FlickrDataSource = function (options) { var FlickrDataSource = function (options) {
this._formatter = options.formatter; this._formatter = options.formatter;
this._columns = options.columns; this._columns = options.columns;
}; };


FlickrDataSource.prototype = { FlickrDataSource.prototype = {


/**
* Returns stored column metadata
*/
columns: function () { columns: function () {
return this._columns; return this._columns;
}, },


/**
* Called when Datagrid needs data. Logic should check the options parameter
* to determine what data to return, then return data by calling the callback.
* @param {object} options Options selected in datagrid (ex: {pageIndex:0,pageSize:5,search:'searchterm'})
* @param {function} callback To be called with the requested data.
*/
data: function (options, callback) { data: function (options, callback) {

var url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d6d798f51bbd5ec0a1f9e9f1e62c43ab&format=json'; var url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d6d798f51bbd5ec0a1f9e9f1e62c43ab&format=json';
var self = this; var self = this;


if (options.search) { if (options.search) {


// Search active. Add URL parameters for Flickr API.
url += '&tags=' + options.search; url += '&tags=' + options.search;
url += '&per_page=' + options.pageSize; url += '&per_page=' + options.pageSize;
url += '&page=' + (options.pageIndex + 1); url += '&page=' + (options.pageIndex + 1);


$.ajax(url, { $.ajax(url, {


// Set JSONP options for Flickr API
dataType: 'jsonp', dataType: 'jsonp',
jsonpCallback: 'jsonFlickrApi', jsonpCallback: 'jsonFlickrApi',
jsonp: false, jsonp: false,
type: 'GET' type: 'GET'


}).done(function (response) { }).done(function (response) {


// Prepare data to return to Datagrid
var data = response.photos.photo; var data = response.photos.photo;
var count = response.photos.total; var count = response.photos.total;
var startIndex = (response.photos.page - 1) * response.photos.perpage; var startIndex = (response.photos.page - 1) * response.photos.perpage;
Expand All @@ -37,14 +58,17 @@ FlickrDataSource.prototype = {
var page = response.photos.page; var page = response.photos.page;
var start = startIndex + 1; var start = startIndex + 1;


// Allow client code to format the data
if (self._formatter) self._formatter(data); if (self._formatter) self._formatter(data);


// Return data to Datagrid
callback({ data: data, start: start, end: end, count: count, pages: pages, page: page }); callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });


}); });


} else { } else {


// No search. Return zero results to Datagrid
callback({ data: [], start: 0, end: 0, count: 0, pages: 0, page: 0 }); callback({ data: [], start: 0, end: 0, count: 0, pages: 0, page: 0 });


} }
Expand Down
35 changes: 31 additions & 4 deletions index.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,3 +1,9 @@
<!-- Flickr demo for Fuel UX Datagrid -->
<!-- https://github.com/adamalex/fuelux-dgdemo -->

<!-- Copyright (c) 2012 Adam Alexander -->
<!-- Demo source released to public domain. -->

<!DOCTYPE html> <!DOCTYPE html>
<html class="fuelux" lang="en"> <!-- Fuel UX css class --> <html class="fuelux" lang="en"> <!-- Fuel UX css class -->
<head> <head>
Expand All @@ -7,13 +13,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">


<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" /> <!-- Fuel UX CDN link to core css --> <!-- Fuel UX CDN link to core css -->
<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" />

<style> <style>
body { body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
} }
</style> </style>
<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" /> <!-- Fuel UX CDN link to responsive css -->
<!-- Fuel UX CDN link to responsive css -->
<link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" />


<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
Expand All @@ -23,6 +33,7 @@
</head> </head>
<body data-spy="scroll" data-target=".subnav" data-offset="50"> <body data-spy="scroll" data-target=".subnav" data-offset="50">


<!-- PAGE HEADER -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
Expand All @@ -46,6 +57,7 @@
<h1>Fuel UX Datagrid demo</h1> <h1>Fuel UX Datagrid demo</h1>
<p>Enter a search into the Datagrid below to search Flickr for some photos.</p> <p>Enter a search into the Datagrid below to search Flickr for some photos.</p>


<!-- DATAGRID MARKUP -->
<table id="MyGrid" class="table table-bordered datagrid"> <table id="MyGrid" class="table table-bordered datagrid">
<thead> <thead>
<tr> <tr>
Expand Down Expand Up @@ -86,16 +98,24 @@ <h1>Fuel UX Datagrid demo</h1>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
<!-- END DATAGRID MARKUP -->


</div> </div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://fuelux.exacttargetapps.com/fuelux/2.0/loader.min.js" type="text/javascript"></script> <!-- Fuel UX CDN link to its javascript library -->
<!-- Fuel UX CDN link to its javascript library -->
<script src="http://fuelux.exacttargetapps.com/fuelux/2.0/loader.min.js" type="text/javascript"></script>

<!-- Data Source for Flickr API -->
<script src="datasource.js" type="text/javascript"></script> <script src="datasource.js" type="text/javascript"></script>


<!-- Logic for Datagrid -->
<script> <script>
$('#MyGrid').datagrid({ $('#MyGrid').datagrid({
dataSource: new FlickrDataSource({ dataSource: new FlickrDataSource({

// Column definitions for Datagrid
columns: [{ columns: [{
property: 'image', property: 'image',
label: 'Image', label: 'Image',
Expand All @@ -105,13 +125,20 @@ <h1>Fuel UX Datagrid demo</h1>
label: 'Title', label: 'Title',
sortable: false sortable: false
}], }],

// Create IMG tag for each returned image
formatter: function (items) { formatter: function (items) {
$.each(items, function (index, item) { $.each(items, function (index, item) {
item.image = '<img src="http://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_t.jpg"></a>'; item.image = '<img src="' + flickrUrl(item) + '"></a>';
}); });
} }
}) })
}); });

// Returns image URL for an image returned from Flickr API
function flickrUrl(image) {
return 'http://farm' + image.farm + '.staticflickr.com/' + image.server + '/' + image.id + '_' + image.secret + '_t.jpg';
}
</script> </script>


</body> </body>
Expand Down

1 comment on commit 02ff73d

@havendim
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how populating data into fuelux datagrid from json output like this "http://api.openweathermap.org/data/2.5/weather?q=London,uk" sorry for my bad english

Please sign in to comment.