MediaWiki:Gadget-PortableInfoboxScrollArrows.js

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
•  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.

$('.portable-infobox').each((_, infobox) => {
	const $infobox = $(infobox);
	const $tabs = $infobox.find('.pi-media-collection-tabs');
	const $collection = $infobox.find('.pi-media-collection');
	const isMobile = $tabs.css('display') === 'none';
	const $target = isMobile ? $collection : $tabs;
	$target.before($('<div>', {
	    class: 'pi-media-collection-icon-left skin-invert',
	    click: event => {
	        const target = event.currentTarget.nextElementSibling;
	        target.scrollBy(-target.clientWidth, 0);
	    },
	    tabindex: 0
	})).after($('<div>', {
	    class: 'pi-media-collection-icon-right skin-invert',
	    click: event => {
	        const target = event.currentTarget.previousElementSibling;
	        target.scrollBy(target.clientWidth, 0);
	    },
	    tabindex: 0
	})).scroll(event => {
	    const target = event.currentTarget;
	    const arrowLeft = target.previousElementSibling;
	    const arrowRight = target.nextElementSibling;
	    if (target.scrollLeft > 50) {
	        arrowLeft.classList.add('show');
	    } else {
	        arrowLeft.classList.remove('show');
	    }
	    if (target.scrollWidth - target.scrollLeft - target.clientWidth > 50) {
	        arrowRight.classList.add('show');
	    } else {
	        arrowRight.classList.remove('show');
	    }
	}).each((_, target) => {
	    target.scrollBy(1, 0);
	    target.scrollBy(-1, 0);
	});
});