Permalink
Browse files

Add docs and comments

  • Loading branch information...
adamalex committed Oct 26, 2012
1 parent 20dbe65 commit 02ff73d78404ce2d8af46d0905158c67a502db79
Showing with 55 additions and 4 deletions.
  1. +24 −0 datasource.js
  2. +31 −4 index.html
View
@@ -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) {
this._formatter = options.formatter;
this._columns = options.columns;
};
FlickrDataSource.prototype = {
+ /**
+ * Returns stored column metadata
+ */
columns: function () {
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) {
+
var url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d6d798f51bbd5ec0a1f9e9f1e62c43ab&format=json';
var self = this;
if (options.search) {
+ // Search active. Add URL parameters for Flickr API.
url += '&tags=' + options.search;
url += '&per_page=' + options.pageSize;
url += '&page=' + (options.pageIndex + 1);
$.ajax(url, {
+ // Set JSONP options for Flickr API
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrApi',
jsonp: false,
type: 'GET'
}).done(function (response) {
+ // Prepare data to return to Datagrid
var data = response.photos.photo;
var count = response.photos.total;
var startIndex = (response.photos.page - 1) * response.photos.perpage;
@@ -37,14 +58,17 @@ FlickrDataSource.prototype = {
var page = response.photos.page;
var start = startIndex + 1;
+ // Allow client code to format the data
if (self._formatter) self._formatter(data);
+ // Return data to Datagrid
callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });
});
} else {
+ // No search. Return zero results to Datagrid
callback({ data: [], start: 0, end: 0, count: 0, pages: 0, page: 0 });
}
View
@@ -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>
<html class="fuelux" lang="en"> <!-- Fuel UX css class -->
<head>
@@ -7,13 +13,17 @@
<meta name="description" 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>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</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 -->
<!--[if lt IE 9]>
@@ -23,6 +33,7 @@
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
+<!-- PAGE HEADER -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
@@ -46,6 +57,7 @@
<h1>Fuel UX Datagrid demo</h1>
<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">
<thead>
<tr>
@@ -86,16 +98,24 @@ <h1>Fuel UX Datagrid demo</h1>
</tr>
</tfoot>
</table>
+ <!-- END DATAGRID MARKUP -->
</div>
<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>
+<!-- Logic for Datagrid -->
<script>
$('#MyGrid').datagrid({
dataSource: new FlickrDataSource({
+
+ // Column definitions for Datagrid
columns: [{
property: 'image',
label: 'Image',
@@ -105,13 +125,20 @@ <h1>Fuel UX Datagrid demo</h1>
label: 'Title',
sortable: false
}],
+
+ // Create IMG tag for each returned image
formatter: function (items) {
$.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>
</body>

1 comment on commit 02ff73d

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.