mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-03 20:12:59 +00:00
d
This commit is contained in:
Tomas Dvorak
+60
-18
@@ -686,7 +686,7 @@
|
||||
<h3>Náhled banneru</h3>
|
||||
<div id="bannerPreviewContainer" class="banner-preview-container">
|
||||
<div id="bannerPreview" class="banner-preview">
|
||||
<!-- Banner preview will be rendered here -->
|
||||
<div id="bannerPreviewContent" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1503,41 +1503,83 @@ function updateBannerPreview() {
|
||||
|
||||
// Create banner content based on template
|
||||
let bannerContent = '';
|
||||
const bannerLink = document.getElementById('bannerLink')?.value || '';
|
||||
const bannerTextContent = bannerText || 'Náhled banneru';
|
||||
|
||||
if (hasImage && currentImage) {
|
||||
// Get image dimensions from inputs or use defaults
|
||||
const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '300');
|
||||
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
|
||||
const imagePosition = document.getElementById('bannerImagePosition')?.value || 'right';
|
||||
|
||||
// Create image element with template styles and dynamic dimensions
|
||||
const imgStyle = `
|
||||
${template.imageStyle || ''}
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: ${imageWidth}px;
|
||||
height: ${imageHeight}px;
|
||||
object-fit: cover;
|
||||
max-height: ${imageHeight}px;
|
||||
object-fit: contain;
|
||||
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 = `
|
||||
<img
|
||||
src="${currentImage}"
|
||||
style="${imgStyle}"
|
||||
alt="Nahraný obrázek"
|
||||
class="banner-image"
|
||||
>`;
|
||||
// Create image container
|
||||
let imgContainer = `
|
||||
<div class="banner-image-container" style="
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
<img
|
||||
src="${currentImage}"
|
||||
style="${imgStyle}"
|
||||
alt="Nahraný obrázek"
|
||||
class="banner-image"
|
||||
>
|
||||
</div>`;
|
||||
|
||||
// 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 textContent = bannerText || 'Náhled banneru';
|
||||
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="${template.textStyle || ''}">
|
||||
${textContent}
|
||||
<div class="banner-text" style="${textStyle}">
|
||||
${bannerTextContent}
|
||||
</div>`;
|
||||
|
||||
// Create container with template styles
|
||||
// Create container with proper layout
|
||||
bannerContent = `
|
||||
<div class="banner-content" style="${template.containerStyle || ''}">
|
||||
${imgElement}
|
||||
${textElement}
|
||||
<div class="banner-content" style="
|
||||
${template.containerStyle || ''}
|
||||
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>`;
|
||||
|
||||
// Show the image preview in the container
|
||||
|
||||
+91
-50
@@ -36,63 +36,104 @@
|
||||
// Apply styles to container
|
||||
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
|
||||
let content = banner.text || '';
|
||||
let content = '';
|
||||
if (banner.image) {
|
||||
// Apply the same border radius to the image as to the container
|
||||
const imageRadius = Math.max(parseInt(banner.style.borderRadius || '4'), 0);
|
||||
const imagePosition = banner.style.imagePosition || 'right';
|
||||
const imageWidth = banner.style.imageWidth || 300;
|
||||
const imageHeight = banner.style.imageHeight || 200;
|
||||
|
||||
// Determine image style based on position
|
||||
let imageStyle = `max-width: 100%; max-height: 200px; border-radius: ${imageRadius}px;`;
|
||||
let containerStyle = 'margin-bottom: 15px;';
|
||||
// Create image element with styles
|
||||
const imgStyle = `
|
||||
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
|
||||
const imagePosition = banner.style.imagePosition || 'center';
|
||||
const imageX = banner.style.imageX || '0';
|
||||
const imageY = banner.style.imageY || '0';
|
||||
|
||||
console.log('Applying image position:', imagePosition, imageX, imageY);
|
||||
|
||||
switch(imagePosition) {
|
||||
case 'left':
|
||||
containerStyle += 'text-align: left; float: left; margin-right: 15px;';
|
||||
break;
|
||||
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'};`;
|
||||
// Create image container
|
||||
let imgContainer = `
|
||||
<div class="banner-image-container" style="
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
<img
|
||||
src="${banner.image}"
|
||||
style="${imgStyle}"
|
||||
alt="Banner obrázek"
|
||||
class="banner-image"
|
||||
>
|
||||
</div>`;
|
||||
|
||||
// Wrap image with link if URL is provided
|
||||
if (banner.link) {
|
||||
imgContainer = `
|
||||
<a href="${banner.link}" target="_blank" style="text-decoration: none;">
|
||||
${imgContainer}
|
||||
</a>`;
|
||||
}
|
||||
|
||||
content = `
|
||||
<div style="${containerStyle}" class="banner-image-container">
|
||||
<img src="${banner.image}" style="${imageStyle}">
|
||||
</div>
|
||||
${content}
|
||||
// Create text content with styles
|
||||
const textStyle = `
|
||||
font-size: ${banner.style.fontSize || '16px'};
|
||||
color: ${banner.style.textColor || '#000'};
|
||||
text-align: ${banner.style.textAlign || 'left'};
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
line-height: 1.5;
|
||||
`;
|
||||
}
|
||||
|
||||
// Wrap in link if provided
|
||||
if (banner.link) {
|
||||
content = `<a href="${banner.link}" style="color: inherit; text-decoration: none; display: block;">${content}</a>`;
|
||||
|
||||
const textElement = `
|
||||
<div class="banner-text" style="${textStyle}">
|
||||
${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;
|
||||
|
||||
Reference in New Issue
Block a user