975 lines
36 KiB
HTML
975 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Skin Manager</title>
|
|
<link href="/path/to/dist/jquery.fontpicker.min.css" rel="stylesheet">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
<script src="/path/to/dist/jquery.fontpicker.min.js"></script>
|
|
|
|
<link href="/path/to/dist/jquery.fontpicker.min.css" rel="stylesheet">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
<script src="/path/to/dist/jquery.fontpicker.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage"
|
|
data-require="emby-input,emby-button"
|
|
data-controller = "__plugin/fontpicker.js">
|
|
<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://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/help.html">Help</a>
|
|
</div>
|
|
<div class="verticalSection">
|
|
<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>
|
|
<select is="emby-select" id="cssOptions" onchange="updateSelectors()"></select>
|
|
<br />
|
|
<div class="fieldDescription" id="description"></div>
|
|
</div>
|
|
<div class="checkboxList checkboxList-verticalwrap" id="options"></div>
|
|
<br />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var data;
|
|
var fonts;
|
|
var hasGoogleFont = false;
|
|
function start(){
|
|
|
|
Dashboard.showLoadingMsg();
|
|
$.getJSON(
|
|
"https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-3.0.json",
|
|
function (json) {
|
|
$.getJSON(
|
|
"https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyB_bPGsf0vxnpO9GmkBjeoEIQ7rE9rbNck",
|
|
function (jsonFonts) {
|
|
fonts = jsonFonts;
|
|
}
|
|
);
|
|
data = json;
|
|
loadSkins();
|
|
Dashboard.hideLoadingMsg();
|
|
checkEasterEggs();
|
|
}
|
|
);
|
|
}
|
|
|
|
function loadSkins() {
|
|
var cssOptions = document.getElementById("cssOptions");
|
|
|
|
data.forEach((element) => {
|
|
var opt = document.createElement("option");
|
|
opt.appendChild(document.createTextNode(element.name));
|
|
opt.value = element.defaultCss;
|
|
cssOptions.appendChild(opt);
|
|
});
|
|
updateSelectors();
|
|
loadConfig();
|
|
preloadPreviews();
|
|
|
|
}
|
|
|
|
function loadOptions(skin) {
|
|
var html = "";
|
|
html += '<div data-role="controlgroup">';
|
|
skin.categories.forEach((categorie) => {
|
|
if (categorie.options.length != 0) {
|
|
html += getSection(categorie.name);
|
|
}
|
|
|
|
categorie.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);
|
|
} else if (element.type == "selector") {
|
|
html += getSelector(element);
|
|
} else if (element.type == "slider") {
|
|
html += getSlider(element);
|
|
} else if (element.type == "googleFonts") {
|
|
html += getFonts(element);
|
|
} else if (element.type == "blurSlider") {
|
|
html += getBlurSlider(element);
|
|
}
|
|
});
|
|
});
|
|
html += "</fieldset>";
|
|
html +=
|
|
'<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()><span>Set Skin</span></button>';
|
|
html += loadPreviews(skin);
|
|
html += "</div>";
|
|
$("#options").html(html).trigger("create");
|
|
generateFontPicker();
|
|
}
|
|
|
|
function preloadPreviews() {
|
|
data.forEach((skin) => {
|
|
if (skin.previews != undefined) {
|
|
skin.previews.forEach((img) => {
|
|
var image = new Image();
|
|
image.src = img.url;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadPreviews(skin) {
|
|
if (skin.previews == undefined) {
|
|
return "";
|
|
}
|
|
var html = "";
|
|
|
|
html += '<h2 class="sectionTitle" >Previews</h2>';
|
|
skin.previews.forEach((element) => {
|
|
html += getImage(element.url);
|
|
html += getImgnames(element.name);
|
|
});
|
|
return html;
|
|
}
|
|
|
|
function getCheckBox(option, saved) {
|
|
var html = "";
|
|
var checked = saved == "true" ? 'checked="checked"' : "";
|
|
var id = "chkFolder";
|
|
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 +
|
|
'" ' +
|
|
checked +
|
|
" /><span>" +
|
|
name +
|
|
"</span>" +
|
|
getToolTip(option) +
|
|
'</label><div class="fieldDescription checkboxFieldDescription">' +
|
|
description +
|
|
"</div></div>";
|
|
return html;
|
|
}
|
|
function getColorPicker(option, saved) {
|
|
var html = "";
|
|
var id = "favcolor";
|
|
var name = option.name;
|
|
var defaultValue =
|
|
option.default == undefined ? "#000000" : option.default;
|
|
defaultValue = saved == undefined ? defaultValue : saved;
|
|
var css = option.css;
|
|
var description = option.description;
|
|
var mode = option.mode;
|
|
html +=
|
|
'<div class="inputContainer"><label></span>' +
|
|
getToolTip(option) +
|
|
'</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 +
|
|
'<div class="fieldDescription">' +
|
|
description +
|
|
"</div></div>";
|
|
return html;
|
|
}
|
|
function getNumber(option, saved) {
|
|
var html = "";
|
|
var id = "number";
|
|
var name = option.name;
|
|
var css = option.css;
|
|
var step = option.step == undefined ? 1 : option.step;
|
|
var defaultValue = option.default;
|
|
defaultValue = saved == undefined ? defaultValue : saved;
|
|
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="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, saved) {
|
|
var html = "";
|
|
var id = "selector";
|
|
var name = option.name;
|
|
var css = option.css;
|
|
var defaultValue = option.default;
|
|
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, saved) +
|
|
"</select></div>";
|
|
return html;
|
|
}
|
|
var savedGoogleFont;
|
|
|
|
function getFonts(option,saved) {
|
|
var html = "";
|
|
|
|
var name = "Change Font";
|
|
var css =
|
|
"html {font-family: '$',sans-serif ; } body,h1,h2,h3 { font-family: '$' ,sans-serif;}";
|
|
var description = "Change the default fonts";
|
|
//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" id = "googleFonts" data-css= "'+css + '"class="selector" label="'+name+' " onchange="updateFontPreview()">' + getFontOptions(fonts)+'</select></div>'
|
|
//html += '<div class = "fontPreview"> This is a preview </div>';
|
|
//html += '<div id="font-picker"></div><div class = "apply-font"> This is a preview </div>'
|
|
//html += ' <div class="selectContainer"><label>Change Font </label><br> <input id="font-picker" type="text"> </div>';
|
|
html += '<div class="selectContainer"><label>Change Font </label><br> <input class="fonts" data-css= "' + option.css + '">'
|
|
if(saved != undefined){
|
|
savedGoogleFont = saved;
|
|
}
|
|
hasGoogleFont = true;
|
|
return html;
|
|
}
|
|
|
|
function getFontPreview(categories, option, selections, name) {
|
|
var html = "";
|
|
if (name == "Fonts") {
|
|
html +=
|
|
'<div class="fontCont><p style="font-family: ' +
|
|
categories.option.selections.value +
|
|
';">Hello, This is your selected font-family.</p></div>"';
|
|
return html;
|
|
} else {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
function getOptions(option, saved) {
|
|
var html = "";
|
|
var selections = option.selections;
|
|
var css = option.css;
|
|
selections.forEach((element) => {
|
|
var name = element.name;
|
|
var value = element.value;
|
|
var selected = saved == name ? 'selected="selected"' : "";
|
|
html +=
|
|
'<option data-css= "' +
|
|
css +
|
|
'"value=' +
|
|
value +
|
|
selected +
|
|
">" +
|
|
name +
|
|
"</option>";
|
|
});
|
|
return html;
|
|
}
|
|
function getSlider(option, saved) {
|
|
var html = "";
|
|
var id = "slider";
|
|
var name = option.name;
|
|
var css = option.css;
|
|
var step = option.step == undefined ? 1 : option.step;
|
|
var defaultValue = option.default;
|
|
defaultValue = saved == undefined ? defaultValue : saved;
|
|
var description = option.description;
|
|
html +=
|
|
+'<div class="inputContainer">'
|
|
+'<input 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;
|
|
}
|
|
|
|
var blurSliderCount = 0;
|
|
function getBlurSlider(option, saved) {
|
|
|
|
var html = "";
|
|
var id = "blurSlider" + blurSliderCount;
|
|
blurSliderCount++;
|
|
var name = option.name;
|
|
var css = option.css;
|
|
var step = option.step == undefined ? 1 : option.step;
|
|
var defaultValue = option.default;
|
|
defaultValue = saved == undefined ? defaultValue : saved;
|
|
var description = option.description;
|
|
html +=
|
|
'<div class="inputContainer"><label><span>'+name+'</span></label><input type="range" class="slider" value="'+defaultValue+'" oninput ="updateBlur('+ "'" + id + "'" + ')"'+'step="'+step+'" data-css="'+css+'" id="'+id+'" name="'+id+'" min="0" max="40" label="'+name+'">'
|
|
+'<div class="fieldDescription">'+description +'</div>'
|
|
+'</div>'
|
|
+'<div class="img"><img id="'+id+'image"'+'src="https://i.gifer.com/4KL.gif"></div>';
|
|
return html;
|
|
}
|
|
function updateBlur(id){
|
|
var slider = document.getElementById(id);
|
|
var image = document.getElementById(id+'image');
|
|
image.style.filter = "blur("+slider.value + "px)";
|
|
}
|
|
function updateBlurSliders(){
|
|
var sliders = document.getElementsByClassName("slider");
|
|
Array.from(sliders).forEach(slider =>{
|
|
if(slider.id.substring(0, 10)=="blurSlider"){
|
|
updateBlur(slider.id);
|
|
}
|
|
})
|
|
}
|
|
function getImage(url) {
|
|
var html = "";
|
|
html +=
|
|
'<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="' +
|
|
url +
|
|
'">';
|
|
return html;
|
|
}
|
|
|
|
function getImgnames(name) {
|
|
var html = "";
|
|
html += "<legend>" + name + "</legend></fieldset>";
|
|
return html;
|
|
}
|
|
|
|
function getSection(name) {
|
|
var html = "";
|
|
html += "</fieldset>";
|
|
html +=
|
|
'<fieldset class="verticalSection verticalSection-extrabottompadding">';
|
|
html += "<legend>" + name + "</legend>";
|
|
return html;
|
|
}
|
|
|
|
function getToolTip(option) {
|
|
if (option.preview == undefined) {
|
|
return "";
|
|
}
|
|
html = "";
|
|
html +=
|
|
'<div class="tooltip"><span class="material-icons">info</span><span class="tooltiptext">';
|
|
html += '<img src="' + option.preview + '">';
|
|
html += "</span></div>";
|
|
return html;
|
|
}
|
|
|
|
async function createCss() {
|
|
|
|
var savedHtml = "";
|
|
//process checkbox
|
|
var css = $("#cssOptions").val();
|
|
savedHtml += document.getElementById("cssOptions").innerHTML;
|
|
var checkboxes = document.getElementsByClassName("checkbox");
|
|
for (let element of checkboxes) {
|
|
savedHtml += element.innerHTML;
|
|
}
|
|
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";
|
|
});
|
|
var colorPickers = document.getElementsByClassName("color");
|
|
for (let element of colorPickers) {
|
|
savedHtml += element.outerHTML;
|
|
if (element.getAttribute("data-mode") == "rgba") {
|
|
var rgbColor = hexToRgb(element.value);
|
|
color = rgbColor.r + "," + rgbColor.g + "," + rgbColor.b;
|
|
} else {
|
|
color = element.value;
|
|
}
|
|
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) {
|
|
css +=
|
|
element.getAttribute("data-css").replaceAll("$", element.value)
|
|
+"\n";
|
|
}
|
|
|
|
|
|
//procces google Fonts
|
|
if(document.getElementsByClassName("fonts").length > 0 ){
|
|
var fontPickers = Array.from(
|
|
document.getElementsByClassName(
|
|
"fonts"
|
|
)
|
|
)
|
|
for (var i=0 ;i<fontPickers.length;i++){
|
|
var element = fontPickers[i]
|
|
if(element.value != ""){
|
|
var url = "https://fonts.googleapis.com/css?family=" + element.value;
|
|
var promise = await fetch(url)
|
|
var text = await promise.text()
|
|
css += text
|
|
css += element.getAttribute("data-css").replaceAll("$",element.value.replaceAll("+"," "));
|
|
}
|
|
}
|
|
console.log("fuera del loop")
|
|
}
|
|
|
|
return css
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function generateFontPicker() {
|
|
if (hasGoogleFont) {
|
|
createFontPicker()
|
|
}
|
|
}
|
|
|
|
function createFontPicker(){
|
|
$('input.fonts').fontpicker({
|
|
variants: false});
|
|
|
|
if(savedGoogleFont != undefined){
|
|
$('input.fonts').val(savedGoogleFont).trigger('change')
|
|
}
|
|
}
|
|
|
|
function applyFont(font) {
|
|
console.log("You selected font: " + font);
|
|
|
|
// Replace + signs with spaces for css
|
|
font = font.replace(/\+/g, " ");
|
|
|
|
// Split font into family and weight
|
|
font = font.split(":");
|
|
|
|
var fontFamily = font[0];
|
|
var fontWeight = font[1] || 400;
|
|
|
|
// Set selected font on paragraphs
|
|
$("fontPreview").css({
|
|
fontFamily: "'" + fontFamily + "'",
|
|
fontWeight: fontWeight,
|
|
});
|
|
}
|
|
|
|
//$("#font-picker")
|
|
//.fontselect()
|
|
//.on("change", function () {
|
|
// applyFont(this.value);
|
|
//});
|
|
|
|
function getFontOptions(fonts) {
|
|
var html = "";
|
|
var selections = fonts.items;
|
|
selections.forEach((element) => {
|
|
var name = element.family;
|
|
var value = element.family;
|
|
//var selected = saved==name?'selected="selected"' : "";
|
|
var selected = "";
|
|
html +=
|
|
"<option value=" + value + selected + ">" + name + "</option>";
|
|
});
|
|
return html;
|
|
}
|
|
|
|
function updateFontPreview() {
|
|
var preview = document.getElementsByClassName("fontPreview")[0];
|
|
var selectedOption = document.getElementById("googleFonts")
|
|
.selectedOptions[0].innerText;
|
|
var url =
|
|
"https://fonts.googleapis.com/css?family=" +
|
|
selectedOption.replaceAll(" ", "+");
|
|
|
|
fetch(url).then(function (response) {
|
|
response.text().then(function (text) {
|
|
var sheet = document.createElement("style");
|
|
sheet.innerHTML =
|
|
text + ".fontPreview{font-family:'" + selectedOption + "'}";
|
|
preview.appendChild(sheet);
|
|
});
|
|
});
|
|
}
|
|
|
|
function updateSelectors() {
|
|
var selected = document.getElementById("cssOptions");
|
|
var description = document.getElementById("description");
|
|
data.forEach((element) => {
|
|
if (element.name == selected.selectedOptions[0].innerText) {
|
|
loadOptions(element);
|
|
description.innerHTML = element.description;
|
|
}
|
|
});
|
|
updateBlurSliders();
|
|
}
|
|
|
|
var config = undefined;
|
|
|
|
function loadConfig() {
|
|
var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
|
|
|
|
ApiClient.getPluginConfiguration(pluginId).then(function (
|
|
savedConfig
|
|
) {
|
|
config = savedConfig;
|
|
|
|
if (!config) {
|
|
config.selectedSkin = "";
|
|
config.options = [];
|
|
}
|
|
loadSavedOptions();
|
|
});
|
|
}
|
|
|
|
function loadSavedOptions() {
|
|
var skin = undefined;
|
|
data.forEach((element) => {
|
|
if (element.defaultCss == config.selectedSkin) {
|
|
skin = element;
|
|
}
|
|
});
|
|
if (skin == undefined) {
|
|
return;
|
|
}
|
|
var count = 0;
|
|
for (let option of document.getElementById("cssOptions").options) {
|
|
if (option.value == config.selectedSkin) {
|
|
document.getElementById("cssOptions").selectedIndex = count;
|
|
}
|
|
count++;
|
|
}
|
|
|
|
var savedOptions = config.options;
|
|
var html = "";
|
|
html += '<div data-role="controlgroup">';
|
|
skin.categories.forEach((categorie) => {
|
|
if (categorie.options.length != 0) {
|
|
html += getSection(categorie.name);
|
|
}
|
|
var options = categorie.options;
|
|
|
|
options.forEach((element) => {
|
|
var savedValue = undefined;
|
|
var count = 0;
|
|
savedOptions.forEach((savedOption) => {
|
|
if (element.css == savedOption) {
|
|
savedValue = savedOptions[count + 1];
|
|
}
|
|
count++;
|
|
});
|
|
if (element.type == "checkBox") {
|
|
html += getCheckBox(element, savedValue);
|
|
} else if (element.type == "colorPicker") {
|
|
html += getColorPicker(element, savedValue);
|
|
} else if (element.type == "number") {
|
|
html += getNumber(element, savedValue);
|
|
} else if (element.type == "selector") {
|
|
html += getSelector(element, savedValue);
|
|
} else if (element.type == "slider") {
|
|
html += getSlider(element, savedValue);
|
|
} else if (element.type == "googleFonts") {
|
|
html += getFonts(element,savedValue);
|
|
} else if (element.type == "blurSlider") {
|
|
html += getBlurSlider(element, savedValue);
|
|
}
|
|
});
|
|
});
|
|
html += "</fieldset>";
|
|
html +=
|
|
'<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()><span>Set Skin</span></button>';
|
|
html += loadPreviews(skin);
|
|
html += "</div>";
|
|
|
|
$("#options").html(html).trigger("create");
|
|
generateFontPicker()
|
|
|
|
}
|
|
|
|
function saveConfig() {
|
|
var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
|
|
config.selectedSkin = $("#cssOptions").val();
|
|
|
|
var options = [];
|
|
var count = 0;
|
|
data[
|
|
document.getElementById("cssOptions").selectedIndex
|
|
].categories.forEach((categorie) => {
|
|
categorie.options.forEach((option) => {
|
|
options[count] = option.css;
|
|
options[count + 1] = getValue(option);
|
|
count += 2;
|
|
});
|
|
});
|
|
config.options = options;
|
|
|
|
ApiClient.getPluginConfiguration(pluginId).then(function (oldConfig) {
|
|
oldConfig = config;
|
|
ApiClient.updatePluginConfiguration(pluginId, oldConfig).then(
|
|
function (res) {
|
|
Dashboard.processPluginConfigurationUpdateResult(res);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
function getValue(option) {
|
|
var result = "";
|
|
switch (option.type) {
|
|
case "checkBox":
|
|
Array.from(
|
|
document.getElementsByClassName("checkbox emby-checkbox")
|
|
).forEach((element) => {
|
|
if (option.css == element.getAttribute("data-css")) {
|
|
result = element.checked ? "true" : "false";
|
|
}
|
|
|
|
});
|
|
break;
|
|
case "number":
|
|
Array.from(
|
|
document.getElementsByClassName("number emby-input")
|
|
).forEach((element) => {
|
|
if (option.css == element.getAttribute("data-css")) {
|
|
result = element.value;
|
|
}
|
|
|
|
});
|
|
break;
|
|
case "colorPicker":
|
|
Array.from(document.getElementsByClassName("color")).forEach(
|
|
(element) => {
|
|
if (option.css == element.getAttribute("data-css")) {
|
|
result = element.value;
|
|
}
|
|
}
|
|
);
|
|
break;
|
|
case "slider":
|
|
case "blurSlider":
|
|
Array.from(document.getElementsByClassName("slider")).forEach(
|
|
(element) => {
|
|
if (option.css == element.getAttribute("data-css")) {
|
|
result = element.value;
|
|
}
|
|
}
|
|
);
|
|
break;
|
|
|
|
case "selector":
|
|
Array.from(
|
|
document.getElementsByClassName(
|
|
"selector emby-select-withcolor emby-select"
|
|
)
|
|
).forEach((element) => {
|
|
if (option.css == element.getAttribute("data-css")) {
|
|
result = element.selectedOptions[0].innerText;
|
|
}
|
|
|
|
|
|
});
|
|
break;
|
|
case "googleFonts":
|
|
Array.from(
|
|
document.getElementsByClassName(
|
|
"fonts"
|
|
)
|
|
).forEach((element) => {
|
|
if (option.css == element.getAttribute("data-css")) {
|
|
result = element.value;
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
return result;
|
|
}
|
|
function checkEasterEggs() {
|
|
var d = new Date();
|
|
|
|
if (
|
|
(d.getDate() >= 18 && d.getMonth() == 11) ||
|
|
(d.getDate() <= 10 && d.getMonth() == 0)
|
|
) {
|
|
//startChristmas();
|
|
}
|
|
}
|
|
|
|
function startChristmas() {
|
|
$.getScript(
|
|
"https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js",
|
|
function () {
|
|
var sf = new Snowflakes({
|
|
count: 200,
|
|
maxSize: 25,
|
|
});
|
|
}
|
|
);
|
|
}
|
|
async function setSkin() {
|
|
saveConfig();
|
|
ApiClient.getServerConfiguration().then(function (config) {
|
|
ApiClient.updateServerConfiguration(config).then(function () {
|
|
ApiClient.getNamedConfiguration("branding").then(async function (
|
|
brandingConfig
|
|
) {
|
|
createCss().then(r=>{
|
|
console.log("despues de then")
|
|
brandingConfig.CustomCss = r;
|
|
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();
|
|
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>
|
|
<style>
|
|
img {
|
|
width: 100%;
|
|
}
|
|
fieldset.verticalSection.verticalSection-extrabottompadding {
|
|
border: 1px solid #333333;
|
|
border-radius: 10px;
|
|
}
|
|
legend {
|
|
font-size: 135%;
|
|
}
|
|
|
|
.img{
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
border-bottom: 1px dotted black;
|
|
}
|
|
|
|
.tooltip .tooltiptext {
|
|
visibility: hidden;
|
|
width: 400px;
|
|
background-color: transparent;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px 0;
|
|
|
|
/* Position the tooltip */
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -5px;
|
|
left: 105%;
|
|
}
|
|
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
input#favcolor {
|
|
width: 100%;
|
|
height: 3em !important;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
|
|
.font-select * {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.font-select {
|
|
font-size: 16px;
|
|
width: 100%;
|
|
position: relative;
|
|
display: inline-block;
|
|
border-color: red;
|
|
}
|
|
|
|
.font-select .fs-drop {
|
|
position: absolute;
|
|
top: 38px;
|
|
left: 0;
|
|
z-index: 999;
|
|
background: #292929;
|
|
color: #fff;
|
|
width: 100%;
|
|
border: 1px solid #aaa;
|
|
border-top: 0;
|
|
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
}
|
|
|
|
.font-select > span {
|
|
outline: 0;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid #ced4da;
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
height: 38px;
|
|
line-height: 32px;
|
|
padding: 3px 8px 3px 8px;
|
|
color: #fff;
|
|
background: #292929 url(https://cosycorner.co.nz/wp-content/uploads/revslider/slider-1/white-down-arrow-png-2.png) no-repeat right 0.75em center/8px 9px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
background-size: 1.15em;
|
|
}
|
|
|
|
.font-select-active > span {
|
|
background-color: #292929;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.font-select .fs-results {
|
|
max-height: 190px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.font-select .fs-results li {
|
|
line-height: 80%;
|
|
padding: 8px;
|
|
margin: 0;
|
|
list-style: none;
|
|
font-size: 18px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.font-select .fs-results li.active {
|
|
background-color: #3875d7;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.font-select .fs-search {
|
|
border-bottom: 1px solid #aaa;
|
|
padding: 4px;
|
|
background: #292929;
|
|
}
|
|
|
|
.font-select .fs-search input {
|
|
padding: 7px;
|
|
width: 100%;
|
|
border: 1px solid #aaa;
|
|
font: 16px Helvetica, Sans-serif;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
border-radius: 0.1875rem;
|
|
background: #292929;
|
|
color: #fff
|
|
}
|
|
|
|
.font-picker{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:#000;pointer-events:auto}.font-picker *{-webkit-box-sizing:border-box;box-sizing:border-box}.font-picker.fp-select{display:inline-block;outline:0;border-radius:.25rem;border:1px solid #ced4da;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:28px;padding:3px 26px 3px 8px;color:#444;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:16px}.fp-row,.fp-btns{display:flex}.fp-row>input,.fp-row>select{flex:1}.fp-favorite{display:inline-block;width:24px;height:24px;margin-right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat}.fp-favorite.checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-3.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9z' fill='%23d00'/%3E%3C/svg%3E")}.font-picker .fp-btn{display:inline-block;background-color:#24272b;color:#fff;padding:3px 8px;font-size:14px;border-radius:5px;border:none;cursor:pointer}.font-picker .fp-btn:hover{background-color:#333;-webkit-box-shadow:0 0 4px #ddd;box-shadow:0 0 4px #ddd}.font-picker .fp-btn:active{background-color:#fff;color:#000}.font-picker .fp-btns{position:absolute;top:6px;right:12px}.font-picker .fp-btn.apply{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.font-picker .fp-header{flex:none;border-bottom:1px solid #dee2e6;padding:4px 8px;font-size:20px}.font-picker .fp-header h5{margin:0;line-height:1.5;font-weight:500}.font-picker .fp-header .fp-icons{float:right;margin-top:-2px}.font-picker .fp-header .fp-icons>span{cursor:pointer}.fp-modal-open{overflow:hidden}.font-picker .fp-modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100%;height:100%;background-color:#000;opacity:.5}.font-picker .fp-modal{display:none;flex-flow:column;position:fixed;height:800px;max-height:95%;width:400px;max-width:95%;background:#fff;z-index:1050;box-shadow:0 4px 5px rgba(0,0,0,.15);border-radius:4px;left:50%;transform:translateX(-50%);top:15px;bottom:15px}.font-picker .fp-filter{font-size:12px;border-bottom:1px solid #aaa;padding:6px;flex:none}.font-picker .fp-lang,.font-picker .fp-search{width:100%;font-size:13px;border:1px solid #ced4da;color:#495057;box-shadow:inset 0 1px 3px rgba(0,0,0,.06);border-radius:.1875rem}.font-picker .fp-search:focus{box-shadow:0 0 0 2px #bfdeff}.font-picker .fp-search-wrap{position:relative}.font-picker .fp-clear{margin-left:8px;vertical-align:-2px;width:16px;height:16px;display:inline-block;cursor:pointer;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath fill='%23aaa' d='M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M718.5,631.1c24.1,24.1,24.1,63.3,0,87.4s-63.3,24.1-87.4,0L500,587.4L368.9,718.5c-24.1,24.1-63.3,24.1-87.4,0c-24.1-24.1-24.1-63.3,0-87.4L412.6,500L281.5,368.9c-24.1-24.1-24.1-63.3,0-87.4c24.1-24.1,63.3-24.1,87.4,0L500,412.6l131.1-131.1c24.1-24.1,63.3-24.1,87.4,0s24.1,63.3,0,87.4L587.4,500L718.5,631.1z'/%3e%3c/svg%3e") no-repeat right center/16px 16px}.font-picker .fp-search-wrap .fp-clear{position:absolute;top:6px;right:4px}.font-picker .fp-lang{padding:4px 2px;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:0}.font-picker .fp-search{padding:5px 6px}.font-picker .fp-sample{flex:none;border-bottom:1px solid #ced4da;font-size:18px;height:50px;padding:0 6px;line-height:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-picker .hr{border-bottom:1px solid #ced4da;margin:6px -6px}.font-picker .fp-divider{background-color:#eee;color:#666;font-size:14px!important;padding:6px 8px;border-bottom:1px solid #ced4da;border-top:1px solid #ced4da;text-align:center;cursor:default!important}.font-picker [contenteditable]{outline:none}.font-picker .fp-results{list-style:none;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;-webkit-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;outline:none}.font-picker .fp-results li{padding:6px 8px;list-style:none;font-size:16px;white-space:nowrap;cursor:pointer}.font-picker .fp-results li>small{font-size:10px;color:#999;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.font-picker .fp-results li.fp-hover{background-color:#d5e2f6}.font-picker .fp-results li.fp-active{background-color:#3875d7;color:#fff;font-size:18px;padding:8px;position:relative}.font-picker .fp-results li.fp-active small{color:#fff}.font-picker .fp-variants{margin-top:3px;font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.font-picker .fp-pill{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;padding:2px 6px;margin-bottom:2px;white-space:nowrap;border-radius:5rem;background-color:#eee;color:#555;cursor:pointer}.font-picker .fp-variants .fp-pill{padding:1px 4px;border-radius:5rem;background-color:#eee;color:#555}.font-picker .fp-pill.checked{background-color:#000;color:#fff}.font-picker .fp-variants .fp-pill.italic{font-style:italic}.font-picker .fp-variants .fp-pill.italic.checked{background-color:#804;font-style:italic}
|
|
</style>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|