496 lines
19 KiB
JavaScript
496 lines
19 KiB
JavaScript
|
// ==UserScript==
|
|||
|
|
// @name UseNet Enhanced
|
|||
|
|
// @version 6.28
|
|||
|
|
// @date 12.07.25
|
|||
|
|
// @description Userscript pour transformer la liste de releases sur un indexeur privé en galerie d'affiches responsive
|
|||
|
|
// @author Aerya | https://upandclear.org
|
|||
|
|
// @match https://unfr.pw/*
|
|||
|
|
// @updateURL https://raw.githubusercontent.com/Aerya/Mode-Affiches/main/mode_affiches.js
|
|||
|
|
// @downloadURL https://raw.githubusercontent.com/Aerya/Mode-Affiches/main/mode_affiches.js
|
|||
|
|
// @grant none
|
|||
|
|
// ==/UserScript==
|
|||
|
|
|
|||
|
|
|
|||
|
|
(function () {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
const TMDB_API_KEY = '1234'; // Mettez votre clé ici !
|
|||
|
|
const TMDB_CACHE_TTL = 24 * 60 * 60 * 1000; // 1 jour
|
|||
|
|
|
|||
|
|
const CATEGORIES = [
|
|||
|
|
{ key: 'HOME', label: 'Accueil' },
|
|||
|
|
{ key: 'MOVIE', label: 'Films' },
|
|||
|
|
{ key: 'TV', label: 'Séries' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const STORAGE_KEY = 'afficheModeSections';
|
|||
|
|
const STORAGE_MINWIDTH_KEY = 'afficheMinWidth';
|
|||
|
|
const STORAGE_FONT_SIZE_KEY = 'afficheRlzFontSize';
|
|||
|
|
const STORAGE_SHOW_TMDB_KEY = 'afficheShowTmdb';
|
|||
|
|
const TMDB_CACHE_KEY = 'afficheTmdbCache';
|
|||
|
|
|
|||
|
|
function getStoredConfig() {
|
|||
|
|
try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; } catch (e) { return []; }
|
|||
|
|
}
|
|||
|
|
function saveConfig(arr) { localStorage.setItem(STORAGE_KEY, JSON.stringify(arr)); }
|
|||
|
|
function getMinWidth() { return parseInt(localStorage.getItem(STORAGE_MINWIDTH_KEY) || '260'); }
|
|||
|
|
function setMinWidth(val) { localStorage.setItem(STORAGE_MINWIDTH_KEY, val); }
|
|||
|
|
function getFontSize() { return parseInt(localStorage.getItem(STORAGE_FONT_SIZE_KEY) || '22'); }
|
|||
|
|
function setFontSize(val) { localStorage.setItem(STORAGE_FONT_SIZE_KEY, val); }
|
|||
|
|
function getShowTmdb() { return localStorage.getItem(STORAGE_SHOW_TMDB_KEY) !== '0'; }
|
|||
|
|
function setShowTmdb(val) { localStorage.setItem(STORAGE_SHOW_TMDB_KEY, val ? '1' : '0'); }
|
|||
|
|
function getTmdbCache() {
|
|||
|
|
try { return JSON.parse(localStorage.getItem(TMDB_CACHE_KEY)) || {}; } catch (e) { return {}; }
|
|||
|
|
}
|
|||
|
|
function saveTmdbCache(cache) { localStorage.setItem(TMDB_CACHE_KEY, JSON.stringify(cache)); }
|
|||
|
|
|
|||
|
|
function fetchTmdb(type, tmdbId) {
|
|||
|
|
if (!TMDB_API_KEY || !tmdbId) return Promise.resolve(null);
|
|||
|
|
const cache = getTmdbCache();
|
|||
|
|
const key = `${type}_${tmdbId}`;
|
|||
|
|
const now = Date.now();
|
|||
|
|
if (cache[key] && now - cache[key].fetched < TMDB_CACHE_TTL) {
|
|||
|
|
return Promise.resolve(cache[key].data);
|
|||
|
|
}
|
|||
|
|
let url = '';
|
|||
|
|
if (type === 'movie') url = `https://api.themoviedb.org/3/movie/${tmdbId}?api_key=${TMDB_API_KEY}&language=fr-FR`;
|
|||
|
|
else if (type === 'tv') url = `https://api.themoviedb.org/3/tv/${tmdbId}?api_key=${TMDB_API_KEY}&language=fr-FR`;
|
|||
|
|
return fetch(url)
|
|||
|
|
.then(r => r.json())
|
|||
|
|
.then(data => {
|
|||
|
|
cache[key] = { data, fetched: now };
|
|||
|
|
saveTmdbCache(cache);
|
|||
|
|
return data;
|
|||
|
|
}).catch(() => null);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function extractDateAndSize(card) {
|
|||
|
|
let date = '', size = '';
|
|||
|
|
card.querySelectorAll('.badge').forEach(badge => {
|
|||
|
|
const txt = badge.textContent.trim();
|
|||
|
|
if (!size && /([0-9]+(\.[0-9]+)?)( ?(GB|MB|G|M|Go|Mo))$/i.test(txt)) size = txt;
|
|||
|
|
if (!date && /\d{2}\/\d{2}\/\d{2}/.test(txt)) date = txt.match(/\d{2}\/\d{2}\/\d{2}/)?.[0] || '';
|
|||
|
|
});
|
|||
|
|
return { date, size };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getSection() {
|
|||
|
|
const url = new URL(window.location.href);
|
|||
|
|
const section = url.searchParams.get('section');
|
|||
|
|
const vm = url.searchParams.get('vm');
|
|||
|
|
if (!section && (vm === '1' || !vm)) return 'HOME';
|
|||
|
|
return section?.toUpperCase() || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function transformAffiches() {
|
|||
|
|
const section = getSection();
|
|||
|
|
const config = getStoredConfig();
|
|||
|
|
const minwidth = getMinWidth();
|
|||
|
|
const rlzFontSize = getFontSize();
|
|||
|
|
const showTmdb = getShowTmdb();
|
|||
|
|
const show = config.includes(section);
|
|||
|
|
if (!CATEGORIES.some(c => c.key === section)) return;
|
|||
|
|
if (!show) return;
|
|||
|
|
|
|||
|
|
const cards = Array.from(document.querySelectorAll('.containert.article .card.affichet'));
|
|||
|
|
const containers = document.querySelectorAll('.containert.article');
|
|||
|
|
if (!cards.length || !containers.length) return;
|
|||
|
|
|
|||
|
|
// Group releases par film/série via TMDB ID
|
|||
|
|
const grouped = new Map();
|
|||
|
|
cards.forEach(card => {
|
|||
|
|
const link = card.querySelector('a[href*="?d=fiche"]');
|
|||
|
|
const href = link?.getAttribute('href') || '';
|
|||
|
|
let tmdbId = '';
|
|||
|
|
let movieType = 'movie';
|
|||
|
|
let match = href.match(/movieid=(\d+)/i);
|
|||
|
|
if (match) {
|
|||
|
|
tmdbId = match[1];
|
|||
|
|
movieType = 'movie';
|
|||
|
|
} else {
|
|||
|
|
match = href.match(/tvid=(\d+)/i);
|
|||
|
|
if (match) {
|
|||
|
|
tmdbId = match[1];
|
|||
|
|
movieType = 'tv';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!tmdbId) {
|
|||
|
|
const inp = card.querySelector('input#tmdb_id');
|
|||
|
|
if (inp) tmdbId = inp.value;
|
|||
|
|
}
|
|||
|
|
const idKey = movieType + '_' + tmdbId;
|
|||
|
|
if (!tmdbId) return;
|
|||
|
|
if (!grouped.has(idKey)) grouped.set(idKey, { cards: [], tmdbId, movieType });
|
|||
|
|
grouped.get(idKey).cards.push(card);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Création galerie
|
|||
|
|
const gallery = document.createElement('div');
|
|||
|
|
gallery.className = 'd-flex flex-wrap';
|
|||
|
|
gallery.style.justifyContent = 'center';
|
|||
|
|
gallery.style.marginTop = '20px';
|
|||
|
|
gallery.style.gap = '8px';
|
|||
|
|
gallery.style.padding = '0 12px';
|
|||
|
|
gallery.style.width = '100%';
|
|||
|
|
gallery.style.marginLeft = 'auto';
|
|||
|
|
gallery.style.marginRight = 'auto';
|
|||
|
|
|
|||
|
|
grouped.forEach((group, groupKey) => {
|
|||
|
|
const card = group.cards[0];
|
|||
|
|
const img = card.querySelector('img.card-img-top');
|
|||
|
|
const minHeight = img?.height || 330;
|
|||
|
|
if (!img) return;
|
|||
|
|
|
|||
|
|
// Affiche = vignette
|
|||
|
|
const containerCard = document.createElement('div');
|
|||
|
|
containerCard.style.flex = `0 0 ${minwidth}px`;
|
|||
|
|
containerCard.style.maxWidth = `${minwidth}px`;
|
|||
|
|
containerCard.style.position = 'relative';
|
|||
|
|
containerCard.style.display = 'block';
|
|||
|
|
|
|||
|
|
// Badge note TMDB (optionnel)
|
|||
|
|
if (showTmdb) {
|
|||
|
|
fetchTmdb(group.movieType, group.tmdbId).then(data => {
|
|||
|
|
if (!data) return;
|
|||
|
|
const vote = data.vote_average ? Number(data.vote_average).toFixed(1) : '?';
|
|||
|
|
const votes = data.vote_count ? ` (${data.vote_count})` : '';
|
|||
|
|
const tmdbSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 32" width="70" height="42" style="vertical-align:middle; margin-right:4px;"><rect width="110" height="32" rx="8" fill="#01d277"/><text x="55" y="22" text-anchor="middle" font-size="19" font-family="Arial" fill="#fff" font-weight="bold">TMDB</text></svg>`;
|
|||
|
|
|
|||
|
|
// Détermine le lien TMDB (film ou série)
|
|||
|
|
let tmdbUrl = '';
|
|||
|
|
if (group.movieType === 'movie') tmdbUrl = `https://www.themoviedb.org/movie/${group.tmdbId}`;
|
|||
|
|
else if (group.movieType === 'tv') tmdbUrl = `https://www.themoviedb.org/tv/${group.tmdbId}`;
|
|||
|
|
|
|||
|
|
const badge = document.createElement('a');
|
|||
|
|
badge.href = tmdbUrl;
|
|||
|
|
badge.target = '_blank';
|
|||
|
|
badge.rel = 'noopener noreferrer';
|
|||
|
|
badge.title = "Voir sur TMDB";
|
|||
|
|
badge.style.position = 'absolute';
|
|||
|
|
badge.style.top = '7px';
|
|||
|
|
badge.style.left = '8px';
|
|||
|
|
badge.style.background = '#032541de';
|
|||
|
|
badge.style.color = '#ffd04e';
|
|||
|
|
badge.style.fontWeight = 'bold';
|
|||
|
|
badge.style.borderRadius = '8px';
|
|||
|
|
badge.style.padding = '2px 11px 2px 3px';
|
|||
|
|
badge.style.fontSize = '18px';
|
|||
|
|
badge.style.boxShadow = '0 2px 8px #222c';
|
|||
|
|
badge.style.zIndex = 15;
|
|||
|
|
badge.style.display = 'flex';
|
|||
|
|
badge.style.alignItems = 'center';
|
|||
|
|
badge.style.textDecoration = 'none';
|
|||
|
|
|
|||
|
|
badge.innerHTML = `${tmdbSvg}<span style="font-size:19px;font-weight:bold;">${vote}</span><span style="font-size:13px;color:#ffd04e;">${votes}</span>`;
|
|||
|
|
|
|||
|
|
containerCard.appendChild(badge);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Clone affiche
|
|||
|
|
const cloneImg = img.cloneNode(true);
|
|||
|
|
cloneImg.style.width = `${minwidth}px`;
|
|||
|
|
cloneImg.style.cursor = 'pointer';
|
|||
|
|
containerCard.appendChild(cloneImg);
|
|||
|
|
|
|||
|
|
// Overlay
|
|||
|
|
const tooltip = document.createElement('div');
|
|||
|
|
tooltip.className = 'affiche-tooltip';
|
|||
|
|
tooltip.style.position = 'absolute';
|
|||
|
|
tooltip.style.top = '0';
|
|||
|
|
tooltip.style.left = '0';
|
|||
|
|
tooltip.style.background = 'rgba(10,10,10,0.98)';
|
|||
|
|
tooltip.style.color = '#fff';
|
|||
|
|
tooltip.style.padding = '22px 36px 26px 36px';
|
|||
|
|
tooltip.style.borderRadius = '10px';
|
|||
|
|
tooltip.style.fontSize = rlzFontSize + 'px';
|
|||
|
|
tooltip.style.fontWeight = '400';
|
|||
|
|
tooltip.style.width = Math.min(window.innerWidth - 40, 1150) + 'px';
|
|||
|
|
tooltip.style.maxWidth = '99vw';
|
|||
|
|
tooltip.style.minHeight = `${minHeight}px`;
|
|||
|
|
tooltip.style.zIndex = '1010';
|
|||
|
|
tooltip.style.boxShadow = '0 0 14px 6px rgba(0,0,0,0.7)';
|
|||
|
|
tooltip.style.whiteSpace = 'normal';
|
|||
|
|
tooltip.style.display = 'none';
|
|||
|
|
tooltip.style.pointerEvents = 'auto';
|
|||
|
|
|
|||
|
|
// Responsive : recalcule la largeur à l’ouverture si resize
|
|||
|
|
function adjustOverlayWidth() {
|
|||
|
|
tooltip.style.width = Math.min(window.innerWidth - 40, 1150) + 'px';
|
|||
|
|
}
|
|||
|
|
window.addEventListener('resize', adjustOverlayWidth);
|
|||
|
|
|
|||
|
|
// Header overlay
|
|||
|
|
let typeLabel = 'film', typeGender = 'le';
|
|||
|
|
if (group.movieType === 'tv') { typeLabel = 'série'; typeGender = 'la'; }
|
|||
|
|
tooltip.innerHTML = `
|
|||
|
|
<div style="display:flex;align-items:center;justify-content:flex-start;margin-bottom:18px;width:100%;">
|
|||
|
|
<span style="font-size:${rlzFontSize}px; font-weight:600; color:#45e3ee; margin-right:24px;display:flex;align-items:center;">
|
|||
|
|
<span style="font-size:${rlzFontSize + 2}px;vertical-align:middle;">↓</span>
|
|||
|
|
Les dernières releases
|
|||
|
|
<span style="font-size:${rlzFontSize + 2}px;vertical-align:middle;">↓</span>
|
|||
|
|
</span>
|
|||
|
|
<span style="flex:0 0 36px; margin:0 22px; display:flex;justify-content:center;align-items:center; color:#aaa;font-size:${rlzFontSize - 1}px;font-weight:400;">|</span>
|
|||
|
|
<a href="${card.querySelector('a[href*="?d=fiche"]')?.href || '#'}"
|
|||
|
|
style="color:#ffd04e; font-size:${rlzFontSize - 1}px; font-weight:600; text-decoration:none;">
|
|||
|
|
Voir toutes les releases pour ${typeGender} ${typeLabel}
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
let tooltipHTML = '';
|
|||
|
|
group.cards.forEach((subcard, idx) => {
|
|||
|
|
const cardHeader = subcard.querySelector('.card-header');
|
|||
|
|
const cardBody = subcard.querySelector('.card-body');
|
|||
|
|
const title = cardHeader?.textContent.trim() || '';
|
|||
|
|
const { date, size } = extractDateAndSize(subcard);
|
|||
|
|
|
|||
|
|
let cardBodyHTML = cardBody ? cardBody.innerHTML : '';
|
|||
|
|
let nfoHTML = '';
|
|||
|
|
if (cardBody && cardBodyHTML) {
|
|||
|
|
let tmp = document.createElement('div');
|
|||
|
|
tmp.innerHTML = cardBodyHTML;
|
|||
|
|
let spans = tmp.querySelectorAll('span.mx-1');
|
|||
|
|
for (let i = 0; i < spans.length; i++) {
|
|||
|
|
let a = spans[i].querySelector('a[data-target="#NFO"]');
|
|||
|
|
if (a) {
|
|||
|
|
a.addEventListener('click', function (e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
document.querySelectorAll('.affiche-tooltip').forEach(div => div.style.display = 'none');
|
|||
|
|
});
|
|||
|
|
nfoHTML = spans[i].outerHTML;
|
|||
|
|
spans[i].remove();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (let i = 4; i < spans.length; i++) spans[i].remove();
|
|||
|
|
cardBodyHTML = Array.from(tmp.childNodes).map(x => x.outerHTML).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tooltipHTML += `
|
|||
|
|
<div style="margin-bottom:12px;display:flex;align-items:center;gap:12px;">
|
|||
|
|
<span style="flex:3 1 70%;font-size:${rlzFontSize}px;font-weight:400;color:#cde5fc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${title}">
|
|||
|
|
${title}
|
|||
|
|
</span>
|
|||
|
|
<span style="margin-left:12px;font-size:${rlzFontSize-2}px;font-weight:400;color:#b5dbff;white-space:nowrap;">
|
|||
|
|
${size ? size : ''}${size && date ? ' • ' : ''}${date ? date : ''}
|
|||
|
|
</span>
|
|||
|
|
<div style="display:inline-flex;gap:10px;margin-left:12px;vertical-align:middle;align-items:center;">
|
|||
|
|
${cardBodyHTML}
|
|||
|
|
${nfoHTML}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
tooltip.innerHTML += tooltipHTML;
|
|||
|
|
|
|||
|
|
setTimeout(() => { tooltip.style.minHeight = ''; tooltip.style.height = ''; tooltip.style.maxHeight = 'none'; }, 10);
|
|||
|
|
|
|||
|
|
// Toggle overlay au clic sur affiche
|
|||
|
|
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);
|
|||
|
|
})();
|