MediaWiki:Gadget-CollapsibleSidebar.js

/**
 * This is a fork of [[zh:MediaWiki:Gadget-CollapsibleSidebar.js]]
 */
(function () {
	'use strict';

function init() {

	if (mw.config.get('skin') !== 'vector') {
		// This is only for the Vector skin
		return;
	}

	var gadgetName = 'ext.gadget.CollapsibleSidebar';

	var contentLang = mw.config.get('wgContentLanguage');
	var userLang = mw.config.get('wgUserLanguage');

	if (['bo', 'dz'].indexOf(contentLang) !== -1) {
		// TODO: Why should it be disabled for these languages?
		return;
	}

	var $body = $('body');
	var $mwNavigation = $('#mw-navigation');
	var $mwWikiLogo = $('.mw-wiki-logo');
	var $mwPanel = $('#mw-panel');
	var isSidebarHide = false;
	var $sidebarCollapseButton;
	var $sliderCollapseLogo;

	// Determine which URL to use for the logo when the sidebar is collapsed
	var project = mw.config.get('wgNoticeProject');
	var commonImgUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb';
	var localImgUrl = '/static/images/mobile/copyright/' + project + '-wordmark';
	var images = {
		next: commonImgUrl + '/9/95/Icons8_flat_next.svg/15px-Icons8_flat_next.svg.png',
		prev: commonImgUrl + '/b/bd/Icons8_flat_previous.svg/15px-Icons8_flat_previous.svg.png'
	};
	if (project === 'wikipedia') {
		var imgLogoLang = ['ca', 'cs', 'cy', 'el', 'en', 'et', 'hi', 'hy', 'ja', 'ka', 'la', 'ru', 'szl', 'th', 'uk', 'uz', 'zh'].indexOf(contentLang) !== -1 ? contentLang : 'en';
		if (contentLang === 'zh' && ['zh-cn', 'zh-hans', 'zh-my', 'zh-sg'].indexOf(userLang) !== -1) {
			imgLogoLang = "zh-hans";
		}
		images.logo = localImgUrl + '-' + imgLogoLang + '.svg';
	} else if (project === "wikidata") {
		images.logo = localImgUrl + '.svg';
	}

	// The toggle buttons are arrowheads, so should point in the opposite direction on RTL pages
	if ($body.hasClass('rtl')) {
		var left = images.prev;
		var right = images.next;
		images.next = left;
		images.prev = right;
	}

	function toggleSidebar() {
		isSidebarHide = !isSidebarHide;

		// Swap the icon
		$sidebarCollapseButton.attr('src', isSidebarHide ? images.next : images.prev);

		// Add/remove 
		$body.toggleClass("userjs-collapsiblesidebar-sidebarhidden");

		$mwPanel.toggle();
		$sliderCollapseLogo.toggle();

		// Save state so it can be restored on the next page load
		mw.storage.set(gadgetName, isSidebarHide ? 'hide' : 'show');
	}

	// Create the toggle button and add it to the page
	$sidebarCollapseButton = $('<img>').attr({
		id: 'sidebarCollapse',
		src: images.prev,
		draggable: 'false'
	});
	$sidebarCollapseButton.on('click', toggleSidebar);
	$sidebarCollapseButton.appendTo($mwNavigation);

	// Adjust the logo
	var $originMwLogo = $mwWikiLogo;
	var $newMwLogo = $originMwLogo.clone(false).empty().removeAttr('class').attr({
		id: 'sidebarCollapseLink',
		title: $originMwLogo.attr('title')
	});

	$sliderCollapseLogo = $('<img>').addClass('mw-no-invert').attr({
		id: 'sliderCollapseLogo',
		src: images.logo
	});

	if (images.logo) {
		$sliderCollapseLogo.appendTo($newMwLogo);
		$newMwLogo.appendTo($mwNavigation);
	} else {
		$body.addClass("userjs-collapsiblesidebar-nologo");
	}

	// Restore the last state of the sidebar when loading the page
	if (mw.storage.get(gadgetName) === 'hide') {
		toggleSidebar();
	}
}

$( document ).ready( init );

})();