MediaWiki:Gadget-multibilde.js
(Omdirigert fra «MediaWiki: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 );
}
} );
});