-
-
+
@@ -1144,26 +1162,56 @@ document.addEventListener('DOMContentLoaded', () => {
}
// Set up event listeners for preview updates
- const previewInputs = [
- bannerVisible, bannerBgColor, bannerTextColor, bannerText,
- bannerTextAlign, bannerFontSize, bannerPadding, bannerMargin, bannerBorderRadius
- ];
-
- previewInputs.forEach(input => {
- if (input) {
- input.addEventListener('input', updateBannerPreview);
- input.addEventListener('change', updateBannerPreview);
+ function setupBannerEventListeners() {
+ const bannerTextElement = document.getElementById('bannerText');
+ if (bannerTextElement) {
+ // Remove any existing event listeners to prevent duplicates
+ const newElement = bannerTextElement.cloneNode(true);
+ bannerTextElement.parentNode.replaceChild(newElement, bannerTextElement);
+
+ // Add new event listeners for input and blur
+ newElement.addEventListener('input', updateBannerPreview);
+ newElement.addEventListener('blur', updateBannerPreview);
+
+ // Also update when Enter is pressed (for multi-line text)
+ newElement.addEventListener('keydown', function(e) {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ updateBannerPreview();
+ }
+ });
}
- });
+
+ // Add event listeners for other preview inputs
+ const previewInputs = [
+ document.getElementById('bannerFontSize'),
+ document.getElementById('bannerTextColor'),
+ document.getElementById('bannerTextAlign'),
+ document.getElementById('bannerBgColor'),
+ document.getElementById('bannerLink'),
+ document.getElementById('bannerVisible')
+ ];
+
+ previewInputs.forEach(input => {
+ if (input) {
+ input.addEventListener('input', updateBannerPreview);
+ input.addEventListener('change', updateBannerPreview);
+ }
+ });
+ }
+
+ // Initialize banner event listeners
+ setupBannerEventListeners();
+
+ // Get banner visibility element
+ const bannerVisible = document.getElementById('bannerVisible');
+ if (bannerVisible) {
+ bannerVisible.addEventListener('change', updateBannerPreview);
+ }
- // Initialize upload functionality
- const uploadPrompt = document.getElementById('uploadPrompt');
- const uploadBtn = document.getElementById('uploadBtn');
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
- // Image is always on the right side - no position selector needed
-
// Handle file selection
function handleFileSelect(file) {
if (!file) return;
@@ -2526,7 +2574,8 @@ function removeImage() {
function updateBannerPreview() {
const bannerPreview = document.getElementById('bannerPreview');
const bannerPreviewContent = document.getElementById('bannerPreviewContent');
- const bannerText = document.getElementById('bannerText')?.value || '';
+ const bannerTextElement = document.getElementById('bannerText');
+ const bannerText = bannerTextElement ? bannerTextElement.innerText || bannerTextElement.textContent : '';
const bannerVisible = document.getElementById('bannerVisible')?.checked !== false;
const bannerTemplates = document.getElementById('bannerTemplates');
const imagePreview = document.getElementById('imagePreview');
@@ -2557,61 +2606,43 @@ function updateBannerPreview() {
const bannerLink = document.getElementById('bannerLink')?.value || '';
const bannerTextContent = bannerText || 'Náhled banneru';
+ // Get the current position or default to 'right'
+ const position = currentImagePosition || 'right';
+
if (hasImage && currentImage) {
// Get image dimensions
const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '300');
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
- // Get the selected position or default to 'right'
- const position = currentImagePosition || 'right';
+ // Set max dimensions for the image
+ const maxWidth = '300px';
+ const maxHeight = '200px';
- // Set max dimensions based on position
- const maxWidth = '30%';
- const maxHeight = '300px';
-
- // Determine flex direction and alignment based on position
- const flexDirection = position === 'left' ? 'row' : 'row-reverse';
- const alignSelf = 'flex-start';
- const marginLeft = position === 'left' ? '0' : 'auto';
- const marginRight = position === 'right' ? '0' : 'auto';
-
- // Create flex container for the image
+ // Create image container with proper positioning
let imgContainer = `
Přidat aplikaci
- -
- 
`;
// Wrap image with link if URL is provided
@@ -2657,8 +2688,9 @@ function updateBannerPreview() {
color: ${document.getElementById('bannerTextColor')?.value || '#000'};
text-align: ${document.getElementById('bannerTextAlign')?.value || 'left'};
margin: 0;
- padding: 10px 0;
+ padding: 20px 0;
line-height: 1.5;
+ flex: 1;
${template?.textStyle || ''}
`;
@@ -2680,38 +2712,27 @@ function updateBannerPreview() {
}
// Build the background style
- let backgroundStyle = styles.background.includes('gradient')
- ? `background: ${styles.background};`
- : `background-color: ${styles.backgroundColor};`;
+ let backgroundStyle = styles.background && styles.background.includes('gradient')
+ ? `background: ${styles.background}`
+ : `background-color: ${styles.backgroundColor || '#f8f9fa'}`;
- // Create container with right-aligned image layout
+ // Create the banner container with proper flex layout
bannerContent = `
-
-
-
+