MediaWiki:Gadget-NavFrame.js

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。
/**
 * Dynamic Navigation Bars (experimental)
 *
 * Description: See [[Wikipedia:NavFrame]].
 * Maintainers: UNMAINTAINED
 */

var collapseCaption = wgULS('隐藏', '隱藏');
var expandCaption = wgULS('显示', '顯示');

var navigationBarHide = collapseCaption + '▲';
var navigationBarShow = expandCaption + '▼';

/**
 * Shows and hides content and picture (if available) of navigation bars.
 *
 * @param {number} indexNavigationBar The index of navigation bar to be toggled
 * @param {jQuery.Event} event Event object
 * @return {boolean}
 */
function toggleNavigationBar(indexNavigationBar, event) {
	var navToggle = document.getElementById('NavToggle' + indexNavigationBar);
	var navFrame = document.getElementById('NavFrame' + indexNavigationBar);
	var navChild;

	if (!navFrame || !navToggle) {
		return false;
	}

	// If shown now
	if (navToggle.firstChild.data === navigationBarHide) {
		for (navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling) {
			if ($(navChild).hasClass('NavContent')) {
				navChild.style.display = 'none';
			}
		}
		navToggle.firstChild.data = navigationBarShow;

		// If hidden now
	} else if (navToggle.firstChild.data === navigationBarShow) {
		for (navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling) {
			if ($(navChild).hasClass('NavContent')) {
				navChild.style.display = 'block';
			}
		}
		navToggle.firstChild.data = navigationBarHide;
	}

	event.preventDefault();
}

/**
 * Adds show/hide-button to navigation bars.
 *
 * @param {jQuery} $content
 */
function createNavigationBarToggleButton($content) {
	var j,
	navChild,
	navToggle,
	navToggleText,
	isCollapsed,
	indexNavigationBar = 0;
	// Iterate over all < div >-elements
	var $divs = $content.find('div.NavFrame:not(.mw-collapsible)');
	$divs.each(function (i, navFrame) {
		indexNavigationBar++;
		navToggle = document.createElement('a');
		navToggle.className = 'NavToggle';
		navToggle.setAttribute('id', 'NavToggle' + indexNavigationBar);
		navToggle.setAttribute('href', '#');
		$(navToggle).on('click', $.proxy(toggleNavigationBar, null, indexNavigationBar));

		isCollapsed = $(navFrame).hasClass('collapsed');
		/**
		 * Check if any children are already hidden.  This loop is here for backwards compatibility:
		 * the old way of making NavFrames start out collapsed was to manually add style="display:none"
		 * to all the NavPic/NavContent elements.  Since this was bad for accessibility (no way to make
		 * the content visible without JavaScript support), the new recommended way is to add the class
		 * "collapsed" to the NavFrame itself, just like with collapsible tables.
		 */
		for (navChild = navFrame.firstChild; navChild !== null && !isCollapsed; navChild = navChild.nextSibling) {
			if ($(navChild).hasClass('NavPic') || $(navChild).hasClass('NavContent')) {
				if (navChild.style.display === 'none') {
					isCollapsed = true;
				}
			}
		}
		if (isCollapsed) {
			for (navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling) {
				if ($(navChild).hasClass('NavPic') || $(navChild).hasClass('NavContent')) {
					navChild.style.display = 'none';
				}
			}
		}
		navToggleText = document.createTextNode(isCollapsed ? navigationBarShow : navigationBarHide);
		navToggle.appendChild(navToggleText);

		// Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
		for (j = 0; j < navFrame.childNodes.length; j++) {
			if ($(navFrame.childNodes[j]).hasClass('NavHead')) {
				navToggle.style.color = navFrame.childNodes[j].style.color;
				navFrame.childNodes[j].appendChild(navToggle);
			}
		}
		navFrame.setAttribute('id', 'NavFrame' + indexNavigationBar);
	});
}

mw.hook('wikipage.content').add(createNavigationBarToggleButton);