User:Erutuon/scripts/listSwitcher.js
< User:Erutuon | scripts
Note: You may have to bypass your browser’s cache to see the changes. In addition, after saving a sitewide CSS file such as MediaWiki:Common.css, it will take 5-10 minutes before the changes take effect, even if you clear your cache.
- Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
- Konqueror and Chrome: click Reload or press F5;
- Opera: clear the cache in Tools → Preferences;
- Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.
- This script lacks a documentation subpage. Please create it.
- Useful links: root page • root page’s subpages • links • redirects • your own
(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);
}
}
})();