Slider for preview image size (#767)

* 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

ui/media/js/auto-save.js

@@ -44,7 +44,8 @@ const SETTINGS_IDS_LIST = [
     "metadata_output_format",
     "auto_save_settings",
     "apply_color_correction",
-    "process_order_toggle"
+    "process_order_toggle",
+    "thumbnail_size"
 ]
 
 const IGNORE_BY_DEFAULT = [

ui/media/js/main.js

@@ -47,6 +47,7 @@ let blockNSFWField = document.querySelector('#block_nsfw')
 let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
 let updateBranchLabel = document.querySelector("#updateBranchLabel")
 let streamImageProgressField = document.querySelector("#stream_image_progress")
+let thumbnailSizeField = document.querySelector("#thumbnail_size")
 
 let makeImageBtn = document.querySelector('#makeImage')
 let stopImageBtn = document.querySelector('#stopImage')
@@ -1330,6 +1331,24 @@ outputFormatField.addEventListener('change', e => {
         outputQualityRow.style.display='table-row'
     }
 })
+/********************* Zoom Slider **********************/
+thumbnailSizeField.addEventListener('input', () => {
+    (function (s) {
+        for (var j =0; j < document.styleSheets.length; j++) {
+            let cssSheet = document.styleSheets[j]
+            for (var i = 0; i < cssSheet.cssRules.length; i++) {
+                var rule = cssSheet.cssRules[i];
+                if (rule.selectorText == "div.img-preview img") {
+                  rule.style['max-height'] = s+'vh';
+                  rule.style['max-width'] = s+'vw';
+                  return;
+                }
+            }
+        }
+    })(thumbnailSizeField.value)
+})
+
+
 
 function checkRandomSeed() {
     if (randomSeedField.checked) {

ui/media/js/parameters.js

@@ -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'))
 })
+