${title}
${size ? size : ''}${size && date ? ' • ' : ''}${date ? date : ''}
${cardBodyHTML}
${nfoHTML}
`;
});
tooltip.innerHTML += tooltipHTML;
setTimeout(() => { tooltip.style.minHeight = ''; tooltip.style.height = ''; tooltip.style.maxHeight = 'none'; }, 10);
let isOpen = false;
cloneImg.addEventListener('click', (e) => {
e.stopPropagation();
adjustOverlayWidth();
document.querySelectorAll('.affiche-tooltip').forEach(div => div.style.display = 'none');
tooltip.style.display = isOpen ? 'none' : 'block';
isOpen = !isOpen;
});
document.addEventListener('click', (e) => {
if (!containerCard.contains(e.target)) {
tooltip.style.display = 'none';
isOpen = false;
}
});
containerCard.appendChild(tooltip);
gallery.appendChild(containerCard);
});
containers.forEach((container, idx) => {
container.innerHTML = '';
if (idx === 0) container.appendChild(gallery);
});
}
function createConfigDropdown() {
const container = document.createElement('div');
container.id = 'affiche-mode-menu-container';
container.style.position = 'fixed';
container.style.top = '12px';
container.style.right = '12px';
container.style.zIndex = '19999';
container.style.background = '#f5f5f5';
container.style.border = '1px solid #ccc';
container.style.borderRadius = '6px';
container.style.padding = '10px 14px';
container.style.fontSize = '14px';
container.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
container.style.color = '#000';
const toggle = document.createElement('button');
toggle.textContent = '🎬 Mode Affiches Alternatif';
toggle.style.cursor = 'pointer';
toggle.style.fontWeight = 'bold';
toggle.style.background = '#309d98';
toggle.style.color = '#fff';
toggle.style.border = 'none';
toggle.style.borderRadius = '5px';
toggle.style.padding = '6px 12px';
toggle.style.marginBottom = '8px';
toggle.style.zIndex = '19999';
toggle.addEventListener('click', () => {
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});
const menu = document.createElement('div');
menu.style.display = 'none';
menu.style.marginTop = '8px';
menu.style.zIndex = '20001';
// Choix sections
const config = getStoredConfig();
CATEGORIES.forEach(cat => {
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = `chk_${cat.key}`;
checkbox.checked = config.includes(cat.key);
checkbox.addEventListener('change', () => {
const newConf = getStoredConfig();
if (checkbox.checked) newConf.push(cat.key);
else newConf.splice(newConf.indexOf(cat.key), 1);
saveConfig(newConf);
window.location.reload();
});
const label = document.createElement('label');
label.textContent = cat.label;
label.setAttribute('for', checkbox.id);
label.style.marginLeft = '4px';
const wrapper = document.createElement('div');
wrapper.appendChild(checkbox);
wrapper.appendChild(label);
menu.appendChild(wrapper);
});
// Option badge TMDB
const tmdbRow = document.createElement('div');
tmdbRow.style.marginTop = '14px';
const tmdbCheckbox = document.createElement('input');
tmdbCheckbox.type = 'checkbox';
tmdbCheckbox.id = 'chk_tmdb';
tmdbCheckbox.checked = getShowTmdb();
tmdbCheckbox.addEventListener('change', () => {
setShowTmdb(tmdbCheckbox.checked);
window.location.reload();
});
const tmdbLabel = document.createElement('label');
tmdbLabel.textContent = "Afficher la note TMDB sur l'affiche";
tmdbLabel.setAttribute('for', tmdbCheckbox.id);
tmdbLabel.style.marginLeft = '4px';
tmdbRow.appendChild(tmdbCheckbox);
tmdbRow.appendChild(tmdbLabel);
menu.appendChild(tmdbRow);
// Slider taille vignettes
const sizeRow = document.createElement('div');
sizeRow.style.marginTop = '14px';
sizeRow.style.marginBottom = '2px';
sizeRow.textContent = 'Taille des affiches :';
menu.appendChild(sizeRow);
const sizeSlider = document.createElement('input');
sizeSlider.type = 'range';
sizeSlider.min = '200';
sizeSlider.max = '360';
sizeSlider.step = '10';
sizeSlider.value = getMinWidth();
sizeSlider.style.width = '180px';
sizeSlider.style.verticalAlign = 'middle';
const sizeVal = document.createElement('span');
sizeVal.textContent = ` ${getMinWidth()}px`;
sizeVal.style.marginLeft = '8px';
sizeSlider.addEventListener('input', () => {
sizeVal.textContent = ` ${sizeSlider.value}px`;
});
sizeSlider.addEventListener('change', () => {
setMinWidth(sizeSlider.value);
window.location.reload();
});
menu.appendChild(sizeSlider);
menu.appendChild(sizeVal);
// Slider taille police overlay
const fontRow = document.createElement('div');
fontRow.style.marginTop = '16px';
fontRow.style.marginBottom = '2px';
fontRow.textContent = 'Taille du texte (overlay) :';
menu.appendChild(fontRow);
const fontSlider = document.createElement('input');
fontSlider.type = 'range';
fontSlider.min = '14';
fontSlider.max = '28';
fontSlider.step = '2';
fontSlider.value = getFontSize();
fontSlider.style.width = '140px';
fontSlider.style.verticalAlign = 'middle';
const fontVal = document.createElement('span');
fontVal.textContent = ` ${getFontSize()}px`;
fontVal.style.marginLeft = '8px';
fontSlider.addEventListener('input', () => {
fontVal.textContent = ` ${fontSlider.value}px`;
document.querySelectorAll('.affiche-tooltip').forEach(div => {
div.style.fontSize = fontSlider.value + 'px';
});
});
fontSlider.addEventListener('change', () => {
setFontSize(fontSlider.value);
window.location.reload();
});
menu.appendChild(fontSlider);
menu.appendChild(fontVal);
container.appendChild(toggle);
container.appendChild(menu);
// Remonter haut de page
if (!document.getElementById('remonter-haut-btn')) {
const upBtn = document.createElement('button');
upBtn.id = 'remonter-haut-btn';
upBtn.textContent = '↑ Haut de page';
upBtn.style.position = 'fixed';
upBtn.style.bottom = '22px';
upBtn.style.right = '26px';
upBtn.style.background = '#309d98';
upBtn.style.color = '#fff';
upBtn.style.border = 'none';
upBtn.style.borderRadius = '6px';
upBtn.style.padding = '8px 20px';
upBtn.style.fontWeight = 'bold';
upBtn.style.fontSize = '16px';
upBtn.style.cursor = 'pointer';
upBtn.style.boxShadow = '0 3px 12px rgba(0,0,0,0.14)';
upBtn.style.zIndex = '99999';
upBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
document.body.appendChild(upBtn);
}
if (!document.getElementById('affiche-mode-menu-container'))
document.body.appendChild(container);
}
function start() {
createConfigDropdown();
transformAffiches();
}
if (document.readyState !== 'loading') start();
else document.addEventListener('DOMContentLoaded', start);
})();