« MediaWiki:Vaulttec.js » : différence entre les versions

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

  var STORAGE_KEY = 'vtDiscordBannerDismissed';
  var DISCORD_URL  = 'https://discord.gg/DxFnyyR';
  var GUILD_ID     = 'VOTRE_GUILD_ID'; // ← 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
  var iconSVG = '<svg viewBox="0 0 24 24" fill="#7dff9c" xmlns="http://www.w3.org/2000/svg" style="width:22px;height:22px;flex-shrink:0;display:block">'
    + '<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.className = 'vt-discord-banner';
  banner.setAttribute( 'role', 'complementary' );
  banner.setAttribute( 'aria-label', 'Invitation Discord' );

  banner.innerHTML =
    '<span class="vt-banner-icon-block">'
    +   iconSVG
    +   '<span class="vt-banner-members" aria-live="polite" style="display:none">'
    +     '<span id="vt-discord-count"></span> en ligne'
    +   '</span>'
    + '</span>'
    + '<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>'
    + '<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
  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
  if ( GUILD_ID !== 'VOTRE_GUILD_ID' ) {
    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' );
  }
} )();