mirror of
https://github.com/danieladov/jellyfin-plugin-skin-manager.git
synced 2026-01-18 16:37:31 +01:00
Update my Repo
This commit is contained in:
Prayag
@@ -101,7 +101,7 @@
|
||||
} else if (element.type == "slider") {
|
||||
html += getSlider(element);
|
||||
} else if (element.type == "googleFonts") {
|
||||
html += getFonts(fonts);
|
||||
html += getFonts();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -244,6 +244,26 @@
|
||||
"</select></div>";
|
||||
return html;
|
||||
}
|
||||
var savedGoogleFont;
|
||||
|
||||
function getFonts(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>';
|
||||
if(saved != undefined){
|
||||
savedGoogleFont = saved;
|
||||
}
|
||||
hasGoogleFont = true;
|
||||
return html;
|
||||
}
|
||||
|
||||
function getFontPreview(categories, option, selections, name) {
|
||||
var html = "";
|
||||
@@ -341,7 +361,7 @@
|
||||
return html;
|
||||
}
|
||||
|
||||
function createCss() {
|
||||
async function createCss() {
|
||||
var savedHtml = "";
|
||||
//process checkbox
|
||||
var css = $("#cssOptions").val();
|
||||
@@ -402,26 +422,33 @@
|
||||
element.getAttribute("data-css").replaceAll("$", element.value) +
|
||||
"\n";
|
||||
}
|
||||
return css;
|
||||
|
||||
|
||||
//procces google Fonts
|
||||
|
||||
if(document.getElementById("font-picker") != undefined){
|
||||
var font = document.getElementById("font-picker").value
|
||||
var url = "https://fonts.googleapis.com/css?family=" + font;
|
||||
var promise = await fetch(url);
|
||||
css += await promise.text();
|
||||
css += "html {font-family: '$',sans-serif ; } body,h1,h2,h3 { font-family: '$' ,sans-serif;}".replaceAll("$",font.replaceAll("+"," "));
|
||||
|
||||
return css;
|
||||
// fetch(url).then(function (response) {
|
||||
// response.text().then(function (text) {
|
||||
// css += text;
|
||||
// return css;
|
||||
// });
|
||||
// });
|
||||
|
||||
}else{
|
||||
return css;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function getFonts(json) {
|
||||
var fonts = undefined;
|
||||
var html = "";
|
||||
fonts = json;
|
||||
var id = "selector";
|
||||
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 += ' <input id="font-picker" type="text">';
|
||||
hasGoogleFont = true;
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
function generateFontPicker() {
|
||||
if (hasGoogleFont) {
|
||||
@@ -440,8 +467,14 @@
|
||||
"|"
|
||||
),
|
||||
});
|
||||
|
||||
if(savedGoogleFont != undefined){
|
||||
$('#font-picker').trigger('setFont',[savedGoogleFont,900])
|
||||
}
|
||||
});
|
||||
$("#font-picker").trigger("setFont", ["Orbitron", 900]);
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -577,6 +610,8 @@
|
||||
html += getSelector(element, savedValue);
|
||||
} else if (element.type == "slider") {
|
||||
html += getSlider(element, savedValue);
|
||||
} else if (element.type == "googleFonts") {
|
||||
html += getFonts(savedValue);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -586,6 +621,8 @@
|
||||
html += loadPreviews(skin);
|
||||
html += "</div>";
|
||||
$("#options").html(html).trigger("create");
|
||||
generateFontPicker();
|
||||
|
||||
}
|
||||
|
||||
function saveConfig() {
|
||||
@@ -624,7 +661,9 @@
|
||||
if (option.css == element.getAttribute("data-css")) {
|
||||
result = element.checked ? "true" : "false";
|
||||
}
|
||||
|
||||
});
|
||||
break;
|
||||
case "number":
|
||||
Array.from(
|
||||
document.getElementsByClassName("number emby-input")
|
||||
@@ -632,7 +671,9 @@
|
||||
if (option.css == element.getAttribute("data-css")) {
|
||||
result = element.value;
|
||||
}
|
||||
|
||||
});
|
||||
break;
|
||||
case "colorPicker":
|
||||
Array.from(document.getElementsByClassName("color")).forEach(
|
||||
(element) => {
|
||||
@@ -641,6 +682,7 @@
|
||||
}
|
||||
}
|
||||
);
|
||||
break;
|
||||
case "slider":
|
||||
Array.from(document.getElementsByClassName("slider")).forEach(
|
||||
(element) => {
|
||||
@@ -649,6 +691,7 @@
|
||||
}
|
||||
}
|
||||
);
|
||||
break;
|
||||
case "selector":
|
||||
Array.from(
|
||||
document.getElementsByClassName(
|
||||
@@ -658,7 +701,13 @@
|
||||
if (option.css == element.getAttribute("data-css")) {
|
||||
result = element.selectedOptions[0].innerText;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
break;
|
||||
case "googleFonts":
|
||||
result += document.getElementById("font-picker").value.replaceAll("+"," ");
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
@@ -684,14 +733,14 @@
|
||||
}
|
||||
);
|
||||
}
|
||||
function setSkin() {
|
||||
async function setSkin() {
|
||||
saveConfig();
|
||||
ApiClient.getServerConfiguration().then(function (config) {
|
||||
ApiClient.updateServerConfiguration(config).then(function () {
|
||||
ApiClient.getNamedConfiguration("branding").then(function (
|
||||
ApiClient.getNamedConfiguration("branding").then(async function (
|
||||
brandingConfig
|
||||
) {
|
||||
brandingConfig.CustomCss = createCss();
|
||||
brandingConfig.CustomCss = await createCss();
|
||||
ApiClient.updateNamedConfiguration(
|
||||
"branding",
|
||||
brandingConfig
|
||||
@@ -754,49 +803,10 @@
|
||||
legend {
|
||||
font-size: 135%;
|
||||
}
|
||||
.font-select {
|
||||
width: 100%;
|
||||
}
|
||||
.font-select-active > span {
|
||||
background-color: #292929;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.font-select .fs-search input {
|
||||
background: #292929;
|
||||
border-bottom: 1px solid #292929;
|
||||
}
|
||||
.fs-drop {
|
||||
color: white !important;
|
||||
}
|
||||
.font-select .fs-drop {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background: #292929;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
border: 1px solid #292929;
|
||||
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: .07em solid #292929;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 38px;
|
||||
line-height: 32px;
|
||||
padding: 3px 8px 3px 8px;
|
||||
color: inherit;
|
||||
user-select: none;
|
||||
background: #292929;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -830,6 +840,7 @@
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
.font-select * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
@@ -840,6 +851,7 @@
|
||||
width: 240px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.font-select .fs-drop {
|
||||
@@ -847,13 +859,14 @@
|
||||
top: 38px;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
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 {
|
||||
@@ -867,8 +880,8 @@
|
||||
height: 38px;
|
||||
line-height: 32px;
|
||||
padding: 3px 8px 3px 8px;
|
||||
color: #444;
|
||||
background: #fff
|
||||
color: #fff;
|
||||
background: #292929
|
||||
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 0.75rem center/8px 10px;
|
||||
-webkit-user-select: none;
|
||||
@@ -878,7 +891,7 @@
|
||||
}
|
||||
|
||||
.font-select-active > span {
|
||||
background-color: #eee;
|
||||
background-color: #292929;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@@ -909,6 +922,7 @@
|
||||
.font-select .fs-search {
|
||||
border-bottom: 1px solid #aaa;
|
||||
padding: 4px;
|
||||
background: #292929;
|
||||
}
|
||||
|
||||
.font-select .fs-search input {
|
||||
@@ -918,6 +932,8 @@
|
||||
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
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user