Beanz/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added number template for defaultZoomDelay option

Browse Source 
and made invalid input fields have red border/outline
This commit is contained in:
MAZ 2025-07-29 18:13:29 +02:00
parent 2e80ef11a2
commit 8460d903e2
2 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
extensions/chromium/options/options.html
View File

@ -33,12 +33,25 @@ body {
.checkbox label input { .checkbox label input {
flex-shrink: 0; flex-shrink: 0;
} }
input:invalid {
border-color: #f44;
outline-color: #f44;
}
</style> </style>
</head> </head>
<body> <body>
<div id="settings-boxes"></div> <div id="settings-boxes"></div>
<button id="reset-button" type="button">Restore default settings</button> <button id="reset-button" type="button">Restore default settings</button>
<template id="number-template">
<div class="settings-row">
<label>
<span></span>
<input type="number" min="0" max="" step="any" value="" placeholder="0">
</label>
</div>
</template>
<template id="checkbox-template"> <template id="checkbox-template">
<div class="settings-row checkbox"> <div class="settings-row checkbox">
<label> <label>

61
extensions/chromium/options/options.js
View File

@ -94,6 +94,17 @@ Promise.all([
prefSchema.title, prefSchema.title,
prefSchema.description prefSchema.description
); );
} else if (prefName === "defaultZoomDelay") {
renderPreference = renderNumberPref(
true,
prefSchema.title,
prefSchema.description,
prefName,
"10",
"60000",
"1",
String(prefSchema.default)
);
} else { } else {
// Should NEVER be reached. Only happens if a new type of preference is // Should NEVER be reached. Only happens if a new type of preference is
// added to the storage manifest. // added to the storage manifest.
@ -151,6 +162,56 @@ function importTemplate(id) {
// Helpers to create UI elements that display the preference, and return a // Helpers to create UI elements that display the preference, and return a
// function which updates the UI with the preference. // function which updates the UI with the preference.
function renderNumberPref(
integer,
shortDescription,
description,
prefName,
min,
max,
step,
placeholder
) {
var wrapper = importTemplate("number-template");
var intOnly = integer;
var numberInput = wrapper.querySelector("input");
numberInput.min = min;
numberInput.max = max;
numberInput.step = step;
numberInput.placeholder = placeholder;
numberInput.oninput = function () {
numberInput.setCustomValidity(
intOnly && !Number.isInteger(numberInput.valueAsNumber)
? "Integers only!"
: ""
);
numberInput.reportValidity();
};
numberInput.onchange = function () {
var numberValue = this.valueAsNumber;
var valid =
numberInput.checkValidity() &&
(!intOnly || Number.isInteger(numberValue));
numberInput.setCustomValidity(
valid ? "" : "Invalid value will not be saved!"
);
if (!valid) {
return;
}
var pref = {};
pref[prefName] = numberValue;
storageArea.set(pref);
};
wrapper.querySelector("span").textContent = shortDescription;
wrapper.querySelector("label").title = description;
document.getElementById("settings-boxes").append(wrapper);
function renderPreference(value) {
numberInput.valueAsNumber = value;
}
return renderPreference;
}
function renderBooleanPref(shortDescription, description, prefName) { function renderBooleanPref(shortDescription, description, prefName) {
var wrapper = importTemplate("checkbox-template"); var wrapper = importTemplate("checkbox-template");
var checkbox = wrapper.querySelector('input[type="checkbox"]'); var checkbox = wrapper.querySelector('input[type="checkbox"]');