“MediaWiki:Common.js”的版本间的差异

来自个人维基
跳转至： 导航、 搜索
小
 
（未显示1个用户的22个中间版本）
第13行： 第13行：
 
$( "#addComment textarea+div" ).css( "text-align", "right" );
 
$( "#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 */
+
/* 为 Template:Hidebox 增加动画效果 */
−
 
+
−
var animationDuration = 250
+
−
 
+
 
$( "#bodyContent" ).on( "click", ".lnnblog-hidebox-heading", function ( event ) {
 
$( "#bodyContent" ).on( "click", ".lnnblog-hidebox-heading", function ( event ) {
−
  var $this = $( this )
+
event.preventDefault()
−
  var $parent = $this.parent()
+
−
  var $body = $this.nextAll( ".lnnblog-hidebox-body" )
+
  
−
  var open = $parent.prop( "open" )
+
/** 折叠框的 <summary> 元素。 */
−
  var state = $parent.attr( "data-lnnblog-hidebox-state" )
+
var $this = $( this )
 +
/** 折叠框的 <details> 元素。 */
 +
var $parent = $this.parent()
 +
/** 折叠框内容元素。 */
 +
var $body = $this.nextAll( ".lnnblog-hidebox-body" )
  
−
  if ( !open || state === "shrink" ) {
+
var open = $parent.prop( "open" )
−
    event.preventDefault()
+
/** 当前正在执行的动画动作（expand 或 shrink）。若不在执行动画则为空。 */
−
    var currentWidth = $parent.width()
+
var oldState = $parent.attr( "data-lnnblog-hidebox-state" )
−
    var currentHeight = $parent.height()
+
/** 现在要执行的动画动作。 */
−
    $parent.stop( true, true ).prop( "open", true )
+
var state = !open || oldState === "shrink" ? "expand" : "shrink"
−
    var targetWidth = $parent.width()
+
−
    var targetHeight = $parent.height()
+
  
−
    $body.outerWidth( targetWidth )
+
// 计算当前的宽高
−
    $parent
+
// 取得的宽度是四舍五入过的；增加 0.5 以避免内容折行
−
      .attr( "data-lnnblog-hidebox-state", "expand" )
+
var currentWidth = $parent.width() + 0.5
−
      .width( currentWidth )
+
var currentHeight = $parent.height()
−
      .height( currentHeight )
+
// 打断可能正在进行的动画，然后计算一下动画目标状态的宽高
 +
$parent.stop( true, true ).prop( "open", state === "expand" )
 +
var targetWidth = $parent.width() + 0.5
 +
var targetHeight = $parent.height()
  
−
    $parent.animate( {
+
// 锁定内容框宽度为完全展开状态的宽度，以避免内容折行
−
        width: targetWidth,
+
if (state === "expand")
−
        height: targetHeight
+
$body.outerWidth( targetWidth )
−
      }, {
+
else if (oldState !== "expand") // 从完全展开状态折叠
−
        duration: animationDuration,
+
$body.outerWidth( currentWidth )
−
        done: function () {
+
// 如果不是从完全展开状态折叠，即在展开的半途中折叠，
−
          $body.css( "width", "" )
+
// 则内容框的宽度还没有清除，无需再次设置。
−
          $parent
+
−
            .css( {
+
−
              width: "",
+
−
              height: ""
+
−
            } )
+
−
            .removeAttr( "data-lnnblog-hidebox-state" )
+
−
        }
+
−
      } )
+
−
  } else if ( open || state === "expand" ) {
+
−
    event.preventDefault()
+
−
    var currentWidth = $parent.width()
+
−
    var currentHeight = $parent.height()
+
−
    $parent.stop( true, true ).prop( "open", false )
+
−
    var targetWidth = $parent.width()
+
−
    var targetHeight = $parent.height()
+
  
−
    state === "expand" || $body.outerWidth( currentWidth )
+
$parent
−
    $parent
+
.attr( "data-lnnblog-hidebox-state", state )
−
      .attr( "data-lnnblog-hidebox-state", "shrink" )
+
.width( currentWidth )
−
      .width( currentWidth )
+
.height( currentHeight )
−
      .height( currentHeight )
+
// 必须在 open 状态下才能显示出内容框，所以不管展开还是折叠都需要设置成 open
−
      .prop( "open", true )
+
.prop( "open", true )
−
      .animate( {
+
.animate( {
−
        width: targetWidth,
+
width: targetWidth,
−
        height: targetHeight
+
height: targetHeight
−
      }, {
+
}, {
−
        duration: animationDuration,
+
duration: 250,
−
        done: function () {
+
done: function () {
−
          $body.css( "width", "" )
+
if (state === "shrink") $parent.prop( "open", false )
−
          $parent
+
// 清除手动设置的宽高
−
            .css( {
+
$body.css( "width", "" )
−
              width: "",
+
$parent
−
              height: ""
+
.css( { width: "", height: "" } )
−
            } )
+
.removeAttr( "data-lnnblog-hidebox-state" )
−
            .removeAttr( "data-lnnblog-hidebox-state" )
+
}
−
            .prop( "open", false )
+
} )
−
        }
+
−
      } )
+
−
  }
+
 
} )
 
} )
 +
 +
/* 重新定义编辑工具栏 */
 +
if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) {
 +
var $newToolbar = $( '<div id="lnnblog-edittoolbar" lang="zh-cmn-Hans">' )
 +
var $group = null
 +
 +
function addButton( label, title, before, after, sample ) {
 +
$group.append( $( "<button>" )
 +
.attr( "type", "button" )
 +
.attr( "class", "lnnblog-button-small" )
 +
.attr( "title", title )
 +
.append( $( "<tt>" ).text( label ) )
 +
.on( "mousedown", false ) // 防止焦点离开文本框
 +
.click( mw.toolbar.insertTags.bind(mw.toolbar, before, after || "", sample || "") ) )
 +
}
 +
function newGroup() {
 +
$group = $( '<div>' ).appendTo( $newToolbar )
 +
}
 +
 +
newGroup()
 +
addButton( "[[]]",    "内链",              "[[", "]]" )
 +
addButton( "lelink",  "英文内链",          "{{lelink|", "}}" )
 +
addButton( "{{|}}",  "模板调用",          "{{|", "}}" )
 +
newGroup()
 +
addButton( "le",      "英文文本",          "{{le|", "}}" )
 +
addButton( "lj",      "逻辑语文本",        "{{lj|", "}}" )
 +
addButton( "lang",    "文本语言",          "{{lang|und|", "}}" )
 +
newGroup()
 +
addButton( "h2",      "二级标题",          "== ", " ==" )
 +
addButton( "h3",      "三级标题",          "=== ", " ===" )
 +
newGroup()
 +
addButton( "table",  "wikitable 表格",    "{|class=wikitable\n! ", "\n|-\n|\n|}" )
 +
addButton( "box",    "box 模板",          "{{box|heading=标题|1=\n", "\n}}" )
 +
addButton( "hidebox", "hidebox 模板",      "{{hidebox|标题|2=\n", "\n}}" )
 +
newGroup()
 +
addButton( "nw",      "nowiki 标签",        "<nowiki>", "</nowiki>" )
 +
addButton( "nw/",    "空 nowiki 标签",    "<nowiki/>" )
 +
addButton( "code",    "行内代码",          "{{code|", "}}" )
 +
addButton( "pre",    "pre 块",            "<pre>\n", "\n</pre>" )
 +
addButton( "syntax",  "代码高亮块",        "<syntaxhighlight lang=javascript>\n", "\n</syntaxhighlight>" )
 +
newGroup()
 +
addButton( "subst",  "模板替代",          "{{subst:", "}}" )
 +
addButton( "pn",      "当前页面名称",      mw.config.get( 'wgTitle' ) )
 +
addButton( "fpn",    "带名字空间的当前页面名称", mw.config.get( 'wgPageName' ) )
 +
newGroup()
 +
addButton( "cat",    "分类",              "[[分类:", /* <nowiki/> */ "]]" )
 +
addButton( "SORT",    "默认排序字",        "{{DEFAULTSORT:", "}}", mw.config.get( "wgTitle" ) )
 +
newGroup()
 +
addButton( "<!--",    "HTML 注释",          "<!--", "-->" )
 +
addButton( "ni",      "noinclude 标签",    "<noinclude>", "</noinclude>" )
 +
addButton( "ni/",    "空 noinclude 标签",  "<noinclude/>", "" )
 +
addButton( "io",      "includeonly 标签",  "<includeonly>", "</includeonly>" )
 +
addButton( "oi",      "onlyinclude 标签",  "<onlyinclude>", "</onlyinclude>" )
 +
newGroup()
 +
addButton( "html",    "原始 HTML 标签",    "<html>", "<\/html>" )
 +
addButton( "/html",  "反向原始 HTML 标签", "<\/html>", "<html>" )
 +
addButton( "bht",    "原始 HTML 块",      "{{MywikiParaHack|<html>", "<\/html>}}" )
 +
addButton( "script",  "script 标签",        "<script>\n", "\n<\/script>" )
 +
addButton( "style",  "style 标签",        "<style>\n", "\n</style>" )
 +
 +
$( "#ydnedittoolbar" ).parent().replaceWith( $newToolbar )
 +
}
 +
 +
