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
/**
* Gadget-Bahnsteiganzeiger.js
* ============================================================================
* Bettet ÖBB-Live-Abfahrts-/Ankunftstafeln ("Liveticker") in Wiki-Seiten ein
* und lädt sie selbstständig neu. Intern heißt das Ding "Bahnsteiganzeiger",
* für Fahrgäste steht auf der Seite "Monitore".
*
* WARUM EIN GADGET?
* MediaWiki entfernt rohe <iframe> aus dem Seitentext. Dieses Gadget baut das
* iframe daher selbst aus einem einfachen Container – und kann es zusätzlich
* alle 60 s neu laden (was ein rohes iframe nie könnte).
*
* ZWEI-KLICK-SPERRE
* Die Tafel liegt auf fahrplan.oebb.at. Ein automatisch geladenes iframe
* würde die IP-Adresse jedes Besuchers an die ÖBB übertragen, ohne dass er
* das wollte. Deshalb erscheint zuerst eine Vorschaubox; erst der Klick baut
* die Verbindung auf. Auf Wunsch merkt sich der Browser die Freigabe für die
* laufende Sitzung (sessionStorage – kein Cookie, kein Banner); sie gilt dann
* für alle ÖBB-Tafeln des Wikis und endet mit dem Schließen des Browsers.
* Unter der geladenen Tafel steht ein Link zum Zurücknehmen.
*
* EINBINDUNG AUF EINER SEITE
* <div class="bahnsteiganzeiger" data-evaid="1231805" data-typ="dep"></div>
* <div class="bahnsteiganzeiger" data-evaid="1231805" data-typ="arr"></div>
*
* data-Attribute:
* data-evaid Pflicht. Stationsnummer (evaId) des Bahnhofs.
* data-typ "dep" = Abfahrten (Standard), "arr" = Ankünfte.
* data-anzahl Zeilenzahl (Standard 40).
* data-hoehe Pixel-Höhe der Tafel (Standard 808; bei mehr Zeilen als
* hineinpassen scrollt die Tafel innen).
* data-intervall Neulade-Intervall in Sekunden (Standard 60; 0 = aus).
* ============================================================================
*/
( function () {
'use strict';
var BASIS = 'https://fahrplan.oebb.at/bin/stboard.exe/dn';
var LIVETICKER = 'vs_scotty.vs_liveticker';
var PRODUCTS = '1111111111111'; // alle Verkehrsmittel inkl. Bus
var STD_ANZAHL = 40;
var STD_HOEHE = 808;
var STD_INTERVALL = 60; // Sekunden
/* --- Zwei-Klick-Sperre ------------------------------------------- */
var SPEICHER = 'wiki-freigabe-oebb';
var DATENSCHUTZ = 'https://www.oebb.at/de/datenschutz';
/* Noch gesperrte Tafeln dieser Seite – damit ein "merken"-Klick auch
* die zweite Tafel (Ankünfte) gleich mitfreigibt. */
var wartende = [];
function freigegeben() {
try {
return window.sessionStorage.getItem( SPEICHER ) === 'ja';
} catch ( e ) {
return false; // privater Modus o.Ä.: dann eben jedes Mal fragen
}
}
function setzeFreigabe( ja ) {
try {
if ( ja ) {
window.sessionStorage.setItem( SPEICHER, 'ja' );
} else {
window.sessionStorage.removeItem( SPEICHER );
}
} catch ( e ) {}
}
function gibAlleFrei() {
var liste = wartende.slice();
wartende.length = 0;
liste.forEach( function ( fn ) {
fn();
} );
}
function stil( el, regeln ) {
var name;
for ( name in regeln ) {
el.style[ name ] = regeln[ name ];
}
return el;
}
/* --- ÖBB-Adressen ------------------------------------------------- */
function baueUrl( eva, typ, anzahl ) {
return BASIS +
'?L=' + LIVETICKER +
'&evaId=' + encodeURIComponent( eva ) +
'&boardType=' + typ +
'&productsFilter=' + PRODUCTS +
'&dirInput=' +
'&tickerID=' + typ +
'&start=yes' +
'&eqstops=true' +
'&showJourneys=' + anzahl +
'&additionalTime=0';
}
function titelText( typ ) {
return typ === 'arr' ? 'Ankünfte' : 'Abfahrten';
}
/* --- Vorschaubox (noch nichts geladen) ---------------------------- */
function sperre( container, cfg ) {
var erledigt = false;
container.textContent = '';
container.className = container.className
.replace( / ?bahnsteiganzeiger-fehler/, '' );
var box = stil( document.createElement( 'div' ), {
border: '1px solid #a2a9b1',
borderRadius: '2px',
background: '#f8f9fa',
padding: '1em',
maxWidth: '42em',
boxSizing: 'border-box'
} );
box.className = 'bahnsteiganzeiger-sperre';
var kopf = stil( document.createElement( 'div' ), {
fontWeight: 'bold',
fontSize: '108%',
marginBottom: '0.4em'
} );
kopf.textContent = titelText( cfg.typ ) + ' – Live-Tafel der ÖBB';
box.appendChild( kopf );
var text = stil( document.createElement( 'p' ), { margin: '0.4em 0' } );
text.textContent = 'Die Tafel liegt auf fahrplan.oebb.at und gehört der ' +
'ÖBB-Personenverkehr AG. Beim Laden erfährt die ÖBB deine ' +
'IP-Adresse, welchen Bahnhof du gerade ansiehst und technische ' +
'Angaben zu deinem Gerät und Browser. Solange du nicht klickst, ' +
'verlässt keine einzige Anfrage dieses Wiki.';
box.appendChild( text );
var knopf = stil( document.createElement( 'button' ), {
cursor: 'pointer',
padding: '0.4em 0.9em',
fontWeight: 'bold'
} );
knopf.type = 'button';
knopf.textContent = titelText( cfg.typ ) + ' laden';
var haken = document.createElement( 'input' );
haken.type = 'checkbox';
var hakenLabel = stil( document.createElement( 'label' ), {
display: 'block',
margin: '0.7em 0',
fontSize: '92%'
} );
hakenLabel.appendChild( haken );
hakenLabel.appendChild( document.createTextNode(
' Für diese Sitzung merken – gilt dann für alle ÖBB-Tafeln im ' +
'Wiki und endet, sobald du den Browser schließt. Es wird kein ' +
'Cookie gesetzt.'
) );
box.appendChild( hakenLabel );
box.appendChild( stil( document.createElement( 'div' ),
{ margin: '0.7em 0' } ) ).appendChild( knopf );
var fuss = stil( document.createElement( 'div' ), {
fontSize: '85%',
color: '#54595d',
marginTop: '0.6em'
} );
var dsLink = document.createElement( 'a' );
dsLink.href = DATENSCHUTZ;
dsLink.target = '_blank';
dsLink.rel = 'noopener';
dsLink.textContent = 'Datenschutzerklärung der ÖBB';
fuss.appendChild( dsLink );
box.appendChild( fuss );
container.appendChild( box );
function freigeben() {
if ( erledigt ) {
return;
}
erledigt = true;
lade( container, cfg );
}
wartende.push( freigeben );
knopf.addEventListener( 'click', function () {
if ( haken.checked ) {
setzeFreigabe( true );
gibAlleFrei();
} else {
freigeben();
}
} );
}
/* --- Geladene Tafel ------------------------------------------------ */
function lade( container, cfg ) {
container.textContent = '';
var titel = document.createElement( 'div' );
titel.className = 'bahnsteiganzeiger-titel';
titel.textContent = titelText( cfg.typ );
container.appendChild( titel );
var rahmen = document.createElement( 'div' );
rahmen.className = 'bahnsteiganzeiger-rahmen';
rahmen.style.height = cfg.hoehe + 'px';
var iframe = document.createElement( 'iframe' );
iframe.className = 'bahnsteiganzeiger-iframe';
iframe.setAttribute( 'frameborder', '0' );
iframe.setAttribute( 'scrolling', 'auto' );
iframe.setAttribute( 'referrerpolicy', 'no-referrer' );
iframe.title = titelText( cfg.typ );
var url = baueUrl( cfg.eva, cfg.typ, cfg.anzahl );
var timer = null;
function laden() {
// Cache-Buster erzwingt frische Daten bei jedem Neuladen.
iframe.src = url + '&_ts=' + Date.now();
}
laden();
rahmen.appendChild( iframe );
container.appendChild( rahmen );
if ( cfg.intervall > 0 ) {
var hinweis = document.createElement( 'div' );
hinweis.className = 'bahnsteiganzeiger-hinweis';
hinweis.textContent = 'Aktualisiert automatisch (alle ' +
cfg.intervall + ' s).';
container.appendChild( hinweis );
timer = setInterval( laden, cfg.intervall * 1000 );
}
var fuss = stil( document.createElement( 'div' ), {
fontSize: '85%',
color: '#54595d',
marginTop: '0.4em'
} );
var zurueck = document.createElement( 'a' );
zurueck.href = '#';
zurueck.textContent = 'Verbindung zur ÖBB wieder sperren';
zurueck.addEventListener( 'click', function ( e ) {
e.preventDefault();
if ( timer ) {
clearInterval( timer );
}
setzeFreigabe( false );
sperre( container, cfg );
} );
fuss.appendChild( zurueck );
container.appendChild( fuss );
}
/* --- Einstieg ------------------------------------------------------ */
function baueAnzeiger( container ) {
var eva = ( container.getAttribute( 'data-evaid' ) || '' )
.trim().replace( /^0+/, '' );
var typ = ( container.getAttribute( 'data-typ' ) || 'dep' ).toLowerCase();
if ( typ !== 'arr' ) {
typ = 'dep';
}
if ( !eva ) {
container.textContent = 'Bahnsteiganzeiger: keine evaId angegeben.';
container.className += ' bahnsteiganzeiger-fehler';
return;
}
var intervall = container.getAttribute( 'data-intervall' );
intervall = ( intervall === null ) ? STD_INTERVALL : parseInt( intervall, 10 );
var cfg = {
eva: eva,
typ: typ,
anzahl: parseInt( container.getAttribute( 'data-anzahl' ), 10 ) || STD_ANZAHL,
hoehe: parseInt( container.getAttribute( 'data-hoehe' ), 10 ) || STD_HOEHE,
intervall: isFinite( intervall ) ? intervall : STD_INTERVALL
};
if ( freigegeben() ) {
lade( container, cfg );
} else {
sperre( container, cfg );
}
}
function init() {
var liste = document.querySelectorAll( '.bahnsteiganzeiger' );
Array.prototype.forEach.call( liste, function ( c ) {
try {
baueAnzeiger( c );
} catch ( e ) {
c.textContent = 'Bahnsteiganzeiger konnte nicht geladen werden.';
if ( window.mw && mw.log ) {
mw.log.error( e );
}
}
} );
}
$( function () {
if ( document.querySelector( '.bahnsteiganzeiger' ) ) {
init();
}
} );
}() );