MediaWiki:Common.js: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
/* Das folgende JavaScript wird für alle Benutzer geladen. */
/* Das folgende JavaScript wird für alle Benutzer geladen. */
/* =========================
  Site Announcement Modal + Image Preview
  ========================= */
(function ($, mw) {
(function ($, mw) {
   'use strict';
   'use strict';


   var CONFIG = {
   var CONFIG = {
     enabled: false,
     enabled: true,
     id: 'site_announcement_v2', // <- erhöht, damit die neue Version wieder angezeigt wird
     id: 'charity_notice_v4', // Version erhöht, damit alle es neu sehen
     title: 'Ankündigung',
     title: 'Charity für Kinderherzen',
    logoUrl: 'https://www.kinderherzen.de/wp-content/uploads/logo_kinderherzen.png',
     html:
     html:
       '<p>🎉 Nächste Woche Wartungsfenster: <strong>Di, 10:00–11:00</strong>. In dieser Zeit ist das Wiki nur eingeschränkt verfügbar.</p>' +
       '<p>Liebe Whisky, ADoS Heads,</p>' +
       '<div class="mw-site-announcement-actions">' +
      '<p>wir wurden jetzt schon paarmal gefragt, wie ihr dieses Wiki-Projekt unterstützen könnt.</p>' +
        '<a href="https://s1.directupload.eu/images/250823/24cwslu3.png" target="_blank" rel="noopener" class="mw-ui-button">In neuem Tab öffnen</a>' +
      '<p>Wir freuen uns sehr, dass dieses Projekt so gut angenommen wurde.</p>' +
        '<button type="button" class="mw-ui-button mw-ui-progressive" id="mw-site-announcement-more">Mehr Infos</button>' +
      '<p>Wir würden uns daher sehr freuen, wenn ihr anstatt uns lieber das Projekt vom Whiskywaiter unterstützen würdet.</p>' +
      '</div>',
       '<p><strong>Jede Spende zählt!</strong></p>' +
      '<p><a href="https://www.thewhiskywaiter.com/charity-event" target="_blank" rel="noopener" class="mw-ui-button">Mehr erfahren</a></p>',
     showOnNamespaces: 'all',
     showOnNamespaces: 'all',
    onlyForLoggedOut: false,
    onlyForLoggedIn: false,
    startISO: null,
    endISO: null,
     dailyLimit: 1,
     dailyLimit: 1,
    closeBehavesAsShown: true,
     escToClose: true,
     escToClose: true,
     clickBackdropToClose: true,
     clickBackdropToClose: true
 
    // Bildquelle für die Vorschau:
    imageSrc: 'https://s1.directupload.eu/images/250823/24cwslu3.png',
    imageAlt: 'Mehr Informationen'
   };
   };


Zeile 35: Zeile 24:


   var isAnon = mw.config.get('wgUserName') === null;
   var isAnon = mw.config.get('wgUserName') === null;
  if (CONFIG.onlyForLoggedOut && !isAnon) return;
  if (CONFIG.onlyForLoggedIn && isAnon) return;
   var ns = mw.config.get('wgNamespaceNumber');
   var ns = mw.config.get('wgNamespaceNumber');
   if (CONFIG.showOnNamespaces !== 'all' && Array.isArray(CONFIG.showOnNamespaces) && CONFIG.showOnNamespaces.indexOf(ns) === -1) {
   if (CONFIG.showOnNamespaces !== 'all' && CONFIG.showOnNamespaces.indexOf(ns) === -1) return;
    return;
  }


   var now = new Date();
   var storage = {
  if (CONFIG.startISO && now < new Date(CONFIG.startISO)) return;
    get(k) { try { return localStorage.getItem(k); } catch { return null; } },
  if (CONFIG.endISO && now > new Date(CONFIG.endISO)) return;
    set(k, v) { try { localStorage.setItem(k, v); } catch {} }
  };


   var storage = (function () {
   var key = 'popup_' + CONFIG.id + (isAnon ? ':anon' : ':user');
    var prefix = 'mw_site_popup__';
  var today = new Date().toISOString().slice(0, 10);
    function get(k){ try { return localStorage.getItem(prefix + k); } catch(e){ return null; } }
  if (storage.get(key) === today) return;
    function set(k,v){ try { localStorage.setItem(prefix + k, v); } catch(e){} }
    return { get:get, set:set };
  })();


   var keyBase = CONFIG.id + (isAnon ? ':anon' : ':user');
   function markSeen() { storage.set(key, today); }
  var lastShownKey = keyBase + ':lastShown';
  var countKey = keyBase + ':count:';
  var todayStr = (function (d){ return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'); })(now);


   var lastShown = storage.get(lastShownKey);
   $(function () {
  var todayCount = parseInt(storage.get(countKey + todayStr) || '0', 10);
    var $overlay = $('<div class="mw-popup-overlay"></div>');
  if (lastShown === todayStr && todayCount >= CONFIG.dailyLimit) return;
    var $modal = $(
      '<div class="mw-popup-modal" role="dialog" aria-modal="true">' +
        '<div class="mw-popup-logo">' +
          '<div class="mw-popup-heart"></div>' +
          '<img src="' + CONFIG.logoUrl + '" alt="Kinderherzen Logo">' +
        '</div>' +
        '<h2>' + CONFIG.title + '</h2>' +
        '<div class="mw-popup-content">' + CONFIG.html + '</div>' +
        '<button class="mw-popup-close">OK</button>' +
      '</div>'
    );


  function markShown(){
     $('body').append($overlay, $modal);
     storage.set(lastShownKey, todayStr);
    storage.set(countKey + todayStr, String((todayCount || 0) + 1));
  }


  function buildModal(bodyHtml, titleText){
     $('.mw-popup-close, .mw-popup-overlay').on('click', function () {
    var $overlay = $('<div>', { class: 'mw-site-announcement-overlay', tabindex: '-1', 'aria-hidden': 'true' });
       markSeen();
    var $dialog = $('<div>', { class: 'mw-site-announcement-modal', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'mw-site-announcement-title' });
       $overlay.remove();
     var $header = $('<div>', { class: 'mw-site-announcement-header' })
       $modal.remove();
      .append($('<h2>', { id: 'mw-site-announcement-title', text: titleText || CONFIG.title }));
     });
    var $close = $('<button>', { type:'button', class:'mw-site-announcement-close', 'aria-label':'Schließen' }).text('×');
    var $content = $('<div>', { class:'mw-site-announcement-content' }).html(bodyHtml);
    var $footer = $('<div>', { class:'mw-site-announcement-footer' });
    var $ok = $('<button>', { type:'button', class:'mw-ui-button mw-ui-progressive' }).text('OK');
 
    $header.append($close);
    $footer.append($ok);
    $dialog.append($header, $content, $footer);
    return { $overlay, $dialog, $close, $ok, $content };
  }
 
  function openModal(bodyHtml, titleText, countAsShownOnOk = true, countAsShownOnClose = CONFIG.closeBehavesAsShown){
    var parts = buildModal(bodyHtml, titleText);
    var $overlay = parts.$overlay, $dialog = parts.$dialog, $close = parts.$close, $ok = parts.$ok;
 
    $('body').append($overlay, $dialog);
 
    var previouslyFocused = document.activeElement;
    setTimeout(function(){ $dialog.attr('tabindex','-1').focus(); }, 0);
 
    function close(count){
       if (count) markShown();
       $overlay.remove(); $dialog.remove();
      if (previouslyFocused && previouslyFocused.focus) previouslyFocused.focus();
       $(document).off('keydown.mwSiteAnnouncement');
     }
 
    $ok.on('click', function(){ close(countAsShownOnOk); });
    $close.on('click', function(){ close(countAsShownOnClose); });
    if (CONFIG.clickBackdropToClose) $overlay.on('click', function(){ close(countAsShownOnClose); });


     if (CONFIG.escToClose) {
     if (CONFIG.escToClose) {
       $(document).on('keydown.mwSiteAnnouncement', function (e) {
       $(document).on('keydown.popup', function (e) {
         if (e.key === 'Escape') { e.preventDefault(); close(countAsShownOnClose); }
         if (e.key === 'Escape') {
          markSeen();
          $overlay.remove();
          $modal.remove();
        }
       });
       });
     }
     }


     return { $dialog, $overlay };
     markSeen();
  }
 
  function openImagePreview(){
    var imgHtml =
      '<figure class="mw-site-announcement-figure">' +
        '<img src="'+ CONFIG.imageSrc +'" alt="'+ (CONFIG.imageAlt || '') +'" class="mw-site-announcement-img" loading="lazy">' +
        '<figcaption><a href="'+ CONFIG.imageSrc +'" target="_blank" rel="noopener">Bild in voller Größe öffnen</a></figcaption>' +
      '</figure>';
 
    // Bildvorschau zählt nicht als "gesehen", damit man das Hauptmodal noch mit OK bestätigen kann:
    openModal(imgHtml, 'Mehr Infos', /*countAsShownOnOk*/ false, /*countAsShownOnClose*/ false);
  }
 
  $(function () {
    // Hauptmodal öffnen
    var main = openModal(CONFIG.html, CONFIG.title, /*countOnOk*/ true, /*countOnClose*/ CONFIG.closeBehavesAsShown);
 
    // „Mehr Infos“-Button (Bildvorschau) verdrahten
    main.$dialog.on('click', '#mw-site-announcement-more', function(){
      openImagePreview();
    });
   });
   });
})(jQuery, mediaWiki);
})(jQuery, mediaWiki);