mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-05 04:52:58 +00:00
d
This commit is contained in:
Tomas Dvorak
+63
-21
@@ -686,7 +686,7 @@
|
|||||||
<h3>Náhled banneru</h3>
|
<h3>Náhled banneru</h3>
|
||||||
<div id="bannerPreviewContainer" class="banner-preview-container">
|
<div id="bannerPreviewContainer" class="banner-preview-container">
|
||||||
<div id="bannerPreview" class="banner-preview">
|
<div id="bannerPreview" class="banner-preview">
|
||||||
<!-- Banner preview will be rendered here -->
|
<div id="bannerPreviewContent" style="width: 100%; height: 100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1503,41 +1503,83 @@ function updateBannerPreview() {
|
|||||||
|
|
||||||
// Create banner content based on template
|
// Create banner content based on template
|
||||||
let bannerContent = '';
|
let bannerContent = '';
|
||||||
|
const bannerLink = document.getElementById('bannerLink')?.value || '';
|
||||||
|
const bannerTextContent = bannerText || 'Náhled banneru';
|
||||||
|
|
||||||
if (hasImage && currentImage) {
|
if (hasImage && currentImage) {
|
||||||
// Get image dimensions from inputs or use defaults
|
// Get image dimensions from inputs or use defaults
|
||||||
const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '300');
|
const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '300');
|
||||||
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
|
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
|
||||||
|
const imagePosition = document.getElementById('bannerImagePosition')?.value || 'right';
|
||||||
|
|
||||||
// Create image element with template styles and dynamic dimensions
|
// Create image element with template styles and dynamic dimensions
|
||||||
const imgStyle = `
|
const imgStyle = `
|
||||||
${template.imageStyle || ''}
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
width: ${imageWidth}px;
|
width: ${imageWidth}px;
|
||||||
height: ${imageHeight}px;
|
max-height: ${imageHeight}px;
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
border-radius: ${template.borderRadius || '0'}px;
|
border-radius: ${template.borderRadius || '0'}px;
|
||||||
|
${imagePosition === 'left' ? 'float: left; margin-right: 20px;' : ''}
|
||||||
|
${imagePosition === 'right' ? 'float: right; margin-left: 20px;' : ''}
|
||||||
|
${imagePosition === 'center' ? 'display: block; margin: 0 auto;' : ''}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const imgElement = `
|
// Create image container
|
||||||
<img
|
let imgContainer = `
|
||||||
src="${currentImage}"
|
<div class="banner-image-container" style="
|
||||||
style="${imgStyle}"
|
display: inline-block;
|
||||||
alt="Nahraný obrázek"
|
max-width: 100%;
|
||||||
class="banner-image"
|
margin-bottom: 10px;
|
||||||
>`;
|
">
|
||||||
|
<img
|
||||||
// Create text content with template styles
|
src="${currentImage}"
|
||||||
const textContent = bannerText || 'Náhled banneru';
|
style="${imgStyle}"
|
||||||
const textElement = `
|
alt="Nahraný obrázek"
|
||||||
<div class="banner-text" style="${template.textStyle || ''}">
|
class="banner-image"
|
||||||
${textContent}
|
>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
// Create container with template styles
|
// Wrap image with link if URL is provided
|
||||||
|
if (bannerLink) {
|
||||||
|
imgContainer = `
|
||||||
|
<a href="${bannerLink}" target="_blank" style="text-decoration: none;">
|
||||||
|
${imgContainer}
|
||||||
|
</a>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create text content with template styles
|
||||||
|
const textStyle = `
|
||||||
|
font-size: ${document.getElementById('bannerFontSize')?.value || '16'}px;
|
||||||
|
color: ${document.getElementById('bannerTextColor')?.value || '#000'};
|
||||||
|
text-align: ${document.getElementById('bannerTextAlign')?.value || 'left'};
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
${template.textStyle || ''}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const textElement = `
|
||||||
|
<div class="banner-text" style="${textStyle}">
|
||||||
|
${bannerTextContent}
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
// Create container with proper layout
|
||||||
bannerContent = `
|
bannerContent = `
|
||||||
<div class="banner-content" style="${template.containerStyle || ''}">
|
<div class="banner-content" style="
|
||||||
${imgElement}
|
${template.containerStyle || ''}
|
||||||
${textElement}
|
padding: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: ${imagePosition === 'bottom' ? 'column' : 'row'};
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
">
|
||||||
|
${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''}
|
||||||
|
<div style="flex: 1;">
|
||||||
|
${textElement}
|
||||||
|
</div>
|
||||||
|
${imagePosition === 'right' || imagePosition === 'bottom' ? imgContainer : ''}
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
// Show the image preview in the container
|
// Show the image preview in the container
|
||||||
|
|||||||
+89
-48
@@ -36,63 +36,104 @@
|
|||||||
// Apply styles to container
|
// Apply styles to container
|
||||||
bannerContainer.style.borderRadius = (banner.style.borderRadius ? `${banner.style.borderRadius}px` : '8px');
|
bannerContainer.style.borderRadius = (banner.style.borderRadius ? `${banner.style.borderRadius}px` : '8px');
|
||||||
|
|
||||||
// Apply styles to content
|
|
||||||
Object.assign(bannerContent.style, {
|
|
||||||
backgroundColor: banner.style.backgroundColor || '#f8d7da',
|
|
||||||
color: banner.style.textColor || '#721c24',
|
|
||||||
textAlign: banner.style.textAlign || 'center',
|
|
||||||
fontSize: banner.style.fontSize ? `${banner.style.fontSize}px` : '18px',
|
|
||||||
padding: banner.style.padding ? `${banner.style.padding}px` : '20px',
|
|
||||||
margin: banner.style.margin ? `${banner.style.margin}px 0` : '20px 0',
|
|
||||||
borderRadius: banner.style.borderRadius ? `${banner.style.borderRadius}px` : '8px',
|
|
||||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
||||||
display: 'block'
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle image
|
// Handle image
|
||||||
let content = banner.text || '';
|
let content = '';
|
||||||
if (banner.image) {
|
if (banner.image) {
|
||||||
// Apply the same border radius to the image as to the container
|
const imagePosition = banner.style.imagePosition || 'right';
|
||||||
const imageRadius = Math.max(parseInt(banner.style.borderRadius || '4'), 0);
|
const imageWidth = banner.style.imageWidth || 300;
|
||||||
|
const imageHeight = banner.style.imageHeight || 200;
|
||||||
|
|
||||||
// Determine image style based on position
|
// Create image element with styles
|
||||||
let imageStyle = `max-width: 100%; max-height: 200px; border-radius: ${imageRadius}px;`;
|
const imgStyle = `
|
||||||
let containerStyle = 'margin-bottom: 15px;';
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: ${imageWidth}px;
|
||||||
|
max-height: ${imageHeight}px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: ${banner.style.borderRadius || '0'}px;
|
||||||
|
${imagePosition === 'left' ? 'float: left; margin-right: 20px;' : ''}
|
||||||
|
${imagePosition === 'right' ? 'float: right; margin-left: 20px;' : ''}
|
||||||
|
${imagePosition === 'center' ? 'display: block; margin: 0 auto;' : ''}
|
||||||
|
`;
|
||||||
|
|
||||||
// Get image position data
|
// Create image container
|
||||||
const imagePosition = banner.style.imagePosition || 'center';
|
let imgContainer = `
|
||||||
const imageX = banner.style.imageX || '0';
|
<div class="banner-image-container" style="
|
||||||
const imageY = banner.style.imageY || '0';
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
">
|
||||||
|
<img
|
||||||
|
src="${banner.image}"
|
||||||
|
style="${imgStyle}"
|
||||||
|
alt="Banner obrázek"
|
||||||
|
class="banner-image"
|
||||||
|
>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
console.log('Applying image position:', imagePosition, imageX, imageY);
|
// Wrap image with link if URL is provided
|
||||||
|
if (banner.link) {
|
||||||
switch(imagePosition) {
|
imgContainer = `
|
||||||
case 'left':
|
<a href="${banner.link}" target="_blank" style="text-decoration: none;">
|
||||||
containerStyle += 'text-align: left; float: left; margin-right: 15px;';
|
${imgContainer}
|
||||||
break;
|
</a>`;
|
||||||
case 'right':
|
|
||||||
containerStyle += 'text-align: right; float: right; margin-left: 15px;';
|
|
||||||
break;
|
|
||||||
case 'custom':
|
|
||||||
containerStyle += 'position: relative;';
|
|
||||||
// For custom position, use absolute positioning to ensure exact placement
|
|
||||||
imageStyle += `position: absolute; left: ${imageX}px; top: ${imageY}px;`;
|
|
||||||
break;
|
|
||||||
default: // center
|
|
||||||
containerStyle += `text-align: ${banner.style.textAlign || 'center'};`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
content = `
|
// Create text content with styles
|
||||||
<div style="${containerStyle}" class="banner-image-container">
|
const textStyle = `
|
||||||
<img src="${banner.image}" style="${imageStyle}">
|
font-size: ${banner.style.fontSize || '16px'};
|
||||||
</div>
|
color: ${banner.style.textColor || '#000'};
|
||||||
${content}
|
text-align: ${banner.style.textAlign || 'left'};
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
line-height: 1.5;
|
||||||
`;
|
`;
|
||||||
}
|
|
||||||
|
|
||||||
// Wrap in link if provided
|
const textElement = `
|
||||||
if (banner.link) {
|
<div class="banner-text" style="${textStyle}">
|
||||||
content = `<a href="${banner.link}" style="color: inherit; text-decoration: none; display: block;">${content}</a>`;
|
${banner.text || ''}
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
// Create container with proper layout
|
||||||
|
content = `
|
||||||
|
<div class="banner-content" style="
|
||||||
|
${banner.style.backgroundColor ? `background-color: ${banner.style.backgroundColor};` : ''}
|
||||||
|
${banner.style.padding ? `padding: ${banner.style.padding}px;` : 'padding: 20px;'}
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: ${imagePosition === 'bottom' ? 'column' : 'row'};
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
border-radius: ${banner.style.borderRadius || '8px'};
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
">
|
||||||
|
${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''}
|
||||||
|
<div style="flex: 1;">
|
||||||
|
${textElement}
|
||||||
|
</div>
|
||||||
|
${imagePosition === 'right' || imagePosition === 'bottom' ? imgContainer : ''}
|
||||||
|
</div>`;
|
||||||
|
} else {
|
||||||
|
// No image, just show text
|
||||||
|
content = `
|
||||||
|
<div class="banner-content" style="
|
||||||
|
${banner.style.backgroundColor ? `background-color: ${banner.style.backgroundColor};` : ''}
|
||||||
|
${banner.style.padding ? `padding: ${banner.style.padding}px;` : 'padding: 20px;'}
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100px;
|
||||||
|
border-radius: ${banner.style.borderRadius || '8px'};
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
">
|
||||||
|
<div class="banner-text" style="
|
||||||
|
text-align: ${banner.style.textAlign || 'center'};
|
||||||
|
color: ${banner.style.textColor || '#666'};
|
||||||
|
font-size: ${banner.style.fontSize || '16px'};
|
||||||
|
">
|
||||||
|
${banner.text || 'Žádný text banneru'}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
bannerContent.innerHTML = content;
|
bannerContent.innerHTML = content;
|
||||||
|
|||||||
Reference in New Issue
Block a user