diff --git a/admin-dashboard.html b/admin-dashboard.html index 234ea31..8c45c5f 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -583,79 +583,76 @@

Správa banneru

-
-
-
Nastavení banneru
+
+
+ +
-
-
- -
- -
- -
+ + + + +
+ + +
+
+ +
+ + +
+ +
+
- -
- - + +
+ +
+ + + + +
+ Pro vlastní pozici přetáhněte obrázek myší +
+
+
- +
@@ -742,7 +739,7 @@ window.fetch = async function(resource, init = {}) { }; // Image handling - Drag and Drop functionality -let dragDropArea, uploadImageBtn, bannerImage; +let dragDropArea, uploadImageBtn, bannerImageElement; // Prevent default behavior for drag events function preventDefaults(e) { @@ -1011,36 +1008,23 @@ const presets = { let currentImagePosition = 'center'; // default position let currentImageX = '0'; let currentImageY = '0'; - -// Load current banner async function loadBanner() { try { const response = await fetch('/api/banner'); - if (!response.ok) { - throw new Error('Nepodařilo se načíst banner'); - } + if (!response.ok) throw new Error('Nepodařilo se načíst banner'); + const data = await response.json(); console.log('Loaded banner data:', data); if (data) { // Update form fields const bannerText = document.getElementById('bannerText'); - const bannerBgColor = document.getElementById('bannerBgColor'); - const bannerTextColor = document.getElementById('bannerTextColor'); - const bannerTextAlign = document.getElementById('bannerTextAlign'); - const bannerFontSize = document.getElementById('bannerFontSize'); - const bannerPadding = document.getElementById('bannerPadding'); - const bannerMargin = document.getElementById('bannerMargin'); - const bannerBorderRadius = document.getElementById('bannerBorderRadius'); + const bannerLink = document.getElementById('bannerLink'); + const bannerVisible = document.getElementById('bannerVisible'); if (bannerText) bannerText.value = data.text || ''; - if (bannerBgColor) bannerBgColor.value = data.style?.backgroundColor || '#f8d7da'; - if (bannerTextColor) bannerTextColor.value = data.style?.color || '#721c24'; - if (bannerTextAlign) bannerTextAlign.value = data.style?.textAlign || 'center'; - if (bannerFontSize) bannerFontSize.value = data.style?.fontSize || '18'; - if (bannerPadding) bannerPadding.value = data.style?.padding || '20'; - if (bannerMargin) bannerMargin.value = data.style?.margin || '20'; - if (bannerBorderRadius) bannerBorderRadius.value = data.style?.borderRadius || '8'; + if (bannerLink) bannerLink.value = data.link || ''; + if (bannerVisible) bannerVisible.checked = data.style?.isVisible !== false; // Initialize image position variables once currentImagePosition = data.style?.imagePosition || 'center'; @@ -1074,22 +1058,54 @@ async function loadBanner() { if (data.image) { currentImage = data.image; + const bannerImgElement = document.getElementById('bannerImagePreview'); + + if (bannerImgElement) { + const bannerLinkValue = document.getElementById('bannerLink')?.value || ''; + + if (bannerLinkValue) { + bannerImgElement.style.cursor = 'pointer'; + bannerImgElement.onclick = (e) => { + e.preventDefault(); + window.open(bannerLinkValue, '_blank'); + }; + } else { + bannerImgElement.style.cursor = 'default'; + bannerImgElement.onclick = null; + } + } if (imagePreview) { imagePreview.src = data.image; - imagePreview.alt = 'Nahraný obrázek banneru'; + imagePreview.classList.remove('d-none'); + + // Update position if exists + if (data.style?.imagePosition) { + currentImagePosition = data.style.imagePosition; + imagePreview.dataset.position = currentImagePosition; + + // Update active state of position buttons + document.querySelectorAll('.image-pos-btn').forEach(btn => { + btn.classList.remove('active'); + if (btn.dataset.pos === currentImagePosition) { + btn.classList.add('active'); + } + }); + } + + // Update coordinates if they exist + if (data.style?.imageX !== undefined && data.style?.imageY !== undefined) { + currentImageX = data.style.imageX; + currentImageY = data.style.imageY; + imagePreview.style.left = `${currentImageX}px`; + imagePreview.style.top = `${currentImageY}px`; + + // Activate custom position + document.getElementById('customPosBtn').classList.add('active'); + } } - - if (imagePreviewContainer) { - imagePreviewContainer.style.display = 'block'; - } - - if (removeBtn) { - removeBtn.style.display = 'inline-block'; - } - if (removeImageInput) { - removeImageInput.value = 'false'; + removeImageInput.value = 'true'; } } else { // No image in the saved banner @@ -1520,6 +1536,25 @@ function updateBannerPreview() { if (bannerPreview) { bannerPreview.style.visibility = 'visible'; } + + // Update image position and visibility + const bannerImgElement = document.getElementById('bannerImagePreview'); + const hasImageElement = bannerImgElement && !bannerImgElement.classList.contains('d-none') && bannerImgElement.src; + + if (hasImageElement) { + const bannerLinkValue = document.getElementById('bannerLink')?.value || ''; + + if (bannerLinkValue) { + bannerImgElement.style.cursor = 'pointer'; + bannerImgElement.onclick = (e) => { + e.preventDefault(); + window.open(bannerLinkValue, '_blank'); + }; + } else { + bannerImgElement.style.cursor = 'default'; + bannerImgElement.onclick = null; + } + } } // Apply preset @@ -1823,62 +1858,52 @@ document.addEventListener('DOMContentLoaded', () => { const bannerTextColorPicker = document.getElementById('bannerTextColorPicker'); const bannerTextColor = document.getElementById('bannerTextColor'); const bannerText = document.getElementById('bannerText'); + const bannerLink = document.getElementById('bannerLink'); const bannerTextAlign = document.getElementById('bannerTextAlign'); const bannerFontSize = document.getElementById('bannerFontSize'); const bannerPadding = document.getElementById('bannerPadding'); const bannerMargin = document.getElementById('bannerMargin'); const bannerBorderRadius = document.getElementById('bannerBorderRadius'); - const bannerVisible = document.getElementById('bannerVisible'); + const bannerVisibility = document.getElementById('bannerVisibility'); const stylePresets = document.querySelectorAll('.style-preset'); const saveBannerBtn = document.getElementById('saveBannerBtn'); // Set up color picker event listeners if elements exist if (bannerBgColorPicker && bannerBgColor) { - // Update only the color preview during dragging (lightweight) bannerBgColorPicker.addEventListener('input', () => { bannerBgColor.value = bannerBgColorPicker.value; - const bgColorPreview = document.getElementById('bgColorPreview'); - if (bgColorPreview) { - bgColorPreview.style.backgroundColor = bannerBgColorPicker.value; - } - }); - - // Update the full preview only when the user has finished selecting a color - bannerBgColorPicker.addEventListener('change', () => { updateColorPreviews(); - updateBannerPreview(); }); } if (bannerTextColorPicker && bannerTextColor) { - // Same for text color picker bannerTextColorPicker.addEventListener('input', () => { bannerTextColor.value = bannerTextColorPicker.value; - const textColorPreview = document.getElementById('textColorPreview'); - if (textColorPreview) { - textColorPreview.style.backgroundColor = bannerTextColorPicker.value; - } - }); - - bannerTextColorPicker.addEventListener('change', () => { updateColorPreviews(); - updateBannerPreview(); }); } // For other form controls, use debounced updates on input const formControls = [ - bannerText, bannerTextAlign, bannerFontSize, - bannerPadding, bannerMargin, bannerBorderRadius, bannerVisible - ].filter(Boolean); // Filter out any null/undefined elements + bannerText, bannerLink, bannerTextAlign, bannerFontSize, + bannerPadding, bannerMargin, bannerBorderRadius, bannerVisibility + ]; - formControls.forEach(el => { - if (el) { - el.addEventListener('change', updateBannerPreview); - el.addEventListener('input', debouncedUpdatePreview); + formControls.forEach(control => { + if (control) { + control.addEventListener('input', debounce(() => { + updateBannerPreview(); + }, 300)); } }); + // Toggle visibility + if (bannerVisibility) { + bannerVisibility.addEventListener('change', () => { + updateBannerPreview(); + }); + } + // Style presets if (stylePresets.length > 0) { stylePresets.forEach(preset => {