[demo/js][s]: refactor demo js and add support for specifying url to load (and backend type) in the url query string.

* You can now do stuff like demo/index.html?url={path-to-your-elastic-search-instance}

demo/js/app.js

@@ -1,50 +1,41 @@
 $(function() {
-  var $el = $('<div />');
+  var qs = recline.View.parseQueryString(window.location.search);
-  $el.appendTo($('.data-explorer-here'));
+  if (qs.url) {
-  var dataset = demoDataset();
+    var dataset = new recline.Model.Dataset({
-  var views = [
+        id: 'my-dataset',
-    {
+        url: qs.url,
-      id: 'grid',
+        webstore_url: qs.url 
-      label: 'Grid',
-      view: new recline.View.DataGrid({
-        model: dataset
-      })
       },
-    {
+      qs.backend || 'elasticsearch'
-      id: 'graph',
+    );
-      label: 'Graph',
+  } else {
-      view: new recline.View.FlotGraph({
+    dataset = localDataset();
-        model: dataset
-      })
   }
-  ];
+
-  window.dataExplorer = new recline.View.DataExplorer({
+  createExplorer(dataset);
-    el: $el
-    , model: dataset
-    , views: views
-  });
   Backbone.history.start();
-  setupLoadFromWebstore(function(dataset) {
+
+  // setup the loader menu in top bar
+  setupLoader(createExplorer);
+
+  // set up readonly enabling in top bar
+  $('a.set-read-only').click(function() {
+    window.dataExplorer.setReadOnly();
+    alert('Read-only mode set');
+  });
+});
+
+// make Explorer creation / initialization in a function so we can call it
+// again and again
+function createExplorer(dataset) {
+  // remove existing data explorer view
+  if (window.dataExplorer) {
     window.dataExplorer.remove();
+  }
+  window.dataExplorer = null;
   var $el = $('<div />');
   $el.appendTo($('.data-explorer-here'));
-    window.dataExplorer = null;
+  var views = standardViews(dataset);
-    var views = [
-      {
-        id: 'grid',
-        label: 'Grid',
-        view: new recline.View.DataGrid({
-          model: dataset
-        })
-      },
-      {
-        id: 'graph',
-        label: 'Graph',
-        view: new recline.View.FlotGraph({
-          model: dataset
-        })
-      }
-    ];
   window.dataExplorer = new recline.View.DataExplorer({
     el: $el
     , model: dataset
@@ -54,14 +45,31 @@ $(function() {
   // if you are already at that location so we have to make sure we genuinely switch
   window.dataExplorer.router.navigate('graph');
   window.dataExplorer.router.navigate('', true);
-  });
+}
-  $('a.set-read-only').click(function() {
-    window.dataExplorer.setReadOnly();
-    alert('Read-only mode set');
-  });
-})
 
-function demoDataset() {
+// convenience function
+function standardViews(dataset) {
+  var views = [
+    {
+      id: 'grid',
+      label: 'Grid',
+      view: new recline.View.DataGrid({
+        model: dataset
+      })
+    },
+    {
+      id: 'graph',
+      label: 'Graph',
+      view: new recline.View.FlotGraph({
+        model: dataset
+      })
+    }
+  ];
+  return views;
+}
+
+// provide a demonstration in memory dataset
+function localDataset() {
   var datasetId = 'test-dataset';
   var inData = {
     metadata: {
@@ -85,7 +93,8 @@ function demoDataset() {
   return dataset;
 }
 
-function setupLoadFromWebstore(callback) {
+// 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.webstore-load input[name="source"]').val(demoUrl);