TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-04 04:22:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Tomáš Dvořák
2025-05-27 13:29:55 +02:00
committed by GitHub
parent a17fd9c010
commit 13583ddae3
2 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+67 -24
View File
@@ -685,18 +685,24 @@
<div class="banner-preview" id="bannerPreview" style="display: none;"> <div class="banner-preview" id="bannerPreview" style="display: none;">
<div class="banner-preview-bg"></div> <div class="banner-preview-bg"></div>
<div class="banner-preview-content">Náhled banneru se zde zobrazí</div> <div class="banner-preview-content">Náhled banneru se zde zobrazí</div>
<div id="imagePositionControls" style="display: none; margin-top: 10px;"> </div>
<p style="margin-bottom: 8px;">Pozice obrázku:</p>
<div class="image-position-options"> <div id="imagePositionControls" style="display: none; margin-top: 15px;">
<button type="button" class="image-position-btn" data-position="left">Vlevo</button> <p style="margin-bottom: 8px;"><strong>Pozice obrázku:</strong></p>
<button type="button" class="image-position-btn" data-position="center">Na střed</button> <div class="image-position-options">
<button type="button" class="image-position-btn" data-position="right">Vpravo</button> <button type="button" class="image-position-btn" data-position="left">Vlevo</button>
<button type="button" class="image-position-btn" data-position="custom">Vlastní (přetáhněte)</button> <button type="button" class="image-position-btn" data-position="center">Na střed</button>
</div> <button type="button" class="image-position-btn" data-position="right">Vpravo</button>
<p class="help-text" style="margin-top: 8px; font-size: 0.9rem; color: var(--secondary-color);"> <button type="button" class="image-position-btn" data-position="custom">Vlastní (přetáhněte)</button>
Pro vlastní umístění klikněte a táhněte obrázek v náhledu
</p>
</div> </div>
<p class="help-text" style="margin-top: 8px; font-size: 0.9rem; color: var(--secondary-color);">
Pro vlastní umístění klikněte a táhněte obrázek v náhledu
</p>
<!-- Hidden fields for image position data -->
<input type="hidden" id="imagePosition" name="style[imagePosition]" value="center">
<input type="hidden" id="imagePositionX" name="style[imageX]" value="0">
<input type="hidden" id="imagePositionY" name="style[imageY]" value="0">
</div> </div>
<div id="imagePreviewContainer" style="display: none; margin-top: 15px; text-align: center;"> <div id="imagePreviewContainer" style="display: none; margin-top: 15px; text-align: center;">
@@ -982,6 +988,7 @@ async function loadBanner() {
throw new Error('Nepodařilo se načíst banner'); throw new Error('Nepodařilo se načíst banner');
} }
const data = await response.json(); const data = await response.json();
console.log('Loaded banner data:', data);
if (data) { if (data) {
// Update form fields // Update form fields
@@ -999,6 +1006,17 @@ async function loadBanner() {
currentImageX = data.style?.imageX || '0'; currentImageX = data.style?.imageX || '0';
currentImageY = data.style?.imageY || '0'; currentImageY = data.style?.imageY || '0';
// Update hidden input fields for image position
document.getElementById('imagePosition').value = currentImagePosition;
document.getElementById('imagePositionX').value = currentImageX;
document.getElementById('imagePositionY').value = currentImageY;
// Update active button
const positionButtons = document.querySelectorAll('.image-position-btn');
positionButtons.forEach(btn => {
btn.classList.toggle('active', btn.dataset.position === currentImagePosition);
});
// Handle image // Handle image
const imagePreview = document.getElementById('imagePreview'); const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer'); const imagePreviewContainer = document.getElementById('imagePreviewContainer');
@@ -1095,10 +1113,15 @@ async function saveBanner(event) {
formData.append('style[borderRadius]', document.getElementById('bannerBorderRadius').value || '0px'); formData.append('style[borderRadius]', document.getElementById('bannerBorderRadius').value || '0px');
formData.append('style[isVisible]', document.getElementById('bannerVisible').checked); formData.append('style[isVisible]', document.getElementById('bannerVisible').checked);
// Append image position data // Append image position data from hidden fields
formData.append('style[imagePosition]', currentImagePosition); formData.append('style[imagePosition]', document.getElementById('imagePosition').value);
formData.append('style[imageX]', currentImageX); formData.append('style[imageX]', document.getElementById('imagePositionX').value);
formData.append('style[imageY]', currentImageY); formData.append('style[imageY]', document.getElementById('imagePositionY').value);
console.log('Sending image position:',
document.getElementById('imagePosition').value,
document.getElementById('imagePositionX').value,
document.getElementById('imagePositionY').value);
// Log form data for debugging // Log form data for debugging
console.log('Odesílám data:'); console.log('Odesílám data:');
@@ -1494,18 +1517,22 @@ function setupDraggableImage() {
const draggableImage = document.querySelector('.draggable-image'); const draggableImage = document.querySelector('.draggable-image');
if (!draggableImage) return; if (!draggableImage) return;
// Remove any existing event listeners to prevent duplicates
const newDraggable = draggableImage.cloneNode(true);
draggableImage.parentNode.replaceChild(newDraggable, draggableImage);
let isDragging = false; let isDragging = false;
let startX, startY; let startX, startY;
let originalX = parseInt(currentImageX) || 0; let originalX = parseInt(currentImageX) || 0;
let originalY = parseInt(currentImageY) || 0; let originalY = parseInt(currentImageY) || 0;
// Mouse events for desktop // Mouse events for desktop
draggableImage.addEventListener('mousedown', startDrag); newDraggable.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag); document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag); document.addEventListener('mouseup', endDrag);
// Touch events for mobile // Touch events for mobile
draggableImage.addEventListener('touchstart', startDragTouch); newDraggable.addEventListener('touchstart', startDragTouch);
document.addEventListener('touchmove', dragTouch); document.addEventListener('touchmove', dragTouch);
document.addEventListener('touchend', endDrag); document.addEventListener('touchend', endDrag);
@@ -1514,7 +1541,8 @@ function setupDraggableImage() {
isDragging = true; isDragging = true;
startX = e.clientX; startX = e.clientX;
startY = e.clientY; startY = e.clientY;
draggableImage.classList.add('dragging'); newDraggable.classList.add('dragging');
console.log('Started dragging at', startX, startY);
} }
function startDragTouch(e) { function startDragTouch(e) {
@@ -1522,7 +1550,7 @@ function setupDraggableImage() {
isDragging = true; isDragging = true;
startX = e.touches[0].clientX; startX = e.touches[0].clientX;
startY = e.touches[0].clientY; startY = e.touches[0].clientY;
draggableImage.classList.add('dragging'); newDraggable.classList.add('dragging');
} }
} }
@@ -1535,12 +1563,13 @@ function setupDraggableImage() {
const newX = originalX + deltaX; const newX = originalX + deltaX;
const newY = originalY + deltaY; const newY = originalY + deltaY;
draggableImage.style.left = `${newX}px`; newDraggable.style.left = `${newX}px`;
draggableImage.style.top = `${newY}px`; newDraggable.style.top = `${newY}px`;
// Update current position values // Update current position values
currentImageX = newX.toString(); currentImageX = newX.toString();
currentImageY = newY.toString(); currentImageY = newY.toString();
console.log('Dragging to', newX, newY);
} }
function dragTouch(e) { function dragTouch(e) {
@@ -1552,8 +1581,8 @@ function setupDraggableImage() {
const newX = originalX + deltaX; const newX = originalX + deltaX;
const newY = originalY + deltaY; const newY = originalY + deltaY;
draggableImage.style.left = `${newX}px`; newDraggable.style.left = `${newX}px`;
draggableImage.style.top = `${newY}px`; newDraggable.style.top = `${newY}px`;
// Update current position values // Update current position values
currentImageX = newX.toString(); currentImageX = newX.toString();
@@ -1566,7 +1595,12 @@ function setupDraggableImage() {
isDragging = false; isDragging = false;
originalX = parseInt(currentImageX); originalX = parseInt(currentImageX);
originalY = parseInt(currentImageY); originalY = parseInt(currentImageY);
draggableImage.classList.remove('dragging'); newDraggable.classList.remove('dragging');
console.log('Finished dragging at', originalX, originalY);
// Force a save of the current position
document.getElementById('imagePositionX').value = currentImageX;
document.getElementById('imagePositionY').value = currentImageY;
} }
} }
@@ -1579,12 +1613,21 @@ document.addEventListener('DOMContentLoaded', () => {
const position = btn.dataset.position; const position = btn.dataset.position;
currentImagePosition = position; currentImagePosition = position;
// Update hidden input field
document.getElementById('imagePosition').value = position;
// Reset position values if not custom // Reset position values if not custom
if (position !== 'custom') { if (position !== 'custom') {
currentImageX = '0'; currentImageX = '0';
currentImageY = '0'; currentImageY = '0';
document.getElementById('imagePositionX').value = '0';
document.getElementById('imagePositionY').value = '0';
} }
// Update active button styling
positionButtons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Update preview // Update preview
updateBannerPreview(); updateBannerPreview();
}); });
index.html
+5 -2
View File
@@ -59,11 +59,13 @@
let imageStyle = `max-width: 100%; max-height: 200px; border-radius: ${imageRadius}px;`; let imageStyle = `max-width: 100%; max-height: 200px; border-radius: ${imageRadius}px;`;
let containerStyle = 'margin-bottom: 15px;'; let containerStyle = 'margin-bottom: 15px;';
// Get image position data // Get image position data
const imagePosition = banner.style.imagePosition || 'center'; const imagePosition = banner.style.imagePosition || 'center';
const imageX = banner.style.imageX || '0'; const imageX = banner.style.imageX || '0';
const imageY = banner.style.imageY || '0'; const imageY = banner.style.imageY || '0';
console.log('Applying image position:', imagePosition, imageX, imageY);
switch(imagePosition) { switch(imagePosition) {
case 'left': case 'left':
containerStyle += 'text-align: left; float: left; margin-right: 15px;'; containerStyle += 'text-align: left; float: left; margin-right: 15px;';
@@ -73,7 +75,8 @@
break; break;
case 'custom': case 'custom':
containerStyle += 'position: relative;'; containerStyle += 'position: relative;';
imageStyle += `position: relative; left: ${imageX}px; top: ${imageY}px;`; // For custom position, use absolute positioning to ensure exact placement
imageStyle += `position: absolute; left: ${imageX}px; top: ${imageY}px;`;
break; break;
default: // center default: // center
containerStyle += `text-align: ${banner.style.textAlign || 'center'};`; containerStyle += `text-align: ${banner.style.textAlign || 'center'};`;