mirror of
https://github.com/danieladov/jellyfin-plugin-skin-manager.git
synced 2026-03-18 21:30:33 +01:00
Theme previews
This commit is contained in:
Prayag
GitHub
@@ -1,301 +1,296 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Skin Manager</title>
|
<title>Skin Manager</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" data-require="emby-input,emby-button">
|
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" data-require="emby-input,emby-button">
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
<form class="tbsConfigurationPage">
|
<form class="tbsConfigurationPage">
|
||||||
<div class="sectionTitleContainer flex align-items-center">
|
<div class="sectionTitleContainer flex align-items-center">
|
||||||
<h2 class="sectionTitle">Skin Manager</h2>
|
<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>
|
||||||
<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 class="verticalSection">
|
||||||
</div>
|
<p> Select the skin you want to install and click Set Skin </p>
|
||||||
<div class="verticalSection">
|
<br> </div>
|
||||||
<p>
|
<div class="allOptions">
|
||||||
Select the skin you want to install and click Set Skin
|
<div class="selectContainer">
|
||||||
</p>
|
<label for="css">Skin</label>
|
||||||
<br>
|
<select is="emby-select" id="cssOptions" onchange="updateSelectors()"></select>
|
||||||
</div>
|
<br>
|
||||||
<div class="allOptions">
|
<div class="fieldDescription" id="description"></div>
|
||||||
<div class="selectContainer">
|
</div>
|
||||||
<label for="css">Skin</label>
|
<div class="checkboxList checkboxList-verticalwrap" id="options"></div>
|
||||||
<select is="emby-select" id="cssOptions" onchange="updateSelectors()"></select>
|
<br> </div>
|
||||||
<br>
|
<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()> <span>Set Skin</span> </button>
|
||||||
<div class="fieldDescription" id="description"></div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkboxList checkboxList-verticalwrap" id ="options"></div>
|
</div>
|
||||||
<br>
|
<script type="text/javascript">
|
||||||
</div>
|
var data;
|
||||||
<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()>
|
Dashboard.showLoadingMsg();
|
||||||
<span>Set Skin</span>
|
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/cssEditor/skins-3.0.json', function(json) {
|
||||||
</button>
|
data = json;
|
||||||
</form>
|
loadSkins();
|
||||||
</div>
|
Dashboard.hideLoadingMsg();
|
||||||
</div>
|
});
|
||||||
<script type="text/javascript">
|
|
||||||
var data;
|
|
||||||
Dashboard.showLoadingMsg();
|
|
||||||
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/cssEditor/skins-3.0.json', function(json) {
|
|
||||||
data=json;
|
|
||||||
loadSkins();
|
|
||||||
Dashboard.hideLoadingMsg();
|
|
||||||
});
|
|
||||||
function loadSkins(){
|
|
||||||
var cssOptions = document.getElementById("cssOptions");
|
|
||||||
var skinVersions = document.getElementById("skinVersions");
|
|
||||||
var versionDescription = document.getElementById("versionDescription");
|
|
||||||
data.forEach(element => {
|
|
||||||
var opt = document.createElement("option");
|
|
||||||
opt.appendChild(document.createTextNode(element.name));
|
|
||||||
opt.value=element.defaultCss;
|
|
||||||
cssOptions.appendChild(opt);
|
|
||||||
});
|
|
||||||
updateSelectors()
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadOptions(skin){
|
function loadSkins() {
|
||||||
var options = skin.options;
|
var cssOptions = document.getElementById("cssOptions");
|
||||||
var page = $.mobile.activePage;
|
var skinVersions = document.getElementById("skinVersions");
|
||||||
var html = "";
|
var versionDescription = document.getElementById("versionDescription");
|
||||||
html += '<div data-role="controlgroup">';
|
data.forEach(element => {
|
||||||
options.forEach(element=>{
|
var opt = document.createElement("option");
|
||||||
if(element.type == "checkBox"){
|
opt.appendChild(document.createTextNode(element.name));
|
||||||
html += getCheckBox(element);
|
opt.value = element.defaultCss;
|
||||||
}else if(element.type == "colorPicker"){
|
cssOptions.appendChild(opt);
|
||||||
html += getColorPicker(element);
|
});
|
||||||
}else if(element.type == "number"){
|
updateSelectors()
|
||||||
html += getNumber(element);
|
}
|
||||||
}else if(element.type == "selector"){
|
|
||||||
html += getSelector(element);
|
|
||||||
}else if(element.type == "slider"){
|
|
||||||
html += getSlider(element);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
html += loadPreviews(skin);
|
|
||||||
html += '</div>';
|
|
||||||
$('#options', page).html(html).trigger('create');
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadPreviews(skin){
|
function loadOptions(skin) {
|
||||||
var html = "";
|
var options = skin.options;
|
||||||
skin.previews.forEach(element => {
|
var page = $.mobile.activePage;
|
||||||
html += getImgnames(element.name);
|
var html = "";
|
||||||
html += getImage(element.url);
|
html += '<div data-role="controlgroup">';
|
||||||
});
|
options.forEach(element => {
|
||||||
return html;
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
html += loadPreviews(skin);
|
||||||
|
html += '</div>';
|
||||||
|
$('#options', page).html(html).trigger('create');
|
||||||
|
}
|
||||||
|
|
||||||
function getCheckBox ( option) {
|
function loadPreviews(skin) {
|
||||||
var html = "";
|
var html = "";
|
||||||
var id = "chkFolder" ;
|
skin.previews.forEach(element => {
|
||||||
var name = option.name;
|
html += getImgnames(element.name);
|
||||||
var css = option.css;
|
html += getImage(element.url);
|
||||||
var description = option.description;
|
});
|
||||||
|
return html;
|
||||||
//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" ;
|
|
||||||
var name = option.name;
|
|
||||||
var defaultValue = option.default;
|
|
||||||
var css = option.css;
|
|
||||||
var description = option.description;
|
|
||||||
var mode = option.mode;
|
|
||||||
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" ;
|
|
||||||
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 += '<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){
|
|
||||||
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)+'</select></div>'
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
function getOptions(option){
|
|
||||||
var html = "";
|
|
||||||
var selections = option.selections
|
|
||||||
var css = option.css;
|
|
||||||
selections.forEach(element=>{
|
|
||||||
var name = element.name;
|
|
||||||
html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
|
|
||||||
})
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
function getSlider(option){
|
|
||||||
|
|
||||||
var html = "";
|
function getCheckBox(option) {
|
||||||
var id = "slider" ;
|
var html = "";
|
||||||
var name = option.name;
|
var id = "chkFolder";
|
||||||
var css = option.css;
|
var name = option.name;
|
||||||
var step = option.step==undefined?1:option.step;
|
var css = option.css;
|
||||||
var defaultValue = option.default;
|
var description = option.description;
|
||||||
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="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>'
|
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
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
function getColorPicker(option) {
|
||||||
function getImage(url){
|
var html = "";
|
||||||
var html = "";
|
var id = "favcolor";
|
||||||
html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
|
var name = option.name;
|
||||||
return html;
|
var defaultValue = option.default;
|
||||||
}
|
var css = option.css;
|
||||||
|
var description = option.description;
|
||||||
|
var mode = option.mode;
|
||||||
|
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 getImgnames(name){
|
function getNumber(option) {
|
||||||
var html = "";
|
var html = "";
|
||||||
html += '<legend>'+name+'</legend></fieldset>';
|
var id = "number";
|
||||||
return html;
|
var name = option.name;
|
||||||
}
|
var css = option.css;
|
||||||
|
var step = option.step == undefined ? 1 : option.step;
|
||||||
function createCss(){
|
var defaultValue = option.default;
|
||||||
var savedHtml = "";
|
var description = option.description;
|
||||||
//process checkbox
|
//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>';
|
||||||
var css = $('#cssOptions').val();
|
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>'
|
||||||
savedHtml += document.getElementById("cssOptions").innerHTML;
|
return html;
|
||||||
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
|
function getSelector(option) {
|
||||||
var numberSelectors = document.getElementsByClassName("number");
|
var html = "";
|
||||||
for (let element of numberSelectors) {
|
var id = "selector";
|
||||||
savedHtml += element.outerHTML;
|
var name = option.name;
|
||||||
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
|
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) + '</select></div>'
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
//procces slider
|
function getOptions(option) {
|
||||||
var sliders = document.getElementsByClassName("slider");
|
var html = "";
|
||||||
for (let element of sliders) {
|
var selections = option.selections
|
||||||
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
|
var css = option.css;
|
||||||
}
|
selections.forEach(element => {
|
||||||
return css;
|
var name = element.name;
|
||||||
}
|
html += '<option data-css= "' + css + '"value=' + name + '>' + name + '</option>'
|
||||||
|
})
|
||||||
|
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 updateSelectors(){
|
function getImage(url) {
|
||||||
var selected = document.getElementById("cssOptions");
|
var html = "";
|
||||||
var description = document.getElementById("description");
|
html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="' + url + '">';
|
||||||
data.forEach(element=>{
|
return html;
|
||||||
if(element.name == selected.selectedOptions[0].innerText){
|
}
|
||||||
loadOptions(element);
|
|
||||||
description.innerHTML=element.description;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
function getImgnames(name) {
|
||||||
|
var html = "";
|
||||||
|
html += '<legend>' + name + '</legend></fieldset>';
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
return css;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSkin() {
|
||||||
|
ApiClient.getServerConfiguration().then(function(config) {
|
||||||
|
ApiClient.updateServerConfiguration(config).then(function() {
|
||||||
|
ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
|
||||||
|
brandingConfig.CustomCss = createCss();
|
||||||
|
ApiClient.updateNamedConfiguration('branding', brandingConfig).then(function() {
|
||||||
|
Dashboard.processServerConfigurationUpdateResult();
|
||||||
|
window.location.reload(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function setSkin() {
|
function hexToRgb(hex) {
|
||||||
ApiClient.getServerConfiguration().then(function (config) {
|
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||||
ApiClient.updateServerConfiguration(config).then(function() {
|
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||||
ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
|
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
||||||
brandingConfig.CustomCss = createCss();
|
return r + r + g + g + b + b;
|
||||||
ApiClient.updateNamedConfiguration('branding', brandingConfig).then(function () {
|
});
|
||||||
Dashboard.processServerConfigurationUpdateResult();
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||||
window.location.reload(true);
|
return result ? {
|
||||||
});
|
r: parseInt(result[1], 16),
|
||||||
});
|
g: parseInt(result[2], 16),
|
||||||
});
|
b: parseInt(result[3], 16)
|
||||||
});
|
} : null;
|
||||||
}
|
}
|
||||||
function hexToRgb(hex) {
|
</script>
|
||||||
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
<script type="text/javascript">
|
||||||
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
var plugin = {
|
||||||
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3'
|
||||||
return r + r + g + g + b + b;
|
};
|
||||||
});
|
$('#configPage').on('pageshow', function() {
|
||||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
Dashboard.showLoadingMsg();
|
||||||
return result ? {
|
loadSavedConfig();
|
||||||
r: parseInt(result[1], 16),
|
ApiClient.getPluginConfiguration(plugin.guid).then(function(config) {
|
||||||
g: parseInt(result[2], 16),
|
$('#cssOptions').val(config.selectedCss).change();
|
||||||
b: parseInt(result[3], 16)
|
Dashboard.hideLoadingMsg();
|
||||||
} : null;
|
});
|
||||||
}
|
});
|
||||||
</script>
|
$('#configForm').on('submit', function() {
|
||||||
<script type="text/javascript">
|
Dashboard.showLoadingMsg();
|
||||||
var plugin = {
|
ApiClient.getPluginConfiguration(plugin.guid).then(function(config) {
|
||||||
guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3'
|
config.selectedCss = $('#cssOptions').val();
|
||||||
};
|
ApiClient.updatePluginConfiguration(plugin.guid, config).then(function(result) {
|
||||||
$('#configPage').on('pageshow', function () {
|
Dashboard.processPluginConfigurationUpdateResult(result);
|
||||||
Dashboard.showLoadingMsg();
|
});
|
||||||
loadSavedConfig();
|
});
|
||||||
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
|
return false;
|
||||||
$('#cssOptions').val(config.selectedCss).change();
|
});
|
||||||
Dashboard.hideLoadingMsg();
|
</script>
|
||||||
});
|
<style>
|
||||||
});
|
img {
|
||||||
$('#configForm').on('submit', function () {
|
width: 100%;
|
||||||
Dashboard.showLoadingMsg();
|
}
|
||||||
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
|
|
||||||
config.selectedCss = $('#cssOptions').val();
|
fieldset.verticalSection.verticalSection-extrabottompadding {
|
||||||
ApiClient.updatePluginConfiguration(plugin.guid, config).then(function (result) {
|
border: 1px dotted #2d2d2d;
|
||||||
Dashboard.processPluginConfigurationUpdateResult(result);
|
}
|
||||||
});
|
|
||||||
});
|
legend {
|
||||||
return false;
|
font-size: 135%;
|
||||||
});
|
}
|
||||||
</script>
|
</style>
|
||||||
<style>
|
</div>
|
||||||
img{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user