Merge pull request #2 from danieladov/cssEditor

Css editor

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -118,7 +118,8 @@
       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>'
-      return html
+      return html;
+    }
       function getOptions(option){
         var html = "";
         var selections = option.selections
@@ -140,15 +141,7 @@
           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 updateDescription( ){
+        
-          var description = document.getElementById("description");
-          var selected = $('#cssOptions').val();
-          data.forEach(element => {          
-            if(element.defaultCss == selected){
-              description.innerHTML=element.description;
-            }                                               
-          })           
-        }
         function createCss(){
           var savedHtml = "";
           //process checkbox
@@ -199,11 +192,13 @@
           return css;       
         }
         function updateSelectors(){
-          var selected = $('#cssOptions').val();
+          var selected = document.getElementById("cssOptions");
+          var description = document.getElementById("description");
           data.forEach(element=>{
-            if(element.defaultCss == selected){
+            if(element.name == selected.selectedOptions[0].innerText){
               loadOptions(element.options);
-              updateDescription();
+              description.innerHTML=element.description;
+              
             }    
           })
         }
@@ -257,24 +252,7 @@
       return false;
     });
     </script>
-    <style>
+    
-    .color2{
-      display: block;
-      margin: 0;
-      margin-bottom: 0 !important;
-      font-family: inherit;
-      font-weight: inherit;
-      padding: 0.4em 0.25em;
-      /* must the 16px or larger to prevent iOS page zoom on focus */
-      font-size: 110%;
-      /* prevent padding from causing width overflow */
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      outline: none !important;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      width: 100%;
-    }
-    </style>
     </div>
 </body>
-</html>
+</html>

skins-3.0.json

@@ -97,25 +97,25 @@
         "type": "checkBox",
         "name": "Sea 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/seaGradient.css');"
       },
       {
         "type": "checkBox",
         "name": "Sunset Gradient",
         "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');",
+        "css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
       },
       {
         "type": "checkBox",
         "name": "Night Sky Gradient",
         "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');",
+        "css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
       },
       {
         "type": "checkBox",
         "name": "Morning Gradient",
         "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');",
+        "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
       }
     ]
   },