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

[app][m]: proper start page for app (welcome, etc) plus introduce backbone routing to support this.

Browse Source
This commit is contained in:
Rufus Pollock 2012-04-26 17:22:36 +01:00
parent c9a3471b57
commit 81dc7eab2b
2 changed files with 75 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/index.html
View File

@ -124,6 +124,50 @@
</div>
</div>
<div class="container-fluid">
<div class="content">
<div class="page-home backbone-page">
<div class="hero-unit">
<h1>Welcome to the Recline Data Explorer</h1>
<p>The Data Explorer is an application for exploring
and working with data built in pure javascript and html. In basic operation it's much like a spreadsheet - though it's
feature set is a little different. In particular, the Data
Explorer provides:
<ul>
<li>Data grid / spreadsheet</li>
<li>Data editing including programmatic data transformation in javascript</li>
<li>Visualizations includes graphs and maps</li>
<li>Import and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
the <a href="http://datahub.io/">DataHub</a> and offline sources like CSV files on your local machine.</li>
<li>Use online or offline - because the app is built in pure javascript and html you can use it anywhere there's a modern web browser. Using offline is as easy and downloading this web page to your local machine.</li>
</ul>
<div class="row">
<div class="span4">
<h3>View the demo</h3>
<p>Take a look at a local demo dataset.</p>
<p><a class="btn btn-primary" href="?url=demo">View the demo dataset &raquo;</a></p>
</div>
<div class="span4">
<h3>Read the tutorial</h3>
<p>Take a look at the tutorial for using the data explorer:</p>
<a class="btn btn-primary" href="#tutorial">Read the tutorial &raquo;</a>
</div>
<div class="span4">
<h3>Import some data</h3>
<p>Starting working with some data straight away. You can import some data <strong>using the menu at the top right</strong> of this page.</p>
</div>
</div>
</div>
</div>
</div>
<div class="page-explorer backbone-page">
<div class="data-explorer-here"></div>
</div>
</div>
</div>
<!-- modals for menus -->
<div class="modal fade in js-import-dialog-file" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
@ -175,12 +219,6 @@
<textarea class="view-embed" style="width: 100%; height: 200px;"></textarea>
</div>
</div>
<div class="container-fluid">
<div class="content">
<div class="data-explorer-here"></div>
</div>
</div>
</div>
</body>
</html>

46
app/js/app.js
View File

@ -2,7 +2,6 @@ jQuery(function($) {
var app = new ExplorerApp({
el: $('.recline-app')
})
Backbone.history.start();
});
var ExplorerApp = Backbone.View.extend({
@ -15,6 +14,12 @@ var ExplorerApp = Backbone.View.extend({
this.el = $(this.el);
this.explorer = null;
this.explorerDiv = $('.data-explorer-here');
_.bindAll(this, 'viewExplorer', 'viewHome');
this.router = new Backbone.Router();
this.router.route('', 'home', this.viewHome);
this.router.route(/explorer/, 'explorer', this.viewExplorer);
Backbone.history.start();
var state = recline.View.parseQueryString(window.location.search);
if (state) {
@ -30,18 +35,34 @@ var ExplorerApp = Backbone.View.extend({
}
}
var dataset = null;
if (
(state.dataset || state.url) &&
// special cases for demo / memory dataset
!(state.url === 'demo' || state.backend === 'memory'))
{
dataset = recline.Model.Dataset.restore(state);
} else {
// special cases for demo / memory dataset
if (state.url === 'demo' || state.backend === 'memory') {
dataset = localDataset();
}
this.createExplorer(dataset, state);
else if (state.dataset || state.url) {
dataset = recline.Model.Dataset.restore(state);
}
if (dataset) {
this.createExplorer(dataset, state);
}
},
viewHome: function() {
this.switchView('home');
},
viewExplorer: function() {
this.router.navigate('explorer');
this.switchView('explorer');
},
switchView: function(path) {
$('.backbone-page').hide();
var cssClass = path.replace('/', '-');
$('.page-' + cssClass).show();
},
// make Explorer creation / initialization in a function so we can call it
// again and again
createExplorer: function(dataset, state) {
@ -63,12 +84,7 @@ var ExplorerApp = Backbone.View.extend({
this._setupPermaLink(this.dataExplorer);
this._setupEmbed(this.dataExplorer);
// 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);
}
this.viewExplorer();
},
_setupPermaLink: function(explorer) {