implement messaging for 'invalid' Google Sheets URL

coakenfold · Jul 18, 2017 · e6dd6b0 · e6dd6b0
1 parent cbaf558
commit e6dd6b0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/website/static/css/site.css b/website/static/css/site.css
@@ -47,4 +47,11 @@ ul#embed-font li img {
 
 #preview-embed {
     display: none;
-}
+}
+
+.note-error {
+  display: none;
+}
+.note-error:before {
+  content: "Warning: "
+}
diff --git a/website/static/js/main.js b/website/static/js/main.js
@@ -55,6 +55,10 @@ function getLinkAndIframe() {
   /* SOURCE KEY
   ================================================== */
   if (e_source.value.match("docs.google.com")) {
+    if (e_source.value.match(new RegExp('/spreadsheets/d/e'))) {
+      theobj.warning = "Invalid Google URL. Please see the note above about how a recent change with Google Spreadsheets affects creating timelines.";
+      return theobj;
+    }
     var obj = TL.ConfigFactory.parseGoogleSpreadsheetURL(e_source.value);
     source_key = obj.key;
   } else {
@@ -103,7 +107,7 @@ function getLinkAndIframe() {
 
   if (start_at_end) {
     vars  += "&start_at_end=" + start_at_end;
-  } 
+  }
 
   if (timenav_position == "top") {
     vars += "&timenav_position=" + timenav_position;
@@ -150,8 +154,14 @@ function getLinkAndIframe() {
 var $ = jQuery;
 
 function updateEmbedCode(element, options) {
+  $("#embed-source-url-message").hide();
   var e_embed = document.getElementById('embed_code'),
     el = getLinkAndIframe();
+    if (el.warning) {
+      $("#embed-source-url-message").html(el.warning);
+      $("#embed-source-url-message").css('display','block');
+      return;
+    }
   e_embed.value = el.copybox;
 //  document.getElementById('embed_code_medium').val(el.link);
   document.getElementById('preview-embed-link').setAttribute('href', el.link);

diff --git a/website/templates/_head.html b/website/templates/_head.html
@@ -4,8 +4,8 @@
     <meta name="keywords" content="">
     <meta name="description" content="Timeline JS is a free, easy-to-use tool for telling stories in a timeline format.">
     <link rel="stylesheet" href="https://cloud.webtype.com/css/d4767ecb-457a-4677-8761-72f890add836.css"/>
-    <link rel="stylesheet" href="/static/css/site.css"/>
     <link rel="stylesheet" href="https://cdn.knightlab.com/libs/orangeline/latest/css/orangeline.min.css"/>
+    <link rel="stylesheet" href="/static/css/site.css"/>
 
    <!-- favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/apple-touch-icon.png">

diff --git a/website/templates/_make.html b/website/templates/_make.html
@@ -54,6 +54,7 @@ <h6>Generate your timeline</h6>
                                     <div class="input-group-label column-12">
                                         <label class="input-group-addon" for="inlinelabel">Google Spreadsheet URL</label>
                                         <input type="text" id="embed-source-url" placeholder="1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI" name="inlinelabel">
+                                        <p id="embed-source-url-message" class="note note-alert note-error"></p>
                                     </div>
                                     <div class="input-group-label column-3">
                                         <label class="input-group-addon" for="inlinelabel">Width</label>