From 81dc7eab2b6660778e51fa8ebd66a44331894fad Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Thu, 26 Apr 2012 17:22:36 +0100
Subject: [PATCH] [app][m]: proper start page for app (welcome, etc) plus
 introduce backbone routing to support this.

---
 app/index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++------
 app/js/app.js  | 46 +++++++++++++++++++++++++++++++---------------
 2 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/app/index.html b/app/index.html
index 28f148c3..757d3978 100644
--- a/app/index.html
+++ b/app/index.html
@@ -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>
diff --git a/app/js/app.js b/app/js/app.js
index e6c87123..342cfa8d 100755
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -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) {