mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-04 20:42:59 +00:00
efef
This commit is contained in:
Tomas Dvorak
+96
-267
@@ -18,18 +18,12 @@
|
|||||||
<script>
|
<script>
|
||||||
// Load and display banner
|
// Load and display banner
|
||||||
async function loadBanner() {
|
async function loadBanner() {
|
||||||
// Get banner container and content elements
|
|
||||||
const bannerContainer = document.getElementById('bannerContainer');
|
const bannerContainer = document.getElementById('bannerContainer');
|
||||||
if (!bannerContainer) {
|
if (!bannerContainer) {
|
||||||
console.error('Banner container not found');
|
console.error('Banner container not found');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear existing content and set up container
|
|
||||||
bannerContainer.innerHTML = '';
|
|
||||||
bannerContainer.style.position = 'relative';
|
|
||||||
bannerContainer.style.overflow = 'hidden';
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/banner');
|
const response = await fetch('/api/banner');
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
@@ -39,21 +33,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const banner = await response.json();
|
const banner = await response.json();
|
||||||
|
|
||||||
// Log the banner data for debugging
|
|
||||||
console.log('Banner data:', JSON.stringify(banner, null, 2));
|
console.log('Banner data:', JSON.stringify(banner, null, 2));
|
||||||
|
|
||||||
// Check if banner should be visible - handle different cases and string/boolean values
|
// Check if banner should be visible
|
||||||
const isVisible = (() => {
|
const isVisible = (() => {
|
||||||
// Check all possible locations and formats for visibility flag
|
|
||||||
const visibility = banner.Style?.IsVisible ?? banner.Style?.isVisible ??
|
const visibility = banner.Style?.IsVisible ?? banner.Style?.isVisible ??
|
||||||
banner.IsVisible ?? banner.isVisible ?? banner.visible;
|
banner.IsVisible ?? banner.isVisible ?? banner.visible;
|
||||||
|
|
||||||
// Handle both string and boolean values
|
|
||||||
if (typeof visibility === 'string') {
|
if (typeof visibility === 'string') {
|
||||||
return visibility.toLowerCase() === 'true';
|
return visibility.toLowerCase() === 'true';
|
||||||
}
|
}
|
||||||
return Boolean(visibility !== false); // default to true if not explicitly set to false
|
return Boolean(visibility !== false);
|
||||||
})();
|
})();
|
||||||
|
|
||||||
if (!isVisible) {
|
if (!isVisible) {
|
||||||
@@ -62,57 +51,104 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear existing content
|
// Clear and prepare container
|
||||||
bannerContainer.innerHTML = '<div id="bannerContent"></div>';
|
bannerContainer.innerHTML = '';
|
||||||
const bannerContent = document.getElementById('bannerContent');
|
bannerContainer.style.display = 'block';
|
||||||
|
|
||||||
if (!bannerContent) {
|
|
||||||
console.error('Banner content element not found');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get style values with fallbacks - handle both nested style and direct properties
|
|
||||||
const style = banner.Style || banner.style || {};
|
|
||||||
const borderRadius = style.borderRadius || '8';
|
|
||||||
// If there's a gradient in background, use it instead of backgroundColor
|
|
||||||
const backgroundColor = (style.background && style.background.includes('gradient'))
|
|
||||||
? style.background
|
|
||||||
: (style.backgroundColor || style.background || '#f8f9fa');
|
|
||||||
const textColor = style.textColor || style.color || '#212529';
|
|
||||||
const textAlign = style.textAlign || 'left';
|
|
||||||
const fontSize = style.fontSize || '16px';
|
|
||||||
const padding = style.padding || '20px';
|
|
||||||
const margin = style.margin || '20px';
|
|
||||||
const imagePosition = style.imagePosition || 'right';
|
|
||||||
|
|
||||||
// Create banner container with proper styling
|
|
||||||
bannerContainer.style.cssText = `
|
|
||||||
${style.containerStyle || ''}
|
|
||||||
background-color: ${backgroundColor};
|
|
||||||
color: ${textColor};
|
|
||||||
text-align: ${textAlign};
|
|
||||||
font-size: ${fontSize};
|
|
||||||
padding: ${padding};
|
|
||||||
margin: ${margin} 0;
|
|
||||||
border-radius: ${borderRadius}px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Create banner content container
|
// Create banner content container
|
||||||
const bannerContentEl = document.createElement('div');
|
const bannerContentEl = document.createElement('div');
|
||||||
bannerContentEl.id = 'bannerContent';
|
bannerContentEl.id = 'bannerContent';
|
||||||
bannerContainer.appendChild(bannerContentEl);
|
bannerContainer.appendChild(bannerContentEl);
|
||||||
|
|
||||||
|
// Get banner content and style
|
||||||
|
const bannerText = banner.Text || banner.text || '';
|
||||||
|
const bannerImage = banner.Image || banner.image || '';
|
||||||
|
const bannerLink = banner.Link || banner.link || '';
|
||||||
|
const bannerStyle = banner.Style || {};
|
||||||
|
const imagePosition = bannerStyle.ImagePosition || 'right';
|
||||||
|
|
||||||
|
// Process HTML content
|
||||||
|
const processHtml = (html) => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.innerHTML = html;
|
||||||
|
return div.innerHTML;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create main container
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.className = 'banner-container';
|
||||||
|
container.style.cssText = `
|
||||||
|
background: ${bannerStyle.BackgroundColor || '#f8f9fa'};
|
||||||
|
color: ${bannerStyle.TextColor || '#212529'};
|
||||||
|
border-radius: ${bannerStyle.BorderRadius || '8px'};
|
||||||
|
padding: ${bannerStyle.Padding || '20px'};
|
||||||
|
margin: ${bannerStyle.Margin || '20px 0'};
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Create content wrapper
|
||||||
|
const wrapper = document.createElement('div');
|
||||||
|
wrapper.className = 'banner-wrapper';
|
||||||
|
wrapper.style.cssText = `
|
||||||
|
display: flex;
|
||||||
|
flex-direction: ${imagePosition === 'left' ? 'row' : 'row-reverse'};
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Create text content
|
||||||
|
if (bannerText) {
|
||||||
|
const textContent = document.createElement('div');
|
||||||
|
textContent.className = 'banner-text';
|
||||||
|
textContent.style.cssText = `
|
||||||
|
flex: 1;
|
||||||
|
color: ${bannerStyle.TextColor || '#212529'};
|
||||||
|
font-size: ${bannerStyle.FontSize || '16px'};
|
||||||
|
text-align: ${bannerStyle.TextAlign || 'left'};
|
||||||
|
line-height: 1.5;
|
||||||
|
`;
|
||||||
|
textContent.innerHTML = processHtml(bannerText);
|
||||||
|
wrapper.appendChild(textContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create image content if exists
|
||||||
|
if (bannerImage) {
|
||||||
|
const imageContainer = document.createElement('div');
|
||||||
|
imageContainer.className = 'banner-image';
|
||||||
|
imageContainer.style.cssText = `
|
||||||
|
flex: 0 0 40%;
|
||||||
|
max-width: 40%;
|
||||||
|
position: relative;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = bannerImage.startsWith('http') ? bannerImage : `/${bannerImage}`;
|
||||||
|
img.alt = 'Banner image';
|
||||||
|
img.style.cssText = `
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 200px;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: block;
|
||||||
|
`;
|
||||||
|
|
||||||
|
imageContainer.appendChild(img);
|
||||||
|
wrapper.appendChild(imageContainer);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add wrapper to container
|
||||||
|
container.appendChild(wrapper);
|
||||||
|
|
||||||
// Add link to banner if it exists
|
// Add link to banner if it exists
|
||||||
const bannerLinkValue = banner.Link || banner.link || '';
|
if (bannerLink) {
|
||||||
if (bannerLinkValue) {
|
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
link.className = 'banner-link';
|
link.href = bannerLink;
|
||||||
link.href = bannerLinkValue;
|
|
||||||
link.target = '_blank';
|
link.target = '_blank';
|
||||||
link.style.cssText = `
|
link.style.cssText = `
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -124,222 +160,15 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
`;
|
`;
|
||||||
bannerContainer.insertBefore(link, bannerContainer.firstChild);
|
container.insertBefore(link, container.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get banner text content
|
// Add container to banner content
|
||||||
const bannerTextContent = banner.Text || banner.text || '';
|
bannerContentEl.appendChild(container);
|
||||||
const bannerStyle = banner.Style || {};
|
|
||||||
|
|
||||||
// Process the content to handle HTML tags
|
|
||||||
const processHtmlContent = (html) => {
|
|
||||||
// First decode HTML entities
|
|
||||||
const txt = document.createElement('textarea');
|
|
||||||
txt.innerHTML = html;
|
|
||||||
const decoded = txt.value;
|
|
||||||
|
|
||||||
// Then ensure proper HTML structure
|
|
||||||
const parser = new DOMParser();
|
|
||||||
const doc = parser.parseFromString(decoded, 'text/html');
|
|
||||||
return doc.body.innerHTML;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Create banner content
|
|
||||||
let content = `
|
|
||||||
<div class="banner-content" style="
|
|
||||||
padding: ${bannerStyle.Padding || padding}px;
|
|
||||||
margin: ${bannerStyle.Margin || margin}px;
|
|
||||||
background: ${bannerStyle.BackgroundColor || backgroundColor};
|
|
||||||
color: ${bannerStyle.TextColor || textColor};
|
|
||||||
border-radius: ${bannerStyle.BorderRadius || borderRadius}px;
|
|
||||||
${bannerStyle.ContainerStyle || ''}
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
">
|
|
||||||
<div class="banner-html-content" style="
|
|
||||||
color: ${bannerStyle.TextColor || textColor};
|
|
||||||
font-size: ${bannerStyle.FontSize || '16px'};
|
|
||||||
text-align: ${bannerStyle.TextAlign || 'left'};
|
|
||||||
line-height: 1.5;
|
|
||||||
">
|
|
||||||
${processHtmlContent(bannerTextContent)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Handle image if it exists
|
|
||||||
const bannerText = banner.text || banner.Text || '';
|
|
||||||
const bannerLink = banner.link || banner.Link || '';
|
|
||||||
const bannerImage = banner.image || banner.Image || '';
|
|
||||||
|
|
||||||
if (bannerImage) {
|
|
||||||
// Ensure the image URL is correct (add leading slash if missing)
|
|
||||||
let imageUrl = bannerImage;
|
|
||||||
if (typeof imageUrl === 'string') {
|
|
||||||
imageUrl = imageUrl.startsWith('http') ? imageUrl :
|
|
||||||
imageUrl.startsWith('/') ? imageUrl : `/${imageUrl}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use default dimensions if not specified or 0
|
|
||||||
const imageWidth = (style.imageWidth && style.imageWidth > 0) ? style.imageWidth : 'auto';
|
|
||||||
const imageHeight = (style.imageHeight && style.imageHeight > 0) ? style.imageHeight : 'auto';
|
|
||||||
|
|
||||||
// Create image element with styles
|
|
||||||
const imgStyle = `
|
|
||||||
max-width: 100%;
|
|
||||||
height: ${imageHeight === 'auto' ? 'auto' : imageHeight + 'px'};
|
|
||||||
${imageWidth !== 'auto' ? `width: ${imageWidth}px;` : 'width: auto;'}
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: ${borderRadius}px;
|
|
||||||
${imagePosition === 'left' ? 'float: left; margin: 0 20px 10px 0;' : ''}
|
|
||||||
${imagePosition === 'right' ? 'float: right; margin: 0 0 10px 20px;' : ''}
|
|
||||||
${imagePosition === 'center' ? 'display: block; margin: 0 auto 20px;' : ''}
|
|
||||||
${imagePosition === 'top' ? 'display: block; margin: 0 auto 20px;' : ''}
|
|
||||||
${imagePosition === 'bottom' ? 'display: block; margin: 20px auto 0;' : ''}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Create image container
|
|
||||||
// Set max dimensions for the image
|
|
||||||
const maxImageWidth = imagePosition === 'left' || imagePosition === 'right' ? '40%' : '100%';
|
|
||||||
const maxImageHeight = '200px';
|
|
||||||
|
|
||||||
let imgContainer = `
|
|
||||||
<div class="banner-image-container" style="
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
text-align: ${imagePosition === 'left' ? 'left' : imagePosition === 'right' ? 'right' : 'center'};
|
|
||||||
${imagePosition === 'left' || imagePosition === 'right' ? 'float: ' + imagePosition + '; margin: 0 20px 20px 0;' : ''}
|
|
||||||
${imagePosition === 'left' || imagePosition === 'right' ? 'max-width: ' + maxImageWidth + ';' : ''}
|
|
||||||
">
|
|
||||||
<img src="${imageUrl}" style="
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: ${maxImageHeight};
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: ${borderRadius}px;
|
|
||||||
${imagePosition === 'left' || imagePosition === 'right' ? 'float: ' + imagePosition + ';' : ''}
|
|
||||||
" alt="Banner obrázek" class="banner-image" onerror="console.error('Failed to load banner image:', this.src)">
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
// Wrap image with link if URL is provided
|
|
||||||
if (bannerLink) {
|
|
||||||
imgContainer = `
|
|
||||||
<a href="${bannerLink}" target="_blank" style="text-decoration: none; display: inline-block;">
|
|
||||||
${imgContainer}
|
|
||||||
</a>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add content based on image position
|
|
||||||
if (imagePosition === 'left' || imagePosition === 'right') {
|
|
||||||
// For side-by-side layout
|
|
||||||
content += `
|
|
||||||
<div style="display: flex; flex-direction: ${imagePosition === 'left' ? 'row' : 'row-reverse'}; align-items: center; gap: 20px;">
|
|
||||||
${imgContainer}
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<div class="banner-text" style="
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: ${textColor};
|
|
||||||
text-align: ${textAlign};
|
|
||||||
font-size: ${fontSize};
|
|
||||||
">
|
|
||||||
${bannerText.replace(/\n/g, '<br>')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
} else {
|
|
||||||
// For top/bottom layout
|
|
||||||
if (imagePosition === 'top' || imagePosition === 'bottom') {
|
|
||||||
content += imgContainer;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add text
|
|
||||||
if (bannerText) {
|
|
||||||
content += `
|
|
||||||
<div class="banner-text" style="
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: ${textColor};
|
|
||||||
text-align: ${textAlign};
|
|
||||||
font-size: ${fontSize};
|
|
||||||
display: block;
|
|
||||||
">
|
|
||||||
${bannerText.replace(/\n/g, '<br>')}
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (imagePosition === 'bottom') {
|
|
||||||
content += imgContainer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add clearfix if needed
|
|
||||||
if (['left', 'right'].includes(imagePosition)) {
|
|
||||||
content += '<div style="clear: both;"></div>';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// No image, just show text
|
|
||||||
if (bannerText) {
|
|
||||||
const textStyle = `
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: ${textColor};
|
|
||||||
text-align: ${textAlign};
|
|
||||||
font-size: ${fontSize};
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Just use the text, link will be applied to the whole banner
|
|
||||||
const textElement = bannerText;
|
|
||||||
|
|
||||||
content += `
|
|
||||||
<div class="banner-text" style="${textStyle}">
|
|
||||||
${textElement}
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the content and make banner visible
|
|
||||||
bannerContentEl.innerHTML = content;
|
|
||||||
bannerContainer.style.display = 'block';
|
|
||||||
|
|
||||||
// Update the banner link if it exists
|
|
||||||
if (bannerLinkValue) {
|
|
||||||
let existingLink = bannerContainer.querySelector('a.banner-link');
|
|
||||||
if (!existingLink) {
|
|
||||||
existingLink = document.createElement('a');
|
|
||||||
existingLink.className = 'banner-link';
|
|
||||||
existingLink.style.cssText = `
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
`;
|
|
||||||
bannerContainer.insertBefore(existingLink, bannerContainer.firstChild);
|
|
||||||
}
|
|
||||||
existingLink.href = bannerLinkValue;
|
|
||||||
existingLink.target = '_blank';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply custom font if specified in template
|
|
||||||
if (bannerStyle.fontFamily) {
|
|
||||||
bannerContentEl.style.fontFamily = bannerStyle.fontFamily;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Log the content for debugging
|
|
||||||
console.log('Banner content:', content);
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error loading banner:', error);
|
console.error('Error loading banner:', error);
|
||||||
|
bannerContainer.style.display = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user