From ba76ede87dd0dfdc0f677e20006092fac827a66c Mon Sep 17 00:00:00 2001
From: Michael Pinnegar <Jazzepi@gmail.com>
Date: Sat, 18 Apr 2020 20:14:40 -0400
Subject: [PATCH] Disable image scraper fetch when there is no text (#92)

*Modified fetch to be disabled on pageload. Javascript enables it
after the user has entered some text. Re-disables it if the text goes
to zero, or the image upload button has been used.
---
 .gitignore                                             |  5 ++++-
 assets/js/upload.js                                    | 10 ++++++++++
 lib/philomena_web/templates/avatar/edit.html.slime     |  2 +-
 lib/philomena_web/templates/image/new.html.slime       |  2 +-
 .../templates/search/reverse/index.html.slime          |  2 +-
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 376591ba..cce349ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,4 +37,7 @@ npm-debug.log
 /priv/static/
 
 # Mnesia
-/Mnesia*
\ No newline at end of file
+/Mnesia*
+
+# Intellij IDEA
+.idea
diff --git a/assets/js/upload.js b/assets/js/upload.js
index f6368568..338b54eb 100644
--- a/assets/js/upload.js
+++ b/assets/js/upload.js
@@ -67,6 +67,7 @@ function setupImageUpload() {
     // Clear any currently cached data, because the file field
     // has higher priority than the scraper:
     remoteUrl.value = '';
+    disableFetch();
     hideError();
   });
 
@@ -101,6 +102,15 @@ function setupImageUpload() {
       enableFetch();
     }).catch(showError);
   });
+
+  // Enable/disable the fetch button based on content in the image scraper. Fetching with no URL makes no sense.
+  remoteUrl.addEventListener('input', () => {
+    if(remoteUrl.value.length > 0) {
+      enableFetch();
+    } else {
+      disableFetch();
+    }
+  });
 }
 
 export { setupImageUpload };
diff --git a/lib/philomena_web/templates/avatar/edit.html.slime b/lib/philomena_web/templates/avatar/edit.html.slime
index 936ffc35..2e1603dd 100644
--- a/lib/philomena_web/templates/avatar/edit.html.slime
+++ b/lib/philomena_web/templates/avatar/edit.html.slime
@@ -29,7 +29,7 @@
 
           .field.field--inline
             = url_input f, :scraper_url, class: "input input--wide js-scraper", placeholder: "Link a deviantART page, a Tumblr post, or the image directly"
-            button.button.button--separate-left#js-scraper-preview type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch"
+            button.button.button--separate-left#js-scraper-preview(type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch" disabled)
               ' Fetch
 
           .field-error-js.hidden.js-scraper
diff --git a/lib/philomena_web/templates/image/new.html.slime b/lib/philomena_web/templates/image/new.html.slime
index 2f8f57b1..851dc847 100644
--- a/lib/philomena_web/templates/image/new.html.slime
+++ b/lib/philomena_web/templates/image/new.html.slime
@@ -39,7 +39,7 @@
 
     .field.field--inline
       = url_input f, :scraper_url, class: "input input--wide js-scraper", placeholder: "Link a deviantART page, a Tumblr post, or the image directly"
-      button.button.button--separate-left#js-scraper-preview type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch"
+      button.button.button--separate-left#js-scraper-preview(type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch" disabled)
         ' Fetch
 
     .field-error-js.hidden.js-scraper
diff --git a/lib/philomena_web/templates/search/reverse/index.html.slime b/lib/philomena_web/templates/search/reverse/index.html.slime
index 7a3d8066..42faf79a 100644
--- a/lib/philomena_web/templates/search/reverse/index.html.slime
+++ b/lib/philomena_web/templates/search/reverse/index.html.slime
@@ -16,7 +16,7 @@ h1 Reverse Search
 
     .field.field--inline
       = url_input f, :url, name: "url", class: "input input--wide js-scraper", placeholder: "Link a deviantART page, a Tumblr post, or the image directly"
-      button.button.button--separate-left#js-scraper-preview type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch"
+      button.button.button--separate-left#js-scraper-preview(type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch" disabled)
         ' Fetch
 
     .field-error-js.hidden.js-scraper