unixaxwell/jellyfin-plugin-skin-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #7 from prayag17/cssEditor

Browse Source 
Organize the code
This commit is contained in:
Daniel
2020-12-01 15:32:12 +01:00
committed by GitHub
parent 98baca7927 cdd488c655
commit 8d753a482c
2 changed files with 267 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
View File

@@ -1,58 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Skin Manager</title> <title>Skin Manager</title>
</head> </head>
<body> <body>
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" <div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" data-require="emby-input,emby-button">
data-require="emby-input,emby-button">
<div data-role="content"> <div data-role="content">
<div class="content-primary"> <div class="content-primary">
<form class="tbsConfigurationPage"> <form class="tbsConfigurationPage">
<div class="sectionTitleContainer flex align-items-center"> <div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">Skin Manager</h2> <h2 class="sectionTitle">Skin Manager</h2>
<a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank" <a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank" href="https://github.com/danieladov/jellyfin-plugin-skin-manager">Help</a>
href="https://github.com/danieladov/jellyfin-plugin-skin-manager">Help</a>
</div> </div>
<div class="verticalSection"> <div class="verticalSection">
<p> <p>
Select the skin you want to install and click Set Skin Select the skin you want to install and click Set Skin
</p> </p>
<br /> <br>
</div> </div>
<div class="allOptions"> <div class="allOptions">
<div class="selectContainer"> <div class="selectContainer">
<label for="css">Skin</label> <label for="css">Skin</label>
<select is="emby-select" id="cssOptions" onchange="updateSelectors()"> <select is="emby-select" id="cssOptions" onchange="updateSelectors()"></select>
</select> <br>
<br />
<div class="fieldDescription" id="description"></div> <div class="fieldDescription" id="description"></div>
</div> </div>
<div class="checkboxList checkboxList-verticalwrap" id ="options"></div>
<div class="checkboxList checkboxList-verticalwrap" id ="options"> <br>
</div> </div>
<br /> <button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()>
</div>
<button is="emby-button" type="button" class="raised block" id="refresh-library"
onclick=setSkin()>
<span>Set Skin</span> <span>Set Skin</span>
</button> </button>
</form> </form>
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var data; var data;
Dashboard.showLoadingMsg(); 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/cssEditor/skins-3.0.json', function(json) {
data=json; data=json;
@@ -61,7 +44,6 @@
}); });
function loadSkins(){ function loadSkins(){
var cssOptions = document.getElementById("cssOptions"); var cssOptions = document.getElementById("cssOptions");
var skinVersions = document.getElementById("skinVersions"); var skinVersions = document.getElementById("skinVersions");
var versionDescription = document.getElementById("versionDescription"); var versionDescription = document.getElementById("versionDescription");
@@ -70,14 +52,9 @@
opt.appendChild(document.createTextNode(element.name)); opt.appendChild(document.createTextNode(element.name));
opt.value=element.defaultCss; opt.value=element.defaultCss;
cssOptions.appendChild(opt); cssOptions.appendChild(opt);
}); });
updateSelectors() updateSelectors()
}
function loadOptions(options){ function loadOptions(options){
var page = $.mobile.activePage; var page = $.mobile.activePage;
var html = ""; var html = "";
@@ -94,13 +71,10 @@
}else if(element.type == "slider"){ }else if(element.type == "slider"){
html += getSlider(element); html += getSlider(element);
} }
}); });
html += '</div>'; html += '</div>';
$('#options', page).html(html).trigger('create'); $('#options', page).html(html).trigger('create');
} }
function getCheckBox ( option) { function getCheckBox ( option) {
var html = ""; var html = "";
var id = "chkFolder" ; var id = "chkFolder" ;
@@ -111,7 +85,6 @@
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 + '" '+' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>'
return html; return html;
} }
function getColorPicker ( option) { function getColorPicker ( option) {
var html = ""; var html = "";
var id = "favcolor" ; var id = "favcolor" ;
@@ -121,10 +94,8 @@
var description = option.description; var description = option.description;
var mode = option.mode; 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"><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>';
return html; return html;
} }
function getNumber(option){ function getNumber(option){
var html = ""; var html = "";
var id = "number" ; var id = "number" ;
@@ -135,10 +106,8 @@
var description = option.description; 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 += '<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>' 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; return html;
} }
function getSelector(option){ function getSelector(option){
var html = ""; var html = "";
var id = "selector" ; var id = "selector" ;
@@ -148,11 +117,7 @@
var description = option.description; 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 += '<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)+'</select></div>'
return html
return html;
}
function getOptions(option){ function getOptions(option){
var html = ""; var html = "";
var selections = option.selections var selections = option.selections
@@ -162,9 +127,6 @@
html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>' html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
}) })
return html; return html;
}
function getSlider(option){ function getSlider(option){
var html = ""; var html = "";
var id = "slider" ; var id = "slider" ;
@@ -174,95 +136,65 @@
var defaultValue = option.default; var defaultValue = option.default;
var description = option.description; 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>' 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
return html;
} }
function updateDescription( ){ function updateDescription( ){
var description = document.getElementById("description"); var description = document.getElementById("description");
var selected = $('#cssOptions').val(); var selected = $('#cssOptions').val();
data.forEach(element => { data.forEach(element => {
if(element.defaultCss == selected){ if(element.defaultCss == selected){
description.innerHTML=element.description; description.innerHTML=element.description;
} }
}) })
} }
function createCss(){ function createCss(){
var savedHtml = ""; var savedHtml = "";
//process checkbox //process checkbox
var css = $('#cssOptions').val(); var css = $('#cssOptions').val();
savedHtml += document.getElementById("cssOptions").innerHTML; savedHtml += document.getElementById("cssOptions").innerHTML;
var checkboxes = document.getElementsByClassName("checkbox"); var checkboxes = document.getElementsByClassName("checkbox");
for (let element of checkboxes) { for (let element of checkboxes) {
savedHtml += element.innerHTML; savedHtml += element.innerHTML;
} }
var selectedOptions = $('.checkbox:checked').map(function () { var selectedOptions = $('.checkbox:checked').map(function () {
return this.getAttribute('data-css'); return this.getAttribute('data-css');
}).get(); }).get();
selectedOptions.forEach(element => { selectedOptions.forEach(element => {
css += element +"\n"; css += element +"\n";
}); });
//proccess selector //proccess selector
var selectors = document.getElementsByClassName("selector"); var selectors = document.getElementsByClassName("selector");
for (let element of selectors) { for (let element of selectors) {
css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
savedHtml += element.outerHTML; savedHtml += element.outerHTML;
} }
//process colorPicker //process colorPicker
selectedOptions.forEach(element=>{ selectedOptions.forEach(element=>{
css += element + "\n"; css += element + "\n";
}) })
var colorPickers = document.getElementsByClassName("color"); var colorPickers = document.getElementsByClassName("color");
for (let element of colorPickers) { for (let element of colorPickers) {
savedHtml += element.outerHTML savedHtml += element.outerHTML
if(element.getAttribute("data-mode")=="hex"){ if(element.getAttribute("data-mode")=="hex"){
color=element.value; color=element.value;
}else if(element.getAttribute("data-mode")=="rgba"){ }else if(element.getAttribute("data-mode")=="rgba"){
var rgbColor = hexToRgb( element.value); var rgbColor = hexToRgb( element.value);
color = rgbColor.r + "," +rgbColor.g +"," + rgbColor.b; color = rgbColor.r + "," +rgbColor.g +"," + rgbColor.b;
} }
css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n"; css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n";
} }
//procces number selector //procces number selector
var numberSelectors = document.getElementsByClassName("number"); var numberSelectors = document.getElementsByClassName("number");
for (let element of numberSelectors) { for (let element of numberSelectors) {
savedHtml += element.outerHTML; savedHtml += element.outerHTML;
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
} }
//procces slider //procces slider
var sliders = document.getElementsByClassName("slider"); var sliders = document.getElementsByClassName("slider");
for (let element of sliders) { for (let element of sliders) {
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
} }
return css; return css;
} }
function updateSelectors(){ function updateSelectors(){
var selected = $('#cssOptions').val(); var selected = $('#cssOptions').val();
@@ -273,39 +205,25 @@
} }
}) })
} }
function setSkin() { function setSkin() {
ApiClient.getServerConfiguration().then(function (config) { ApiClient.getServerConfiguration().then(function (config) {
ApiClient.updateServerConfiguration(config).then(function() { ApiClient.updateServerConfiguration(config).then(function() {
ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) { ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
brandingConfig.CustomCss = createCss(); brandingConfig.CustomCss = createCss();
ApiClient.updateNamedConfiguration('branding', brandingConfig).then(function () { ApiClient.updateNamedConfiguration('branding', brandingConfig).then(function () {
Dashboard.processServerConfigurationUpdateResult(); Dashboard.processServerConfigurationUpdateResult();
window.location.reload(true); window.location.reload(true);
}); });
}); });
}); });
}); });
} }
function hexToRgb(hex) { function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) { hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b; return r + r + g + g + b + b;
}); });
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? { return result ? {
r: parseInt(result[1], 16), r: parseInt(result[1], 16),
@@ -313,14 +231,11 @@
b: parseInt(result[3], 16) b: parseInt(result[3], 16)
} : null; } : null;
} }
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
var plugin = { var plugin = {
guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3' guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3'
}; };
$('#configPage').on('pageshow', function () { $('#configPage').on('pageshow', function () {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
loadSavedConfig(); loadSavedConfig();
@@ -329,7 +244,6 @@
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
}); });
$('#configForm').on('submit', function () { $('#configForm').on('submit', function () {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) { ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
@@ -338,44 +252,27 @@
Dashboard.processPluginConfigurationUpdateResult(result); Dashboard.processPluginConfigurationUpdateResult(result);
}); });
}); });
return false; return false;
}); });
</script> </script>
<style> <style>
.color2{ .color2{
display: block; display: block;
margin: 0; margin: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
font-family: inherit; font-family: inherit;
font-weight: inherit; font-weight: inherit;
padding: 0.4em 0.25em; padding: 0.4em 0.25em;
/* must the 16px or larger to prevent iOS page zoom on focus */ /* must the 16px or larger to prevent iOS page zoom on focus */
font-size: 110%; font-size: 110%;
/* prevent padding from causing width overflow */ /* prevent padding from causing width overflow */
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
outline: none !important; outline: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%; width: 100%;
} }
</style> </style>
</div> </div>
</body> </body>
</html> </html>

