From 17986f25afdf9569c3e72a8ede0fb6df3cb703d9 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Sat, 24 Mar 2012 17:25:18 +0000
Subject: [PATCH] [demo][s]: convert import from url to dropdown plus modal
 from simple form in top bar.

---
 demo/index.html | 47 +++++++++++++++++++++++++++++++++++++++--------
 demo/js/app.js  |  5 +++--
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 3205aee9..03bdce6a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -53,20 +53,51 @@
           <li><a href="../#docs">Documentation</a></li>
         </ul>
         <ul class="nav pull-right">
+          <li class="dropdown">
+            <a data-toggle="dropdown" class="dropdown-toggle">
+              Import <b class="caret"></b></a>
+            <ul class="dropdown-menu js-import">
+              <li>
+                <a data-toggle="modal" href=".js-import-dialog-url">Import from URL</a>
+              </li>
+            </ul>
+          </li>
           <li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li>
         </ul>
-        <form class="webstore-load pull-right navbar-search" title="Update from the specified webstore dataset">
-          <input type="text" name="source" size="50" />
-          <select name="backend_type">
-            <option value="elasticsearch">ElasticSearch</option>
-            <option value="dataproxy">DataProxy</option>
-            <option value="gdocs">Google Spreadsheet (JSON API)</option>
-          </select>
-        </form>
       </div>
     </div>
   </div>
 
+  <div class="modal fade in js-import-dialog-url" style="display: none;">
+    <div class="modal-header">
+      <a class="close" data-dismiss="modal">×</a>
+      <h3>Import from URL</h3> 
+    </div>
+    <div class="modal-body">
+      <form class="js-import-url form-horizontal">
+        <div class="control-group">
+          <label class="control-label">URL</label>
+          <div class="controls">
+            <input type="text" name="source" class="input-xlarge" />
+          </div>
+        </div>
+        <div class="control-group">
+          <label class="control-label">Type of data</label>
+          <div class="controls">
+            <select name="backend_type">
+              <option value="elasticsearch">ElasticSearch</option>
+              <option value="dataproxy">CSV or Excel</option>
+              <option value="gdocs">Google Spreadsheet</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary">Import &raquo;</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
   <div class="container-fluid">
     <div class="content">
       <div class="data-explorer-here"></div>
diff --git a/demo/js/app.js b/demo/js/app.js
index 9afd6acf..c0aa5cbb 100755
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -101,9 +101,10 @@ function localDataset() {
 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);
-  $('form.webstore-load').submit(function(e) {
+  $('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();