Merge pull request #7 from danieladov/cssEditor

Css editor

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -55,7 +55,8 @@
       updateSelectors()
     }
 
-    function loadOptions(options){
+    function loadOptions(skin){
+      var options = skin.options;
       var page = $.mobile.activePage;
       var html = "";
       html += '<div data-role="controlgroup">';
@@ -72,9 +73,20 @@
           html += getSlider(element);
         }
       });
+      html += loadPreviews(skin);
       html += '</div>';
       $('#options', page).html(html).trigger('create');
     }
+
+    function loadPreviews(skin){
+      var html = "";
+          skin.previews.forEach(element => {
+           html += getImage(element.url);
+          });
+          return html;
+        }
+
+
     function getCheckBox ( option) {
       var html = "";
       var id = "chkFolder" ;
@@ -131,6 +143,7 @@
         return html;
     }
     function getSlider(option){
+
       var html = "";
       var id = "slider" ;
       var name = option.name; 
@@ -140,6 +153,12 @@
       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
+
+      }
+      function getImage(url){
+        var html = "";
+        html += '<img src="'+url+'">';
+        return html;
       }             
         
       function createCss(){
@@ -154,15 +173,18 @@
         var selectedOptions = $('.checkbox:checked').map(function () {
             return this.getAttribute('data-css');
           }).get();
+          
           selectedOptions.forEach(element => {
             css += element +"\n";
           });
+          
           //proccess selector
         var selectors = document.getElementsByClassName("selector");
         for (let element of selectors) {
             css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
             savedHtml += element.outerHTML;  
           }
+          
           //process colorPicker
           selectedOptions.forEach(element=>{
             css += element + "\n";
@@ -178,12 +200,14 @@
             }
             css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n";
           }
+
           //procces number selector
         var numberSelectors = document.getElementsByClassName("number");
         for (let element of numberSelectors) {
           savedHtml += element.outerHTML;
             css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
           }
+
           //procces slider
         var sliders =  document.getElementsByClassName("slider");
         for (let element of sliders) {
@@ -191,17 +215,26 @@
           }
           return css;       
         }
+
+
         function updateSelectors(){
           var selected = document.getElementById("cssOptions");
           var description = document.getElementById("description");
           data.forEach(element=>{
             if(element.name == selected.selectedOptions[0].innerText){
-              loadOptions(element.options);
+              loadOptions(element);
               description.innerHTML=element.description;
               
+              
             }    
           })
         }
+
+
+        
+
+
+
         function setSkin() {    
           ApiClient.getServerConfiguration().then(function (config) {
             ApiClient.updateServerConfiguration(config).then(function() {