- 
+
+
${content}
`;
@@ -1257,6 +1363,11 @@ function updateBannerPreview() {
if (imagePreviewContainer) {
imagePreviewContainer.style.display = 'none';
}
+
+ // Hide image position controls
+ if (imagePositionControls) {
+ imagePositionControls.style.display = 'none';
+ }
}
// Wrap in link if provided
@@ -1269,6 +1380,11 @@ function updateBannerPreview() {
// Make sure the preview is visible
bannerPreview.style.visibility = 'visible';
+
+ // Setup drag functionality for the image if in custom position mode
+ if (hasImage && imagePosition === 'custom') {
+ setupDraggableImage();
+ }
}
// Apply preset
@@ -1373,8 +1489,109 @@ stylePresets.forEach(preset => {
saveBannerBtn.addEventListener('click', saveBanner);
-// Load banner when page loads
-document.addEventListener('DOMContentLoaded', loadBanner);
+// Setup draggable image functionality
+function setupDraggableImage() {
+ const draggableImage = document.querySelector('.draggable-image');
+ if (!draggableImage) return;
+
+ let isDragging = false;
+ let startX, startY;
+ let originalX = parseInt(currentImageX) || 0;
+ let originalY = parseInt(currentImageY) || 0;
+
+ // Mouse events for desktop
+ draggableImage.addEventListener('mousedown', startDrag);
+ document.addEventListener('mousemove', drag);
+ document.addEventListener('mouseup', endDrag);
+
+ // Touch events for mobile
+ draggableImage.addEventListener('touchstart', startDragTouch);
+ document.addEventListener('touchmove', dragTouch);
+ document.addEventListener('touchend', endDrag);
+
+ function startDrag(e) {
+ e.preventDefault();
+ isDragging = true;
+ startX = e.clientX;
+ startY = e.clientY;
+ draggableImage.classList.add('dragging');
+ }
+
+ function startDragTouch(e) {
+ if (e.touches.length === 1) {
+ isDragging = true;
+ startX = e.touches[0].clientX;
+ startY = e.touches[0].clientY;
+ draggableImage.classList.add('dragging');
+ }
+ }
+
+ function drag(e) {
+ if (!isDragging) return;
+
+ const deltaX = e.clientX - startX;
+ const deltaY = e.clientY - startY;
+
+ const newX = originalX + deltaX;
+ const newY = originalY + deltaY;
+
+ draggableImage.style.left = `${newX}px`;
+ draggableImage.style.top = `${newY}px`;
+
+ // Update current position values
+ currentImageX = newX.toString();
+ currentImageY = newY.toString();
+ }
+
+ function dragTouch(e) {
+ if (!isDragging || e.touches.length !== 1) return;
+
+ const deltaX = e.touches[0].clientX - startX;
+ const deltaY = e.touches[0].clientY - startY;
+
+ const newX = originalX + deltaX;
+ const newY = originalY + deltaY;
+
+ draggableImage.style.left = `${newX}px`;
+ draggableImage.style.top = `${newY}px`;
+
+ // Update current position values
+ currentImageX = newX.toString();
+ currentImageY = newY.toString();
+ }
+
+ function endDrag() {
+ if (!isDragging) return;
+
+ isDragging = false;
+ originalX = parseInt(currentImageX);
+ originalY = parseInt(currentImageY);
+ draggableImage.classList.remove('dragging');
+ }
+}
+
+// Setup image position buttons
+document.addEventListener('DOMContentLoaded', () => {
+ // Add event listeners to image position buttons
+ const positionButtons = document.querySelectorAll('.image-position-btn');
+ positionButtons.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const position = btn.dataset.position;
+ currentImagePosition = position;
+
+ // Reset position values if not custom
+ if (position !== 'custom') {
+ currentImageX = '0';
+ currentImageY = '0';
+ }
+
+ // Update preview
+ updateBannerPreview();
+ });
+ });
+
+ loadBanner();
+});