MediaWiki:Gadget-PortableInfoboxScrollArrows.js

注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。

• Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
• Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
• Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、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);
	});
});