MediaWiki:Vaulttec.js

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
•  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.

/* ── Bandeau Discord ───────────────────────────────────────── */
( function () {
  'use strict';

  var STORAGE_KEY = 'vtDiscordBannerDismissed';
  var DISCORD_URL  = 'https://discord.gg/DxFnyyR';
  var GUILD_ID     = '181800470082355200'; // ← Remplacer par l'ID numérique du serveur

  // Ne pas afficher si déjà fermé
  if ( localStorage.getItem( STORAGE_KEY ) === '1' ) { return; }

  // Icône Discord SVG (officielle, monochrome)
  var iconSVG = '<svg class="vt-banner-icon" viewBox="0 0 24 24" fill="#7dff9c" xmlns="http://www.w3.org/2000/svg">'
    + '<path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026 13.83 13.83 0 0 0 1.226-1.963.074.074 0 0 0-.041-.104 13.175 13.175 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028zM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38z"/>'
    + '</svg>';

  // Construction du bandeau
  var banner = document.createElement( 'div' );
  banner.id = 'vt-discord-banner';
  banner.innerHTML = iconSVG
    + '<span class="vt-banner-text">'
    +   '<strong>Communauté française</strong> — Rejoignez-nous sur Discord pour discuter, jouer, poser vos questions et contribuer au wiki !'
    + '</span>'
    + '<span class="vt-banner-members" style="display:none">'
    +   '<span id="vt-discord-count"></span> en ligne'
    + '</span>'
    + '<a class="vt-banner-btn" href="' + DISCORD_URL + '" target="_blank" rel="noopener noreferrer">'
    +   '↗ Rejoindre'
    + '</a>'
    + '<button class="vt-banner-close" aria-label="Fermer">×</button>';

  document.body.appendChild( banner );

  // Animation d'entrée (légère)
  requestAnimationFrame( function () {
    banner.style.opacity = '0';
    banner.style.transform = 'translateY(100%)';
    requestAnimationFrame( function () {
      banner.style.transition = 'transform 0.35s ease, opacity 0.35s ease';
      banner.style.opacity = '';
      banner.style.transform = '';
    } );
  } );

  // Fermeture
  banner.querySelector( '.vt-banner-close' ).addEventListener( 'click', function () {
    banner.classList.add( 'vt-banner-hidden' );
    localStorage.setItem( STORAGE_KEY, '1' );
    setTimeout( function () { banner.remove(); }, 350 );
  } );

  // Compteur membres en ligne — Discord Widget API
  // Prérequis : Paramètres serveur → Engagement → Widget du serveur → activer
  fetch( 'https://discord.com/api/guilds/' + GUILD_ID + '/widget.json' )
    .then( function ( r ) { return r.ok ? r.json() : null; } )
    .then( function ( data ) {
      if ( !data || !data.presence_count ) { return; }
      var countEl   = document.getElementById( 'vt-discord-count' );
      var membersEl = banner.querySelector( '.vt-banner-members' );
      if ( countEl && membersEl ) {
        countEl.textContent     = data.presence_count;
        membersEl.style.display = '';
      }
    } )
    .catch( function () {} );

}() );

/* LCP — fetchpriority=high sur la première image de l'article */
( function () {
    var img = document.querySelector( '#mw-content-text .mw-file-element' );
    if ( img && !img.complete ) {
        img.setAttribute( 'fetchpriority', 'high' );
    }
} )();