MediaWiki:Common.js Common.js 8

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。

• 火狐（Firefox）/Safari：按住“Shift”，同时单击“刷新”，或按“Ctrl-F5”或“Ctrl-R”（Mac为“⌘-R”）
• Google Chrome：按“Ctrl-Shift-R”（Mac为“⌘-Shift-R”）
• Internet Explorer：按住“Ctrl”，同时单击“刷新”，或按“Ctrl-F5”
• Opera：在“工具→首选项”中清除缓存

$( function () {
 
/* 缺省将内容 lang 设置成简体中文 */
if ( !document.getElementById( "lnnblog-setlang" ) ) {
	$( "mw-content-text" ).attr( "lang", "zh-cmn-Hans" );
	$( "firstHeading" ).attr( "lang", "zh-cmn-Hans" );
}
 
/* 评论框内联 CSS 修正 */
$( "#addComment" ).css( "width", "" ).css( "max-width", "500px" );
$( "#addComment textarea" ).css( "width", "100%" ).css( "box-sizing", "border-box" );
$( "#addComment form .greyTiny" ).css( "padding-left", "" );
$( "#addComment textarea+div" ).css( "text-align", "right" );
 
/* viewport meta? */
var wide = window.outerWidth > 720
var viewportMeta = $( '<meta name="viewport" content="width=' + (wide ? "device-width" : "700") + '">' )
$( "head" ).append(viewportMeta)
$( window ).on( "resize", function () {
	var wide_ = window.outerWidth > 720
	if (wide_ === wide) return
	wide = wide_
	viewportMeta.attr( "content", "width=" + (wide ? "device-width" : "700"))
} )
 
/* 为 Template:Hidebox 增加动画效果 */
$( "#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" )
 
  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" )
      }
    } )
} )
 
} );