Merge branch 'master' into gh-pages

app/style/demo.css

@@ -2,10 +2,6 @@ body {
   padding-top: 60px;
 }
 
-.navbar .brand {
-  line-height: 32px;
-}
-
 /* we do not have a LH sidebar */
 .container-fluid > .content {
   margin-left: 0;

css/site/site.css

@@ -137,7 +137,7 @@ a.dotted:hover {
 	font-size:18px;
 	font-weight:400;
 	letter-spacing:-1px;
-	line-height:40px;
+  line-height: 32px;
 }
 
 .navbar .nav > li > a {

example-quickstart.markdown

@@ -7,11 +7,11 @@ recline-deps: true
 <div class="page-header">
   <h1>
     Recline Quickstart Guide
+    <br />
+    <small>This step-by-step guide will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph and map to display it.</small>
   </h1>
 </div>
 
-This step-by-step guide will quickly get you started with Recline basics, including creating a dataset from local data and setting up a data grid to display this data.
-
 ### Preparing your page
 
 Before writing any code with Recline, you need to do the following preparation steps on your page:
@@ -25,12 +25,12 @@ Before writing any code with Recline, you need to do the following preparation s
 <link rel="stylesheet" href="css/grid.css" />{% endhighlight %}
 
 3. Include the relevant Javascript files somewhere on the page (preferably before body close tag):
-    {% highlight html %}
+    {% highlight html %}<!-- 3rd party dependencies -->
-<!-- 3rd party dependencies -->
 <script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
 <script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script>
 <script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
 <script type="text/javascript" src="vendor/jquery.mustache.js"></script>
+<script type="text/javascript" src="vendor/bootstrap/2.0.2/bootstrap.js"></script>
 <!-- note that we could include individual components rather than whole of recline e.g.
 <script type="text/javascript" src="src/model.js"></script>
 <script type="text/javascript" src="src/backend/base.js"></script>
@@ -98,7 +98,18 @@ grid.render();
 
 Let's create a graph view to display a line graph for this dataset.
 
-First, create a new div for the graph:
+First, add the additional dependencies for this view. These are the Flot
+library and the Recline Graph view:
+
+{% highlight html %}
+<link rel="stylesheet" href="css/graph.css">
+
+<!-- javascript -->
+<script type="text/javascript" src="vendor/jquery.flot/0.7/jquery.flot.js"></script>
+<script type="text/javascript" src="src/view-graph.js"></script>
+{% endhighlight %}
+
+Next, create a new div for the graph:
 
 {% highlight html %}
 <div id="mygraph"></div>
@@ -130,8 +141,9 @@ $el.append(graph.el);
 graph.render();
 </script>
 
-But I wanted to create a graph not a graph editor. Can we do that? Yes you can!
+But suppose you wanted to create a graph not a graph editor. This is
-All you need to do is set the 'state' of the graph view:
+straightforward to do -- all we need to do is set the 'state' of the graph
+view:
 
 {% highlight javascript %}
 var $el = $('#mygraph');
@@ -142,8 +154,7 @@ var graph = new recline.View.Graph({
     series: ["x", "z"]
   }
 });
-$el.append(grid.el);
+$el.append(graph.el);
-graph.render();
 graph.redraw();
 {% endhighlight %}
 
@@ -162,7 +173,6 @@ var graph = new recline.View.Graph({
   }
 });
 $el.append(graph.el);
-graph.render();
 graph.redraw();
 </script>
 
@@ -174,3 +184,51 @@ documentation</a> as well as the documentation of individual views such as the
 <a href="../docs/view-graph.html">Graph View</a>.
 </div>
 
+### Creating a Map
+
+Now, let's create a map of this dataset using the lon/lat information which is
+present on these data points.
+
+First, add the additional dependencies for the map view. These are the Leaflet
+library and the Recline Map view:
+
+{% highlight html %}
+<!-- css -->
+<link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.css">
+<!--[if lte IE 8]>
+<link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.ie.css" />
+<![endif]-->
+<link rel="stylesheet" href="css/map.css">
+
+<!-- javascript -->
+<script type="text/javascript" src="vendor/leaflet/0.3.1/leaflet.js"></script>
+<script type="text/javascript" src="src/view-map.js"></script>
+{% endhighlight %}
+
+Now, create a new div for the map:
+
+{% highlight html %}
+<div id="mymap"></div>
+{% endhighlight %}
+
+Now let's create the map, we will use the existing dataset object created
+previously:
+
+{% highlight javascript %}
+var $el = $('#mymap');
+var map = new recline.View.Map({
+  model: dataset
+});
+$el.append(map.el);
+{% endhighlight %}
+
+<div id="mymap">&nbsp;</div>
+
+<script type="text/javascript">
+var $el = $('#mymap');
+var map = new recline.View.Map({
+  model: dataset
+});
+$el.append(map.el);
+</script>
+

package.json

