diff --git a/app/style/demo.css b/app/style/demo.css index 95e8c682..a9023e24 100644 --- a/app/style/demo.css +++ b/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; diff --git a/css/site/site.css b/css/site/site.css index a7970f63..e44ce6dc 100644 --- a/css/site/site.css +++ b/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 { diff --git a/example-quickstart.markdown b/example-quickstart.markdown index 266d8e6c..35110e96 100644 --- a/example-quickstart.markdown +++ b/example-quickstart.markdown @@ -7,11 +7,11 @@ recline-deps: true

Recline Quickstart Guide +
+ 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.

-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 {% endhighlight %} 3. Include the relevant Javascript files somewhere on the page (preferably before body close tag): - {% highlight html %} - + {% highlight html %} + + + +{% endhighlight %} + +Next, create a new div for the graph: {% highlight html %}
@@ -130,8 +141,9 @@ $el.append(graph.el); graph.render(); -But I wanted to create a graph not a graph editor. Can we do that? Yes you can! -All you need to do is set the 'state' of the graph view: +But suppose you wanted to create a graph not a graph editor. This is +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); -graph.render(); +$el.append(graph.el); graph.redraw(); {% endhighlight %} @@ -162,7 +173,6 @@ var graph = new recline.View.Graph({ } }); $el.append(graph.el); -graph.render(); graph.redraw(); @@ -174,3 +184,51 @@ documentation as well as the documentation of individual views such as the Graph View. +### 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 %} + + + + + + + + +{% endhighlight %} + +Now, create a new div for the map: + +{% highlight html %} +
+{% 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 %} + +
 
+ + + diff --git a/package.json b/package.json index 80918ea8..300abaff 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,19 @@ { "name" : "recline", - "description" : "Data explorer library and app in pure Javascript", - "url" : "http://okfnlabs.org/recline", + "description" : "Data explorer and data library in pure Javascript.", + "version" : "0.5.0", + "homepage" : "http://reclinejs.com/", "keywords" : ["data", "explorer", "grid", "table", "library", "app"], - "author" : "Rufus Pollock and Max Ogden ", - "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" + } + ] } diff --git a/recline.js b/recline.js index ec052c98..5672ee47 100644 --- a/recline.js +++ b/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({ \ {{/notEmpty}} \ {{#fields}} \ - \ + \
\ \
    \ @@ -1211,7 +1218,7 @@ my.Grid = Backbone.View.extend({ {{label}} \ \ {{/fields}} \ - \ + \ \ \ \ @@ -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({
\ \ {{#cells}} \ - \ + \
\   \
{{{value}}}
\ @@ -1497,7 +1506,7 @@ my.Map = Backbone.View.extend({
\ ', - // 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.model.bind('query:done', function() { - if (!self.geomReady){ - self._setupGeometryField(); - } - - if (!self.mapReady){ - self._setupMap(); - } - self.redraw(); - }); - + this.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 { diff --git a/src/view-map.js b/src/view-map.js index 5b2f3433..30370038 100644 --- a/src/view-map.js +++ b/src/view-map.js @@ -88,7 +88,7 @@ my.Map = Backbone.View.extend({ \ ', - // 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.model.bind('query:done', function() { - if (!self.geomReady){ - self._setupGeometryField(); - } - - if (!self.mapReady){ - self._setupMap(); - } - self.redraw(); - }); - + this.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 { diff --git a/test/view-map.test.js b/test/view-map.test.js index aa07f9a8..cf709a53 100644 --- a/test/view-map.test.js +++ b/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