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.
This commit is contained in:
Michael Pinnegar 2020-04-18 20:14:40 -04:00 committed by GitHub
parent 2fc271d7aa
commit ba76ede87d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 4 deletions

3
.gitignore vendored
View file

@ -38,3 +38,6 @@ npm-debug.log
# Mnesia # Mnesia
/Mnesia* /Mnesia*
# Intellij IDEA
.idea

View file

@ -67,6 +67,7 @@ function setupImageUpload() {
// Clear any currently cached data, because the file field // Clear any currently cached data, because the file field
// has higher priority than the scraper: // has higher priority than the scraper:
remoteUrl.value = ''; remoteUrl.value = '';
disableFetch();
hideError(); hideError();
}); });
@ -101,6 +102,15 @@ function setupImageUpload() {
enableFetch(); enableFetch();
}).catch(showError); }).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 }; export { setupImageUpload };

View file

@ -29,7 +29,7 @@
.field.field--inline .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" = 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 ' Fetch
.field-error-js.hidden.js-scraper .field-error-js.hidden.js-scraper

View file

@ -39,7 +39,7 @@
.field.field--inline .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" = 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 ' Fetch
.field-error-js.hidden.js-scraper .field-error-js.hidden.js-scraper

View file

@ -16,7 +16,7 @@ h1 Reverse Search
.field.field--inline .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" = 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 ' Fetch
.field-error-js.hidden.js-scraper .field-error-js.hidden.js-scraper