/* 在侧栏添加“在‘真魂’分站查看”和“在分支站查看”链接 */
 +
var title = mw.config.get( "wgTitle" )
 +
var ns = mw.config.get( "wgCanonicalNamespace" )
 +
var pagename = ns ? ns + ":" + title : title
 +
var $item = $( '<li><a>在“真魂”分站查看</a></li>' )
 +
$( "a", $item ).attr( "href", "https://notblog.vudrux.site/wiki/" + mw.util.wikiUrlencode( pagename ) )
 +
var $item2 = $( '<li><a>在分支站查看</a></li>' )
 +
$( "a", $item2 ).attr( "href", "https://dgck81lnn.miraheze.org/wiki/" + mw.util.wikiUrlencode( pagename ) )
 +
$( "#p-tb ul" ).prepend( $item, $item2 )
 +
 +
/* sitenotice 中“前往‘真魂’分站查看本页面”添加链接 */
 +
$migrationLink = $( "#lnnblog-sitenotice-migration-link" )
 +
$migrationLink.replaceWith(
 +
$( "<a>" )
 +
.prop( "href", "https://notblog.vudrux.site/wiki/" + mw.util.wikiUrlencode( pagename ) )
 +
.append( $migrationLink.contents() )
 +
)
 +
 +
/* 深色模式 */
 +
