Merge pull request #2 from danieladov/master

Save your current options

Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs

@@ -1,14 +1,18 @@
 using MediaBrowser.Model.Plugins;
+using System;
+using System.Collections.Generic;
 
 namespace Jellyfin.Plugin.SkinManager.Configuration
 {
     public class PluginConfiguration : BasePluginConfiguration
     {
-        public string selectedCss { get; set; }
+        public string selectedSkin { get; set; }
+        public string[] options { get; set; }
 
         public PluginConfiguration()
         {
-            selectedCss = "";
+            selectedSkin = "";
+            options = Array.Empty<String>();
         }
     }
 }

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -44,8 +44,7 @@
     });
     function loadSkins(){
       var cssOptions = document.getElementById("cssOptions");
-      var skinVersions = document.getElementById("skinVersions");
+ 
-      var versionDescription = document.getElementById("versionDescription");
       data.forEach(element => {
         var opt = document.createElement("option");
         opt.appendChild(document.createTextNode(element.name));
@@ -53,6 +52,7 @@
         cssOptions.appendChild(opt);
       });
       updateSelectors();
+      loadConfig();
       preloadPreviews();  
     }
 
@@ -105,41 +105,44 @@
         return html;
     }
 
-    function getCheckBox ( option) {
+    function getCheckBox ( option,saved) {
       var html = "";
+      var checked = saved=="true"?'checked="checked"' : "";
       var id = "chkFolder" ;
       var name = option.name;
       var css = option.css;
       var description = option.description;
                       
       //html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name  + '</span></label>';
-      html += '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' + id + '"name="' + id + '" data-css="' + css + '" '+' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>'
+      html += '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' + id + '"name="' + id + '" data-css="' + css + '" '+ checked + ' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>'
       return html;
     }
-    function getColorPicker ( option) {
+    function getColorPicker ( option,saved) {
       var html = "";
       var id = "favcolor" ;
       var name = option.name;   
       var defaultValue = option.default==undefined?"#000000":option.default;
+      defaultValue = saved == undefined?defaultValue:saved;
       var css = option.css;
       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="' + defaultValue + '"data-css = "'+ css+ '" data-mode="'+mode+'" id="' + id + '" name="' + id + '" label="'+name +'"  /><span>'+ name +'</span></label><div class="fieldDescription">'+description+'</div></div>';
       return html;
     }
-    function getNumber(option){
+    function getNumber(option,saved){
       var html = "";
       var id = "number" ;
       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 += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
       html += '<div class="inputContainer"><input is="emby-input" type="number" class = "number" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '"  id="' + id + '" name="' + id + '"  min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
       return html;
     } 
-    function getSelector(option){
+    function getSelector(option,saved){
       var html = "";
       var id = "selector" ;
       var name = option.name; 
@@ -147,20 +150,21 @@
       var defaultValue = option.default;
       var description = option.description;                           
       //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
-      html += '<div class="selectContainer"><select is="emby-select"  data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option)+'</select></div>'
+      html += '<div class="selectContainer"><select is="emby-select"  data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option,saved)+'</select></div>'
       return html;
     }
-    function getOptions(option){
+    function getOptions(option,saved){
       var html = "";
       var selections = option.selections
       var css = option.css;
       selections.forEach(element=>{
-        var name = element.name;                 
+        var name = element.name;
-        html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
+        var selected = saved==name?'selected="selected"' : "";                
+        html+= '<option data-css= "'+css + '"value='+name+'" '+ selected+'>'+ name +'</option>'
         })
         return html;
     }
-    function getSlider(option){
+    function getSlider(option,saved){
 
       var html = "";
       var id = "slider" ;
@@ -168,6 +172,7 @@
       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"><input is="emby-slider" type="range" class = "slider" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '"  id="' + id + '" name="' + id + '"  min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
       return html
@@ -261,12 +266,141 @@
           })
         }
 
+        var config = undefined;
+
+        function loadConfig(){
+
+          var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
+          
+            ApiClient.getPluginConfiguration(pluginId).then(function (savedConfig) {
+              config = savedConfig;
+
+                if (!config) {
+                    config.selectedSkin ="";
+                    config.options = [];
+                }
+                loadSavedOptions()
+            });
+        }
+
+        function loadSavedOptions(){
+          var skin = undefined;
+          data.forEach(element=> {
+            if(element.defaultCss == config.selectedSkin){
+              skin = element
+            }
+          })
+          if(skin == undefined){
+            return;
+          }
+          var count = 0;
+          for (let option of document.getElementById("cssOptions").options){
+            if(option.value == config.selectedSkin ){
+              document.getElementById("cssOptions").selectedIndex = count;
+            }
+            count ++;
+          }
+          
+          var options = skin.options;
+          var savedOptions = config.options;
+          var html = "";
+          html += '<div data-role="controlgroup">';
+          options.forEach(element=>{
+            var savedValue = undefined;
+            var count = 0;
+            savedOptions.forEach(savedOption => {
+              if(element.css == savedOption){
+                savedValue = savedOptions[count+1];
+              }
+              count ++;
+            })
+            if(element.type == "checkBox"){
+              html += getCheckBox(element,savedValue);
+            }else if(element.type == "colorPicker"){
+              html += getColorPicker(element,savedValue);
+            }else if(element.type == "number"){
+              html += getNumber(element,savedValue);
+            }else if(element.type == "selector"){
+              html += getSelector(element,savedValue);
+            }else if(element.type == "slider"){
+              html += getSlider(element,savedValue);
+            }else if(element.type == "section"){
+              html += getSection(element,savedValue);
+            }
+          });
+      html += loadPreviews(skin);
+      html += '</div>';
+      $('#options').html(html).trigger('create');
+    }
+
+        function saveConfig(){
+          var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
+          config.selectedSkin = $('#cssOptions').val();
+          
+          var options = [];
+          var count = 0;
+          data[document.getElementById("cssOptions").selectedIndex].options.forEach(option => {
+            options[count] = option.css;
+            options[count +1 ] = getValue(option);
+            count += 2;
+          });
+          config.options = options;
+
+          ApiClient.getPluginConfiguration(pluginId).then(function (oldConfig){
+            oldConfig = config;
+            ApiClient.updatePluginConfiguration(pluginId,oldConfig).then(function (res){
+                Dashboard.processPluginConfigurationUpdateResult(res);});
+            });
+        }
+
+        function getValue(option){
+          var result = "";
+          switch(option.type){
+           
+            case "checkBox":
+              document.getElementsByClassName("checkbox emby-checkbox").forEach(element =>{
+                if(option.css == element.getAttribute("data-css")){
+                  result =  element.checked?"true":"false";
+                  
+                }
+              })
+              
+            case "number":
+              document.getElementsByClassName("number emby-input").forEach(element =>{
+                  if(option.css == element.getAttribute("data-css")){
+                    result = element.value;
+                  }
+                })
+            case "colorPicker":
+              document.getElementsByClassName("color").forEach(element =>{
+                    if(option.css == element.getAttribute("data-css")){
+                      result = element.value;
+                    }
+                  })
+            case "slider":
+              document.getElementsByClassName("slider").forEach(element =>{
+                      if(option.css == element.getAttribute("data-css")){
+                        result = element.value;
+                      }
+                    })
+            case "selector":
+            document.getElementsByClassName("selector emby-select-withcolor emby-select").forEach(element =>{
+                      if(option.css == element.getAttribute("data-css")){
+                        result = element.selectedOptions[0].innerText;;
+                      }
+                    })
+             
+          }
+          return result;
+        }
+
 
         
 
 
 
-        function setSkin() {    
+        function setSkin() { 
+          saveConfig()   
           ApiClient.getServerConfiguration().then(function (config) {
             ApiClient.updateServerConfiguration(config).then(function() {
               ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
@@ -299,7 +433,6 @@
     };
     $('#configPage').on('pageshow', function () {
       Dashboard.showLoadingMsg();
-      loadSavedConfig();
       ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
         $('#cssOptions').val(config.selectedCss).change();
         Dashboard.hideLoadingMsg();

skins-3.0.json

@@ -209,7 +209,7 @@
     "name": "Custom",
     "author": "you",
     "description": "customize the look of jellyfin by your needs",
-    "defaultCss": "",
+    "defaultCss": "/*Custom*/",
     "options": [
     {
         "type": "selector",