MediaWiki:Gadget-PortableInfoboxScrollArrows.js

Not: Yayımladıktan sonra değişiklikleri görmeniz için tarayıcınızın önbelleğini temizlemeniz gerekebilir.

• Firefox / Safari: Shift tuşuna basılıyken Yeniden Yükle'ye tıklayın ya da Ctrl-F5 ya da Ctrl-R tıklayın (Mac için ⌘-R)
• Google Chrome: Ctrl-Shift-R'ye basın. (Mac için ⌘-Shift-R)
• Edge: Ctrl basılıyken Yenile'ye tıklayın ya da Ctrl-F5'e basın.

$('.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);
	});
});