!function () {
 +
var isOn = !!+(
 +
localStorage.getItem("lnnblog-darkmode") ||
 +
matchMedia("(prefers-color-scheme: dark)").matches
 +
)
 +
var broadcastChannel = new BroadcastChannel("gadget-dark-mode")
 +
function apply() {
 +
$(document.documentElement).toggleClass("client-darkmode", isOn)
 +
$('meta[name="theme-color"]').attr("content", isOn ? "#000000" : "#eaecf0")
 +
$("#pt-darkmode a").text(isOn ? "关闭暗色模式" : "暗色模式")
 +
}
 +
function save() {
 +
apply()
 +
if (isOn === prefersDark()) localStorage.removeItem("lnnblog-darkmode")
 +
else localStorage.setItem("lnnblog-darkmode", +isOn)
 +
broadcastChannel.postMessage(isOn)
 +
}
 +
function prefersDark() {
 +
return matchMedia("(prefers-color-scheme: dark)").matches
 +
}
 +
 +
$.when($.ready, mw.loader.using(["mediawiki.util"])).then(function () {
 +
$(
 +
mw.util.addPortletLink(
 +
"p-personal",
 +
"#",
 +
isOn ? "关闭暗色模式" : "暗色模式",
 +
"pt-darkmode",
 +
"",
 +
"",
 +
"#pt-logout"
 +
)
 +
)
 +
.children()
 +
.on("click", function (e) {
 +
e.preventDefault()
 +
isOn = !isOn
 +
save()
 +
})
 +
broadcastChannel.onmessage = function (msg) {
 +
if (msg.data !== isOn) {
 +
isOn = msg.data
 +
apply()
 +
}
 +
}
 +
save()
 +
matchMedia("(prefers-color-scheme: dark)")
 +
.addEventListener("change", function () {
 +
isOn = prefersDark()
 +
save()
 +
})
 +
})
 +
}();
  
 
} );
 
} );

