MediaWiki:Common.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

$( function () {

/* 为 Template:Hidebox 增加动画效果 */
function changeTagName( el, newTagName ) {
	var newEl = document.createElement( newTagName )
	for ( var i = 0, l = el.attributes.length; i < l; i++ ) {
		newEl.attributes.setNamedItem( el.attributes[i].cloneNode() )
	}
	while ( el.childNodes.length ) {
		newEl.appendChild( el.firstChild )
	}
	if ( el.parentNode ) {
		el.parentNode.replaceChild( newEl, el )
	}
	return newEl
}
$( "#bodyContent" ).on( "click", ".lnnblog-hidebox-heading", function ( event ) {
	event.preventDefault()

	/** 折叠框的 <summary> 元素。 */
	var $this = $( this )
	/** 折叠框的 <details> 元素。 */
	var $parent = $this.parent()
	/** 折叠框内容元素。 */
	var $body = $this.nextAll( ".lnnblog-hidebox-body" )

	if ( this.tagName.toLowerCase() !== "summary" ) {
		$this = $( changeTagName( this, "summary" ) )
		$parent = $( changeTagName( $parent[0], "details" ) )
		$body.css( "display", "" )
	}

	var open = $parent.prop( "open" )
	/** 当前正在执行的动画动作（expand 或 shrink）。若不在执行动画则为空。 */
	var oldState = $parent.attr( "data-lnnblog-hidebox-state" )
	/** 现在要执行的动画动作。 */
	var state = !open || oldState === "shrink" ? "expand" : "shrink"

	// 计算当前的宽高
	// 取得的宽度是四舍五入过的；增加 0.5 以避免内容折行
	var currentWidth = $parent.width() + 0.5
	var currentHeight = $parent.height()
	// 打断可能正在进行的动画，然后计算一下动画目标状态的宽高
	$parent.stop( true, true ).prop( "open", state === "expand" )
	var targetWidth = $parent.width() + 0.5
	var targetHeight = $parent.height()

	// 锁定内容框宽度为完全展开状态的宽度，以避免内容折行
	if (state === "expand")
		$body.outerWidth( targetWidth )
	else if (oldState !== "expand") // 从完全展开状态折叠
		$body.outerWidth( currentWidth )
	// 如果不是从完全展开状态折叠，即在展开的半途中折叠，
	// 则内容框的宽度还没有清除，无需再次设置。

	$parent
		.attr( "data-lnnblog-hidebox-state", state )
		.width( currentWidth )
		.height( currentHeight )
		// 必须在 open 状态下才能显示出内容框，所以不管展开还是折叠都需要设置成 open
		.prop( "open", true )
		.animate( {
			width: targetWidth,
			height: targetHeight
		}, {
			duration: 250,
			done: function () {
				if (state === "shrink") $parent.prop( "open", false )
				// 清除手动设置的宽高
				$body.css( "width", "" )
				$parent
					.css( { width: "", height: "" } )
					.removeAttr( "data-lnnblog-hidebox-state" )
			}
		} )
} )

} )