diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html index d5066d74..71b9c45a 100644 --- a/_includes/recline-deps.html +++ b/_includes/recline-deps.html @@ -29,5 +29,5 @@ --> - + diff --git a/app/index.html b/app/index.html index c07eec7f..5777d132 100644 --- a/app/index.html +++ b/app/index.html @@ -86,6 +86,9 @@ Load Data
\ +', + + // Define here events for UI elements + events: { + 'click .editor-update-map': 'onEditorSubmit', + 'change .editor-field-type': 'onFieldTypeChange', + 'change #editor-auto-zoom': 'onAutoZoomChange' + }, + + initialize: function(options) { + var self = this; + this.el = $(this.el); + _.bindAll(this, 'render'); + this.model.fields.bind('change', this.render); + this.state = new recline.Model.ObjectState(options.state); + this.state.bind('change', this.render); + this.render(); + }, + + // ### Public: Adds the necessary elements to the page. + // + // Also sets up the editor fields and the map if necessary. + render: function() { + var self = this; + htmls = Mustache.render(this.template, this.model.toTemplateJSON()); + $(this.el).html(htmls); + + if (this._geomReady() && this.model.fields.length){ + 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.state.get('lonField')); + this._selectOption('editor-lat-field',this.state.get('latField')); + $('#editor-field-type-latlon').attr('checked','checked').change(); + } + } + return this; + }, + + _geomReady: function() { + return Boolean(this.state.get('geomField') || (this.state.get('latField') && this.state.get('lonField'))); + }, + + // ## UI Event handlers + // + + // Public: Update map with user options + // + // Right now the only configurable option is what field(s) contains the + // location information. + // + onEditorSubmit: function(e){ + e.preventDefault(); + if (this.el.find('#editor-field-type-geom').attr('checked')){ + this.state.set({ + geomField: this.el.find('.editor-geom-field > select > option:selected').val(), + lonField: null, + latField: null + }); + } else { + this.state.set({ + geomField: null, + lonField: this.el.find('.editor-lon-field > select > option:selected').val(), + latField: this.el.find('.editor-lat-field > select > option:selected').val() + }); + } + return false; + }, + + // Public: Shows the relevant select lists depending on the location field + // type selected. + // + onFieldTypeChange: function(e){ + if (e.target.value == 'geom'){ + this.el.find('.editor-field-type-geom').show(); + this.el.find('.editor-field-type-latlon').hide(); + } else { + this.el.find('.editor-field-type-geom').hide(); + this.el.find('.editor-field-type-latlon').show(); + } + }, + + onAutoZoomChange: function(e){ + this.state.set({autoZoom: !this.state.get('autoZoom')}); + }, + + // Private: Helper function to select an option from a select list + // + _selectOption: function(id,value){ + var options = this.el.find('.' + id + ' > select > option'); + if (options){ + options.each(function(opt){ + if (this.value == value) { + $(this).attr('selected','selected'); + return false; + } + }); + } + } +}); + +})(jQuery, recline.View); + +/*jshint multistr:true */ + +// Standard JS module setup +this.recline = this.recline || {}; +this.recline.View = this.recline.View || {}; + +(function($, my) { +// ## MultiView +// +// Manage multiple views together along with query editor etc. Usage: +// +//
+// var myExplorer = new model.recline.MultiView({
+// model: {{recline.Model.Dataset instance}}
+// el: {{an existing dom element}}
+// views: {{dataset views}}
+// state: {{state configuration -- see below}}
+// });
+//
+//
+// ### Parameters
+//
+// **model**: (required) recline.model.Dataset instance.
+//
+// **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 dataset views (Grid, Graph etc) for
+// MultiView 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.Grid({
+// model: dataset
+// })
+// },
+// {
+// id: 'graph',
+// label: 'Graph',
+// view: new recline.View.Graph({
+// model: dataset
+// })
+// }
+// ];
+//
+//
+// **state**: standard state config for this view. This state is slightly
+// special as it includes config of many of the subviews.
+//
+//
+// 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
+// }
+//
+//
+// 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 MultiView with the relevant views themselves.
+my.MultiView = Backbone.View.extend({
+ template: ' \
+
-// var myExplorer = new model.recline.MultiView({
-// model: {{recline.Model.Dataset instance}}
-// el: {{an existing dom element}}
-// views: {{dataset views}}
-// state: {{state configuration -- see below}}
-// });
-//
-//
-// ### Parameters
-//
-// **model**: (required) recline.model.Dataset instance.
-//
-// **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 dataset views (Grid, Graph etc) for
-// MultiView 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.Grid({
-// model: dataset
-// })
-// },
-// {
-// id: 'graph',
-// label: 'Graph',
-// view: new recline.View.Graph({
-// model: dataset
-// })
-// }
-// ];
-//
-//
-// **state**: standard state config for this view. This state is slightly
-// special as it includes config of many of the subviews.
-//
-//
-// 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
-// }
-//
-//
-// 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 MultiView with the relevant views themselves.
-my.MultiView = Backbone.View.extend({
- template: ' \
-