-
Cliquer pour changer l'image
+
+
+
+
+
@@ -1061,7 +1076,9 @@ function removeInspiration(index) {
renderInspirations();
}
-// ── Hero image ──
+// ── Hero image with drag-to-reposition ──
+let heroMeta = { posY: 50, height: 280 }; // posY in %, height in px
+
function applyHeroImage(dataUrl) {
const banner = document.getElementById('hero-banner');
if (dataUrl) {
@@ -1073,10 +1090,74 @@ function applyHeroImage(dataUrl) {
}
}
+function applyHeroMeta() {
+ const banner = document.getElementById('hero-banner');
+ banner.style.backgroundPosition = `center ${heroMeta.posY}%`;
+ banner.style.height = heroMeta.height + 'px';
+ document.getElementById('hero-height-slider').value = heroMeta.height;
+}
+
+function setHeroHeight(val) {
+ heroMeta.height = parseInt(val);
+ document.getElementById('hero-banner').style.height = val + 'px';
+}
+
+function saveHeroMeta() {
+ const imageData = visionData['hero-image']?.Contenu || '';
+ if (!imageData) return;
+ const payload = JSON.stringify({ image: imageData, posY: heroMeta.posY, height: heroMeta.height });
+ saveVisionSection('hero-image', payload);
+}
+
+function loadHeroImageData(raw) {
+ if (!raw) return;
+ // Try JSON format (new) or plain base64 (legacy)
+ try {
+ const parsed = JSON.parse(raw);
+ heroMeta.posY = parsed.posY ?? 50;
+ heroMeta.height = parsed.height ?? 280;
+ applyHeroImage(parsed.image || '');
+ } catch {
+ // Legacy: raw is the base64 image directly
+ applyHeroImage(raw);
+ }
+ applyHeroMeta();
+}
+
+// Drag to reposition
+(function() {
+ const banner = document.getElementById('hero-banner');
+ let dragging = false, startY = 0, startPos = 0;
+
+ banner.addEventListener('mousedown', (e) => {
+ if (!banner.classList.contains('has-image')) return;
+ if (e.target.closest('[contenteditable]') || e.target.closest('.hero-controls') || e.target.closest('button')) return;
+ dragging = true;
+ startY = e.clientY;
+ startPos = heroMeta.posY;
+ banner.classList.add('dragging');
+ e.preventDefault();
+ });
+
+ window.addEventListener('mousemove', (e) => {
+ if (!dragging) return;
+ const delta = e.clientY - startY;
+ const sensitivity = 0.15;
+ heroMeta.posY = Math.max(0, Math.min(100, startPos + delta * sensitivity));
+ banner.style.backgroundPosition = `center ${heroMeta.posY}%`;
+ });
+
+ window.addEventListener('mouseup', () => {
+ if (!dragging) return;
+ dragging = false;
+ banner.classList.remove('dragging');
+ saveHeroMeta();
+ });
+})();
+
function uploadHeroImage(input) {
const file = input.files[0];
if (!file) return;
- // Resize to max 1600px wide to keep base64 reasonable
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
@@ -1089,7 +1170,10 @@ function uploadHeroImage(input) {
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
applyHeroImage(dataUrl);
- saveVisionSection('hero-image', dataUrl);
+ heroMeta.posY = 50; // Reset position on new image
+ applyHeroMeta();
+ const payload = JSON.stringify({ image: dataUrl, posY: heroMeta.posY, height: heroMeta.height });
+ saveVisionSection('hero-image', payload);
};
img.src = e.target.result;
};
@@ -1118,8 +1202,8 @@ async function loadVision() {
setupEditable(elId, section);
}
- // Hero image
- applyHeroImage(visionData['hero-image']?.Contenu || '');
+ // Hero image (JSON with position/height or legacy base64)
+ loadHeroImageData(visionData['hero-image']?.Contenu || '');
// Render structured sections
renderTags();