21
skins-3.0.json
View File

@@ -174,13 +174,6 @@
"css": "h1 {font-size: $em;}", "css": "h1 {font-size: $em;}",
"default": "1.8" "default": "1.8"
}, },
{
"type": "number",
"name": "Modify rounding",
"description": "Amount of rounding. Zero is none.",
"css": ".formDialogHeader {border-top-left-radius: $px;border-top-right-radius: $px;}formDialogFooter{border-bottom-left-radius: $px;border-bottom-right-radius: $px;}.cardOverlayContainer{border-radius: $px !important;}.cardOverlayButtonIcon{border-radius:$px!important;}.osdPoster img{border-radius: $px; }.mdl-slider::-moz-range-thumb {border-radius: $px;}.mdl-slider::-ms-thumb {border-radius: $px;}.mdl-slider::-webkit-slider-thumb{border-radius: $px;}div[data-role='controlgroup'] a[data-role='button']:first-child {border-bottom-left-radius: $px;border-top-left-radius: $px;}div[data-role='controlgroup'] a[data-role='button']:last-child{border-bottom-right-radius: $px;border-top-right-radius:$px;}progress{border-radius: $px;}progress::-webkit-progress-bar{border-radius: $px;}progress::-moz-progress-bar{border-radius:$px;}progress::-webkit-progress-value {border-radius: $px;}.taskProgressOuter,.taskProgressInner{border-radius: $px !important;}::-webkit-scrollbar-thumb{border-radius:$px;}.innerCardFooter {border-radius: 0px $px !important; }.countIndicator, .playedIndicator {border-radius: 0px $px !important;}",
"default": "0"
},
{ {
"type": "colorPicker", "type": "colorPicker",
"mode":"rgba", "mode":"rgba",
@@ -196,14 +189,6 @@
"css": ".mainDrawer-scrollContainer { color: $; }", "css": ".mainDrawer-scrollContainer { color: $; }",
"default":"#ffffff" "default":"#ffffff"
}, },
{
"type": "number",
"step": "0.1",
"name": "Image Edge Rounded",
"description": "Modifies the color of the left menu panel.",
"css": ".cardContent-button,.itemDetailImage { border-radius: $em;}",
"default":"0"
},
{ {
"type": "checkBox", "type": "checkBox",
"name": "Enlarge Tab Buttons", "name": "Enlarge Tab Buttons",
@@ -233,16 +218,14 @@
"default":"#ffffff" "default":"#ffffff"
}, },
{ {
"type": "slider", "type": "number",
"step": "0.1",
"name": "Border Radius", "name": "Border Radius",
"description": "Change the roundness of text box and more default is zero", "description": "Change the roundness of text box and more default is zero",
"css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/border-radius.css'); :root{--rounding: $px;}", "css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/border-radius.css'); :root{--rounding: $px;}",
"default":"0" "default":"0"
}, },
{ {
"type": "slider", "type": "number",
"step": "0.1",
"name": "Backdrop Blur", "name": "Backdrop Blur",
"description": "adds blur to the backdrop images default is zero", "description": "adds blur to the backdrop images default is zero",
"css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/bgBlur.css'); :root{--bgblur: blur($px)}", "css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/bgBlur.css'); :root{--bgblur: blur($px)}",