fill demo form completely when users click

NUKnightLab · Sep 6, 2017 · 537cd81 · 537cd81
1 parent e546f8e
commit 537cd81
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/website/src/js/website.js b/website/src/js/website.js
@@ -33,6 +33,7 @@ function removeClass(el, className) {
   }
 }
 
+
 function clearURLError() {
   var el = document.getElementById('spreadsheet_url_wrapper');
   removeClass(el, 'error-message');
@@ -50,7 +51,7 @@ function showURLError(msg) {
   var el = document.getElementById('spreadsheet_url_wrapper');
   addClass(el, 'error-message');
   el.appendChild(createErrorParagraph(msg));
-  document.getElementById('storyline-config').display = 'block';
+  document.getElementById('storyline-config').style.display = 'block';
 }
 
 function clearInputError(el) {
@@ -151,6 +152,16 @@ function setCSSProperty(selector, property, value) {
   }
 }
 
+function usingDemoURL() {
+  var prefill = document.getElementById('prefill-spreadsheet-url');
+  var url_elem = document.getElementById('spreadsheet_url');
+  return (url_elem.value.trim() == prefill.dataset.url);
+}
+
+function setDemoModeMessageVisibility(style) {
+  document.getElementById('demo-mode-message').style.display = style;
+}
+
 function populateMenusAndShowForm(feed_response_str) {
   var spreadsheet_json = JSON.parse(feed_response_str);
   var columns = extractColumnHeaders(spreadsheet_json);
@@ -161,6 +172,15 @@ function populateMenusAndShowForm(feed_response_str) {
     addSelectOptions(selects[i], columns);
   }
 
+  if (usingDemoURL()) {
+    // yaxis label
+    document.getElementById('data_column_name').value = 'temperaturechange';
+    document.getElementById('datetime_column_name').value = 'year';
+    document.getElementById('datetime_format').value = '%Y';
+    document.getElementById('data_axis_label').value = 'Annual Temp. Change';
+    setDemoModeMessageVisibility('block');
+  }
+
   enableLoadButton();
   setCSSProperty('.hide-without-data', 'display', 'block');
   validateConfigForm();
@@ -246,6 +266,7 @@ function fetchSpreadsheetURL() {
 
 function processSpreadsheetURL() {
   clearURLError();
+  setDemoModeMessageVisibility('none');
   setCSSProperty('.hide-without-data', 'display', 'none');
   disableLoadButton();
   fetchSpreadsheetURL();

diff --git a/website/src/scss/website.scss b/website/src/scss/website.scss
@@ -2,6 +2,10 @@
   display: none;
 }
 
+#demo-mode-message {
+  display: none;
+}
+
 select.error-message,.error-message select, .error-message input, .error-message label {
   border-color:red;
 }

diff --git a/website/src/templates/index.hbs b/website/src/templates/index.hbs
@@ -197,6 +197,8 @@
                             </div>
                             <div id="storyline-config" class="panel hide-without-data">
                                 <h3>Tell us more about how your spreadsheet is formatted.</h3>
+                                <p id="demo-mode-message" class="note">We went ahead and filled in the form for you. Now just click 'Create Storyline'.
+                                </p>
                                 <div class="grid grid-left">
                                     <div class="column-4" style="text-align:right;">
                                         <h5>Time</h5>