User:Erutuon/scripts/listSwitcher.js

(function listSwitcherIIFE () {
// Number of list items to show in the hidden state of a "list switcher" list.
// Customize by adding
// window.listSwitcherCount = <your preferred number of items>;
// to your common.js before loading this script.
window.listSwitcherRowCount = window.listSwitcherRowCount || 3;

var $listSwitchers = $(".test-list-switcher");

if ($listSwitchers.length > 0) {
	// functions declared with var to circumvent unnecessary lint error
	var getListItemsToHide = function ($listItems, columnCount, rowsInShowState) {
		var count = $listItems.length;
		var itemsPerColumn = Math.ceil(count / columnCount);
		
		var $elemsToHide = $();
		if (itemsPerColumn > rowsInShowState) {
			for (var i = 0; i < columnCount; ++i) {
				var columnStart = i * itemsPerColumn;
				$elemsToHide = $elemsToHide
					.add($listItems.slice(columnStart + rowsInShowState, columnStart + itemsPerColumn));
			}
		}
		
		return $elemsToHide;
	};
	
	var enableListSwitch = function ($rootElement, rowsInShowState) {
		// Number of columns must be set in data-term-list-column-count attribute
		// of the element with class term-list.
		var $termList = $rootElement.find(".term-list");
		var columnCount = parseInt($termList.data("column-count"));
		// Find the element to place the toggle button in.
		var $toggleElement = $rootElement.find(".list-switcher-element");
		if (!(columnCount && columnCount > 0)) {
			$toggleElement.hide();
			return;
		}
		var $listItems = $rootElement.find("ul").first().find("li");
		
		// Don't do anything if there aren't enough items in the list.
		var itemsInHideState = columnCount * rowsInShowState;
		if ($listItems.length <= itemsInHideState) {
			$toggleElement.hide();
			return;
		}
		
		var $toHide = getListItemsToHide($listItems, columnCount, rowsInShowState);
		$toHide.css('list-style-type', '"\\1F47B"');
		
		$toggleElement.css({
			"width": "50%",
			"cursor": "pointer",
		});
		
		// Add the toggle button.
		var $toggleButton = $('<a>');
		
		var rootBackgroundColor = $termList.css("background-color"),
			rootBackground = $termList.css("background");
		var $navToggle = $('<span>').addClass('NavToggle');
		if (rootBackgroundColor || rootBackground)
			$navToggle.css(rootBackgroundColor ? "background-color" : "background",
				rootBackgroundColor || rootBackground);
		
		// The $toggleElement becomes clickable in its entirety, but
		// we need to prevent this if a contained link is clicked instead.
		$toggleElement.children("a").on("click", function (e) {
			if (e && e.stopPropagation)
				e.stopPropagation();
			else
				window.event.cancelBubble = true;
		});
		
		// Determine the visibility toggle category (for the links in the bar on the
		// left). It will either be the value of the "data-toggle-category"
		// attribute or will be based on the text of the closest preceding
		// fourth-to-sixth-level header.
		var toggleCategory = $rootElement.data("toggle-category")
			|| getToggleCategory($rootElement[0], "other lists");
		
		// Determine the text for the $toggleButton.
		var showButtonText = $toggleElement.data("showtext") || 'more ▼';
		var hideButtonText = $toggleElement.data("hidetext") || 'less ▲';
		
		// Register the visibility toggle.
		$toggleElement.on("click", alternativeVisibilityToggles.register(toggleCategory,
			function show() {
				$toggleButton.html(hideButtonText);
				$toHide.show();
			},
			function hide() {
				$toggleButton.html(showButtonText);
				$toHide.hide();
			}));
		
		// Add the toggle button to the DOM tree.
		$navToggle.append($toggleButton).prependTo($toggleElement);
		$toggleElement.show();
	};
	
	for (var i = 0; i < $listSwitchers.length; ++i) {
		enableListSwitch($($listSwitchers[i]), window.listSwitcherRowCount);
	}
}

})();