From 90ac04ca0256bf7f68c0afb13d2b0eb4c52dd307 Mon Sep 17 00:00:00 2001 From: Mister Rajoy Date: Mon, 11 Jan 2021 01:32:12 +0100 Subject: [PATCH 1/4] Change font selector css --- .../Configuration/configurationpage.html | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html index e42f119..9e2b304 100644 --- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html +++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html @@ -754,6 +754,8 @@ legend { font-size: 135%; } + + From 42fae9cffdcb37db14e38aea892adfde81fdd51c Mon Sep 17 00:00:00 2001 From: Mister Rajoy Date: Mon, 11 Jan 2021 02:50:18 +0100 Subject: [PATCH 2/4] Update skins-3.0.json --- skins-3.0.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/skins-3.0.json b/skins-3.0.json index 97eb108..c49c703 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -304,7 +304,8 @@ "default": "1.8" }, { - "type": "googleFonts" + "type": "googleFonts" + "css" : "/*googleFonts*/" }, { "type": "colorPicker", From 6132e8827a9ccc530cb1706f12d97391012e0c7d Mon Sep 17 00:00:00 2001 From: Mister Rajoy Date: Mon, 11 Jan 2021 02:54:09 +0100 Subject: [PATCH 3/4] Update skins-3.0.json --- skins-3.0.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skins-3.0.json b/skins-3.0.json index c49c703..f957315 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -304,7 +304,7 @@ "default": "1.8" }, { - "type": "googleFonts" + "type": "googleFonts", "css" : "/*googleFonts*/" }, { From a4859c24ca99910c912a355ce8f00a5956fdbed8 Mon Sep 17 00:00:00 2001 From: Mister Rajoy Date: Mon, 11 Jan 2021 03:09:38 +0100 Subject: [PATCH 4/4] Add google font parser --- .../Configuration/configurationpage.html | 93 ++++++++++++++----- 1 file changed, 71 insertions(+), 22 deletions(-) diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html index 9e2b304..d53c3fc 100644 --- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html +++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html @@ -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 @@ ""; 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 += '
'; + //html += '
' + //html += '
This is a preview
'; + //html += '
This is a preview
' + html += '

'; + 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,27 +422,34 @@ element.getAttribute("data-css").replaceAll("$", element.value) + "\n"; } + + + //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 += '
'; - //html += '
' - //html += '
This is a preview
'; - //html += '
This is a preview
' - html += ' '; - hasGoogleFont = true; - return html; } + + function generateFontPicker() { if (hasGoogleFont) { $(function () { @@ -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 += ""; $("#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