https://m.ksepeses.com/index.php?action=history&feed=atom&title=Widget%3ATextToggleDisplay
Widget:TextToggleDisplay - 版本历史
2026-04-04T17:01:07Z
本wiki的该页面的版本历史
MediaWiki 1.35.2
https://m.ksepeses.com/index.php?title=Widget:TextToggleDisplay&diff=276&oldid=prev
鹤訓：建立内容为“<noinclude>only for {{tl|切换显示按钮}}</noinclude><includeonly><!--{if !isset($wgTextToggleDisplay) || !$wgTextToggleDisplay}--><!--{assign var="wgTextTogg…”的新页面
2024-10-27T05:36:16Z
<p>建立内容为“<noinclude>only for {{tl|切换显示按钮}}</noinclude><includeonly><!--{if !isset($wgTextToggleDisplay) || !$wgTextToggleDisplay}--><!--{assign var="wgTextTogg…”的新页面</p>
<p><b>新页面</b></p><div><noinclude>only for {{tl|切换显示按钮}}</noinclude><includeonly><!--{if !isset($wgTextToggleDisplay) || !$wgTextToggleDisplay}--><!--{assign var="wgTextToggleDisplay" value=true scope="global"}--><script><br />
"use strict";<br />
window.RLQ = window.RLQ || [];<br />
window.RLQ.push(() => $(() => {<br />
const cssSanitizer = (cssStr) => (typeof cssStr === "string" ? cssStr : "").replace(RegExp(decodeURIComponent("%3C!--"), "g"), "").replace(RegExp(decodeURIComponent("-%3E"), "g"), "").replace(/\/\//g, "").replace(/url/g, "").replace(/&/g, "").replace(/pointer-event/g, ";").replace(/display\s*:\s*none\s*!\s*important/g, "display: none");<br />
const uuidv4 = () => {<br />
let result = "";<br />
while (result === "" || $(`#${result}, [name="${result}"]`).length > 0) {<br />
result = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =><br />
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16),<br />
);<br />
}<br />
return result;<br />
};<br />
const datasetParser = (ele) => {<br />
const result = {<br />
config: {},<br />
data: {},<br />
};<br />
Object.entries(ele.dataset).filter(([n, m]) => n.startsWith("key-") && !/['"<>\\/]/.test(m)).forEach(([__key, _key]) => {<br />
const value = ele.dataset[`value-${__key.substring(4)}`];<br />
if (_key.length > 0 && value.length > 0) {<br />
const isConfig = _key.startsWith("@");<br />
const key = isConfig ? _key.substring(1) : _key;<br />
const base = result[isConfig ? "config" : "data"];<br />
base[key] = value;<br />
if (/@o(?:n|ff)$/.test(_key)) {<br />
const id = _key.replace(/@o(?:n|ff)$/, "");<br />
if (!(id in base)) {<br />
base[id] = value;<br />
}<br />
} else if (_key.endsWith("@input")) {<br />
base[_key] = value;<br />
const id = _key.replace(/@input$/, "");<br />
if (!(id in base)) {<br />
base[id] = "";<br />
}<br />
} else {<br />
if (!(`${key}@on` in base)) {<br />
base[`${key}@on`] = value;<br />
}<br />
if (!(`${key}@off` in base)) {<br />
base[`${key}@off`] = value;<br />
}<br />
if (!(`${key}@input` in base)) {<br />
base[`${key}@input`] = "";<br />
}<br />
}<br />
}<br />
});<br />
return result;<br />
};<br />
const getEntries = (obj) => Object.entries(obj).filter(([k, n]) => !/@(?:on|off|input)$/.test(k) && !/['"<>\\/]/.test(n));<br />
const textToggleDisplayStyle = {};<br />
$(".textToggleDisplayStyle").each((_, ele) => {<br />
const dataset = datasetParser(ele).data;<br />
getEntries(dataset).forEach(([id, style]) => {<br />
textToggleDisplayStyle[id] = style;<br />
});<br />
});<br />
$(".textToggleDisplay").each((_, ele) => {<br />
if (ele.dataset.id in textToggleDisplayStyle) {<br />
$(ele).attr("style", cssSanitizer(textToggleDisplayStyle[ele.dataset.id]));<br />
}<br />
}).addClass("hidden");<br />
const defaultInputs = [];<br />
$(".textToggleDisplayButtons").each((_, ele) => {<br />
const self = $(ele);<br />
const parsedDataset = datasetParser(ele);<br />
const ifRadio = "radio" in parsedDataset.config && parsedDataset.config.radio.length > 0;<br />
const ifForceNoCancel = "forceNoCancel" in parsedDataset.config && parsedDataset.config.forceNoCancel.length > 0;<br />
const ifReverse = "reverse" in parsedDataset.config && parsedDataset.config.reverse.length > 0;<br />
const name = uuidv4();<br />
let hasDefault = false;<br />
self.children("span[data-key]").each((_, e) => {<br />
if (/['"<>\\/]/.test(e.dataset.key)) {<br />
e.remove();<br />
return;<br />
}<br />
const $e = $(e);<br />
const input = $("<input/>");<br />
input.attr({<br />
"data-id": e.dataset.key,<br />
type: ifRadio ? "radio" : "checkbox",<br />
}).addClass(ifReverse ? "textToggleDisplayButtonInputReverse" : "textToggleDisplayButtonInput");<br />
if (ifRadio) {<br />
input.attr("name", name);<br />
}<br />
const label = $("<label/>");<br />
$e.children().appendTo(label);<br />
label.prepend(input).appendTo(e).attr("data-id", e.dataset.key).addClass("textToggleDisplayButtonLabel");<br />
$e.find("*").each((_, e) => {<br />
e.addEventListener("click", (evt) => {<br />
evt.stopImmediatePropagation();<br />
evt.stopPropagation();<br />
if (!$(evt.target).is(input)) {<br />
evt.preventDefault();<br />
if (ifRadio ? !input.prop("checked") : true) {<br />
input.prop("checked", !input.prop("checked")).trigger("change");<br />
}<br />
}<br />
}, {<br />
capture: true,<br />
});<br />
});<br />
if (e.dataset.key === parsedDataset.config.default) {<br />
defaultInputs.push(input[0]);<br />
hasDefault = true;<br />
}<br />
});<br />
if (ifRadio && (!hasDefault || !ifForceNoCancel)) {<br />
const input = $("<input/>");<br />
const inputId = uuidv4();<br />
input.attr({<br />
"data-id": "",<br />
"data-radio-cancel": "true",<br />
id: inputId,<br />
name,<br />
type: "radio",<br />
}).addClass(ifReverse ? "textToggleDisplayButtonInputReverse" : "textToggleDisplayButtonInput").css({<br />
"margin-left": "0",<br />
"margin-right": "0",<br />
width: "0",<br />
});<br />
const label = $("<label/>");<br />
const span = $("<span/>");<br />
span.text("取消选择");<br />
label.attr({<br />
"data-id": "",<br />
"for": inputId,<br />
}).addClass("textToggleDisplayButtonLabel cancelButton");<br />
self.append(label.append(input).append(span));<br />
if (!hasDefault) {<br />
defaultInputs.push(input[0]);<br />
}<br />
}<br />
});<br />
$(".textToggleDisplayButtonsStyle").each((_, ele) => {<br />
const parsedDataset = datasetParser(ele);<br />
$(".textToggleDisplayButtonLabel.cancelButton").attr({<br />
"data-style-off": parsedDataset.config["cancel@off"] || "",<br />
"data-style-on": parsedDataset.config["cancel@on"] || "",<br />
});<br />
$(".textToggleDisplayButtonLabel.cancelButton > input").attr("style", cssSanitizer(parsedDataset.config["cancel@input"]));<br />
getEntries(parsedDataset.data).forEach(([id]) => {<br />
$(`.textToggleDisplayButtonLabel[data-id="${id}"]`).attr({<br />
"data-style-off": parsedDataset.data[`${id}@off`] || "",<br />
"data-style-on": parsedDataset.data[`${id}@on`] || "",<br />
}).children("input").attr("style", cssSanitizer(parsedDataset.data[`${id}@input`]));<br />
});<br />
});<br />
const setInputStatus = (input, checked) => {<br />
const label = $(input).closest(".textToggleDisplayButtonLabel");<br />
const span = label.children(".on");<br />
label[checked ? "addClass" : "removeClass"]("on").attr("style", cssSanitizer(label.attr(checked ? "data-style-on" : "data-style-off")));<br />
if (checked) {<br />
span.attr("style", cssSanitizer(textToggleDisplayStyle[input.dataset.id]));<br />
} else {<br />
span.removeAttr("style");<br />
}<br />
const labelContainer = label.closest("span[data-order][data-key]");<br />
labelContainer.prev("span[data-order][data-key]").children(".textToggleDisplayButtonLabel").last()[checked ? "addClass" : "removeClass"]("before-on");<br />
labelContainer.next("span[data-order][data-key]").children(".textToggleDisplayButtonLabel").first()[checked ? "addClass" : "removeClass"]("after-on");<br />
};<br />
const setLabelStatus = () => {<br />
const map = Object.fromEntries($(".textToggleDisplay").toArray().map(({<br />
dataset: {<br />
id,<br />
},<br />
classList,<br />
}) => [id, !classList.contains("textToggleDisplay-off")]));<br />
for (const input of $(".textToggleDisplayButtonInput:not(.textToggleDisplayButtonLabel.cancelButton > input)")) {<br />
const {<br />
dataset: {<br />
id,<br />
},<br />
} = input;<br />
const cancelInput = $(input).closest(".textToggleDisplayButtons").find(".textToggleDisplayButtonLabel.cancelButton > input:checked");<br />
const checked = cancelInput.length > 0 ? false : id.split("$").filter((i) => !map[i]).length === 0;<br />
input.checked = checked;<br />
setInputStatus(input, checked);<br />
}<br />
for (const input of $(".textToggleDisplayButtonInputReverse:not(.textToggleDisplayButtonLabel.cancelButton > input)")) {<br />
const {<br />
dataset: {<br />
id,<br />
},<br />
} = input;<br />
const cancelInput = $(input).closest(".textToggleDisplayButtons").find(".textToggleDisplayButtonLabel.cancelButton > input:checked");<br />
const checked = cancelInput.length > 0 ? false : id.split("$").filter((i) => map[i]).length === 0;<br />
input.checked = checked;<br />
setInputStatus(input, !checked);<br />
}<br />
for (const input of $(".textToggleDisplayButtonLabel.cancelButton > input")) {<br />
const checked = $(input).closest(".textToggleDisplayButtons").find("input").not(input).toArray().filter(({ checked }) => checked).length === 0;<br />
input.checked = checked;<br />
setInputStatus(input, checked);<br />
}<br />
};<br />
const updateSilbing = () => {<br />
$("textToggleDisplay-before-on").each((_, ele) => {<br />
const $ele = $(ele);<br />
if ($ele.next(".textToggleDisplay").is(":not(.textToggleDisplay-on)")) {<br />
$ele.removeClass("textToggleDisplay-before-on");<br />
}<br />
});<br />
$(".textToggleDisplay:not(.textToggleDisplay-on) + .textToggleDisplay-after-on").removeClass("textToggleDisplay-after-on");<br />
$(".textToggleDisplay-on").prev(".textToggleDisplay").addClass("textToggleDisplay-before-on").end().next(".textToggleDisplay").addClass("textToggleDisplay-after-on");<br />
};<br />
$(".textToggleDisplayButtonInput").on("change", ({<br />
target,<br />
}) => {<br />
const {<br />
dataset: {<br />
id,<br />
radioCancel,<br />
},<br />
checked,<br />
} = target;<br />
const ids = id.split("$");<br />
const self = $(target);<br />
const label = self.closest(".textToggleDisplayButtonLabel");<br />
const textToggleDisplayTarget = $(ids.map((i) => `.textToggleDisplay[data-id="${i}"]`).join(", "));<br />
const textToggleDisplayButtons = self.closest(".textToggleDisplayButtons");<br />
const { config: { toggleClass, radio } } = datasetParser(textToggleDisplayButtons[0]);<br />
let toggleClassName = typeof toggleClass === "string" && toggleClass.length > 0 ? toggleClass : "hidden";<br />
if (toggleClassName !== "hidden") {<br />
textToggleDisplayTarget.removeClass("hidden");<br />
}<br />
toggleClassName += " textToggleDisplay-off";<br />
if (radioCancel?.length > 0) {<br />
label[checked ? "addClass" : "removeClass"]("on").attr("style", cssSanitizer(label.attr(checked ? "data-style-on" : "data-style-off")));<br />
$(textToggleDisplayButtons.find(".textToggleDisplayButtonLabel > input").toArray().flatMap(({ dataset: { id } }) => id.split("$")).map((i) => `.textToggleDisplay[data-id="${i}"]`).join(", ")).addClass(toggleClassName).removeClass("textToggleDisplay-on");<br />
} else {<br />
textToggleDisplayTarget[checked ? "removeClass" : "addClass"](toggleClassName)[checked ? "addClass" : "removeClass"]("textToggleDisplay-on");<br />
if (radio?.length > 0 && checked) {<br />
const siblings = $(textToggleDisplayButtons.find(".textToggleDisplayButtonLabel > input").not(target).toArray().flatMap(({ dataset: { id } }) => id.split("$")).map((i) => `.textToggleDisplay[data-id="${i}"]`).join(", "));<br />
siblings.addClass(toggleClassName).removeClass("textToggleDisplay-on");<br />
}<br />
}<br />
setLabelStatus();<br />
updateSilbing();<br />
});<br />
$(".textToggleDisplayButtonInputReverse").on("change", ({<br />
target,<br />
}) => {<br />
const {<br />
dataset: {<br />
id,<br />
radioCancel,<br />
},<br />
checked,<br />
} = target;<br />
const ids = id.split("$");<br />
const self = $(target);<br />
const label = self.closest(".textToggleDisplayButtonLabel");<br />
const textToggleDisplayTarget = $(ids.map((i) => `.textToggleDisplay[data-id="${i}"]`).join(", "));<br />
const textToggleDisplayButtons = self.closest(".textToggleDisplayButtons");<br />
const { config: { toggleClass, radio } } = datasetParser(textToggleDisplayButtons[0]);<br />
let toggleClassName = typeof toggleClass === "string" && toggleClass.length > 0 ? toggleClass : "hidden";<br />
if (toggleClassName !== "hidden") {<br />
textToggleDisplayTarget.removeClass("hidden");<br />
}<br />
toggleClassName += " textToggleDisplay-off";<br />
if (radioCancel?.length > 0) {<br />
label[checked ? "addClass" : "removeClass"]("on").attr("style", cssSanitizer(label.attr(checked ? "data-style-on" : "data-style-off")));<br />
$(textToggleDisplayButtons.find(".textToggleDisplayButtonLabel > input").toArray().flatMap(({ dataset: { id } }) => id.split("$")).map((i) => `.textToggleDisplay[data-id="${i}"]`).join(", ")).addClass(toggleClassName).removeClass("textToggleDisplay-on");<br />
} else {<br />
textToggleDisplayTarget[checked ? "addClass" : "removeClass"](toggleClassName)[checked ? "removeClass" : "addClass"]("textToggleDisplay-on");<br />
if (radio?.length > 0 && checked) {<br />
const siblings = $(textToggleDisplayButtons.find(".textToggleDisplayButtonLabel > input").not(target).toArray().flatMap(({ dataset: { id } }) => id.split("$")).map((i) => `.textToggleDisplay[data-id="${i}"]`).join(", "));<br />
siblings.removeClass(toggleClassName).addClass("textToggleDisplay-on");<br />
}<br />
}<br />
setLabelStatus();<br />
updateSilbing();<br />
});<br />
for (const ele of defaultInputs) {<br />
$(ele).prop("checked", true).trigger("change");<br />
}<br />
$(window).on("beforeunload", () => {<br />
$(".textToggleDisplayButtons input[type=checkbox]").prop("checked", false);<br />
});<br />
}));<br />
</script><style><br />
.textToggleDisplayButtons {<br />
display: inline-flex;<br />
flex-wrap: wrap;<br />
align-items: baseline;<br />
align-content: flex-start;<br />
user-select: none;<br />
}<br />
<br />
.textToggleDisplayButtonLabel {<br />
border: 1px solid rgba(0, 0, 0, .3);<br />
border-left-width: 4px;<br />
border-radius: 2px;<br />
flex: 1 0 auto;<br />
margin: 4px;<br />
padding: 0 8px;<br />
box-shadow: 1px 1px 2px black;<br />
color: rgba(0, 0, 0, .7);<br />
transition: .13s ease-in-out all;<br />
background-color: white;<br />
}<br />
<br />
.textToggleDisplayButtonLabel.cancelButton {<br />
line-height: normal;<br />
}<br />
<br />
.textToggleDisplayButtonLabel.on {<br />
border-color: rgba(0, 0, 0, 1);<br />
color: rgba(0, 0, 0, 1);<br />
}<br />
<br />
.textToggleDisplay.hidden,<br />
.textToggleDisplayButtonsStyle,<br />
.textToggleDisplayStyle,<br />
.textToggleDisplayButtonLabel:not(.on) .textToggleDisplayButtonLabelText.on,<br />
.textToggleDisplayButtonLabel.on .textToggleDisplayButtonLabelText.off,<br />
.textToggleDisplayButtonLabel.cancelButton > input {<br />
display: none !important;<br />
}<br />
</style><!--{/if}--></includeonly></div>
鹤訓