knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[app][s]: refactor app to be a backbone view.

Browse Source
This commit is contained in:
Rufus Pollock
2012-04-16 03:06:31 +01:00
parent 2d636b0eb8
commit 40a771c38b
2 changed files with 84 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.html
View File

@@ -60,6 +60,7 @@
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
</head> </head>
<body> <body>
<div class="recline-app">
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
@@ -152,6 +153,7 @@
<div class="data-explorer-here"></div> <div class="data-explorer-here"></div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

177
app/js/app.js
View File

@@ -1,7 +1,8 @@
$(function() { jQuery(function($) {
var qs = recline.View.parseQueryString(window.location.search); var qs = recline.View.parseQueryString(window.location.search);
var dataest = null;
if (qs.url) { if (qs.url) {
var dataset = new recline.Model.Dataset({ dataset = new recline.Model.Dataset({
id: 'my-dataset', id: 'my-dataset',
url: qs.url, url: qs.url,
webstore_url: qs.url webstore_url: qs.url
@@ -12,67 +13,90 @@ $(function() {
dataset = localDataset(); dataset = localDataset();
} }
createExplorer(dataset); var app = new ExplorerApp({
model: dataset,
el: $('.recline-app')
})
Backbone.history.start(); Backbone.history.start();
// setup the loader menu in top bar
setupLoader(createExplorer);
}); });
// make Explorer creation / initialization in a function so we can call it var ExplorerApp = Backbone.View.extend({
// again and again events: {
function createExplorer(dataset) { 'submit form.js-import-url': '_onImportURL',
// remove existing data explorer view 'submit .js-import-dialog-file form': '_onImportFile'
var reload = false; },
if (window.dataExplorer) {
window.dataExplorer.remove();
reload = true;
}
window.dataExplorer = null;
var $el = $('<div />');
$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);
}
}
// convenience function initialize: function() {
function standardViews(dataset) { this.explorer = null;
var views = [ this.explorerDiv = $('.data-explorer-here');
{ this.createExplorer(this.model);
id: 'grid', },
label: 'Grid',
view: new recline.View.Grid({ // make Explorer creation / initialization in a function so we can call it
model: dataset // again and again
}) createExplorer: function(dataset) {
}, // remove existing data explorer view
{ var reload = false;
id: 'graph', if (this.dataExplorer) {
label: 'Graph', this.dataExplorer.remove();
view: new recline.View.Graph({ reload = true;
model: dataset
})
},
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
})
} }
this.dataExplorer = null;
var $el = $('<div />');
$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);
}
},
]; // setup the loader menu in top bar
return views; 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 // provide a demonstration in memory dataset
function localDataset() { function localDataset() {
@@ -83,7 +107,7 @@ function localDataset() {
, name: '1-my-test-dataset' , name: '1-my-test-dataset'
, id: datasetId , 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: [ documents: [
{id: 0, x: 1, y: 2, z: 3, country: 'DE', label: 'first', lat:52.56, lon:13.40} {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} , {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; 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);
});
}