jessikitty/ScratchingPost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Use backgroundSize in slide rendering + buildBgStyle helper

Browse Source
This commit is contained in:
jessikitty
2026-05-21 10:18:41 +10:00
parent dddd3188ce
commit 7da0aed466
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wwwroot/js/display.js
+19 -7
View File
@@ -19,19 +19,31 @@
layerA.classList.add('active'); return;
}
function renderSlide(slide, layer) {
function buildBgStyle(slide) {
var bg = slide.backgroundColor || '#0a0a14';
var bgImg = slide.backgroundImage ? 'url(' + slide.backgroundImage + ')' : 'none';
var css = slide.customCss || '';
var bgSize = slide.backgroundSize || 'cover';
var style = 'background-color:' + bg + ';';
if (slide.backgroundImage) {
style += 'background-image:url(' + slide.backgroundImage + ');';
style += 'background-size:' + bgSize + ';';
style += 'background-position:center;';
style += 'background-repeat:no-repeat;';
}
if (slide.customCss) style += slide.customCss;
return style;
}
function renderSlide(slide, layer) {
var style = buildBgStyle(slide);
if (slide.type === 'content') {
layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';background-image:' + bgImg + ';' + css + '"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
layer.innerHTML = '<div class="slide-inner" style="' + style + '"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
} else if (slide.type === 'embed') {
layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';' + css + '"><iframe class="embed-frame" src="' + escapeHtml(slide.embedUrl || '') + '" sandbox="allow-scripts allow-same-origin allow-popups" loading="lazy"></iframe></div>';
layer.innerHTML = '<div class="slide-inner" style="' + style + '"><iframe class="embed-frame" src="' + escapeHtml(slide.embedUrl || '') + '" sandbox="allow-scripts allow-same-origin allow-popups" loading="lazy"></iframe></div>';
} else if (slide.type === 'icscalendar') {
layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';' + css + '"><div class="ics-display"><h2>Upcoming Events</h2><div class="events-grid"><div class="loading-state">Loading calendar</div></div></div></div>';
layer.innerHTML = '<div class="slide-inner" style="' + style + '"><div class="ics-display"><h2>Upcoming Events</h2><div class="events-grid"><div class="loading-state">Loading calendar</div></div></div></div>';
loadIcsEvents(slide.icsSource, layer);
} else {
layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
layer.innerHTML = '<div class="slide-inner" style="' + style + '"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
}
}