Merge branch 'master' into gh-pages

demos/search/app.js

@@ -74,6 +74,7 @@ var SearchView = Backbone.View.extend({
     <div class="controls"> \
       <div class="query-here"></div> \
     </div> \
+    <div class="total"><h2><span></span> records found</h2></div> \
     <div class="body"> \
       <div class="sidebar"></div> \
       <div class="results"> \
@@ -99,6 +100,8 @@ var SearchView = Backbone.View.extend({
     });
     this.el.html(html);
 
+    this.el.find('.total span').text(this.model.recordCount);
+
     var view = new recline.View.FacetViewer({
       model: this.model
     });
@@ -125,52 +128,7 @@ function setupMoreComplexExample(config) {
   var dataset = new recline.Model.Dataset(config);
   // async as may be fetching remote
   dataset.fetch().done(function() {
-    if (dataset.get('url').indexOf('openspending') === -1) {
+    var template = templates[dataset.get('url')] || templates['generic'];
-      // generic template function
-      var template = function(record) {
-        var template = '<div class="record"> \
-          <ul> \
-           {{#data}} \
-           <li>{{key}}: {{value}}</li> \
-           {{/data}} \
-        </div> \
-        ';
-        var data = _.map(_.keys(record), function(key) {
-          return { key: key, value: record[key] };
-        });
-        return Mustache.render(template, {
-          data: data
-        });
-      }
-    } else {
-      // generic template function
-      var template = function(record) {
-        record['time'] = record['time.label_facet']
-        var template = '<div class="record"> \
-          <h3> \
-            <a href="http://openspending.org/{{record.dataset}}/entries/{{record.id}}">{{record.dataset}} {{record.time}}</a> \
-            &ndash; <img src="http://openspending.org/static/img/icons/cd_16x16.png" /> {{amount_formatted}} \
-          </h3> \
-          <ul> \
-           {{#data}} \
-           <li>{{key}}: {{value}}</li> \
-           {{/data}} \
-        </div> \
-        ';
-        var data = [];
-        _.each(_.keys(record), function(key) {
-          if (key !='_id' && key != 'id') {
-            data.push({ key: key, value: record[key] });
-          }
-        });
-        return Mustache.render(template, {
-          record: record,
-          amount_formatted: formatAmount(record['amount']),
-          data: data
-        });
-      }
-    }
-
     var searchView = new SearchView({
       el: $el,
       model: dataset,
@@ -179,17 +137,85 @@ function setupMoreComplexExample(config) {
     searchView.render();
 
     dataset.queryState.set({
-        size: 10
+        size: 5
       },
       {silent: true}
     );
-    if (dataset.get('url').indexOf('openspending') != -1) {
+    if (dataset.get('url') in templates) {
-      dataset.queryState.addFacet('dataset');
+      // for gdocs example
+      dataset.queryState.addFacet('cause');
     }
     dataset.query();
   });
 };
 
+var templates = {
+  // generic template function
+  'generic': function(record) {
+    var template = '<div class="record"> \
+      <ul> \
+       {{#data}} \
+       <li>{{key}}: {{value}}</li> \
+       {{/data}} \
+     </ul> \
+    </div> \
+    ';
+    var data = _.map(_.keys(record), function(key) {
+      return { key: key, value: record[key] };
+    });
+    return Mustache.render(template, {
+      data: data
+    });
+  },
+  'http://openspending.org/api/search': function(record) {
+    record['time'] = record['time.label_facet']
+    var template = '<div class="record"> \
+      <h3> \
+        <a href="http://openspending.org/{{record.dataset}}/entries/{{record.id}}">{{record.dataset}} {{record.time}}</a> \
+        &ndash; <img src="http://openspending.org/static/img/icons/cd_16x16.png" /> {{amount_formatted}} \
+      </h3> \
+      <ul> \
+       {{#data}} \
+         <li>{{key}}: {{value}}</li> \
+       {{/data}} \
+       </ul> \
+    </div> \
+    ';
+    var data = [];
+    _.each(_.keys(record), function(key) {
+      if (key !='_id' && key != 'id') {
+        data.push({ key: key, value: record[key] });
+      }
+    });
+    return Mustache.render(template, {
+      record: record,
+      amount_formatted: formatAmount(record['amount']),
+      data: data
+    });
+  },
+  'https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdExXSTl2Y01xZEszOTBFZjVzcGtzVVE': function(record) {
+    var template = '<div class="record"> \
+      <h3> \
+        {{record.incidentsite}} &ndash; {{record.datereported}} &ndash; {{record.estimatedspillvolumebbl}} barrels \
+      </h3> \
+      <ul> \
+       {{#data}} \
+         <li>{{key}}: {{value}}</li> \
+       {{/data}} \
+       </ul> \
+    </div> \
+    ';
+    var data = [];
+    _.each(_.keys(record), function(key) {
+      data.push({ key: key, value: record[key] });
+    });
+    return Mustache.render(template, {
+      record: record,
+      data: data
+    });
+  }
+}
+
 var sampleData = [
   {
     title: 'War and Peace',

demos/search/index.html

@@ -73,6 +73,11 @@ ul.facet-items {
   list-style-type: none;
   margin-left: 0;
 }
+
+.record ul {
+  list-style-type: none;
+  margin-left: 0;
+}
 </style>
 
 <div class="page-header">
@@ -81,7 +86,7 @@ ul.facet-items {
 
 <div class="info">
   <p>This demo shows how Recline can be used to build a search app. It includes faceting as well as search. You can find the <a href="app.js">source javascript here</a> &ndash; please feel free to reuse!</p>
-  <p>The default version uses some local example data but you can also connect directly to any other backend supported by Recline, in particular SOLR or ElasticSearch. For example, here's an <a href="?backend=solr&amp;url=http://openspending.org/api/search">example of this app running</a> off the OpenSpending SOLR-style search API.</p>
+  <p>The default setup uses local example data but you can also connect directly to any other <a href="{{page.root}}/docs/backends.html">backend supported by Recline</a>, for example SOLR, ElasticSearch or even a google docs spreadsheet. As an example: here's an <a href="?backend=solr&amp;url=http://openspending.org/api/search">example running against the SOLR-style OpenSpending API</a> and here's an example <a href="?backend=gdocs&amp;url=https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdExXSTl2Y01xZEszOTBFZjVzcGtzVVE">running against a GDocs spreadsheet (Oil spills in the Niger Delta)</a>.</p>
 </div>
 
 <hr />

src/backend.gdocs.js

@@ -130,7 +130,7 @@ this.recline.Backend.GDocs = this.recline.Backend.GDocs || {};
   // Convenience function to get GDocs JSON API Url from standard URL
   my.getGDocsAPIUrls = function(url) {
     // https://docs.google.com/spreadsheet/ccc?key=XXXX#gid=YYY
-    var regex = /.*spreadsheet\/ccc?.*key=([^#?&+]+).*gid=([\d]+).*/;
+    var regex = /.*spreadsheet\/ccc?.*key=([^#?&+]+)[^#]*(#gid=([\d]+).*)?/;
     var matches = url.match(regex);
     var key;
     var worksheet;
@@ -139,7 +139,10 @@ this.recline.Backend.GDocs = this.recline.Backend.GDocs || {};
     if(!!matches) {
         key = matches[1];
         // the gid in url is 0-based and feed url is 1-based
-        worksheet = parseInt(matches[2]) + 1;
+        worksheet = parseInt(matches[3]) + 1;
+        if (isNaN(worksheet)) {
+          worksheet = 1;
+        }
         urls = {
           worksheet  : 'https://spreadsheets.google.com/feeds/list/'+ key +'/'+ worksheet +'/public/values?alt=json',
           spreadsheet: 'https://spreadsheets.google.com/feeds/worksheets/'+ key +'/public/basic?alt=json'

test/backend.gdocs.test.js

@@ -310,6 +310,10 @@ test("GDocs Backend.getUrl", function() {
   var exp2 = 'https://spreadsheets.google.com/feeds/worksheets/' + key + '/public/basic?alt=json'
   equal(exp1, out.worksheet);
   equal(exp2, out.spreadsheet);
+
+  var url  = 'https://docs.google.com/spreadsheet/ccc?key=' + key;
+  var out  = recline.Backend.GDocs.getGDocsAPIUrls(url);
+  equal(out.worksheet, exp1);
 });
 
 })(this.jQuery);