|
|
| 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); |