2024年6月12日 (三) 09:42的最后版本

$( 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" )
			}
		} )
} )
 
/* 重新定义编辑工具栏 */
if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) {
	var $newToolbar = $( '<div id="lnnblog-edittoolbar" lang="zh-cmn-Hans">' )
	var $group = null
 
	function addButton( label, title, before, after, sample ) {
		$group.append( $( "<button>" )
			.attr( "type", "button" )
			.attr( "class", "lnnblog-button-small" )
			.attr( "title", title )
			.append( $( "<tt>" ).text( label ) )
			.on( "mousedown", false ) // 防止焦点离开文本框
			.click( mw.toolbar.insertTags.bind(mw.toolbar, before, after || "", sample || "") ) )
	}
	function newGroup() {
		$group = $( '<div>' ).appendTo( $newToolbar )
	}
 
	newGroup()
	addButton( "[[]]",    "内链",               "[[", "]]" )
	addButton( "lelink",  "英文内链",           "{{lelink|", "}}" )
	addButton( "{{|}}",   "模板调用",           "{{|", "}}" )
	newGroup()
	addButton( "le",      "英文文本",           "{{le|", "}}" )
	addButton( "lj",      "逻辑语文本",         "{{lj|", "}}" )
	addButton( "lang",    "文本语言",           "{{lang|und|", "}}" )
	newGroup()
	addButton( "h2",      "二级标题",           "== ", " ==" )
	addButton( "h3",      "三级标题",           "=== ", " ===" )
	newGroup()
	addButton( "table",   "wikitable 表格",     "{|class=wikitable\n! ", "\n|-\n|\n|}" )
	addButton( "box",     "box 模板",           "{{box|heading=标题|1=\n", "\n}}" )
	addButton( "hidebox", "hidebox 模板",       "{{hidebox|标题|2=\n", "\n}}" )
	newGroup()
	addButton( "nw",      "nowiki 标签",        "<nowiki>", "</nowiki>" )
	addButton( "nw/",     "空 nowiki 标签",     "<nowiki/>" )
	addButton( "code",    "行内代码",           "{{code|", "}}" )
	addButton( "pre",     "pre 块",             "<pre>\n", "\n</pre>" )
	addButton( "syntax",  "代码高亮块",         "<syntaxhighlight lang=javascript>\n", "\n</syntaxhighlight>" )
	newGroup()
	addButton( "subst",   "模板替代",           "{{subst:", "}}" )
	addButton( "pn",      "当前页面名称",       mw.config.get( 'wgTitle' ) )
	addButton( "fpn",     "带名字空间的当前页面名称", mw.config.get( 'wgPageName' ) )
	newGroup()
	addButton( "cat",     "分类",               "[[分类:", /* <nowiki/> */ "]]" )
	addButton( "SORT",    "默认排序字",         "{{DEFAULTSORT:", "}}", mw.config.get( "wgTitle" ) )
	newGroup()
	addButton( "<!--",    "HTML 注释",          "<!--", "-->" )
	addButton( "ni",      "noinclude 标签",     "<noinclude>", "</noinclude>" )
	addButton( "ni/",     "空 noinclude 标签",  "<noinclude/>", "" )
	addButton( "io",      "includeonly 标签",   "<includeonly>", "</includeonly>" )
	addButton( "oi",      "onlyinclude 标签",   "<onlyinclude>", "</onlyinclude>" )
	newGroup()
	addButton( "html",    "原始 HTML 标签",     "<html>", "<\/html>" )
	addButton( "/html",   "反向原始 HTML 标签", "<\/html>", "<html>" )
	addButton( "bht",     "原始 HTML 块",       "{{MywikiParaHack|<html>", "<\/html>}}" )
	addButton( "script",  "script 标签",        "<script>\n", "\n<\/script>" )
	addButton( "style",   "style 标签",         "<style>\n", "\n</style>" )
 
	$( "#ydnedittoolbar" ).parent().replaceWith( $newToolbar )
}
 
