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 = ; // 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 = $(''); var rootBackgroundColor = $termList.css("background-color"), rootBackground = $termList.css("background"); var $navToggle = $(' ').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); } }

});