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

Merge pull request #7 from danieladov/cssEditor

Browse Source 
Css editor
This commit is contained in:
Prayag
2020-12-11 19:04:51 +05:30
committed by GitHub
parent 5e8c3e00d6 468334bb0b
commit 6f18c554f7
1 changed files with 73 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,7 +55,8 @@
updateSelectors() updateSelectors()
} }
function loadOptions(options){ function loadOptions(skin){
var options = skin.options;
var page = $.mobile.activePage; var page = $.mobile.activePage;
var html = ""; var html = "";
html += '<div data-role="controlgroup">'; html += '<div data-role="controlgroup">';
@@ -72,9 +73,20 @@
html += getSlider(element); html += getSlider(element);
} }
}); });
html += loadPreviews(skin);
html += '</div>'; html += '</div>';
$('#options', page).html(html).trigger('create'); $('#options', page).html(html).trigger('create');
} }
function loadPreviews(skin){
var html = "";
skin.previews.forEach(element => {
html += getImage(element.url);
});
return html;
}
function getCheckBox ( option) { function getCheckBox ( option) {
var html = ""; var html = "";
var id = "chkFolder" ; var id = "chkFolder" ;
@@ -120,55 +132,65 @@
html += '<div class="selectContainer"><select is="emby-select" data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option)+'</select></div>' html += '<div class="selectContainer"><select is="emby-select" data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option)+'</select></div>'
return html; return html;
} }
function getOptions(option){ function getOptions(option){
var html = ""; var html = "";
var selections = option.selections var selections = option.selections
var css = option.css; var css = option.css;
selections.forEach(element=>{ selections.forEach(element=>{
var name = element.name; var name = element.name;
html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>' html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
}) })
return html; return html;
}
function getSlider(option){
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;
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 getSlider(option){ function getImage(url){
var html = ""; var html = "";
var id = "slider" ; html += '<img src="'+url+'">';
var name = option.name; return html;
var css = option.css; }
var step = option.step==undefined?1:option.step;
var defaultValue = option.default;
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 createCss(){ function createCss(){
var savedHtml = ""; var savedHtml = "";
//process checkbox //process checkbox
var css = $('#cssOptions').val(); var css = $('#cssOptions').val();
savedHtml += document.getElementById("cssOptions").innerHTML; savedHtml += document.getElementById("cssOptions").innerHTML;
var checkboxes = document.getElementsByClassName("checkbox"); var checkboxes = document.getElementsByClassName("checkbox");
for (let element of checkboxes) { for (let element of checkboxes) {
savedHtml += element.innerHTML; savedHtml += element.innerHTML;
} }
var selectedOptions = $('.checkbox:checked').map(function () { var selectedOptions = $('.checkbox:checked').map(function () {
return this.getAttribute('data-css'); return this.getAttribute('data-css');
}).get(); }).get();
selectedOptions.forEach(element => { selectedOptions.forEach(element => {
css += element +"\n"; css += element +"\n";
}); });
//proccess selector //proccess selector
var selectors = document.getElementsByClassName("selector"); var selectors = document.getElementsByClassName("selector");
for (let element of selectors) { for (let element of selectors) {
css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
savedHtml += element.outerHTML; savedHtml += element.outerHTML;
} }
//process colorPicker //process colorPicker
selectedOptions.forEach(element=>{ selectedOptions.forEach(element=>{
css += element + "\n"; css += element + "\n";
}) })
var colorPickers = document.getElementsByClassName("color"); var colorPickers = document.getElementsByClassName("color");
for (let element of colorPickers) { for (let element of colorPickers) {
savedHtml += element.outerHTML savedHtml += element.outerHTML
if(element.getAttribute("data-mode")=="rgba"){ if(element.getAttribute("data-mode")=="rgba"){
var rgbColor = hexToRgb( element.value); var rgbColor = hexToRgb( element.value);
@@ -178,30 +200,41 @@
} }
css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n"; css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n";
} }
//procces number selector //procces number selector
var numberSelectors = document.getElementsByClassName("number"); var numberSelectors = document.getElementsByClassName("number");
for (let element of numberSelectors) { for (let element of numberSelectors) {
savedHtml += element.outerHTML; savedHtml += element.outerHTML;
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
} }
//procces slider //procces slider
var sliders = document.getElementsByClassName("slider"); var sliders = document.getElementsByClassName("slider");
for (let element of sliders) { for (let element of sliders) {
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n"; css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
} }
return css; return css;
} }
function updateSelectors(){ function updateSelectors(){
var selected = document.getElementById("cssOptions"); var selected = document.getElementById("cssOptions");
var description = document.getElementById("description"); var description = document.getElementById("description");
data.forEach(element=>{ data.forEach(element=>{
if(element.name == selected.selectedOptions[0].innerText){ if(element.name == selected.selectedOptions[0].innerText){
loadOptions(element.options); loadOptions(element);
description.innerHTML=element.description; description.innerHTML=element.description;
} }
}) })
} }
function setSkin() { function setSkin() {
ApiClient.getServerConfiguration().then(function (config) { ApiClient.getServerConfiguration().then(function (config) {
ApiClient.updateServerConfiguration(config).then(function() { ApiClient.updateServerConfiguration(config).then(function() {