MediaWiki:Gadget-multibilde.js

Merk: Etter publisering vil det kanskje være nødvendig å slette mellomlageret i nettleseren din for å se endringene.

Firefox / Safari: Hold Shift mens du klikker på Oppdater, eller trykk enten Ctrl+F5 eller Ctrl+R (⌘+R på Mac)
Google Chrome: Trykk Ctrl+Shift+R (⌘+Shift+R på Mac)
Internet Explorer / Edge: Hold Ctrl mens du trykker på Oppdater eller trykk Ctrl+F5
Opera: Ttrykk Ctrl+F5.

/**
 * Gadget that adds an image carousel to infoboxes.
 * 
 * Templates that use this gadget:
 * * {{alternativbilde}}
 * * {{alternativbilder}}
 * * {{standardbilde}}
 * 
 * @author Jon Harald Søby
 * @author BjørnN
 * @version 2.0.0 (2024-04-03)
 */
// Fjern neste og siste linje når denne blir en faktisk tilleggsfunksjon
mw.loader.using( [ 'oojs', 'oojs-ui-core', 'oojs-ui.styles.icons-movement', 'oojs-ui-widgets' ] ).then( function() {
mw.hook( 'wikipage.content' ).add( function( $content ) {
	function switchImage( $list, dir ) {
		const $images = $list.children( 'div' );
		const $current = $images.not( '.hide' );
		$current.addClass( 'hide' );
		if ( dir === 'next' ) {
			if ( $current.next( 'div' ).length ) {
				$current.next( 'div' ).removeClass( 'hide' );
			} else {
				$current.siblings( 'div' ).first().removeClass( 'hide' );
			}
		} else {
			if ( $current.prev( 'div' ).length ) {
				$current.prev( 'div' ).removeClass( 'hide' );
			} else {
				$current.siblings( 'div' ).last().removeClass( 'hide' );
			}
		}
	}

	const $imagelists = $content.find( 'div.vekselbilde' );
	for ( const list of $imagelists ) {
		const $list = $( list );

		const $label = $list.find( 'p.vekselbilde' );
		if ( $list.find( 'div' ).length > 1 ) {
			$label.removeClass( 'hide' );
		} else {
			break;
		}

		const prevButton = new OO.ui.ButtonWidget( {
			framed: false,
			invisibleLabel: true,
			label: 'Forrige bilde',
			title: 'Forrige bilde',
			icon: 'previous'
		} ).on( 'click', function() {
			switchImage( $list, 'prev' );
		} );

		const labelButton = new OO.ui.ButtonWidget( {
			framed: false,
			disabled: true,
			label: $label.text(),
			title: $label.text(),
		} );

		const nextButton = new OO.ui.ButtonWidget( {
			framed: false,
			invisibleLabel: true,
			label: 'Neste bilde',
			title: 'Neste bilde',
			icon: 'next'
		} ).on( 'click', function() {
			switchImage( $list, 'next' );
		});

		const layout = new OO.ui.HorizontalLayout( {
			items: [
				prevButton,
				labelButton,
				nextButton
			]
		} );

		$label.html( layout.$element );
	}
} );
});