MediaWiki:Common.js
Aus Hist. Verein Herne / Wanne-Eickel
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* ============================================================
* Vorlage:Hauptseite/Neue Artikel
* Lädt die letzten 20 neu erstellten Seiten via MediaWiki-API
* und rendert pro Seite eine Kachel mit Bild, Titel, Auszug.
*
* Voraussetzung: Erweiterungen PageImages und TextExtracts
* sind aktiviert (im Wiki bereits der Fall).
*
* Bitte als Ergänzung in MediaWiki:Common.js einfügen.
* ============================================================ */
( function () {
'use strict';
function escapeHtml( s ) {
return String( s )
.replace( /&/g, '&' )
.replace( /</g, '<' )
.replace( />/g, '>' )
.replace( /"/g, '"' )
.replace( /'/g, ''' );
}
function formatDate( ts ) {
if ( !ts ) { return ''; }
var d = new Date( ts );
if ( isNaN( d.getTime() ) ) { return ''; }
var monate = [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ];
return d.getDate() + '. ' + monate[ d.getMonth() ] + ' ' + d.getFullYear();
}
function renderEmpty( container, text ) {
container.innerHTML = '<div class="hv-neue-artikel-leer"><em>' +
escapeHtml( text ) + '</em></div>';
}
function renderGrid( container, ordered, pageMap, platzhalter ) {
container.innerHTML = '';
ordered.forEach( function ( item ) {
var p = pageMap[ item.title ];
if ( !p || p.missing !== undefined ) { return; }
var url = mw.util.getUrl( item.title );
var card = document.createElement( 'div' );
card.className = 'hv-neue-artikel-kachel';
// Bild (mit Link auf die Seite)
var imgWrap = document.createElement( 'a' );
imgWrap.className = 'hv-neue-artikel-bild';
imgWrap.href = url;
imgWrap.title = item.title;
var img = document.createElement( 'img' );
img.loading = 'lazy';
if ( p.thumbnail && p.thumbnail.source ) {
img.src = p.thumbnail.source;
img.alt = item.title;
imgWrap.appendChild( img );
} else if ( platzhalter ) {
// Kein Page-Image vorhanden -> Vereinslogo als Platzhalter
img.src = platzhalter;
img.alt = item.title;
imgWrap.classList.add( 'hv-neue-artikel-bild-platzhalter' );
imgWrap.appendChild( img );
} else {
imgWrap.classList.add( 'hv-neue-artikel-bild-leer' );
}
card.appendChild( imgWrap );
// Titel
var titel = document.createElement( 'div' );
titel.className = 'hv-neue-artikel-titel';
var a = document.createElement( 'a' );
a.href = url;
a.textContent = item.title;
titel.appendChild( a );
card.appendChild( titel );
// Auszug
if ( p.extract ) {
var ext = document.createElement( 'div' );
ext.className = 'hv-neue-artikel-auszug';
ext.textContent = p.extract;
card.appendChild( ext );
}
// Datum
if ( item.timestamp ) {
var dt = document.createElement( 'div' );
dt.className = 'hv-neue-artikel-datum';
dt.textContent = formatDate( item.timestamp );
card.appendChild( dt );
}
container.appendChild( card );
} );
if ( !container.children.length ) {
renderEmpty( container, 'Keine neuen Artikel gefunden.' );
}
}
function ladeNeueArtikel( container ) {
var limit = parseInt( container.getAttribute( 'data-hv-limit' ) || '20', 10 );
var ns = parseInt( container.getAttribute( 'data-hv-namespace' ) || '0', 10 );
// Platzhalterbild für Artikel ohne eigenes Vorschaubild.
// - Nicht gesetzt (Standard): Datei:Nochkeinbild.png
// - Leerer String: kein Platzhalter (Streifenmuster).
// - URL oder Pfad (enthält "/" oder beginnt mit "http"):
// wird direkt als Bild-URL verwendet.
// - Sonst: als Wiki-Dateiname interpretiert und per
// Special:FilePath aufgelöst.
var platzhalterAttr = container.getAttribute( 'data-hv-platzhalter' );
if ( platzhalterAttr === null ) { platzhalterAttr = 'Nochkeinbild.png'; }
if ( isNaN( limit ) || limit < 1 ) { limit = 20; }
if ( limit > 50 ) { limit = 50; }
mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).done( function () {
var api = new mw.Api();
var platzhalterUrl = null;
if ( platzhalterAttr === '' ) {
platzhalterUrl = null;
} else if ( /^https?:\/\//.test( platzhalterAttr ) || platzhalterAttr.charAt( 0 ) === '/' ) {
platzhalterUrl = platzhalterAttr;
} else {
platzhalterUrl = mw.util.getUrl(
'Special:FilePath/' + platzhalterAttr, { width: 320 }
);
}
// 1) Liste neu erstellter Seiten holen
api.get( {
action: 'query',
list: 'recentchanges',
rcnamespace: ns,
rctype: 'new',
rcshow: '!redirect',
rcprop: 'title|timestamp',
rclimit: limit,
format: 'json',
formatversion: 2
} ).done( function ( data ) {
var rc = ( data && data.query && data.query.recentchanges ) || [];
if ( !rc.length ) {
renderEmpty( container, 'Keine neuen Artikel gefunden.' );
return;
}
// Doppelte Titel filtern (z. B. wenn zweimal in RC auftauchen)
var seen = {};
var ordered = [];
rc.forEach( function ( e ) {
if ( !seen[ e.title ] ) {
seen[ e.title ] = true;
ordered.push( { title: e.title, timestamp: e.timestamp } );
}
} );
// 2) Bilder + Auszüge holen
// POST verwenden, weil die titles-Liste bei vielen
// Treffern lang werden kann und iOS Safari die GET-URL
// dann abweist.
api.post( {
action: 'query',
titles: ordered.map( function ( o ) { return o.title; } ).join( '|' ),
prop: 'pageimages|extracts',
pithumbsize: 320,
pilimit: 'max',
exintro: 1,
explaintext: 1,
exchars: 200,
exlimit: 'max',
format: 'json',
formatversion: 2
} ).done( function ( data2 ) {
var pages = ( data2 && data2.query && data2.query.pages ) || [];
var pageMap = {};
pages.forEach( function ( p ) { pageMap[ p.title ] = p; } );
renderGrid( container, ordered, pageMap, platzhalterUrl );
} ).fail( function () {
renderEmpty( container, 'Fehler beim Laden der Seitendaten.' );
} );
} ).fail( function () {
renderEmpty( container, 'Fehler beim Abruf der API.' );
} );
} );
}
function initAll( $content ) {
var root = ( $content && $content[ 0 ] ) || document;
var nodes = root.querySelectorAll( '.hv-neue-artikel-grid' );
Array.prototype.forEach.call( nodes, function ( node ) {
if ( node.getAttribute( 'data-hv-loaded' ) === '1' ) { return; }
node.setAttribute( 'data-hv-loaded', '1' );
ladeNeueArtikel( node );
} );
}
if ( window.mw && mw.hook ) {
mw.hook( 'wikipage.content' ).add( initAll );
} else if ( document.readyState !== 'loading' ) {
initAll();
} else {
document.addEventListener( 'DOMContentLoaded', function () { initAll(); } );
}
}() );
/* ============================================================
* Vorlage:Zufallsbild – Bild-Karussell
* Holt eine zufällige Stichprobe aus allen Wiki-Bildern via
* MediaWiki-API, filtert kleine/dekorative Dateien heraus und
* blendet die verbliebenen Bilder im 6-Sekunden-Takt durch.
* Beim Hover pausiert das Karussell.
* ============================================================ */
( function () {
'use strict';
// Dateinamen-Muster, die ausgeschlossen werden (Logos, Icons, Banner).
// Bewusst konservativ; Hauptfilter ist ohnehin die Bildgröße.
var AUSSCHLUSS_NAMEN = [
/\blogo\b/i,
/\bicon\b/i,
/\bwappen\b/i,
/\bsymbol\b/i,
/_neu\.(png|svg|gif|jpe?g)$/i, // typische Portal-Icons
/werdejetzt/i,
/herne[\s_-]mit[\s_-]respekt/i
];
function istAusgeschlossen( title ) {
var n = title.replace( /^Datei:|^File:|^Bild:/i, '' );
for ( var i = 0; i < AUSSCHLUSS_NAMEN.length; i++ ) {
if ( AUSSCHLUSS_NAMEN[ i ].test( n ) ) { return true; }
}
return false;
}
function shuffle( arr ) {
for ( var i = arr.length - 1; i > 0; i-- ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tmp = arr[ i ]; arr[ i ] = arr[ j ]; arr[ j ] = tmp;
}
return arr;
}
function buildSlide( p, container ) {
var info = p.imageinfo[ 0 ];
var a = document.createElement( 'a' );
a.className = 'hv-karussell-bild';
a.href = mw.util.getUrl( p.title );
a.title = p.title.replace( /^Datei:/, '' );
var img = document.createElement( 'img' );
img.src = info.thumburl || info.url;
img.alt = '';
img.loading = 'lazy';
a.appendChild( img );
container.appendChild( a );
return a;
}
function startRotation( container, slides, intervall ) {
if ( slides.length < 2 ) { return; }
slides[ 0 ].classList.add( 'hv-aktiv' );
var aktiv = 0;
var timer = null;
function naechste() {
slides[ aktiv ].classList.remove( 'hv-aktiv' );
aktiv = ( aktiv + 1 ) % slides.length;
slides[ aktiv ].classList.add( 'hv-aktiv' );
}
function start() { if ( !timer ) { timer = setInterval( naechste, intervall ); } }
function stop() { if ( timer ) { clearInterval( timer ); timer = null; } }
container.addEventListener( 'mouseenter', stop );
container.addEventListener( 'mouseleave', start );
// Bei Tab-Wechsel pausieren, um keine Zyklen im Hintergrund zu drehen
document.addEventListener( 'visibilitychange', function () {
if ( document.hidden ) { stop(); } else { start(); }
} );
start();
}
function ladeKarussell( container ) {
var pool = parseInt( container.getAttribute( 'data-hv-pool' ) || '60', 10 );
var anzahl = parseInt( container.getAttribute( 'data-hv-anzahl' ) || '10', 10 );
var minB = parseInt( container.getAttribute( 'data-hv-min-breite' ) || '500', 10 );
var minH = parseInt( container.getAttribute( 'data-hv-min-hoehe' ) || '400', 10 );
var intervall = parseInt( container.getAttribute( 'data-hv-intervall' ) || '6000', 10 );
var thumbBreite = parseInt( container.getAttribute( 'data-hv-thumb-breite' ) || '600', 10 );
if ( pool < 10 ) { pool = 10; } if ( pool > 200 ) { pool = 200; }
if ( anzahl < 1 ) { anzahl = 1; } if ( anzahl > 30 ) { anzahl = 30; }
mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).done( function () {
var api = new mw.Api();
// 1) Pool zufälliger Datei-Titel holen.
// list=random gibt max. 20 Einträge pro Aufruf zurück. Wir
// sammeln in mehreren Aufrufen, falls pool > 20.
var titel = [];
function holePool( restzahl ) {
if ( restzahl <= 0 ) { return $.Deferred().resolve().promise(); }
var step = Math.min( restzahl, 20 );
return api.get( {
action: 'query',
list: 'random',
rnnamespace: 6, // Datei-Namensraum
rnlimit: step,
format: 'json',
formatversion: 2
} ).then( function ( d ) {
var rnd = ( d && d.query && d.query.random ) || [];
rnd.forEach( function ( e ) { titel.push( e.title ); } );
return holePool( restzahl - step );
} );
}
holePool( pool ).done( function () {
if ( !titel.length ) {
container.innerHTML = '<div class="hv-karussell-leer"><em>Keine Bilder gefunden.</em></div>';
return;
}
// Doppelte und ausgeschlossene direkt aussortieren
var seen = {}, kandidaten = [];
titel.forEach( function ( t ) {
if ( seen[ t ] ) { return; }
seen[ t ] = true;
if ( istAusgeschlossen( t ) ) { return; }
kandidaten.push( t );
} );
if ( !kandidaten.length ) {
container.innerHTML = '<div class="hv-karussell-leer"><em>Keine geeigneten Bilder gefunden.</em></div>';
return;
}
// 2) Bildinfos holen (Größe, MIME, Thumb-URL).
// POST statt GET: bei einem Pool von 60 Dateititeln
// wird die GET-URL so lang, dass iOS Safari sie ablehnt.
api.post( {
action: 'query',
titles: kandidaten.join( '|' ),
prop: 'imageinfo',
iiprop: 'size|url|mime|mediatype',
iiurlwidth: thumbBreite,
format: 'json',
formatversion: 2
} ).done( function ( d2 ) {
var pages = ( d2 && d2.query && d2.query.pages ) || [];
var valide = [];
pages.forEach( function ( p ) {
if ( !p.imageinfo || !p.imageinfo[ 0 ] ) { return; }
var i = p.imageinfo[ 0 ];
if ( !i.mime || i.mime.indexOf( 'image/' ) !== 0 ) { return; }
if ( i.mediatype && i.mediatype !== 'BITMAP' ) { return; } // SVG raus
if ( !i.width || !i.height ) { return; }
if ( i.width < minB || i.height < minH ) { return; }
valide.push( { title: p.title, imageinfo: p.imageinfo } );
} );
if ( !valide.length ) {
container.innerHTML = '<div class="hv-karussell-leer"><em>Keine geeigneten Bilder gefunden.</em></div>';
return;
}
// Mischen und auf gewünschte Anzahl kürzen
valide = shuffle( valide ).slice( 0, anzahl );
container.innerHTML = '';
container.classList.add( 'hv-karussell-aktiv' );
var slides = valide.map( function ( v ) { return buildSlide( v, container ); } );
slides[ 0 ].classList.add( 'hv-aktiv' );
startRotation( container, slides, intervall );
} ).fail( function () {
container.innerHTML = '<div class="hv-karussell-leer"><em>Fehler beim Laden der Bilddaten.</em></div>';
} );
} ).fail( function () {
container.innerHTML = '<div class="hv-karussell-leer"><em>Fehler beim Abruf der API.</em></div>';
} );
} );
}
function initKarussells( $content ) {
var root = ( $content && $content[ 0 ] ) || document;
var nodes = root.querySelectorAll( '.hv-bild-karussell' );
Array.prototype.forEach.call( nodes, function ( node ) {
if ( node.getAttribute( 'data-hv-loaded' ) === '1' ) { return; }
node.setAttribute( 'data-hv-loaded', '1' );
ladeKarussell( node );
} );
}
if ( window.mw && mw.hook ) {
mw.hook( 'wikipage.content' ).add( initKarussells );
} else if ( document.readyState !== 'loading' ) {
initKarussells();
} else {
document.addEventListener( 'DOMContentLoaded', function () { initKarussells(); } );
}
}() );
