diff --git a/app/index.html b/app/index.html index db5b8917..29ff9781 100644 --- a/app/index.html +++ b/app/index.html @@ -60,6 +60,7 @@ +
@@ -152,6 +153,7 @@
+
diff --git a/app/js/app.js b/app/js/app.js index 807b3c63..956e6f53 100755 --- a/app/js/app.js +++ b/app/js/app.js @@ -1,7 +1,8 @@ -$(function() { +jQuery(function($) { var qs = recline.View.parseQueryString(window.location.search); + var dataest = null; if (qs.url) { - var dataset = new recline.Model.Dataset({ + dataset = new recline.Model.Dataset({ id: 'my-dataset', url: qs.url, webstore_url: qs.url @@ -12,67 +13,90 @@ $(function() { dataset = localDataset(); } - createExplorer(dataset); + var app = new ExplorerApp({ + model: dataset, + el: $('.recline-app') + }) Backbone.history.start(); - - // setup the loader menu in top bar - setupLoader(createExplorer); }); -// make Explorer creation / initialization in a function so we can call it -// again and again -function createExplorer(dataset) { - // remove existing data explorer view - var reload = false; - if (window.dataExplorer) { - window.dataExplorer.remove(); - reload = true; - } - window.dataExplorer = null; - var $el = $('
'); - $el.appendTo($('.data-explorer-here')); - var views = standardViews(dataset); - window.dataExplorer = new recline.View.DataExplorer({ - el: $el - , model: dataset - , views: views - }); - // HACK (a bit). Issue is that Backbone will not trigger the route - // if you are already at that location so we have to make sure we genuinely switch - if (reload) { - window.dataExplorer.router.navigate('graph'); - window.dataExplorer.router.navigate('', true); - } -} +var ExplorerApp = Backbone.View.extend({ + events: { + 'submit form.js-import-url': '_onImportURL', + 'submit .js-import-dialog-file form': '_onImportFile' + }, -// convenience function -function standardViews(dataset) { - var views = [ - { - id: 'grid', - label: 'Grid', - view: new recline.View.Grid({ - model: dataset - }) - }, - { - id: 'graph', - label: 'Graph', - view: new recline.View.Graph({ - model: dataset - }) - }, - { - id: 'map', - label: 'Map', - view: new recline.View.Map({ - model: dataset - }) + initialize: function() { + this.explorer = null; + this.explorerDiv = $('.data-explorer-here'); + this.createExplorer(this.model); + }, + + // make Explorer creation / initialization in a function so we can call it + // again and again + createExplorer: function(dataset) { + // remove existing data explorer view + var reload = false; + if (this.dataExplorer) { + this.dataExplorer.remove(); + reload = true; } + this.dataExplorer = null; + var $el = $('
'); + $el.appendTo(this.explorerDiv); + this.dataExplorer = new recline.View.DataExplorer({ + el: $el + , model: dataset + }); + // HACK (a bit). Issue is that Backbone will not trigger the route + // if you are already at that location so we have to make sure we genuinely switch + if (reload) { + this.dataExplorer.router.navigate('graph'); + this.dataExplorer.router.navigate('', true); + } + }, - ]; - return views; -} + // setup the loader menu in top bar + setupLoader: function(callback) { + // pre-populate webstore load form with an example url + var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013'; + $('form.js-import-url input[name="source"]').val(demoUrl); + }, + + _onImportURL: function(e) { + e.preventDefault(); + $('.modal.js-import-dialog-url').modal('hide'); + var $form = $(e.target); + var source = $form.find('input[name="source"]').val(); + var type = $form.find('select[name="backend_type"]').val(); + var dataset = new recline.Model.Dataset({ + id: 'my-dataset', + url: source, + webstore_url: source + }, + type + ); + this.createExplorer(dataset); + }, + + _onImportFile: function(e) { + var self = this; + e.preventDefault(); + var $form = $(e.target); + $('.modal.js-import-dialog-file').modal('hide'); + var $file = $form.find('input[type="file"]')[0]; + var file = $file.files[0]; + var options = { + separator : $form.find('input[name="separator"]').val(), + encoding : $form.find('input[name="encoding"]').val() + }; + recline.Backend.loadFromCSVFile(file, function(dataset) { + self.createExplorer(dataset) + }, + options + ); + } +}); // provide a demonstration in memory dataset function localDataset() { @@ -83,7 +107,7 @@ function localDataset() { , name: '1-my-test-dataset' , id: datasetId }, -fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'},{id: 'lat'},{id: 'lon'}], + fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'},{id: 'lat'},{id: 'lon'}], documents: [ {id: 0, x: 1, y: 2, z: 3, country: 'DE', label: 'first', lat:52.56, lon:13.40} , {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second', lat:54.97, lon:-1.60} @@ -100,40 +124,3 @@ fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'},{id: 'l return dataset; } -// setup the loader menu in top bar -function setupLoader(callback) { - // pre-populate webstore load form with an example url - var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013'; - $('form.js-import-url input[name="source"]').val(demoUrl); - $('form.js-import-url').submit(function(e) { - e.preventDefault(); - $('.modal.js-import-dialog-url').modal('hide'); - var $form = $(e.target); - var source = $form.find('input[name="source"]').val(); - var type = $form.find('select[name="backend_type"]').val(); - var dataset = new recline.Model.Dataset({ - id: 'my-dataset', - url: source, - webstore_url: source - }, - type - ); - callback(dataset); - }); - - $('.js-import-dialog-file form').submit(function(e) { - e.preventDefault(); - var $form = $(e.target); - $('.modal.js-import-dialog-file').modal('hide'); - var $file = $form.find('input[type="file"]')[0]; - var file = $file.files[0]; - var options = { - separator : $form.find('input[name="separator"]').val(), - encoding : $form.find('input[name="encoding"]').val() - }; - recline.Backend.loadFromCSVFile(file, function(dataset) { - callback(dataset) - }, options); - }); -} -