mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-05 04:52:58 +00:00
etst
This commit is contained in:
Tomas Dvorak
+138
-82
@@ -2761,17 +2761,23 @@ function updateBannerPreview() {
|
|||||||
const imagePreview = document.getElementById('imagePreview');
|
const imagePreview = document.getElementById('imagePreview');
|
||||||
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
|
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
|
||||||
|
|
||||||
// Get the current template config or use modern as default
|
// Get the current template config or use default if none selected
|
||||||
const defaultTemplate = templateConfigs['modern'] || {};
|
const defaultTemplate = templateConfigs['default'] || {};
|
||||||
const template = currentTemplate ? (templateConfigs[currentTemplate] || defaultTemplate) : defaultTemplate;
|
const template = currentTemplate ? (templateConfigs[currentTemplate] || defaultTemplate) : defaultTemplate;
|
||||||
const fileInput = document.getElementById('bannerImage');
|
const fileInput = document.getElementById('bannerImage');
|
||||||
const hasImage = Boolean(currentImage || (fileInput && fileInput.files && fileInput.files.length > 0));
|
const hasImage = Boolean(currentImage || (fileInput && fileInput.files && fileInput.files.length > 0));
|
||||||
|
|
||||||
// Ensure template has required properties
|
// Get all form field values or use template defaults
|
||||||
if (!template.background && !template.backgroundColor) {
|
const bannerBgColor = document.getElementById('bannerBgColor')?.value || template.backgroundColor || '#f8f9fa';
|
||||||
template.backgroundColor = template.backgroundColor || '#f8f9fa';
|
const bannerTextColor = document.getElementById('bannerTextColor')?.value || template.textColor || '#212529';
|
||||||
template.background = template.background || template.backgroundColor;
|
const bannerTextAlign = document.getElementById('bannerTextAlign')?.value || template.textAlign || 'left';
|
||||||
}
|
const bannerFontSize = document.getElementById('bannerFontSize')?.value || template.fontSize || 16;
|
||||||
|
const bannerPadding = document.getElementById('bannerPadding')?.value || template.padding || 20;
|
||||||
|
const bannerMargin = document.getElementById('bannerMargin')?.value || template.margin || 20;
|
||||||
|
const bannerBorderRadius = document.getElementById('bannerBorderRadius')?.value || template.borderRadius || 8;
|
||||||
|
const bannerButtonBackground = document.getElementById('bannerButtonBackground')?.value || template.buttonBackground || '#4a6cf7';
|
||||||
|
const bannerButtonTextColor = document.getElementById('bannerButtonTextColor')?.value || template.buttonTextColor || '#ffffff';
|
||||||
|
const bannerButtonBorder = document.getElementById('bannerButtonBorder')?.value || template.buttonBorder || 'none';
|
||||||
|
|
||||||
// Always show templates section
|
// Always show templates section
|
||||||
if (bannerTemplates) {
|
if (bannerTemplates) {
|
||||||
@@ -2783,49 +2789,29 @@ function updateBannerPreview() {
|
|||||||
const bannerLink = document.getElementById('bannerLink')?.value || '';
|
const bannerLink = document.getElementById('bannerLink')?.value || '';
|
||||||
const bannerTextContent = bannerText || 'Náhled banneru';
|
const bannerTextContent = bannerText || 'Náhled banneru';
|
||||||
|
|
||||||
// Get all styles from template or use defaults
|
// Get all styles from form fields or template defaults
|
||||||
const styles = {
|
const styles = {
|
||||||
// Background styles
|
// Background styles
|
||||||
background: (bannerBgColorPicker?.value || template.background || template.backgroundColor || '#f8f9fa').trim(),
|
background: template.background || bannerBgColor,
|
||||||
backgroundColor: (bannerBgColorPicker?.value || template.backgroundColor || '#f8f9fa').trim(),
|
backgroundColor: bannerBgColor,
|
||||||
|
|
||||||
// Text styles
|
// Text styles
|
||||||
color: (bannerTextColorPicker?.value || template.textColor || template.textStyle?.match(/color:\s*([^;]+)/)?.[1] || '#212529').trim(),
|
color: bannerTextColor,
|
||||||
textColor: (bannerTextColorPicker?.value || template.textColor || template.textStyle?.match(/color:\s*([^;]+)/)?.[1] || '#212529').trim(),
|
textColor: bannerTextColor,
|
||||||
textAlign: (document.getElementById('bannerTextAlign')?.value || 'left').trim(),
|
textAlign: bannerTextAlign,
|
||||||
fontSize: (document.getElementById('bannerFontSize')?.value ? `${document.getElementById('bannerFontSize').value}px` : '16px'),
|
fontSize: `${bannerFontSize}px`,
|
||||||
|
|
||||||
// Layout styles
|
// Layout styles
|
||||||
padding: (document.getElementById('bannerPadding')?.value ? `${document.getElementById('bannerPadding').value}px` : '20px'),
|
padding: `${bannerPadding}px`,
|
||||||
margin: (document.getElementById('bannerMargin')?.value ? `${document.getElementById('bannerMargin').value}px` : '20px'),
|
margin: `${bannerMargin}px`,
|
||||||
borderRadius: (document.getElementById('bannerBorderRadius')?.value ? `${document.getElementById('bannerBorderRadius').value}px` : '8px'),
|
borderRadius: `${bannerBorderRadius}px`,
|
||||||
|
|
||||||
// Container styles
|
// Button styles
|
||||||
containerStyle: (template.containerStyle || '').trim()
|
buttonBackground: bannerButtonBackground,
|
||||||
|
buttonTextColor: bannerButtonTextColor,
|
||||||
|
buttonBorder: bannerButtonBorder
|
||||||
};
|
};
|
||||||
|
|
||||||
// Special handling for specific templates
|
|
||||||
if (currentTemplate === 'modern') {
|
|
||||||
// Apply modern template specific styles
|
|
||||||
styles.background = template.background || styles.background;
|
|
||||||
styles.backgroundColor = template.backgroundColor || styles.backgroundColor;
|
|
||||||
styles.color = template.textColor || styles.color;
|
|
||||||
styles.textColor = template.textColor || styles.textColor;
|
|
||||||
|
|
||||||
// Add text shadow for better readability
|
|
||||||
if (template.textStyle && template.textStyle.includes('text-shadow')) {
|
|
||||||
const match = template.textStyle.match(/text-shadow:\s*([^;]+)/);
|
|
||||||
if (match && match[1]) {
|
|
||||||
styles.textShadow = match[1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (currentTemplate === 'dark') {
|
|
||||||
styles.background = '#2d3748';
|
|
||||||
styles.backgroundColor = '#2d3748';
|
|
||||||
styles.color = '#e2e8f0';
|
|
||||||
styles.textColor = '#e2e8f0';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create text content with template styles
|
// Create text content with template styles
|
||||||
const textStyle = `
|
const textStyle = `
|
||||||
font-size: ${styles.fontSize};
|
font-size: ${styles.fontSize};
|
||||||
@@ -2892,20 +2878,52 @@ function updateBannerPreview() {
|
|||||||
bannerContent = `
|
bannerContent = `
|
||||||
<div class="banner" style="
|
<div class="banner" style="
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: ${template.imagePosition === 'left' ? 'row' : 'row-reverse'};
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: ${styles.margin} auto;
|
||||||
padding: 20px;
|
padding: ${styles.padding};
|
||||||
${backgroundStyle};
|
${backgroundStyle};
|
||||||
color: ${styles.textColor || '#212529'};
|
color: ${styles.textColor};
|
||||||
border-radius: ${styles.borderRadius || '8px'};
|
border-radius: ${styles.borderRadius};
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
font-size: ${styles.fontSize};
|
||||||
|
text-align: ${styles.textAlign};
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
">
|
||||||
|
<div class="banner-content" style="
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 20px;
|
||||||
|
color: ${styles.textColor};
|
||||||
|
text-align: ${styles.textAlign};
|
||||||
|
font-size: ${styles.fontSize};
|
||||||
">
|
">
|
||||||
<div class="banner-content" style="flex: 1; padding: 0 0 0 20px;">
|
|
||||||
${textElement}
|
${textElement}
|
||||||
|
${template.buttonText ? `
|
||||||
|
<div style="margin-top: 15px;">
|
||||||
|
<a href="${bannerLink || '#'}"
|
||||||
|
target="_blank"
|
||||||
|
class="banner-button"
|
||||||
|
style="
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 20px;
|
||||||
|
background-color: ${styles.buttonBackground};
|
||||||
|
color: ${styles.buttonTextColor};
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: ${styles.buttonBorder};
|
||||||
|
font-size: ${parseInt(styles.fontSize) - 2}px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
"
|
||||||
|
onmouseover="this.style.opacity='0.9'; this.style.transform='translateY(-2px)';"
|
||||||
|
onmouseout="this.style.opacity='1'; this.style.transform='translateY(0)';">
|
||||||
|
${template.buttonText}
|
||||||
|
</a>
|
||||||
|
</div>` : ''}
|
||||||
</div>
|
</div>
|
||||||
${imgContainer}
|
${imgContainer}
|
||||||
</div>`;
|
</div>`;
|
||||||
@@ -2938,23 +2956,19 @@ function updateBannerPreview() {
|
|||||||
console.error('Error updating banner preview:', error);
|
console.error('Error updating banner preview:', error);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply template styles to the banner preview
|
// Apply template styles to the banner preview container
|
||||||
if (template && bannerPreview) {
|
if (template && bannerPreview) {
|
||||||
Object.assign(bannerPreview.style, {
|
Object.assign(bannerPreview.style, {
|
||||||
backgroundColor: template.bgColor || '#f8f9fa',
|
backgroundColor: 'transparent',
|
||||||
color: template.textColor || '#212529',
|
padding: '0',
|
||||||
textAlign: template.textAlign || 'left',
|
margin: '20px 0',
|
||||||
fontSize: `${template.fontSize || 16}px`,
|
boxShadow: 'none',
|
||||||
padding: `${template.padding || 20}px`,
|
|
||||||
margin: `${template.margin || 20}px 0`,
|
|
||||||
borderRadius: `${template.borderRadius || 8}px`,
|
|
||||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
||||||
display: 'block',
|
display: 'block',
|
||||||
overflow: 'hidden',
|
|
||||||
width: '100%',
|
width: '100%',
|
||||||
maxWidth: '1200px',
|
maxWidth: '1200px',
|
||||||
transition: 'all 0.3s ease',
|
transition: 'all 0.3s ease',
|
||||||
position: 'relative'
|
position: 'relative',
|
||||||
|
overflow: 'visible'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3395,16 +3409,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
// Create preview container with aspect ratio 16:9
|
// Create preview container with aspect ratio 16:9
|
||||||
templateElement.innerHTML = `
|
templateElement.innerHTML = `
|
||||||
<div class="relative pt-[56.25%] bg-white">
|
<div class="relative pt-[56.25%] bg-white">
|
||||||
<div class="absolute inset-0 flex items-center justify-center p-4 text-center" style="${template.containerStyle}">
|
<div class="absolute inset-0 flex items-center justify-center p-4 text-center" style="background: ${template.background || template.backgroundColor || '#ffffff'}; color: ${template.textColor || '#000000'}; text-align: ${template.textAlign || 'center'}; padding: ${template.padding || 20}px; border-radius: ${template.borderRadius || 0}px;">
|
||||||
<div class="w-full h-full relative">
|
<div class="w-full h-full relative">
|
||||||
${template.imageStyle ?
|
|
||||||
`<div class="absolute inset-0" style="${template.imageStyle}">
|
|
||||||
<div class="w-full h-full bg-gray-200"></div>
|
|
||||||
</div>` :
|
|
||||||
''
|
|
||||||
}
|
|
||||||
<div class="absolute inset-0 flex items-center justify-center p-4">
|
<div class="absolute inset-0 flex items-center justify-center p-4">
|
||||||
<div class="text-center px-4 py-2 rounded-md bg-black bg-opacity-50 text-white" style="${template.textStyle}">
|
<div class="text-center px-4 py-2 rounded-md" style="background: ${template.buttonBackground || '#4a6cf7'}; color: ${template.buttonTextColor || '#ffffff'}; border: ${template.buttonBorder || 'none'}; padding: 8px 16px; border-radius: 4px; font-weight: 500;">
|
||||||
${template.name}
|
${template.name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -3552,33 +3560,81 @@ function applyTemplate(templateId) {
|
|||||||
const template = templateConfigs[templateId];
|
const template = templateConfigs[templateId];
|
||||||
if (!template) return;
|
if (!template) return;
|
||||||
|
|
||||||
|
console.log('Applying template:', templateId, template);
|
||||||
|
|
||||||
// Store the selected template
|
// Store the selected template
|
||||||
currentTemplate = templateId;
|
currentTemplate = templateId;
|
||||||
|
|
||||||
// Update form fields with template styles
|
// Update form fields with template styles
|
||||||
if (template.containerStyle) {
|
const bannerBgColor = document.getElementById('bannerBgColor');
|
||||||
const bannerContainer = document.getElementById('bannerPreview');
|
const bannerTextColor = document.getElementById('bannerTextColor');
|
||||||
if (bannerContainer) {
|
const bannerTextAlign = document.getElementById('bannerTextAlign');
|
||||||
bannerContainer.style = template.containerStyle;
|
const bannerFontSize = document.getElementById('bannerFontSize');
|
||||||
}
|
const bannerPadding = document.getElementById('bannerPadding');
|
||||||
|
const bannerMargin = document.getElementById('bannerMargin');
|
||||||
|
const bannerBorderRadius = document.getElementById('bannerBorderRadius');
|
||||||
|
const bannerButtonBackground = document.getElementById('bannerButtonBackground');
|
||||||
|
const bannerButtonTextColor = document.getElementById('bannerButtonTextColor');
|
||||||
|
const bannerButtonBorder = document.getElementById('bannerButtonBorder');
|
||||||
|
|
||||||
|
// Update background color (use background if available, otherwise use backgroundColor)
|
||||||
|
if (bannerBgColor) {
|
||||||
|
const bgColor = template.background || template.backgroundColor || '#ffffff';
|
||||||
|
bannerBgColor.value = bgColor;
|
||||||
|
// Update color picker if it exists
|
||||||
|
const bannerBgColorPicker = document.getElementById('bannerBgColorPicker');
|
||||||
|
if (bannerBgColorPicker) bannerBgColorPicker.value = bgColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update text styles if they exist in the template
|
// Update text color
|
||||||
if (template.textStyle) {
|
if (bannerTextColor && template.textColor) {
|
||||||
const bannerText = document.getElementById('bannerText');
|
bannerTextColor.value = template.textColor;
|
||||||
if (bannerText) {
|
// Update color picker if it exists
|
||||||
bannerText.style = template.textStyle;
|
const bannerTextColorPicker = document.getElementById('bannerTextColorPicker');
|
||||||
}
|
if (bannerTextColorPicker) bannerTextColorPicker.value = template.textColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update button styles if they exist in the template
|
// Update text alignment
|
||||||
if (template.buttonStyle) {
|
if (bannerTextAlign && template.textAlign) {
|
||||||
const bannerButton = document.querySelector('.banner-button');
|
bannerTextAlign.value = template.textAlign;
|
||||||
if (bannerButton) {
|
|
||||||
bannerButton.style = template.buttonStyle;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Update font size
|
||||||
|
if (bannerFontSize && template.fontSize) {
|
||||||
|
bannerFontSize.value = template.fontSize;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Update padding
|
||||||
|
if (bannerPadding && template.padding) {
|
||||||
|
bannerPadding.value = template.padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update margin
|
||||||
|
if (bannerMargin && template.margin) {
|
||||||
|
bannerMargin.value = template.margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update border radius
|
||||||
|
if (bannerBorderRadius && template.borderRadius) {
|
||||||
|
bannerBorderRadius.value = template.borderRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update button styles
|
||||||
|
if (bannerButtonBackground && template.buttonBackground) {
|
||||||
|
bannerButtonBackground.value = template.buttonBackground;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bannerButtonTextColor && template.buttonTextColor) {
|
||||||
|
bannerButtonTextColor.value = template.buttonTextColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bannerButtonBorder && template.buttonBorder) {
|
||||||
|
bannerButtonBorder.value = template.buttonBorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update color previews
|
||||||
|
updateColorPreviews();
|
||||||
|
|
||||||
// Update the banner preview with the new template
|
// Update the banner preview with the new template
|
||||||
updateBannerPreview();
|
updateBannerPreview();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user