\
@@ -697,7 +795,7 @@ my.FlotGraph = Backbone.View.extend({
'click .action-toggle-help': 'toggleHelp'
},
- initialize: function(options, config) {
+ initialize: function(options) {
var self = this;
this.el = $(this.el);
_.bindAll(this, 'render', 'redraw');
@@ -707,18 +805,14 @@ my.FlotGraph = Backbone.View.extend({
this.model.fields.bind('add', this.render);
this.model.currentDocuments.bind('add', this.redraw);
this.model.currentDocuments.bind('reset', this.redraw);
- var configFromHash = my.parseHashQueryString().graph;
- if (configFromHash) {
- configFromHash = JSON.parse(configFromHash);
- }
- this.chartConfig = _.extend({
+ var stateData = _.extend({
group: null,
series: [],
graphType: 'lines-and-points'
},
- configFromHash,
- config
- );
+ options.state
+ );
+ this.state = new recline.Model.ObjectState(stateData);
this.render();
},
@@ -740,13 +834,12 @@ my.FlotGraph = Backbone.View.extend({
var series = this.$series.map(function () {
return $(this).val();
});
- this.chartConfig.series = $.makeArray(series);
- this.chartConfig.group = this.el.find('.editor-group select').val();
- this.chartConfig.graphType = this.el.find('.editor-type select').val();
- // update navigation
- var qs = my.parseHashQueryString();
- qs.graph = JSON.stringify(this.chartConfig);
- my.setHashQueryString(qs);
+ var updatedState = {
+ series: $.makeArray(series),
+ group: this.el.find('.editor-group select').val(),
+ graphType: this.el.find('.editor-type select').val()
+ };
+ this.state.set(updatedState);
this.redraw();
},
@@ -762,7 +855,7 @@ my.FlotGraph = Backbone.View.extend({
return;
}
var series = this.createSeries();
- var options = this.getGraphOptions(this.chartConfig.graphType);
+ var options = this.getGraphOptions(this.state.attributes.graphType);
this.plot = $.plot(this.$graph, series, options);
this.setupTooltips();
// create this.plot and cache it
@@ -783,7 +876,7 @@ my.FlotGraph = Backbone.View.extend({
// special tickformatter to show labels rather than numbers
var tickFormatter = function (val) {
if (self.model.currentDocuments.models[val]) {
- var out = self.model.currentDocuments.models[val].get(self.chartConfig.group);
+ var out = self.model.currentDocuments.models[val].get(self.state.attributes.group);
// if the value was in fact a number we want that not the
if (typeof(out) == 'number') {
return val;
@@ -866,14 +959,14 @@ my.FlotGraph = Backbone.View.extend({
var y = item.datapoint[1];
// convert back from 'index' value on x-axis (e.g. in cases where non-number values)
if (self.model.currentDocuments.models[x]) {
- x = self.model.currentDocuments.models[x].get(self.chartConfig.group);
+ x = self.model.currentDocuments.models[x].get(self.state.attributes.group);
} else {
x = x.toFixed(2);
}
y = y.toFixed(2);
var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
- group: self.chartConfig.group,
+ group: self.state.attributes.group,
x: x,
series: item.series.label,
y: y
@@ -891,25 +984,23 @@ my.FlotGraph = Backbone.View.extend({
createSeries: function () {
var self = this;
var series = [];
- if (this.chartConfig) {
- $.each(this.chartConfig.series, function (seriesIndex, field) {
- var points = [];
- $.each(self.model.currentDocuments.models, function (index, doc) {
- var x = doc.get(self.chartConfig.group);
- var y = doc.get(field);
- if (typeof x === 'string') {
- x = index;
- }
- // horizontal bar chart
- if (self.chartConfig.graphType == 'bars') {
- points.push([y, x]);
- } else {
- points.push([x, y]);
- }
- });
- series.push({data: points, label: field});
+ _.each(this.state.attributes.series, function(field) {
+ var points = [];
+ _.each(self.model.currentDocuments.models, function(doc, index) {
+ var x = doc.get(self.state.attributes.group);
+ var y = doc.get(field);
+ if (typeof x === 'string') {
+ x = index;
+ }
+ // horizontal bar chart
+ if (self.state.attributes.graphType == 'bars') {
+ points.push([y, x]);
+ } else {
+ points.push([x, y]);
+ }
});
- }
+ series.push({data: points, label: field});
+ });
return series;
},
@@ -969,12 +1060,12 @@ this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
-// ## DataGrid
+// ## (Data) Grid Dataset View
//
// Provides a tabular view on a Dataset.
//
// Initialize it with a `recline.Model.Dataset`.
-my.DataGrid = Backbone.View.extend({
+my.Grid = Backbone.View.extend({
tagName: "div",
className: "recline-grid-container",
@@ -985,12 +1076,16 @@ my.DataGrid = Backbone.View.extend({
this.model.currentDocuments.bind('add', this.render);
this.model.currentDocuments.bind('reset', this.render);
this.model.currentDocuments.bind('remove', this.render);
- this.state = {};
- this.hiddenFields = [];
+ this.tempState = {};
+ var state = _.extend({
+ hiddenFields: []
+ }, modelEtc.state
+ );
+ this.state = new recline.Model.ObjectState(state);
},
events: {
- 'click .column-header-menu': 'onColumnHeaderClick',
+ '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'
@@ -1012,11 +1107,11 @@ my.DataGrid = Backbone.View.extend({
// Column and row menus
onColumnHeaderClick: function(e) {
- this.state.currentColumn = $(e.target).closest('.column-header').attr('data-field');
+ this.tempState.currentColumn = $(e.target).closest('.column-header').attr('data-field');
},
onRowHeaderClick: function(e) {
- this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
+ this.tempState.currentRow = $(e.target).parents('tr:first').attr('data-id');
},
onRootHeaderClick: function(e) {
@@ -1024,7 +1119,7 @@ my.DataGrid = Backbone.View.extend({
{{#columns}} \
Show column: {{.}} \
{{/columns}}';
- var tmp = $.mustache(tmpl, {'columns': this.hiddenFields});
+ var tmp = $.mustache(tmpl, {'columns': this.state.get('hiddenFields')});
this.el.find('.root-header-menu .dropdown-menu').html(tmp);
},
@@ -1032,15 +1127,15 @@ my.DataGrid = Backbone.View.extend({
var self = this;
e.preventDefault();
var actions = {
- bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.state.currentColumn}); },
+ bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.tempState.currentColumn}); },
facet: function() {
- self.model.queryState.addFacet(self.state.currentColumn);
+ self.model.queryState.addFacet(self.tempState.currentColumn);
},
facet_histogram: function() {
- self.model.queryState.addHistogramFacet(self.state.currentColumn);
+ self.model.queryState.addHistogramFacet(self.tempState.currentColumn);
},
filter: function() {
- self.model.queryState.addTermFilter(self.state.currentColumn, '');
+ self.model.queryState.addTermFilter(self.tempState.currentColumn, '');
},
transform: function() { self.showTransformDialog('transform'); },
sortAsc: function() { self.setColumnSort('asc'); },
@@ -1051,7 +1146,7 @@ my.DataGrid = Backbone.View.extend({
var doc = _.find(self.model.currentDocuments.models, function(doc) {
// important this is == as the currentRow will be string (as comes
// from DOM) while id may be int
- return doc.id == self.state.currentRow;
+ return doc.id == self.tempState.currentRow;
});
doc.destroy().then(function() {
self.model.currentDocuments.remove(doc);
@@ -1070,7 +1165,7 @@ my.DataGrid = Backbone.View.extend({
var view = new my.ColumnTransform({
model: this.model
});
- view.state = this.state;
+ view.state = this.tempState;
view.render();
$el.empty();
$el.append(view.el);
@@ -1096,17 +1191,22 @@ my.DataGrid = Backbone.View.extend({
setColumnSort: function(order) {
var sort = [{}];
- sort[0][this.state.currentColumn] = {order: order};
+ sort[0][this.tempState.currentColumn] = {order: order};
this.model.query({sort: sort});
},
hideColumn: function() {
- this.hiddenFields.push(this.state.currentColumn);
+ var hiddenFields = this.state.get('hiddenFields');
+ hiddenFields.push(this.tempState.currentColumn);
+ this.state.set({hiddenFields: hiddenFields});
+ // change event not being triggered (because it is an array?) so trigger manually
+ this.state.trigger('change');
this.render();
},
showColumn: function(e) {
- this.hiddenFields = _.without(this.hiddenFields, $(e.target).data('column'));
+ var hiddenFields = _.without(this.state.get('hiddenFields'), $(e.target).data('column'));
+ this.state.set({hiddenFields: hiddenFields});
this.render();
},
@@ -1162,41 +1262,41 @@ my.DataGrid = Backbone.View.extend({
render: function() {
var self = this;
this.fields = this.model.fields.filter(function(field) {
- return _.indexOf(self.hiddenFields, field.id) == -1;
+ return _.indexOf(self.state.get('hiddenFields'), field.id) == -1;
});
var htmls = $.mustache(this.template, this.toTemplateJSON());
this.el.html(htmls);
this.model.currentDocuments.forEach(function(doc) {
var tr = $('
|
');
self.el.find('tbody').append(tr);
- var newView = new my.DataGridRow({
+ var newView = new my.GridRow({
model: doc,
el: tr,
fields: self.fields
});
newView.render();
});
- this.el.toggleClass('no-hidden', (self.hiddenFields.length === 0));
+ this.el.toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
return this;
}
});
-// ## DataGridRow View for rendering an individual document.
+// ## GridRow View for rendering an individual document.
//
// Since we want this to update in place it is up to creator to provider the element to attach to.
//
-// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.
+// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the Grid.
//
// Example:
//
//
-// var row = new DataGridRow({
+// var row = new GridRow({
// model: dataset-document,
// el: dom-element,
// fields: mydatasets.fields // a FieldList object
// });
//
-my.DataGridRow = Backbone.View.extend({
+my.GridRow = Backbone.View.extend({
initialize: function(initData) {
_.bindAll(this, 'render');
this._fields = initData.fields;
@@ -1301,21 +1401,21 @@ this.recline.View = this.recline.View || {};
// [GeoJSON](http://geojson.org) objects or two fields with latitude and
// longitude coordinates.
//
-// Initialization arguments:
-//
-// * options: initial options. They must contain a model:
-//
-// {
-// model: {recline.Model.Dataset}
-// }
-//
-// * config: (optional) map configuration hash (not yet used)
-//
+// Initialization arguments are as standard for Dataset Views. State object may
+// have the following (optional) configuration options:
//
+//
+// {
+// // geomField if specified will be used in preference to lat/lon
+// geomField: {id of field containing geometry in the dataset}
+// lonField: {id of field containing longitude in the dataset}
+// latField: {id of field containing latitude in the dataset}
+// }
+//
my.Map = Backbone.View.extend({
tagName: 'div',
- className: 'data-map-container',
+ className: 'recline-map',
template: ' \
\
@@ -1364,6 +1464,11 @@ my.Map = Backbone.View.extend({
\
\
\
+
\
+ \
+
\
\
\
\
@@ -1381,17 +1486,16 @@ my.Map = Backbone.View.extend({
// Define here events for UI elements
events: {
'click .editor-update-map': 'onEditorSubmit',
- 'change .editor-field-type': 'onFieldTypeChange'
+ 'change .editor-field-type': 'onFieldTypeChange',
+ 'change #editor-auto-zoom': 'onAutoZoomChange'
},
-
- initialize: function(options, config) {
+ initialize: function(options) {
var self = this;
-
this.el = $(this.el);
// Listen to changes in the fields
- this.model.bind('change', function() {
+ this.model.fields.bind('change', function() {
self._setupGeometryField();
});
this.model.fields.bind('add', this.render);
@@ -1402,17 +1506,40 @@ my.Map = Backbone.View.extend({
// Listen to changes in the documents
this.model.currentDocuments.bind('add', function(doc){self.redraw('add',doc)});
+ this.model.currentDocuments.bind('change', function(doc){
+ self.redraw('remove',doc);
+ self.redraw('add',doc);
+ });
this.model.currentDocuments.bind('remove', function(doc){self.redraw('remove',doc)});
this.model.currentDocuments.bind('reset', function(){self.redraw('reset')});
- // If the div was hidden, Leaflet needs to recalculate some sizes
- // to display properly
this.bind('view:show',function(){
+ // If the div was hidden, Leaflet needs to recalculate some sizes
+ // to display properly
+ if (self.map){
self.map.invalidateSize();
+ if (self._zoomPending && self.autoZoom) {
+ self._zoomToFeatures();
+ self._zoomPending = false;
+ }
+ }
+ self.visible = true;
+ });
+ this.bind('view:hide',function(){
+ self.visible = false;
});
- this.mapReady = false;
+ var stateData = _.extend({
+ geomField: null,
+ lonField: null,
+ latField: null
+ },
+ options.state
+ );
+ this.state = new recline.Model.ObjectState(stateData);
+ this.autoZoom = true;
+ this.mapReady = false;
this.render();
},
@@ -1429,12 +1556,12 @@ my.Map = Backbone.View.extend({
this.$map = this.el.find('.panel.map');
if (this.geomReady && this.model.fields.length){
- if (this._geomFieldName){
- this._selectOption('editor-geom-field',this._geomFieldName);
+ if (this.state.get('geomField')){
+ this._selectOption('editor-geom-field',this.state.get('geomField'));
$('#editor-field-type-geom').attr('checked','checked').change();
} else{
- this._selectOption('editor-lon-field',this._lonFieldName);
- this._selectOption('editor-lat-field',this._latFieldName);
+ this._selectOption('editor-lon-field',this.state.get('lonField'));
+ this._selectOption('editor-lat-field',this.state.get('latField'));
$('#editor-field-type-latlon').attr('checked','checked').change();
}
}
@@ -1463,9 +1590,7 @@ my.Map = Backbone.View.extend({
// * refresh: Clear existing features and add all current documents
//
redraw: function(action,doc){
-
var self = this;
-
action = action || 'refresh';
if (this.geomReady && this.mapReady){
@@ -1479,6 +1604,13 @@ my.Map = Backbone.View.extend({
this.features.clearLayers();
this._add(this.model.currentDocuments.models);
}
+ if (action != 'reset' && this.autoZoom){
+ if (this.visible){
+ this._zoomToFeatures();
+ } else {
+ this._zoomPending = true;
+ }
+ }
}
},
@@ -1494,14 +1626,19 @@ my.Map = Backbone.View.extend({
onEditorSubmit: function(e){
e.preventDefault();
if ($('#editor-field-type-geom').attr('checked')){
- this._geomFieldName = $('.editor-geom-field > select > option:selected').val();
- this._latFieldName = this._lonFieldName = false;
+ this.state.set({
+ geomField: $('.editor-geom-field > select > option:selected').val(),
+ lonField: null,
+ latField: null
+ });
} else {
- this._geomFieldName = false;
- this._latFieldName = $('.editor-lat-field > select > option:selected').val();
- this._lonFieldName = $('.editor-lon-field > select > option:selected').val();
+ this.state.set({
+ geomField: null,
+ lonField: $('.editor-lon-field > select > option:selected').val(),
+ latField: $('.editor-lat-field > select > option:selected').val()
+ });
}
- this.geomReady = (this._geomFieldName || (this._latFieldName && this._lonFieldName));
+ this.geomReady = (this.state.get('geomField') || (this.state.get('latField') && this.state.get('lonField')));
this.redraw();
return false;
@@ -1520,6 +1657,10 @@ my.Map = Backbone.View.extend({
}
},
+ onAutoZoomChange: function(e){
+ this.autoZoom = !this.autoZoom;
+ },
+
// Private: Add one or n features to the map
//
// For each document passed, a GeoJSON geometry will be extracted and added
@@ -1534,9 +1675,12 @@ my.Map = Backbone.View.extend({
if (!(docs instanceof Array)) docs = [docs];
+ var count = 0;
+ var wrongSoFar = 0;
_.every(docs,function(doc){
+ count += 1;
var feature = self._getGeometryFromDocument(doc);
- if (typeof feature === 'undefined'){
+ if (typeof feature === 'undefined' || feature === null){
// Empty field
return true;
} else if (feature instanceof Object){
@@ -1544,7 +1688,9 @@ my.Map = Backbone.View.extend({
// TODO: mustache?
html = ''
for (key in doc.attributes){
- html += '
' + key + ': '+ doc.attributes[key] + '
'
+ if (!(self.state.get('geomField') && key == self.state.get('geomField'))){
+ html += '
' + key + ': '+ doc.attributes[key] + '
';
+ }
}
feature.properties = {popupContent: html};
@@ -1553,16 +1699,20 @@ my.Map = Backbone.View.extend({
feature.properties.cid = doc.cid;
try {
- self.features.addGeoJSON(feature);
+ self.features.addGeoJSON(feature);
} catch (except) {
- var msg = 'Wrong geometry value';
- if (except.message) msg += ' (' + except.message + ')';
+ wrongSoFar += 1;
+ var msg = 'Wrong geometry value';
+ if (except.message) msg += ' (' + except.message + ')';
+ if (wrongSoFar <= 10) {
my.notify(msg,{category:'error'});
- return false;
+ }
}
} else {
- my.notify('Wrong geometry value',{category:'error'});
- return false;
+ wrongSoFar += 1
+ if (wrongSoFar <= 10) {
+ my.notify('Wrong geometry value',{category:'error'});
+ }
}
return true;
});
@@ -1576,7 +1726,7 @@ my.Map = Backbone.View.extend({
if (!(docs instanceof Array)) docs = [docs];
- _.each(doc,function(doc){
+ _.each(docs,function(doc){
for (key in self.features._layers){
if (self.features._layers[key].cid == doc.cid){
self.features.removeLayer(self.features._layers[key]);
@@ -1590,18 +1740,25 @@ my.Map = Backbone.View.extend({
//
_getGeometryFromDocument: function(doc){
if (this.geomReady){
- if (this._geomFieldName){
- // We assume that the contents of the field are a valid GeoJSON object
- return doc.attributes[this._geomFieldName];
- } else if (this._lonFieldName && this._latFieldName){
+ if (this.state.get('geomField')){
+ var value = doc.get(this.state.get('geomField'));
+ if (typeof(value) === 'string'){
+ // We have a GeoJSON string representation
+ return $.parseJSON(value);
+ } else {
+ // We assume that the contents of the field are a valid GeoJSON object
+ return value;
+ }
+ } else if (this.state.get('lonField') && this.state.get('latField')){
// We'll create a GeoJSON like point object from the two lat/lon fields
- return {
- type: 'Point',
- coordinates: [
- doc.attributes[this._lonFieldName],
- doc.attributes[this._latFieldName]
- ]
- };
+ var lon = doc.get(this.state.get('lonField'));
+ var lat = doc.get(this.state.get('latField'));
+ if (!isNaN(parseFloat(lon)) && !isNaN(parseFloat(lat))) {
+ return {
+ type: 'Point',
+ coordinates: [lon,lat]
+ };
+ }
}
return null;
}
@@ -1613,12 +1770,16 @@ my.Map = Backbone.View.extend({
// If not found, the user can define them via the UI form.
_setupGeometryField: function(){
var geomField, latField, lonField;
-
- this._geomFieldName = this._checkField(this.geometryFieldNames);
- this._latFieldName = this._checkField(this.latitudeFieldNames);
- this._lonFieldName = this._checkField(this.longitudeFieldNames);
-
- this.geomReady = (this._geomFieldName || (this._latFieldName && this._lonFieldName));
+ this.geomReady = (this.state.get('geomField') || (this.state.get('latField') && this.state.get('lonField')));
+ // should not overwrite if we have already set this (e.g. explicitly via state)
+ if (!this.geomReady) {
+ this.state.set({
+ geomField: this._checkField(this.geometryFieldNames),
+ latField: this._checkField(this.latitudeFieldNames),
+ lonField: this._checkField(this.longitudeFieldNames)
+ });
+ this.geomReady = (this.state.get('geomField') || (this.state.get('latField') && this.state.get('lonField')));
+ }
},
// Private: Check if a field in the current model exists in the provided
@@ -1637,6 +1798,18 @@ my.Map = Backbone.View.extend({
return null;
},
+ // Private: Zoom to map to current features extent if any, or to the full
+ // extent if none.
+ //
+ _zoomToFeatures: function(){
+ var bounds = this.features.getBounds();
+ if (bounds){
+ this.map.fitBounds(bounds);
+ } else {
+ this.map.setView(new L.LatLng(0, 0), 2);
+ }
+ },
+
// Private: Sets up the Leaflet map control and the features layer.
//
// The map uses a base layer from [MapQuest](http://www.mapquest.com) based
@@ -1661,6 +1834,24 @@ my.Map = Backbone.View.extend({
}
});
+
+ // This will be available in the next Leaflet stable release.
+ // In the meantime we add it manually to our layer.
+ this.features.getBounds = function(){
+ var bounds = new L.LatLngBounds();
+ this._iterateLayers(function (layer) {
+ if (layer instanceof L.Marker){
+ bounds.extend(layer.getLatLng());
+ } else {
+ if (layer.getBounds){
+ bounds.extend(layer.getBounds().getNorthEast());
+ bounds.extend(layer.getBounds().getSouthWest());
+ }
+ }
+ }, this);
+ return (typeof bounds.getNorthEast() !== 'undefined') ? bounds : null;
+ }
+
this.map.addLayer(this.features);
this.map.setView(new L.LatLng(0, 0), 2);
@@ -1895,6 +2086,85 @@ my.ColumnTransform = Backbone.View.extend({
})(jQuery, recline.View);
/*jshint multistr:true */
+
+// # Recline Views
+//
+// Recline Views are Backbone Views and in keeping with normal Backbone views
+// are Widgets / Components displaying something in the DOM. Like all Backbone
+// views they have a pointer to a model or a collection and is bound to an
+// element.
+//
+// Views provided by core Recline are crudely divided into two types:
+//
+// * Dataset Views: a View intended for displaying a recline.Model.Dataset
+// in some fashion. Examples are the Grid, Graph and Map views.
+// * Widget Views: a widget used for displaying some specific (and
+// smaller) aspect of a dataset or the application. Examples are
+// QueryEditor and FilterEditor which both provide a way for editing (a
+// part of) a `recline.Model.Query` associated to a Dataset.
+//
+// ## Dataset View
+//
+// These views are just Backbone views with a few additional conventions:
+//
+// 1. The model passed to the View should always be a recline.Model.Dataset instance
+// 2. Views should generate their own root element rather than having it passed
+// in.
+// 3. Views should apply a css class named 'recline-{view-name-lower-cased} to
+// the root element (and for all CSS for this view to be qualified using this
+// CSS class)
+// 4. Read-only mode: CSS for this view should respect/utilize
+// recline-read-only class to trigger read-only behaviour (this class will
+// usually be set on some parent element of the view's root element.
+// 5. State: state (configuration) information for the view should be stored on
+// an attribute named state that is an instance of a Backbone Model (or, more
+// speficially, be an instance of `recline.Model.ObjectState`). In addition,
+// a state attribute may be specified in the Hash passed to a View on
+// iniitialization and this information should be used to set the initial
+// state of the view.
+//
+// Example of state would be the set of fields being plotted in a graph
+// view.
+//
+// More information about State can be found below.
+//
+// To summarize some of this, the initialize function for a Dataset View should
+// look like:
+//
+//
+// initialize: {
+// model: {a recline.Model.Dataset instance}
+// // el: {do not specify - instead view should create}
+// state: {(optional) Object / Hash specifying initial state}
+// ...
+// }
+//
+//
+// Note: Dataset Views in core Recline have a common layout on disk as
+// follows, where ViewName is the named of View class:
+//
+//
+// src/view-{lower-case-ViewName}.js
+// css/{lower-case-ViewName}.css
+// test/view-{lower-case-ViewName}.js
+//
+//
+// ### State
+//
+// State information exists in order to support state serialization into the
+// url or elsewhere and reloading of application from a stored state.
+//
+// State is available not only for individual views (as described above) but
+// for the dataset (e.g. the current query). For an example of pulling together
+// state from across multiple components see `recline.View.DataExplorer`.
+//
+// ### Writing your own Views
+//
+// See the existing Views.
+//
+// ----
+
+// Standard JS module setup
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
@@ -1907,47 +2177,62 @@ this.recline.View = this.recline.View || {};
// var myExplorer = new model.recline.DataExplorer({
// model: {{recline.Model.Dataset instance}}
// el: {{an existing dom element}}
-// views: {{page views}}
-// config: {{config options -- see below}}
+// views: {{dataset views}}
+// state: {{state configuration -- see below}}
// });
//
//
// ### Parameters
//
-// **model**: (required) Dataset instance.
+// **model**: (required) recline.model.Dataset instance.
//
-// **el**: (required) DOM element.
+// **el**: (required) DOM element to bind to. NB: the element already
+// being in the DOM is important for rendering of some subviews (e.g.
+// Graph).
//
-// **views**: (optional) the views (Grid, Graph etc) for DataExplorer to
-// show. This is an array of view hashes. If not provided
-// just initialize a DataGrid with id 'grid'. Example:
+// **views**: (optional) the dataset views (Grid, Graph etc) for
+// DataExplorer to show. This is an array of view hashes. If not provided
+// initialize with (recline.View.)Grid, Graph, and Map views (with obvious id
+// and labels!).
//
//
// var views = [
// {
// id: 'grid', // used for routing
// label: 'Grid', // used for view switcher
-// view: new recline.View.DataGrid({
+// view: new recline.View.Grid({
// model: dataset
// })
// },
// {
// id: 'graph',
// label: 'Graph',
-// view: new recline.View.FlotGraph({
+// view: new recline.View.Graph({
// model: dataset
// })
// }
// ];
//
//
-// **config**: Config options like:
+// **state**: standard state config for this view. This state is slightly
+// special as it includes config of many of the subviews.
//
-// * readOnly: true/false (default: false) value indicating whether to
-// operate in read-only mode (hiding all editing options).
+//
+// state = {
+// query: {dataset query state - see dataset.queryState object}
+// view-{id1}: {view-state for this view}
+// view-{id2}: {view-state for }
+// ...
+// // Explorer
+// currentView: id of current view (defaults to first view if not specified)
+// readOnly: (default: false) run in read-only mode
+// }
+//
//
-// NB: the element already being in the DOM is important for rendering of
-// FlotGraph subview.
+// Note that at present we do *not* serialize information about the actual set
+// of views in use -- e.g. those specified by the views argument -- but instead
+// expect either that the default views are fine or that the client to have
+// initialized the DataExplorer with the relevant views themselves.
my.DataExplorer = Backbone.View.extend({
template: ' \
\
@@ -1956,7 +2241,7 @@ my.DataExplorer = Backbone.View.extend({
diff --git a/ckan/templates/_util.html b/ckan/templates/_util.html
index f470b072113..8e320d8519d 100644
--- a/ckan/templates/_util.html
+++ b/ckan/templates/_util.html
@@ -40,19 +40,11 @@
-
-
-
@@ -132,6 +124,25 @@
+
+
+ -
+
+
+ 
+ 
+
+
+
${h.markdown_extract(related.title, extract_length=30)}
+
${h.markdown_extract(related.description, extract_length=1000)}
+
No description for this item
+
View this related item
+
+
+
+
+
diff --git a/ckan/templates/facets.html b/ckan/templates/facets.html
index f50ac3b662f..f8c104bf5c2 100644
--- a/ckan/templates/facets.html
+++ b/ckan/templates/facets.html
@@ -5,43 +5,176 @@
py:strip=""
>
+
+
+
+
${h.facet_title(title)}
+
+ ${facet_li(name, limit=limit, label_function=label_function, if_empty=None, count_label=count_label)}
+
+
${if_empty}
+
- ${if_empty}
+
+ -
+
+ ${label_function(facet_item)}
+
+ ${count_label(facet_item['count'])}
+
+
+
+
-
+
+
${title(code)}
-
${if_empty}
+
${if_empty}
+
-
- - ${if_empty}
- -
- ${label(name)} (${count})
-
+
+
+ - ${if_empty}
+ -
+ ${label(facet_item.name)} (facet_item['count'])
+
${h.facet_title(field)}
-
${value}
+
+
+ ${c.translated_fields[(field,value)]}
+
+
+ ${value}
+
+
${h.icon('unfilter')}
diff --git a/ckan/templates/group/read.html b/ckan/templates/group/read.html
index f3c6b9f3939..c4744020b54 100644
--- a/ckan/templates/group/read.html
+++ b/ckan/templates/group/read.html
@@ -4,8 +4,9 @@
py:strip="">
-
${c.group.display_name}
-
${c.group.display_name}
+
+
${c.group_dict.display_name}
+
${c.group_dict.display_name}
${c.group.image_url}
@@ -24,8 +25,8 @@
Administrators
- ${facet_sidebar('tags')}
- ${facet_sidebar('res_format')}
+ ${facet_div('tags', 'Tags')}
+ ${facet_div('res_format', 'Resource Formats')}
@@ -42,48 +43,12 @@ State: ${c.group['state']}
Datasets
-
-
+
${field_list()}
You searched for "${c.q}". ${c.page.item_count} datasets found.
${c.page.pager()}
-
-
-
-
+ ${package_list_from_dict(c.page.items)}
${c.page.pager()}
diff --git a/ckan/templates/js_strings.html b/ckan/templates/js_strings.html
index 5ba337c9d2a..76a0d7e580f 100644
--- a/ckan/templates/js_strings.html
+++ b/ckan/templates/js_strings.html
@@ -51,6 +51,7 @@
CKAN.Strings.datastoreEnabled = "${_('DataStore enabled')}";
CKAN.Strings.sizeBracketsBytes = "${_('Size (Bytes)')}";
CKAN.Strings.mimetype = "${_('Mimetype')}";
+ CKAN.Strings.created = "${_('Created')}";
CKAN.Strings.lastModified = "${_('Last Modified')}";
CKAN.Strings.mimetypeInner = "${_('Mimetype (Inner)')}";
CKAN.Strings.hash = "${_('Hash')}";
diff --git a/ckan/templates/layout_base.html b/ckan/templates/layout_base.html
index 1518d7229a6..a983d4bc606 100644
--- a/ckan/templates/layout_base.html
+++ b/ckan/templates/layout_base.html
@@ -266,6 +266,28 @@
});
+
+
${optional_footer()}
diff --git a/ckan/templates/package/layout.html b/ckan/templates/package/layout.html
index 2751557fd0e..5015093bed3 100644
--- a/ckan/templates/package/layout.html
+++ b/ckan/templates/package/layout.html
@@ -21,13 +21,13 @@
@@ -35,18 +35,23 @@
- ${h.subnav_link(h.icon('page_stack') + _('History'), controller='package', action='history', id=c.pkg.name)}
+
+ - ${h.subnav_link(h.icon('package') + _('Related') + ' (%s)' % c.related_count, controller='related', action='list', id=c.pkg.name)}
+
- |
-
${h.subnav_link(h.icon('package_edit') + _('Settings'), controller='package', action='edit', id=c.pkg.name)}
+
+
-
${h.subnav_link(h.icon('lock') + _('Authorization'), controller='package', action='authz', id=c.pkg.name)}
-
+
