MediaWiki:Gadget-Bahnsteiganzeiger.js: Unterschied zwischen den Versionen

Aktuelle Version vom 19. September 2026, 19:52 Uhr

/**
 * 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();
		}
	} );

}() );