Merge pull request #1 from danieladov/master

Preload images

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -37,7 +37,7 @@
     <script type="text/javascript">
     var data;
     Dashboard.showLoadingMsg();
-    $.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/cssEditor/skins-3.0.json', function(json) {
+    $.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-3.0.json', function(json) {
       data=json;
       loadSkins();
       Dashboard.hideLoadingMsg();         
@@ -52,12 +52,12 @@
         opt.value=element.defaultCss;
         cssOptions.appendChild(opt);
       });
-      updateSelectors()
+      updateSelectors();
+      preloadPreviews();  
     }
 
     function loadOptions(skin){
       var options = skin.options;
-      var page = $.mobile.activePage;
       var html = "";
       html += '<div data-role="controlgroup">';
       options.forEach(element=>{
@@ -71,11 +71,25 @@
           html += getSelector(element);
         }else if(element.type == "slider"){
           html += getSlider(element);
+        }else if(element.type == "section"){
+          html += getSection(element);
         }
       });
       html += loadPreviews(skin);
       html += '</div>';
-      $('#options', page).html(html).trigger('create');
+      $('#options').html(html).trigger('create');
+    }
+
+    function preloadPreviews(){
+      data.forEach(skin => {
+        if(skin.previews != undefined){
+          skin.previews.forEach(img => {
+          var image = new Image();
+          image.src = img.url;
+        }) 
+        }
+         
+      })
     }
 
     function loadPreviews(skin){
@@ -106,11 +120,11 @@
       var html = "";
       var id = "favcolor" ;
       var name = option.name;   
-      var defaultValue = option.default;
+      var defaultValue = option.default==undefined?"#000000":option.default;
       var css = option.css;
       var description = option.description;
       var mode = option.mode;                           
-      html += '<div class="inputContainer"><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 +'"  /><div class="fieldDescription">'+description+'</div></div>';
+      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){
@@ -159,7 +173,7 @@
       return html
 
       }
-        function getImage(url){
+      function getImage(url){
         var html = "";
         html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
         return html;
@@ -171,6 +185,13 @@
         return html;
       }  
       
+      function getSection(option){
+        var html = "";
+        var name = option.name;
+        html += html += '<h2 class="sectionTitle" >'+ name +'</h2>';
+        return html;
+      }
+        
       function createCss(){
         var savedHtml = "";
         //process checkbox

skins-3.0.json

@@ -163,31 +163,27 @@
     "name": "JellySkin",
     "author": "prayagprajapati17",
     "description": "A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
-    "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.4');",
+    "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
     "options": [
       {
-        "type": "checkBox",
+        "type": "selector",
-        "name": "Sea Gradient",
+        "name": "Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
+        "description": "Changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
+        "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
-      },
+        "selections": [
-      {
+          {
-        "type": "checkBox",
+            "name": "seaGradient"
-        "name": "Sunset Gradient",
+          },
-        "description": "changes the Jellyfin themed Hover gradient",
+          {
-        "css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
+            "name": "sunsetGradient"
-      },
+          },
-      {
+          {
-        "type": "checkBox",
+            "name": "nightSkyGradient"
-        "name": "Night Sky Gradient",
+          },
-        "description": "changes the Jellyfin themed Hover gradient",
+          {
-        "css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
+            "name": "morningGradient"
-      },
+          }
-      {
+        ]
-        "type": "checkBox",
-        "name": "Morning Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
       }
     ],
 	"previews":[
@@ -306,6 +302,19 @@
         "description": "This modifies the colors of the cast, search and user buttons in the top right.",
         "css": ".headerRight { color: $; }",
         "default":"#ffffff"
+      },
+	  {
+		"type": "section",
+		"name": "Buttons"
+	  },
+	  {
+        "type": "colorPicker",
+        "mode": "hex",
+        "name": "Interact Buttons Color",
+        "description": "This modifies the color of interact buttons.",
+        "css": ".paper-icon-button-light { color: $ !important; } .paper-icon-button-light:hover:not(:disabled) { color:$ !important; background-color: $ !important; } .paper-icon-button-light:focus:not(:disabled) { color:$ !important; background-color: $ !important; }",
+        "default":"#00a4dc",
+		"preview":"https://github.com/LambadaCorez/custom_css_jellyfin/blob/master/ui/buttons/colored_interact_buttons/colored_buttons_example3.png?raw=true"
       },
       {
         "type": "number",