mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-03 20:12:59 +00:00
g
This commit is contained in:
+31
-13
@@ -693,16 +693,20 @@
|
||||
<button type="button" class="image-position-btn" data-position="left">Vlevo</button>
|
||||
<button type="button" class="image-position-btn" data-position="center">Na střed</button>
|
||||
<button type="button" class="image-position-btn" data-position="right">Vpravo</button>
|
||||
<button type="button" class="image-position-btn" data-position="custom">Vlastní (přetáhněte)</button>
|
||||
</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>
|
||||
|
||||
<div class="form-group" style="margin-top: 15px;">
|
||||
<label for="bannerImageWidth">Šířka obrázku (px)</label>
|
||||
<input type="number" id="bannerImageWidth" name="style[imageWidth]" value="200" min="50" max="1000">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bannerImageHeight">Výška obrázku (px)</label>
|
||||
<input type="number" id="bannerImageHeight" name="style[imageHeight]" value="200" min="50" max="500">
|
||||
</div>
|
||||
|
||||
<!-- 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 id="imagePreviewContainer" style="display: none; margin-top: 15px; text-align: center;">
|
||||
@@ -1303,6 +1307,10 @@ function updateBannerPreview() {
|
||||
const imageX = currentImageX || '0';
|
||||
const imageY = currentImageY || '0';
|
||||
|
||||
// Get image dimensions
|
||||
const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '200');
|
||||
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
|
||||
|
||||
// Update banner container styles to exactly match index.html
|
||||
bannerPreview.style.display = 'block';
|
||||
bannerPreview.style.width = '100%';
|
||||
@@ -1345,10 +1353,6 @@ function updateBannerPreview() {
|
||||
// Apply the same border radius to the image as to the container
|
||||
const imageRadius = Math.max(bannerBorderRadius, 0);
|
||||
|
||||
// Get image dimensions
|
||||
const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '100');
|
||||
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
|
||||
|
||||
// Determine image style based on position - exactly match index.html
|
||||
let imageStyle = `max-width: ${imageWidth}px; max-height: ${imageHeight}px; border-radius: ${imageRadius}px;`;
|
||||
let containerStyle = 'margin-bottom: 15px;';
|
||||
@@ -1360,14 +1364,14 @@ function updateBannerPreview() {
|
||||
case 'right':
|
||||
containerStyle += 'text-align: right; float: right; margin-left: 15px;';
|
||||
break;
|
||||
case 'center':
|
||||
containerStyle += 'text-align: center; display: block; margin: 0 auto;';
|
||||
break;
|
||||
case 'custom':
|
||||
containerStyle += 'position: relative;';
|
||||
// For custom position, use absolute positioning to ensure exact placement
|
||||
imageStyle += `position: absolute; left: ${imageX}px; top: ${imageY}px;`;
|
||||
break;
|
||||
default: // center
|
||||
containerStyle += 'text-align: center; display: block;';
|
||||
break;
|
||||
}
|
||||
|
||||
// Format content with image exactly like in index.html
|
||||
@@ -1406,6 +1410,20 @@ function updateBannerPreview() {
|
||||
bannerPreview.classList.remove('with-image');
|
||||
}
|
||||
|
||||
// Update the preview content
|
||||
bannerPreviewContent.innerHTML = content;
|
||||
|
||||
// Add event listeners for width/height changes
|
||||
const imageWidthInput = document.getElementById('bannerImageWidth');
|
||||
const imageHeightInput = document.getElementById('bannerImageHeight');
|
||||
|
||||
if (imageWidthInput) {
|
||||
imageWidthInput.addEventListener('input', updateBannerPreview);
|
||||
}
|
||||
if (imageHeightInput) {
|
||||
imageHeightInput.addEventListener('input', updateBannerPreview);
|
||||
}
|
||||
|
||||
// Wrap in link if provided - exactly match index.html but prevent clicks
|
||||
if (bannerLink) {
|
||||
content = `<a href="${bannerLink}"
|
||||
|
||||
@@ -71,7 +71,7 @@ type BannerStyle struct {
|
||||
IsVisible bool `json:"isVisible"`
|
||||
ImageWidth int `json:"imageWidth"` // Width in pixels
|
||||
ImageHeight int `json:"imageHeight"` // Height in pixels
|
||||
ImagePosition string `json:"imagePosition"` // center, left, right, custom
|
||||
ImagePosition string `json:"imagePosition"` // center, left, right
|
||||
ImageX int `json:"imageX"` // X position for custom
|
||||
ImageY int `json:"imageY"` // Y position for custom
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user