Managed to move js styling to css file and inject it during load.
This commit is contained in:
27
Jellyfin.Plugin.MediaCleaner/Pages/home.css
Normal file
27
Jellyfin.Plugin.MediaCleaner/Pages/home.css
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
table {
|
||||||
|
border: 1px solid;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
border: 1px solid;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
background-color: #0f0f0f;
|
||||||
|
border: 1px solid;
|
||||||
|
padding: 0.8rem 1.8rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links:hover {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
<div id="loading">Loading...</div>
|
<div id="loading">Loading...</div>
|
||||||
<div id="page" style="visibility: hidden;">
|
<div id="page" style="visibility: hidden;">
|
||||||
<button class="links" data-target="#configurationpage?name=Settings">Settings</button>
|
<button class="links" data-target="configurationpage?name=Settings">Settings</button>
|
||||||
<h2>Media Cleaner</h2>
|
<h2>Media Cleaner</h2>
|
||||||
|
|
||||||
<h3 id="moviesTitle"></h3>
|
<h3 id="moviesTitle"></h3>
|
||||||
|
|||||||
@@ -88,52 +88,30 @@ document.addEventListener('pageshow', async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const styleTables = () => {
|
// const styleTables = () => {
|
||||||
const tables = document.querySelectorAll("table");
|
// const tables = document.querySelectorAll("table");
|
||||||
const cells = document.querySelectorAll("th, td");
|
// const cells = document.querySelectorAll("th, td");
|
||||||
|
|
||||||
tables.forEach(table => {
|
// tables.forEach(table => {
|
||||||
table.style.border = "1px solid";
|
// table.style.border = "1px solid";
|
||||||
table.style.borderCollapse = "collapse";
|
// table.style.borderCollapse = "collapse";
|
||||||
})
|
// })
|
||||||
|
|
||||||
cells.forEach(cell => {
|
// cells.forEach(cell => {
|
||||||
cell.style.border = "1px solid";
|
// cell.style.border = "1px solid";
|
||||||
cell.style.padding = "0.5rem 0.75rem";
|
// cell.style.padding = "0.5rem 0.75rem";
|
||||||
cell.style.textAlign = "left"
|
// cell.style.textAlign = "left"
|
||||||
});
|
// });
|
||||||
};
|
// };
|
||||||
|
|
||||||
const styleLinks = () => {
|
const addClickHandlersToLinks = () => {
|
||||||
const linkbtns = document.querySelectorAll("button.links")
|
const linkbtns = document.querySelectorAll("button.links")
|
||||||
linkbtns.forEach(btn => {
|
linkbtns.forEach(btn => {
|
||||||
btn.style.background = "#0f0f0f";
|
|
||||||
btn.style.border = '1px solid';
|
|
||||||
btn.style.padding = '0.8rem 1.8rem';
|
|
||||||
btn.style.fontSize = "1.2rem"
|
|
||||||
btn.style.color = "white";
|
|
||||||
btn.style.textDecoration = 'none';
|
|
||||||
btn.style.cursor = 'pointer';
|
|
||||||
btn.style.lineHeight = 'inherit';
|
|
||||||
btn.style.verticalAlign = 'baseline';
|
|
||||||
btn.style.transition = 'background 0.3s ease';
|
|
||||||
|
|
||||||
const hoverBg = '#2a2a2a';
|
|
||||||
const normalBg = btn.style.background;
|
|
||||||
|
|
||||||
btn.addEventListener("click", () => {
|
btn.addEventListener("click", () => {
|
||||||
const target = btn.dataset.target;
|
const target = btn.dataset.target;
|
||||||
if (!target) return;
|
if (!target) return;
|
||||||
window.location.hash = target;
|
window.location.hash = target;
|
||||||
})
|
})
|
||||||
|
|
||||||
btn.addEventListener('mouseenter', () => {
|
|
||||||
btn.style.background = hoverBg;
|
|
||||||
});
|
|
||||||
|
|
||||||
btn.addEventListener('mouseleave', () => {
|
|
||||||
btn.style.background = normalBg;
|
|
||||||
});
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -146,6 +124,19 @@ document.addEventListener('pageshow', async () => {
|
|||||||
loadingElement.style.visibility = "hidden";
|
loadingElement.style.visibility = "hidden";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const fetchCss = async () => {
|
||||||
|
const response = await fetch('/web/configurationpage?name=home.css')
|
||||||
|
|
||||||
|
if(!response.ok){
|
||||||
|
throw new Error(`Response status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const css = await response.text();
|
||||||
|
const styles = document.createElement('style');
|
||||||
|
styles.textContent = css;
|
||||||
|
document.head.appendChild(styles);
|
||||||
|
}
|
||||||
|
|
||||||
moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
|
moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
|
||||||
seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
|
seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
|
||||||
|
|
||||||
@@ -153,7 +144,7 @@ document.addEventListener('pageshow', async () => {
|
|||||||
var moviesInfo = await getMediaCleanerMovieInfo();
|
var moviesInfo = await getMediaCleanerMovieInfo();
|
||||||
var seriesInfo = await getMediaCleanerSeriesInfo();
|
var seriesInfo = await getMediaCleanerSeriesInfo();
|
||||||
populateTables();
|
populateTables();
|
||||||
styleTables();
|
addClickHandlersToLinks();
|
||||||
styleLinks();
|
|
||||||
showElements();
|
showElements();
|
||||||
|
fetchCss();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -59,6 +59,11 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
|
|||||||
{
|
{
|
||||||
Name = "media_cleaner_table.js",
|
Name = "media_cleaner_table.js",
|
||||||
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.media_cleaner_table.js", GetType().Namespace),
|
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.media_cleaner_table.js", GetType().Namespace),
|
||||||
|
},
|
||||||
|
new PluginPageInfo
|
||||||
|
{
|
||||||
|
Name = "home.css",
|
||||||
|
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.home.css", GetType().Namespace),
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user