Add blurSliders

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -79,6 +79,7 @@
     updateSelectors();
     loadConfig();
     preloadPreviews();
+    
   }
 
   function loadOptions(skin) {
@@ -102,6 +103,8 @@
           html += getSlider(element);
         } else if (element.type == "googleFonts") {
           html += getFonts();
+        } else if (element.type == "blurSlider") {
+          html += getBlurSlider(element);
         }
       });
     });
@@ -177,7 +180,9 @@
     var description = option.description;
     var mode = option.mode;
     html +=
-    '<div class="inputContainer"><label><input style="height: 1em; padding: 0px; border: none;" type=color  class = "color" value="' +
+    '<div class="inputContainer"><label></span>' +
+    getToolTip(option) +
+    '</label><input style="height: 1em; padding: 0px; border: none;" type=color  class = "color" value="' +
     defaultValue +
     '"data-css = "' +
     css +
@@ -191,9 +196,7 @@
     name +
     '"  /><span>' +
     name +
-    "</span>" +
+    '<div class="fieldDescription">' +
-    getToolTip(option) +
-    '</label><div class="fieldDescription">' +
     description +
     "</div></div>";
     return html;
@@ -325,6 +328,54 @@
     "</div></div>";
     return html;
   }
+
+  var blurSliderCount = 0;
+  function getBlurSlider(option, saved) {
+    
+    var html = "";
+    var id = "blurSlider" + blurSliderCount;
+    blurSliderCount++;
+    var name = option.name;
+    var css = option.css;
+    var step = option.step == undefined ? 1 : option.step;
+    var defaultValue = option.default;
+    defaultValue = saved == undefined ? defaultValue : saved;
+    var description = option.description;
+    html +=
+    '<div class="inputContainer"><label><span>' + name +
+    '</span></label><input is="emby-slider" type="range"  class = "slider" value=' +
+    defaultValue +
+    ' oninput = "updateBlur(' + "'" + id + "'" + ')" ' + 
+    " step=" + 
+    step +
+    ' data-css = "' +
+    css +
+    '"  id="' +
+    id +
+    '" name="' +
+    id +
+    '"label="' +
+    name +
+    '"  min="0" max="40" label="' +
+    name +
+    '" /><div class="fieldDescription">' +
+    description +
+    "</div></div>" + '<img id ="' + id+'image"' +  'src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg">';
+    return html;
+  }
+  function updateBlur(id){
+    var slider = document.getElementById(id);
+    var image = document.getElementById(id+'image');
+    image.style.filter = "blur("+slider.value + "px)";
+  }
+  function updateBlurSliders(){
+    var sliders = document.getElementsByClassName("slider");
+    sliders.forEach(slider =>{
+      if(slider.id.substring(0, 10)=="blurSlider"){
+        updateBlur(slider.id);
+      }
+    })
+  }
   function getImage(url) {
     var html = "";
     html +=
@@ -544,6 +595,7 @@
         description.innerHTML = element.description;
       }
     });
+    updateBlurSliders();
   }
 
   var config = undefined;
@@ -612,6 +664,8 @@
           html += getSlider(element, savedValue);
         } else if (element.type == "googleFonts") {
           html += getFonts(savedValue);
+        } else if (element.type == "blurSlider") {
+          html += getBlurSlider(element, savedValue);
         }
       });
     });
@@ -620,8 +674,9 @@
     '<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()><span>Set Skin</span></button>';
     html += loadPreviews(skin);
     html += "</div>";
-    $("#options").html(html).trigger("create");
+    $("#options").html(html).trigger("create").then(updateBlurSliders());
-    generateFontPicker();
+    
+    
 
   }
 
@@ -684,6 +739,7 @@
       );
       break;
       case "slider":
+      case "blurSlider":
       Array.from(document.getElementsByClassName("slider")).forEach(
         (element) => {
           if (option.css == element.getAttribute("data-css")) {
@@ -692,6 +748,7 @@
         }
       );
       break;
+      
       case "selector":
       Array.from(
         document.getElementsByClassName(