extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-08-08 23:44:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Slider for preview image size (#767)

Browse Source 
* Slider for preview image size
Add a slider to the system settings so that users can configure the max size of thumbnails

* Remove debug output

* Fix var definition

* Move slider to 'display settings' menu

* thumbnail slider CSS
This commit is contained in:
JeLuF
2023-02-22 15:02:00 +01:00
committed by GitHub
parent 4bc7bca60d
commit 1023f5f7cc
6 changed files with 82 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
ui/media/js/parameters.js
View File

@ -7,6 +7,7 @@
checkbox: "checkbox",
select: "select",
select_multiple: "select_multiple",
slider: "slider",
custom: "custom",
};
@ -155,6 +156,17 @@ var PARAMETERS = [
icon: "fa-gear",
default: true,
},
/* {
id: "thumbnail_size",
type: ParameterType.slider,
label: "Maximum image display size",
note: "Downscale large images to keep a better overview",
icon: "fa-compress",
slider_min: 1,
slider_max: 100,
slider_unit: "%",
default: 70
}, */
{
id: "confirm_dangerous_actions",
type: ParameterType.checkbox,
@ -199,6 +211,16 @@ function getParameterSettingsEntry(id) {
return parameter[0].settingsEntry
}
function sliderUpdate(event) {
if (event.srcElement.id.endsWith('-input')) {
console.log(event.srcElement.value)
document.getElementById(event.srcElement.id.slice(0,-6)).value = event.srcElement.value
} else {
console.log(event.srcElement.value)
document.getElementById(event.srcElement.id+'-input').value = event.srcElement.value
}
}
function getParameterElement(parameter) {
switch (parameter.type) {
case ParameterType.checkbox:
@ -209,6 +231,8 @@ function getParameterElement(parameter) {
var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
var multiple = (parameter.type == ParameterType.select_multiple ? 'multiple' : '')
return `<select id="${parameter.id}" name="${parameter.id}" ${multiple}>${options}</select>`
case ParameterType.slider:
return `<input id="${parameter.id}" name="${parameter.id}" class="editor-slider" type="range" value="${parameter.default}" min="${parameter.slider_min}" max="${parameter.slider_max}" oninput="sliderUpdate(event)"> <input id="${parameter.id}-input" name="${parameter.id}-input" size="4" value="${parameter.default}" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)">&nbsp;${parameter.slider_unit}`
case ParameterType.custom:
return parameter.render(parameter)
default:
@ -461,3 +485,4 @@ saveSettingsBtn.addEventListener('click', function() {
saveSettingsBtn.classList.add('active')
asyncDelay(300).then(() => saveSettingsBtn.classList.remove('active'))
})