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

Theme previews

Browse Source
This commit is contained in:
Prayag
2020-12-11 20:50:27 +05:30
committed by GitHub
parent 93b25fc4f1
commit 435c256ec3
1 changed files with 274 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,23 +1,20 @@
<!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>
<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 click Set Skin
</p>
<br>
</div>
<p> Select the skin you want to install and click Set Skin </p>
<br> </div>
<div class="allOptions">
<div class="selectContainer">
<label for="css">Skin</label>
@@ -26,11 +23,8 @@
<div class="fieldDescription" id="description"></div>
</div>
<div class="checkboxList checkboxList-verticalwrap" id="options"></div>
<br>
</div>
<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()>
<span>Set Skin</span>
</button>
<br> </div>
<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()> <span>Set Skin</span> </button>
</form>
</div>
</div>
@@ -42,6 +36,7 @@
loadSkins();
Dashboard.hideLoadingMsg();
});
function loadSkins() {
var cssOptions = document.getElementById("cssOptions");
var skinVersions = document.getElementById("skinVersions");
@@ -93,11 +88,11 @@
var name = option.name;
var css = option.css;
var description = option.description;
//html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name + '</span></label>';
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;
}
function getColorPicker(option) {
var html = "";
var id = "favcolor";
@@ -109,6 +104,7 @@
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;
}
function getNumber(option) {
var html = "";
var id = "number";
@@ -121,6 +117,7 @@
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;
}
function getSelector(option) {
var html = "";
var id = "selector";
@@ -132,6 +129,7 @@
html += '<div class="selectContainer"><select is="emby-select" data-css= "' + css + '"class="selector" label="' + name + '">' + getOptions(option) + '</select></div>'
return html;
}
function getOptions(option) {
var html = "";
var selections = option.selections
@@ -142,8 +140,8 @@
})
return html;
}
function getSlider(option){
function getSlider(option) {
var html = "";
var id = "slider";
var name = option.name;
@@ -153,8 +151,8 @@
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 += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="' + url + '">';
@@ -179,18 +177,15 @@
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";
@@ -206,14 +201,12 @@
}
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) {
@@ -222,7 +215,6 @@
return css;
}
function updateSelectors() {
var selected = document.getElementById("cssOptions");
var description = document.getElementById("description");
@@ -230,17 +222,10 @@
if(element.name == selected.selectedOptions[0].innerText) {
loadOptions(element);
description.innerHTML = element.description;
}
})
}
function setSkin() {
ApiClient.getServerConfiguration().then(function(config) {
ApiClient.updateServerConfiguration(config).then(function() {
@@ -254,6 +239,7 @@
});
});
}
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;
@@ -295,7 +281,16 @@
img {
width: 100%;
}
fieldset.verticalSection.verticalSection-extrabottompadding {
border: 1px dotted #2d2d2d;
}
legend {
font-size: 135%;
}
</style>
</div>
</body>
</html>