281 lines
10 KiB
HTML
281 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
|
|
<head>
|
|
<title>Skin Manager</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage"
|
|
data-require="emby-input,emby-button">
|
|
<div data-role="content">
|
|
<div class="content-primary">
|
|
<form class="tbsConfigurationPage">
|
|
<div class="sectionTitleContainer flex align-items-center">
|
|
<h2 class="sectionTitle">Skin Manager</h2>
|
|
<a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank"
|
|
href="https://github.com/danieladov/jellyfin-plugin-skin-manager">Help</a>
|
|
</div>
|
|
<div class="verticalSection">
|
|
<p>
|
|
Select the skin you want to install and press Set Skin
|
|
</p>
|
|
<br />
|
|
</div>
|
|
|
|
<div class="selectContainer">
|
|
<label for="css">css</label>
|
|
<select is="emby-select" id="cssOptions" onchange="updateSelectors()">
|
|
</select>
|
|
|
|
<p id="description"></p>
|
|
</div>
|
|
|
|
<div class="checkboxList checkboxList-verticalwrap" id ="options">
|
|
|
|
</div>
|
|
<br />
|
|
<button is="emby-button" type="button" class="raised block" id="refresh-library"
|
|
onclick=setSkin()>
|
|
<span>Set Skin</span>
|
|
</button>
|
|
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var data;
|
|
$.getJSON('https://pastebin.com/raw/X9X5t1wE', function(json) {
|
|
data=json;
|
|
loadSkins();
|
|
});
|
|
|
|
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));
|
|
opt.value=element.defaultCss;
|
|
cssOptions.appendChild(opt);
|
|
|
|
});
|
|
// updateVersions()
|
|
|
|
}
|
|
|
|
|
|
|
|
function loadOptions(options){
|
|
var page = $.mobile.activePage;
|
|
var html = "";
|
|
html += '<div data-role="controlgroup">';
|
|
options.forEach(element=>{
|
|
if(element.type == "checkBox"){
|
|
html += getCheckBox(element);
|
|
}else if(element.type == "colorPicker"){
|
|
html += getColorPicker(element);
|
|
}else if(element.type == "number"){
|
|
html += getNumber(element);
|
|
}
|
|
|
|
});
|
|
html += '</div>';
|
|
$('#options', page).html(html).trigger('create');
|
|
|
|
}
|
|
|
|
function getCheckBox ( option) {
|
|
var html = "";
|
|
var id = "chkFolder" ;
|
|
var name = option.name;
|
|
var value = option.css;
|
|
html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name + '</span></label>';
|
|
|
|
return html;
|
|
}
|
|
|
|
function getColorPicker ( option) {
|
|
var html = "";
|
|
var id = "favcolor" ;
|
|
var name = option.name;
|
|
var css = option.css;
|
|
html += '<label><input type=color value="#AA5CC3" class = "color" data-css = "'+ css+ '" data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name + '</span></label>';
|
|
|
|
return html;
|
|
}
|
|
|
|
function getNumber(option){
|
|
var html = "";
|
|
var id = "number" ;
|
|
var name = option.name;
|
|
var css = option.css;
|
|
html += '<label><input type=number value="0" class = "number" data-css = "'+ css+ '" data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name + '</span></label>';
|
|
|
|
return html;
|
|
}
|
|
|
|
|
|
function updateVersions(){
|
|
var selected = $('#cssOptions').val();
|
|
var skinVersions = document.getElementById("skinVersions");
|
|
|
|
|
|
//clear selector
|
|
for (i = skinVersions.options.length-1; i >= 0; i--) {
|
|
skinVersions.options[i] = null;
|
|
}
|
|
|
|
var skinVersions = document.getElementById("skinVersions");
|
|
|
|
data.forEach(element => {
|
|
if(selected == element.name){
|
|
element.versions.forEach(version =>{
|
|
var opt = document.createElement("option");
|
|
opt.appendChild(document.createTextNode(version.name));
|
|
opt.value=version.css;
|
|
skinVersions.appendChild(opt);
|
|
description.innerHTML=version.description;
|
|
|
|
|
|
})
|
|
}
|
|
|
|
|
|
});
|
|
updateDescription()
|
|
}
|
|
|
|
function updateDescription( ){
|
|
var description = document.getElementById("description");
|
|
var selected = $('#cssOptions').val();
|
|
|
|
data.forEach(element => {
|
|
if(element.defaultCss == selected){
|
|
description.innerHTML=element.description;
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
function createCss(){
|
|
//process checkbox
|
|
var css = $('#cssOptions').val();
|
|
var selectedOptions = $('.chkLibrary:checked').map(function () {
|
|
return this.getAttribute('data-value');
|
|
}).get();
|
|
|
|
//process colorPicker
|
|
selectedOptions.forEach(element=>{
|
|
css += element;
|
|
})
|
|
|
|
var colorPickers = document.getElementsByClassName("color");
|
|
for (let element of colorPickers) {
|
|
var color = hexToRgb( element.value);
|
|
rgbColor = color.r + "," +color.g +"," + color.b
|
|
css+= element.getAttribute("data-css").replace("$",rgbColor);
|
|
}
|
|
|
|
|
|
return css;
|
|
|
|
|
|
}
|
|
function updateSelectors(){
|
|
var selected = $('#cssOptions').val();
|
|
data.forEach(element=>{
|
|
if(element.defaultCss == selected){
|
|
loadOptions(element.options);
|
|
updateDescription();
|
|
}
|
|
})
|
|
}
|
|
|
|
function setSkin() {
|
|
|
|
|
|
ApiClient.getServerConfiguration().then(function (config) {
|
|
|
|
ApiClient.updateServerConfiguration(config).then(function() {
|
|
ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
|
|
brandingConfig.CustomCss = createCss();
|
|
|
|
|
|
|
|
ApiClient.updateNamedConfiguration('branding', brandingConfig).then(function () {
|
|
Dashboard.processServerConfigurationUpdateResult();
|
|
window.location.reload(true);
|
|
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function hexToRgb(hex) {
|
|
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
|
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
|
hex = hex.replace(shorthandRegex, function(m, r, g, 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);
|
|
return result ? {
|
|
r: parseInt(result[1], 16),
|
|
g: parseInt(result[2], 16),
|
|
b: parseInt(result[3], 16)
|
|
} : null;
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var plugin = {
|
|
guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3'
|
|
};
|
|
|
|
$('#configPage').on('pageshow', function () {
|
|
Dashboard.showLoadingMsg();
|
|
loadSavedConfig();
|
|
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
|
|
$('#cssOptions').val(config.selectedCss).change();
|
|
Dashboard.hideLoadingMsg();
|
|
});
|
|
});
|
|
|
|
$('#configForm').on('submit', function () {
|
|
Dashboard.showLoadingMsg();
|
|
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
|
|
config.selectedCss = $('#cssOptions').val();
|
|
ApiClient.updatePluginConfiguration(plugin.guid, config).then(function (result) {
|
|
Dashboard.processPluginConfigurationUpdateResult(result);
|
|
});
|
|
});
|
|
|
|
return false;
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |