wiflix

/* Limiter la hauteur globale de l’outil (contrainte ≤ 2000px) */ #comparator-wiflix { max-height: 1800px; } /* Focus visible */ .focus-ring:focus { outline: 3px solid rgba(14,165,233,0.35); outline-offset: 2px; } /* Petite animation pour les toggles */ .toggle { transition: background-color .18s ease; } .sr-only { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } // Données d’origine (modifiez ici si besoin). // Toutes les chaînes sont en français pour faciliter l’internationalisation. const DONNEES_INIT = [ { id: ‘vpn’, outil: ‘VPN’, role: ‘Masquer l\’IP et chiffrer la connexion’, avantage: ‘Accès et anonymat renforcé’, inconvenient: ‘Peut réduire légèrement la vitesse’, note: 4, favori: false }, { id: ‘bloqueur’, outil: ‘Bloqueur de pubs’, role: ‘Réduire les pop-ups et redirections’, avantage: ‘Moins d\’ennuis’, inconvenient: ‘Parfois incompatible avec des lecteurs’, note: 3, favori: false }, { id: ‘antivirus’, outil: ‘Antivirus’, role: ‘Détection de malwares’, avantage: ‘Protection contre les infections’, inconvenient: ‘Ne protège pas l\’anonymat’, note: 4, favori: false }, { id: ‘navigateur’, outil: ‘Navigateurs sécurisés’, role: ‘Isolation des onglets et protection contre le fingerprinting’, avantage: ‘Confort de navigation’, inconvenient: ‘Nécessite adaptation’, note: 3, favori: false }, ]; /* ========================== Aucune API externe requise. Si vous souhaitez intégrer une API publique gratuite, respectez les contraintes (exemple commenté ci-dessous). Exemple (commenté) d’API publique gratuite (ne pas oublier la CORS) : URL: https://api.publicapis.org/entries Exemple de réponse JSON: { “count”: 1427, “entries”: [ { “API”: “Cat Facts”, “Description”: “Daily cat facts”, “Auth”: “”, “HTTPS”: true, “Cors”: “yes”, “Link”: “https://alexwohlbruck.github.io/cat-facts/”, “Category”: “Animals” }, … ] } // Si vous utilisez une API, ajoutez l’URL et un exemple de réponse dans les commentaires ci-dessus. ========================== */ // Comportement principal encapsulé pour ne pas polluer l’espace global. (function () { // Elements DOM const tbody = document.getElementById(‘tbody-comparateur’); const filtreInput = document.getElementById(‘filtre-texte’); const triSelect = document.getElementById(‘tri’); const resetBtn = document.getElementById(‘reset-filtres’); const compteSelection = document.getElementById(‘compte-selection’); const ouvrirCompare = document.getElementById(‘ouvrir-compare’); const exportJSONBtn = document.getElementById(‘export-json’); const modal = document.getElementById(‘modal-compare’); const contenuModal = document.getElementById(‘contenu-modal’); const fermerModal = document.getElementById(‘fermer-modal’); const fermerModal2 = document.getElementById(‘fermer-modal-2’); const telechargerCSV = document.getElementById(‘telecharger-csv’); // Etat let donnees = JSON.parse(JSON.stringify(DONNEES_INIT)); // clone let selection = new Set(); // ids sélectionnés pour comparer // Accessibility: focus trap inside modal (simple) let lastFocusedBeforeModal = null; // Rendu des lignes function renderTable(filtered = null) { const list = (filtered || donnees); tbody.innerHTML = ”; list.forEach(item => { const tr = document.createElement(‘tr’); tr.className = ‘hover:bg-slate-50’; // Checkbox comparer const tdCheck = document.createElement(‘td’); tdCheck.className = ‘px-3 py-2’; const chk = document.createElement(‘input’); chk.type = ‘checkbox’; chk.className = ‘focus-ring’; chk.setAttribute(‘aria-label’, `Sélectionner ${item.outil} pour comparer`); chk.checked = selection.has(item.id); chk.addEventListener(‘change’, (e) => { if (chk.checked) { if (selection.size >= 3) { // Ne pas autoriser plus de 3 sélections chk.checked = false; alert(‘Limite de comparaison : 3 éléments maximum.’); return; } selection.add(item.id); } else { selection.delete(item.id); } miseAJourSelection(); }); tdCheck.appendChild(chk); tr.appendChild(tdCheck); // Outil const tdOutil = document.createElement(‘td’); tdOutil.className = ‘px-3 py-2 font-medium text-slate-700’; tdOutil.textContent = item.outil; tr.appendChild(tdOutil); // Rôle const tdRole = document.createElement(‘td’); tdRole.className = ‘px-3 py-2 text-slate-600’; tdRole.textContent = item.role; tr.appendChild(tdRole); // Avantage const tdAv = document.createElement(‘td’); tdAv.className = ‘px-3 py-2 text-slate-600’; tdAv.textContent = item.avantage; tr.appendChild(tdAv); // Inconvénient const tdInc = document.createElement(‘td’); tdInc.className = ‘px-3 py-2 text-slate-600’; tdInc.textContent = item.inconvenient; tr.appendChild(tdInc); // Note (slider accessible) const tdNote = document.createElement(‘td’); tdNote.className = ‘px-3 py-2’; const labelNote = document.createElement(‘label’); labelNote.className = ‘flex items-center gap-2’; labelNote.innerHTML = ` ${‘★’.repeat(item.note)}${‘☆’.repeat(5-item.note)} `; const range = labelNote.querySelector(‘input[type=range]’); const spanStars = labelNote.querySelector(‘span’); range.addEventListener(‘input’, (e) => { const n = Number(range.value); item.note = n; spanStars.textContent = ‘★’.repeat(n) + ‘☆’.repeat(5-n); // mise à jour de l’état si la ligne est sélectionnée pour comparer (afin qu’on voie les changements) if (selection.has(item.id)) renderModalContent(); }); tdNote.appendChild(labelNote); tr.appendChild(tdNote); // Favori toggle const tdFav = document.createElement(‘td’); tdFav.className = ‘px-3 py-2’; const btnFav = document.createElement(‘button’); btnFav.className = ‘px-2 py-1 rounded toggle focus-ring’; btnFav.setAttribute(‘aria-pressed’, String(item.favori)); btnFav.setAttribute(‘aria-label’, item.favori ? `Retirer ${item.outil} des favoris` : `Ajouter ${item.outil} aux favoris`); function majFav() { btnFav.textContent = item.favori ? ‘★ Favori’ : ‘☆ Ajouter’; btnFav.classList.toggle(‘bg-amber-100’, item.favori); btnFav.setAttribute(‘aria-pressed’, String(item.favori)); } btnFav.addEventListener(‘click’, () => { item.favori = !item.favori; majFav(); }); majFav(); tdFav.appendChild(btnFav); tr.appendChild(tdFav); tbody.appendChild(tr); }); } // Mise à jour du compteur & état des boutons function miseAJourSelection() { compteSelection.textContent = `${selection.size} sélectionné(s)`; ouvrirCompare.disabled = selection.size { if (!mot) return true; return ( item.outil.toLowerCase().includes(mot) || item.role.toLowerCase().includes(mot) || item.avantage.toLowerCase().includes(mot) || item.inconvenient.toLowerCase().includes(mot) ); }); const tri = triSelect.value; if (tri === ‘nom’) result.sort((a,b) => a.outil.localeCompare(b.outil, ‘fr’)); if (tri === ‘note_desc’) result.sort((a,b) => b.note – a.note || a.outil.localeCompare(b.outil, ‘fr’)); if (tri === ‘role’) result.sort((a,b) => a.role.localeCompare(b.role, ‘fr’)); renderTable(result); } // Ouvrir modal de comparaison function ouvrirModal() { lastFocusedBeforeModal = document.activeElement; modal.classList.remove(‘hidden’); modal.querySelector(‘[data-close]’).addEventListener(‘click’, fermerModalInterne); modal.querySelector(‘#fermer-modal’).focus(); modal.setAttribute(‘aria-hidden’, ‘false’); // Empêche le scroll du body document.documentElement.style.overflow = ‘hidden’; renderModalContent(); } // Fermer modal function fermerModalInterne() { modal.classList.add(‘hidden’); modal.setAttribute(‘aria-hidden’, ‘true’); document.documentElement.style.overflow = ”; if (lastFocusedBeforeModal) lastFocusedBeforeModal.focus(); } // Construire le contenu du modal de comparaison function renderModalContent() { const ids = Array.from(selection); const items = ids.map(id => donnees.find(d => d.id === id)).filter(Boolean); if (items.length < 2) { contenuModal.innerHTML = '

Sélectionnez au moins deux éléments pour comparer.

‘; return; } // Construire tableau côte-à-côte const cols = items.length; let html = ‘‘; // Actions html += ‘‘; contenuModal.innerHTML = html; // Boutons internes const modalCopy = document.getElementById(‘modal-copy’); modalCopy.addEventListener(‘click’, () => { const plain = items.map(it => `${it.outil}nRôle: ${it.role}nAvantage: ${it.avantage}nInconvénient: ${it.inconvenient}nNote: ${it.note}nFavori: ${it.favori ? ‘Oui’ : ‘Non’}`).join(‘nn’); navigator.clipboard && navigator.clipboard.writeText(plain).then(() => { alert(‘Comparaison copiée dans le presse-papiers.’); }, () => { alert(‘Impossible de copier automatiquement. Sélectionnez et copiez manuellement.’); }); }); const modalClear = document.getElementById(‘modal-clear’); modalClear.addEventListener(‘click’, () => { selection.clear(); miseAJourSelection(); appliquerFiltresEtTri(); renderModalContent(); }); } // Export JSON (copier dans le presse-papier) function exporterJSONSelection() { const ids = Array.from(selection); const items = ids.map(id => donnees.find(d => d.id === id)).filter(Boolean); const json = JSON.stringify(items, null, 2); navigator.clipboard && navigator.clipboard.writeText(json).then(() => { alert(‘JSON copié dans le presse-papiers.’); }, () => { // fallback: ouvrir dans une nouvelle fenêtre const w = window.open(”, ‘_blank’); w.document.write(‘

' + escapeHTML(json) + '

‘); }); } // Téléchargement CSV depuis modal function telechargerCSVSelection() { const ids = Array.from(selection); const items = ids.map(id => donnees.find(d => d.id === id)).filter(Boolean); if (!items.length) { alert(‘Aucun élément sélectionné.’); return; } const headers = [‘Outil’,’Rôle’,’Avantage’,’Inconvénient’,’Note’,’Favori’]; const rows = items.map(it => [ csvEscape(it.outil), csvEscape(it.role), csvEscape(it.avantage), csvEscape(it.inconvenient), csvEscape(String(it.note)), csvEscape(it.favori ? ‘Oui’ : ‘Non’), ]); const csv = [headers.join(‘,’), …rows.map(r => r.join(‘,’))].join(‘n’); const blob = new Blob([csv], { type: ‘text/csv;charset=utf-8;’ }); const url = URL.createObjectURL(blob); const a = document.createElement(‘a’); a.href = url; a.download = ‘comparaison-wiflix.csv’; a.click(); URL.revokeObjectURL(url); } // Helpers function escapeHTML(s) { return s.replace(/[&”‘]/g, function(m){ return ({‘&’:’&’,”:’>’,'”‘:’"’,”‘”:”'”})[m]; }); } function csvEscape(s) { if (s.includes(‘,’) || s.includes(‘”‘) || s.includes(‘n’)) { return ‘”‘ + s.replace(/”/g, ‘””‘) + ‘”‘; } return s; } // Initial render appliquerFiltresEtTri(); miseAJourSelection(); // Listeners filtreInput.addEventListener(‘input’, () => appliquerFiltresEtTri()); triSelect.addEventListener(‘change’, () => appliquerFiltresEtTri()); resetBtn.addEventListener(‘click’, () => { filtreInput.value = ”; triSelect.value = ‘nom’; selection.clear(); miseAJourSelection(); appliquerFiltresEtTri(); }); ouvrirCompare.addEventListener(‘click’, ouvrirModal); exportJSONBtn.addEventListener(‘click’, exporterJSONSelection); // Modal controls fermerModal.addEventListener(‘click’, fermerModalInterne); fermerModal2.addEventListener(‘click’, fermerModalInterne); telechargerCSV.addEventListener(‘click’, telechargerCSVSelection); // Keyboard: Esc ferme modal document.addEventListener(‘keydown’, (e) => { if (e.key === ‘Escape’ && modal && !modal.classList.contains(‘hidden’)) { fermerModalInterne(); } }); // Petit ajustement: rendre les lignes triables par cliquer (optionnel) // Pour garder le JS lisible, on garde l’interaction simple. })();