validation feedback on autoar timer input field

This commit is contained in:
Tamius Han 2018-07-09 23:40:26 +02:00
parent cf813cf6f8
commit 8a73d8c6a4
2 changed files with 27 additions and 5 deletions

View File

@ -343,7 +343,6 @@ function getCustomAspectRatio() {
}
function validateCustomAr(){
console.log("validating!")
const valid = getCustomAspectRatio() !== false;
const inputField = document.getElementById("_input_custom_ar");
const valueSaveButton = document.getElementById("_b_changeAr_save_custom_ar");
@ -357,6 +356,19 @@ function validateCustomAr(){
}
}
function validateAutoArTimeout(){
const inputField = document.getElementById("_input_autoAr_timer");
const valueSaveButton = document.getElementById("_b_autoar_save_autoar_frequency");
if (! isNaN(parseInt(inputField.trim().value()))) {
inputField.classList.remove("invalid-input");
valueSaveButton.classList.remove("disabled-button");
} else {
inputField.classList.add("invalid-input");
valueSaveButton.classList.add("disabled-button");
}
}
function toggleSite(option){
if(Debug.debug)
console.log("[popup::toggleSite] toggling extension 'should I work' status to", option, "on current site");
@ -606,14 +618,23 @@ document.addEventListener("click", (e) => {
return true;
});
const inputField = document.getElementById("_input_custom_ar");
inputField.addEventListener("blur", (event) => {
const customArInputField = document.getElementById("_input_custom_ar");
const autoarFrequencyInputField = document.getElementById("_input_autoAr_timer");
customArInputField.addEventListener("blur", (event) => {
validateCustomAr();
});
inputField.addEventListener("mouseleave", (event) => {
customArInputField.addEventListener("mouseleave", (event) => {
validateCustomAr();
});
autoarFrequencyInputField.addEventListener("blur", (event) => {
validateAutoArTimeout();
});
autoarFrequencyInputField.addEventListener("mouseleave", (event) => {
validateAutoArTimeout();
});
hideWarning("script-not-running-warning");
openMenu(selectedMenu);
getConf();

View File

@ -1,5 +1,6 @@
<html>
<head>
<!-- shit like this really makes you appreciate angular and similar frameworks, doesn't it? -->
<title></title>
<meta charset="utf-8">
<link rel='stylesheet' type='text/css' href='../css/font/overpass.css'>
@ -264,7 +265,7 @@
</div>
<!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
<p>Check every <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms — <span class="button _save_autoAr_frequency _autoAr">Save</span></p>
<p>Check every <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms — <span id="_b_autoar_save_autoar_frequency" class="button _save_autoAr_frequency _autoAr">Save</span></p>
<div class="row">
<span class="label">Options for this site:</span>