[app][s]: refactor app to be a backbone view.
This commit is contained in:
Rufus Pollock
parent
2d636b0eb8
commit
40a771c38b
@ -60,6 +60,7 @@
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="recline-app">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
@ -152,6 +153,7 @@
|
||||
<div class="data-explorer-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
177
app/js/app.js
177
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 = $('<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);
|
||||
}
|
||||
}
|
||||
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 = $('<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);
|
||||
}
|
||||
},
|
||||
|
||||
];
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user