/* 在侧栏添加“在‘真魂’分站查看”和“在分支站查看”链接 */
var title = mw.config.get( "wgTitle" )
var ns = mw.config.get( "wgCanonicalNamespace" )
var pagename = ns ? ns + ":" + title : title
var $item = $( '<li><a>在“真魂”分站查看</a></li>' )
$( "a", $item ).attr( "href", "https://notblog.vudrux.site/wiki/" + mw.util.wikiUrlencode( pagename ) )
var $item2 = $( '<li><a>在分支站查看</a></li>' )
$( "a", $item2 ).attr( "href", "https://dgck81lnn.miraheze.org/wiki/" + mw.util.wikiUrlencode( pagename ) )
$( "#p-tb ul" ).prepend( $item, $item2 )
 
/* sitenotice 中“前往‘真魂’分站查看本页面”添加链接 */
$migrationLink = $( "#lnnblog-sitenotice-migration-link" )
$migrationLink.replaceWith(
	$( "<a>" )
		.prop( "href", "https://notblog.vudrux.site/wiki/" + mw.util.wikiUrlencode( pagename ) )
		.append( $migrationLink.contents() )
)
 
/* 深色模式 */
!function () {
	var isOn = !!+(
		localStorage.getItem("lnnblog-darkmode") ||
		matchMedia("(prefers-color-scheme: dark)").matches
	)
	var broadcastChannel = new BroadcastChannel("gadget-dark-mode")
	function apply() {
		$(document.documentElement).toggleClass("client-darkmode", isOn)
		$('meta[name="theme-color"]').attr("content", isOn ? "#000000" : "#eaecf0")
		$("#pt-darkmode a").text(isOn ? "关闭暗色模式" : "暗色模式")
	}
	function save() {
		apply()
		if (isOn === prefersDark()) localStorage.removeItem("lnnblog-darkmode")
		else localStorage.setItem("lnnblog-darkmode", +isOn)
		broadcastChannel.postMessage(isOn)
	}
	function prefersDark() {
		return matchMedia("(prefers-color-scheme: dark)").matches
	}
 
	$.when($.ready, mw.loader.using(["mediawiki.util"])).then(function () {
		$(
			mw.util.addPortletLink(
				"p-personal",
				"#",
				isOn ? "关闭暗色模式" : "暗色模式",
				"pt-darkmode",
				"",
				"",
				"#pt-logout"
			)
		)
			.children()
			.on("click", function (e) {
				e.preventDefault()
				isOn = !isOn
				save()
			})
		broadcastChannel.onmessage = function (msg) {
			if (msg.data !== isOn) {
				isOn = msg.data
				apply()
			}
		}
		save()
		matchMedia("(prefers-color-scheme: dark)")
			.addEventListener("change", function () {
				isOn = prefersDark()
				save()
			})
	})
}();
 
} );
来自“https://www.mywiki.cn/dgck81lnn/index.php?title=MediaWiki:Common.js&oldid=121587”