@@ -676,11 +733,62 @@ window.fetch = async function(resource, init = {}) {
return originalFetch(resource, init);
};
-// Image handling
-document.getElementById('uploadImageBtn').addEventListener('click', function() {
- document.getElementById('bannerImage').click();
+// Image handling - Drag and Drop functionality
+const dragDropArea = document.getElementById('dragDropArea');
+const uploadImageBtn = document.getElementById('uploadImageBtn');
+const bannerImage = document.getElementById('bannerImage');
+
+// Click on drag area to select file
+dragDropArea.addEventListener('click', function() {
+ bannerImage.click();
});
+// Click on upload button to select file
+uploadImageBtn.addEventListener('click', function() {
+ bannerImage.click();
+});
+
+// Prevent default behavior for drag events
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+ dragDropArea.addEventListener(eventName, preventDefaults, false);
+});
+
+function preventDefaults(e) {
+ e.preventDefault();
+ e.stopPropagation();
+}
+
+// Visual feedback when dragging over the area
+['dragenter', 'dragover'].forEach(eventName => {
+ dragDropArea.addEventListener(eventName, highlight, false);
+});
+
+['dragleave', 'drop'].forEach(eventName => {
+ dragDropArea.addEventListener(eventName, unhighlight, false);
+});
+
+function highlight() {
+ dragDropArea.classList.add('dragover');
+}
+
+function unhighlight() {
+ dragDropArea.classList.remove('dragover');
+}
+
+// Handle dropped files
+dragDropArea.addEventListener('drop', handleDrop, false);
+
+function handleDrop(e) {
+ const dt = e.dataTransfer;
+ const files = dt.files;
+
+ if (files.length) {
+ bannerImage.files = files;
+ const event = new Event('change');
+ bannerImage.dispatchEvent(event);
+ }
+}
+
// Handle image upload
function handleImageUpload(event) {
const fileInput = event.target;
@@ -691,7 +799,7 @@ function handleImageUpload(event) {
// Check file type
const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
if (!validImageTypes.includes(file.type)) {
- alert('Vyberte prosím soubor obrázku (JPG, PNG, GIF, SVG)');
+ showNotification('Vyberte prosím soubor obrázku (JPG, PNG, GIF, SVG)', 'warning');
fileInput.value = ''; // Reset file input
return;
}
@@ -699,7 +807,7 @@ function handleImageUpload(event) {
// Check file size (max 5MB)
const maxSize = 5 * 1024 * 1024; // 5MB
if (file.size > maxSize) {
- alert('Maximální velikost souboru je 5MB');
+ showNotification('Maximální velikost souboru je 5MB', 'warning');
fileInput.value = ''; // Reset file input
return;
}
@@ -710,6 +818,7 @@ function handleImageUpload(event) {
const preview = document.getElementById('imagePreview');
const previewContainer = document.getElementById('imagePreviewContainer');
const removeBtn = document.getElementById('removeImageBtn');
+ const dragDropMessage = document.querySelector('.drag-drop-message');
// Update preview elements if they exist
if (preview) {
@@ -725,6 +834,11 @@ function handleImageUpload(event) {
removeBtn.style.display = 'inline-block';
}
+ // Hide the drag & drop message when showing preview
+ if (dragDropMessage) {
+ dragDropMessage.style.display = 'none';
+ }
+
// Update hidden input
const removeImageInput = document.getElementById('removeImage');
if (removeImageInput) {
@@ -737,7 +851,7 @@ function handleImageUpload(event) {
};
reader.onerror = function() {
- alert('Při načítání obrázku došlo k chybě. Zkuste to prosím znovu.');
+ showNotification('Při načítání obrázku došlo k chybě. Zkuste to prosím znovu.', 'error');
fileInput.value = ''; // Reset file input
};
@@ -1005,6 +1119,7 @@ function removeImage() {
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
const removeBtn = document.getElementById('removeImageBtn');
const removeImageInput = document.getElementById('removeImage');
+ const dragDropMessage = document.querySelector('.drag-drop-message');
// Reset file input
if (bannerImage) bannerImage.value = '';
@@ -1020,6 +1135,11 @@ function removeImage() {
imagePreviewContainer.style.display = 'none';
}
+ // Show drag & drop message again
+ if (dragDropMessage) {
+ dragDropMessage.style.display = 'flex';
+ }
+
// Hide remove button
if (removeBtn) {
removeBtn.style.display = 'none';
@@ -1034,6 +1154,9 @@ function removeImage() {
currentImage = null;
updateBannerPreview();
+ // Show success notification
+ showNotification('Obrázek byl odstraněn', 'info');
+
// Trigger a change event on the file input in case any other code is listening
if (bannerImage) {
const event = new Event('change');
@@ -1044,13 +1167,13 @@ function removeImage() {
// Update banner preview
function updateBannerPreview() {
const bannerPreview = document.getElementById('bannerPreview');
- const bannerPreviewText = bannerPreview?.querySelector('.banner-preview-text');
- const bannerPreviewBg = bannerPreview?.querySelector('.banner-preview-bg');
const bannerPreviewContent = bannerPreview?.querySelector('.banner-preview-content');
+ const bannerPreviewBg = bannerPreview?.querySelector('.banner-preview-bg');
const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+ const bannerLink = document.getElementById('bannerLink')?.value || '';
- if (!bannerPreview || !bannerPreviewText || !bannerPreviewBg || !bannerPreviewContent) {
+ if (!bannerPreview || !bannerPreviewContent || !bannerPreviewBg) {
return; // Elements not found
}
@@ -1064,73 +1187,63 @@ function updateBannerPreview() {
const bannerMargin = parseInt(document.getElementById('bannerMargin')?.value || '20');
const bannerBorderRadius = parseInt(document.getElementById('bannerBorderRadius')?.value || '8');
- // Update banner styles
+ // Update banner container styles to match index.html
bannerPreview.style.display = 'block';
- bannerPreview.style.padding = `${bannerPadding}px`;
- bannerPreview.style.margin = `${bannerMargin}px auto`;
- bannerPreview.style.borderRadius = `${bannerBorderRadius}px`;
- bannerPreview.style.overflow = 'hidden';
- bannerPreview.style.position = 'relative';
- bannerPreview.style.backgroundColor = bannerBgColor;
- bannerPreview.style.textAlign = bannerTextAlign;
+ bannerPreview.style.width = '100%';
+ bannerPreview.style.transition = 'all 0.3s ease';
+ bannerPreview.style.margin = '0 auto';
+ bannerPreview.style.maxWidth = '100%';
+ bannerPreview.style.padding = '0';
- // Update banner content
- bannerPreviewText.textContent = bannerText || 'Náhled banneru';
- bannerPreviewText.style.fontSize = `${bannerFontSize}px`;
- bannerPreviewText.style.color = bannerTextColor;
- bannerPreviewText.style.margin = '0';
- bannerPreviewText.style.padding = '15px';
- bannerPreviewText.style.position = 'relative';
- bannerPreviewText.style.zIndex = '2';
+ // Update banner content styles to match index.html
+ Object.assign(bannerPreviewContent.style, {
+ backgroundColor: bannerBgColor,
+ color: bannerTextColor,
+ textAlign: bannerTextAlign,
+ fontSize: `${bannerFontSize}px`,
+ padding: `${bannerPadding}px`,
+ margin: `${bannerMargin}px 0`,
+ borderRadius: `${bannerBorderRadius}px`,
+ boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+ display: 'block',
+ position: 'relative',
+ zIndex: '2'
+ });
- // Handle image
+ // Handle content and image like in index.html
+ let content = bannerText || 'Náhled banneru';
const bannerImage = document.getElementById('bannerImage');
const hasImage = currentImage || (bannerImage && bannerImage.files.length > 0);
- if (hasImage) {
- bannerPreview.classList.add('with-image');
+ if (hasImage && currentImage) {
+ // Format content with image like in index.html
+ content = `
+
+
+
+ ${content}
+ `;
- // Update background image
- if (currentImage) {
- bannerPreviewBg.style.backgroundImage = `url(${currentImage})`;
- bannerPreviewBg.style.display = 'block';
-
- // Show the image preview in the container
- if (imagePreview && imagePreviewContainer) {
- imagePreview.src = currentImage;
- imagePreviewContainer.style.display = 'block';
- }
- } else {
- bannerPreviewBg.style.backgroundImage = '';
- bannerPreviewBg.style.display = 'none';
-
- // Hide the image preview container if no image
- if (imagePreviewContainer) {
- imagePreviewContainer.style.display = 'none';
- }
+ // Show the image preview in the container
+ if (imagePreview && imagePreviewContainer) {
+ imagePreview.src = currentImage;
+ imagePreviewContainer.style.display = 'block';
}
-
- // Style the background image
- bannerPreviewBg.style.position = 'absolute';
- bannerPreviewBg.style.top = '0';
- bannerPreviewBg.style.left = '0';
- bannerPreviewBg.style.width = '100%';
- bannerPreviewBg.style.height = '100%';
- bannerPreviewBg.style.backgroundSize = 'cover';
- bannerPreviewBg.style.backgroundPosition = 'center';
- bannerPreviewBg.style.backgroundRepeat = 'no-repeat';
- bannerPreviewBg.style.opacity = '0.7';
- bannerPreviewBg.style.zIndex = '1';
} else {
- bannerPreview.classList.remove('with-image');
- bannerPreviewBg.style.display = 'none';
-
- // Hide the image preview container
+ // Hide the image preview container if no image
if (imagePreviewContainer) {
imagePreviewContainer.style.display = 'none';
}
}
+ // Wrap in link if provided
+ if (bannerLink) {
+ content = `
${content}`;
+ }
+
+ // Update content
+ bannerPreviewContent.innerHTML = content;
+
// Make sure the preview is visible
bannerPreview.style.visibility = 'visible';
}