MediaWiki:Gadget-PortableInfoboxScrollArrows.js

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
• Opera: Pressione 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);
	});
});