@@ -1,10 +1,19 @@
 {
   "name"          : "recline",
-  "description"   : "Data explorer library and app in pure Javascript",
+  "description"   : "Data explorer and data library in pure Javascript.",
-  "url"           : "http://okfnlabs.org/recline",
+  "version"       : "0.5.0",
+  "homepage"      : "http://reclinejs.com/",
   "keywords"      : ["data", "explorer", "grid", "table", "library", "app"],
-  "author"        : "Rufus Pollock <rufus.pollock@okfn.org> and Max Ogden <max@maxogden.com>",
+  "contributors"  : [
-  "contributors"  : [],
+    {
+      "name": "Rufus Pollock",
+      "email": "rufus.pollock@okfn.org"
+    },
+    {
+      "name": "Max Ogden",
+      "email": "max@maxogden.com"
+    }
+  ],
   "dependencies"  : {
     "jquery"      : ">=1.6",
     "underscore"  : ">=1.0",
@@ -13,5 +22,11 @@
   },
   "lib"           : "src",
   "main"          : "recline.js",
-  "version"       : "0.4a"
+  "repositories": [
+     {
+          "type": "git", 
+          "url": "http://github.com/okfn/recline.git",
+          "path": "src"
+     }
+  ]
 }

recline.js

@@ -1063,7 +1063,7 @@ my.Grid = Backbone.View.extend({
   initialize: function(modelEtc) {
     var self = this;
     this.el = $(this.el);
-    _.bindAll(this, 'render');
+    _.bindAll(this, 'render', 'onHorizontalScroll');
     this.model.currentDocuments.bind('add', this.render);
     this.model.currentDocuments.bind('reset', this.render);
     this.model.currentDocuments.bind('remove', this.render);
@@ -1079,7 +1079,9 @@ my.Grid = Backbone.View.extend({
     'click .column-header-menu .data-table-menu li a': 'onColumnHeaderClick',
     'click .row-header-menu': 'onRowHeaderClick',
     'click .root-header-menu': 'onRootHeaderClick',
-    'click .data-table-menu li a': 'onMenuClick'
+    'click .data-table-menu li a': 'onMenuClick',
+    // does not work here so done at end of render function
+    // 'scroll .recline-grid tbody': 'onHorizontalScroll'
   },
 
   // ======================================================
@@ -1174,6 +1176,11 @@ my.Grid = Backbone.View.extend({
     this.render();
   },
 
+  onHorizontalScroll: function(e) {
+    var currentScroll = $(e.target).scrollLeft();
+    this.el.find('.recline-grid thead tr').scrollLeft(currentScroll);
+  },
+
   // ======================================================
   // #### Templating
   template: ' \
@@ -1192,7 +1199,7 @@ my.Grid = Backbone.View.extend({
             </th> \
           {{/notEmpty}} \
           {{#fields}} \
-            <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px;"> \
+            <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
               <div class="btn-group column-header-menu"> \
                 <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
                 <ul class="dropdown-menu data-table-menu pull-right"> \
@@ -1211,7 +1218,7 @@ my.Grid = Backbone.View.extend({
               <span class="column-header-name">{{label}}</span> \
             </th> \
           {{/fields}} \
-          <th class="last-header" style="width: {{lastHeaderWidth}}px; padding: 0; margin: 0;"></th> \
+          <th class="last-header" style="width: {{lastHeaderWidth}}px; max-width: {{lastHeaderWidth}}px; min-width: {{lastHeaderWidth}}px; padding: 0; margin: 0;"></th> \
         </tr> \
       </thead> \
       <tbody class="scroll-content"></tbody> \
@@ -1241,7 +1248,8 @@ my.Grid = Backbone.View.extend({
     // compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)
     var fullWidth = self.el.width() - 20 - 10 * numFields - this.scrollbarDimensions.width;
     var width = parseInt(Math.max(50, fullWidth / numFields));
-    var remainder = fullWidth - numFields * width;
+    // if columns extend outside viewport then remainder is 0 
+    var remainder = Math.max(fullWidth - numFields * width,0);
     _.each(this.fields, function(field, idx) {
       // add the remainder to the first field width so we make up full col
       if (idx == 0) {
@@ -1268,6 +1276,7 @@ my.Grid = Backbone.View.extend({
       this.el.find('th.last-header').hide();
     }
     this.el.find('.recline-grid').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
+    this.el.find('.recline-grid tbody').scroll(this.onHorizontalScroll);
     return this;
   },
 
@@ -1317,7 +1326,7 @@ my.GridRow = Backbone.View.extend({
         </div> \
       </td> \
       {{#cells}} \
-      <td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px;"> \
+      <td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
         <div class="data-table-cell-content"> \
           <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \
           <div class="data-table-cell-value">{{{value}}}</div> \
@@ -1497,7 +1506,7 @@ my.Map = Backbone.View.extend({
 </div> \
 ',
 
-  // These are the default field names that will be used if found.
+  // These are the default (case-insensitive) names of field that are used if found.
   // If not found, the user will need to define the fields via the editor.
   latitudeFieldNames: ['lat','latitude'],
   longitudeFieldNames: ['lon','longitude'],
@@ -1563,7 +1572,7 @@ my.Map = Backbone.View.extend({
     this.render();
   },
 
-  // Public: Adds the necessary elements to the page.
+  // ### Public: Adds the necessary elements to the page.
   //
   // Also sets up the editor fields and the map if necessary.
   render: function() {
@@ -1585,22 +1594,11 @@ my.Map = Backbone.View.extend({
         $('#editor-field-type-latlon').attr('checked','checked').change();
       }
     }
-
+    this.redraw();
-    this.model.bind('query:done', function() {
-      if (!self.geomReady){
-        self._setupGeometryField();
-      }
-
-      if (!self.mapReady){
-        self._setupMap();
-      }
-      self.redraw();
-    });
-
     return this;
   },
 
-  // Public: Redraws the features on the map according to the action provided
+  // ### Public: Redraws the features on the map according to the action provided
   //
   // Actions can be:
   //
@@ -1608,23 +1606,27 @@ my.Map = Backbone.View.extend({
   // * add: Add one or n features (documents)
   // * remove: Remove one or n features (documents)
   // * refresh: Clear existing features and add all current documents
-  //
+  redraw: function(action, doc){
-  redraw: function(action,doc){
     var self = this;
     action = action || 'refresh';
+    // try to set things up if not already
+    if (!self.geomReady){
+      self._setupGeometryField();
+    }
+    if (!self.mapReady){
+      self._setupMap();
+    }
 
     if (this.geomReady && this.mapReady){
-      if (action == 'reset'){
+      if (action == 'reset' || action == 'refresh'){
         this.features.clearLayers();
+        this._add(this.model.currentDocuments.models);
       } else if (action == 'add' && doc){
         this._add(doc);
       } else if (action == 'remove' && doc){
         this._remove(doc);
-      } else if (action == 'refresh'){
-        this.features.clearLayers();
-        this._add(this.model.currentDocuments.models);
       }
-      if (action != 'reset' && this.autoZoom){
+      if (this.autoZoom){
         if (this.visible){
           this._zoomToFeatures();
         } else {

src/view-map.js

@@ -88,7 +88,7 @@ my.Map = Backbone.View.extend({
 </div> \
 ',
 
-  // These are the default field names that will be used if found.
+  // These are the default (case-insensitive) names of field that are used if found.
   // If not found, the user will need to define the fields via the editor.
   latitudeFieldNames: ['lat','latitude'],
   longitudeFieldNames: ['lon','longitude'],
@@ -154,7 +154,7 @@ my.Map = Backbone.View.extend({
     this.render();
   },
 
-  // Public: Adds the necessary elements to the page.
+  // ### Public: Adds the necessary elements to the page.
   //
   // Also sets up the editor fields and the map if necessary.
   render: function() {
@@ -176,22 +176,11 @@ my.Map = Backbone.View.extend({
         $('#editor-field-type-latlon').attr('checked','checked').change();
       }
     }
-
+    this.redraw();
-    this.model.bind('query:done', function() {
-      if (!self.geomReady){
-        self._setupGeometryField();
-      }
-
-      if (!self.mapReady){
-        self._setupMap();
-      }
-      self.redraw();
-    });
-
     return this;
   },
 
-  // Public: Redraws the features on the map according to the action provided
+  // ### Public: Redraws the features on the map according to the action provided
   //
   // Actions can be:
   //
@@ -199,23 +188,27 @@ my.Map = Backbone.View.extend({
   // * add: Add one or n features (documents)
   // * remove: Remove one or n features (documents)
   // * refresh: Clear existing features and add all current documents
-  //
+  redraw: function(action, doc){
-  redraw: function(action,doc){
     var self = this;
     action = action || 'refresh';
+    // try to set things up if not already
+    if (!self.geomReady){
+      self._setupGeometryField();
+    }
+    if (!self.mapReady){
+      self._setupMap();
+    }
 
     if (this.geomReady && this.mapReady){
-      if (action == 'reset'){
+      if (action == 'reset' || action == 'refresh'){
         this.features.clearLayers();
+        this._add(this.model.currentDocuments.models);
       } else if (action == 'add' && doc){
         this._add(doc);
       } else if (action == 'remove' && doc){
         this._remove(doc);
-      } else if (action == 'refresh'){
-        this.features.clearLayers();
-        this._add(this.model.currentDocuments.models);
       }
-      if (action != 'reset' && this.autoZoom){
+      if (this.autoZoom){
         if (this.visible){
           this._zoomToFeatures();
         } else {

test/view-map.test.js

@@ -49,7 +49,7 @@ test('Lat/Lon geom fields', function () {
   });
   $('.fixtures').append(view.el);
 
-  //Fire query, otherwise the map won't be initialized
+  // Not really needed but fire query to test that resetting works!
   dataset.query();
 
   // Check that all markers were created