HTML:Text-toggle-display

<style>
.textToggleDisplayButtons {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: flex-start;
	user-select: none;
}

.textToggleDisplayButtonLabel {
	border: 1px solid rgba(0, 0, 0, .3);
	border-left-width: 4px;
	border-radius: 2px;
	flex: 1 0 auto;
	margin: 4px;
	padding: 0 8px;
	box-shadow: 1px 1px 2px black;
	color: rgba(0, 0, 0, .7);
	transition: .13s ease-in-out all;
	background-color: white;
}

.textToggleDisplayButtonLabel.cancelButton {
	line-height: normal;
}

.textToggleDisplayButtonLabel.on {
	border-color: rgba(0, 0, 0, 1);
	color: rgba(0, 0, 0, 1);
}

.textToggleDisplay.hidden,
.textToggleDisplayButtonsStyle,
.textToggleDisplayStyle,
.textToggleDisplayButtonLabel:not(.on) .textToggleDisplayButtonLabelText.on,
.textToggleDisplayButtonLabel.on .textToggleDisplayButtonLabelText.off,
.textToggleDisplayButtonLabel.cancelButton > input {
	display: none !important;
}
</style><script type="module">(window.RLQ??=[]).push([[],()=>{let e=e=>(typeof e==`string`?e:``).replace(RegExp(`<!--`,`gu`),``).replace(RegExp(`->`,`gu`),``).replace(/\/\//gu,``).replace(/url/gu,``).replace(/&/gu,``).replace(/pointer-event/gu,`;`).replace(/display\s*:\s*none\s*!\s*important/gu,`display: none`),t=()=>{let e=``;for(;e===``||$(`#${e}, [name="${e}"]`).length>0;)e=`10000000-1000-4000-8000-100000000000`.replace(/[018]/gu,e=>(Number(e)^(crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(1))[0]&15)>>Number(e)/4).toString(16));return e},n=e=>{let t={config:{},data:{}};return Object.entries(e.dataset).filter(([e,t])=>e.startsWith(`key-`)&&!/['"<>\\/]/u.test(t)).forEach(([n,r])=>{let i=e.dataset[`value-${n.substring(4)}`];if(r.length>0&&i.length>0){let e=r.startsWith(`@`),n=e?r.substring(1):r,a=t[e?`config`:`data`];if(a[n]=i,/@o(?:n|ff)$/u.test(r)){let e=r.replace(/@o(?:n|ff)$/u,``);e in a||(a[e]=i)}else if(r.endsWith(`@input`)){a[r]=i;let e=r.replace(/@input$/u,``);e in a||(a[e]=``)}else`${n}@on`in a||(a[`${n}@on`]=i),`${n}@off`in a||(a[`${n}@off`]=i),`${n}@input`in a||(a[`${n}@input`]=``)}}),t},r=e=>Object.entries(e).filter(([e,t])=>!/@(?:on|off|input)$/u.test(e)&&!/['"<>\\/]/u.test(t)),i={};$(`.textToggleDisplayStyle`).each((e,t)=>{let a=n(t).data;r(a).forEach(([e,t])=>{i[e]=t})}),$(`.textToggleDisplay`).each((t,n)=>{let r=n.dataset.id;r in i&&$(n).attr(`style`,e(i[r]))}).addClass(`hidden`);let a=[];$(`.textToggleDisplayButtons`).each((e,r)=>{let i=$(r),o=n(r),s=`radio`in o.config&&o.config.radio.length>0,c=`forceNoCancel`in o.config&&o.config.forceNoCancel.length>0,l=`reverse`in o.config&&o.config.reverse.length>0,u=t(),d=!1;if(i.children(`span[data-key]`).each((e,t)=>{if(/['"<>\\/]/u.test(t.dataset.key)){t.remove();return}let n=$(t),r=$(`<input/>`);r.attr({"data-id":t.dataset.key,type:s?`radio`:`checkbox`}).addClass(l?`textToggleDisplayButtonInputReverse`:`textToggleDisplayButtonInput`),s&&r.attr(`name`,u);let i=$(`<label/>`);n.children().appendTo(i),i.prepend(r).appendTo(t).attr(`data-id`,t.dataset.key).addClass(`textToggleDisplayButtonLabel`),n.find(`*`).each((e,t)=>{t.addEventListener(`click`,e=>{e.stopImmediatePropagation(),e.stopPropagation(),$(e.target).is(r)||(e.preventDefault(),s&&r.prop(`checked`)||r.prop(`checked`,!r.prop(`checked`)).trigger(`change`))},{capture:!0})}),t.dataset.key===o.config.default&&(a.push(r[0]),d=!0)}),s&&(!d||!c)){let e=$(`<input/>`),n=t();e.attr({"data-id":``,"data-radio-cancel":`true`,id:n,name:u,type:`radio`}).addClass(l?`textToggleDisplayButtonInputReverse`:`textToggleDisplayButtonInput`).css({"margin-left":`0`,"margin-right":`0`,width:`0`});let r=$(`<label/>`),o=$(`<span/>`);o.text(`取消选择`),r.attr({"data-id":``,for:n}).addClass(`textToggleDisplayButtonLabel cancelButton`),i.append(r.append(e).append(o)),d||a.push(e[0])}}),$(`.textToggleDisplayButtonsStyle`).each((t,i)=>{let a=n(i);$(`.textToggleDisplayButtonLabel.cancelButton`).attr({"data-style-off":a.config[`cancel@off`]||``,"data-style-on":a.config[`cancel@on`]||``}),$(`.textToggleDisplayButtonLabel.cancelButton > input`).attr(`style`,e(a.config[`cancel@input`])),r(a.data).forEach(([t])=>{$(`.textToggleDisplayButtonLabel[data-id="${t}"]`).attr({"data-style-off":a.data[`${t}@off`]||``,"data-style-on":a.data[`${t}@on`]||``}).children(`input`).attr(`style`,e(a.data[`${t}@input`]))})});let o=(t,n)=>{let r=$(t).closest(`.textToggleDisplayButtonLabel`),a=r.children(`.on`);r[n?`addClass`:`removeClass`](`on`).attr(`style`,e(r.attr(n?`data-style-on`:`data-style-off`))),n?a.attr(`style`,e(i[t.dataset.id])):a.removeAttr(`style`);let o=r.closest(`span[data-order][data-key]`);o.prev(`span[data-order][data-key]`).children(`.textToggleDisplayButtonLabel`).last()[n?`addClass`:`removeClass`](`before-on`),o.next(`span[data-order][data-key]`).children(`.textToggleDisplayButtonLabel`).first()[n?`addClass`:`removeClass`](`after-on`)},s=()=>{let e=Object.fromEntries($(`.textToggleDisplay`).toArray().map(({dataset:{id:e},classList:t})=>[e,!t.contains(`textToggleDisplay-off`)]));for(let t of $(`.textToggleDisplayButtonInput:not(.textToggleDisplayButtonLabel.cancelButton > input)`)){let{dataset:{id:n}}=t,r=$(t).closest(`.textToggleDisplayButtons`).find(`.textToggleDisplayButtonLabel.cancelButton > input:checked`).length>0?!1:n.split(`$`).filter(t=>!e[t]).length===0;t.checked=r,o(t,r)}for(let t of $(`.textToggleDisplayButtonInputReverse:not(.textToggleDisplayButtonLabel.cancelButton > input)`)){let{dataset:{id:n}}=t,r=$(t).closest(`.textToggleDisplayButtons`).find(`.textToggleDisplayButtonLabel.cancelButton > input:checked`).length>0?!1:n.split(`$`).filter(t=>e[t]).length===0;t.checked=r,o(t,!r)}for(let e of $(`.textToggleDisplayButtonLabel.cancelButton > input`)){let t=$(e).closest(`.textToggleDisplayButtons`).find(`input`).not(e).toArray().filter(({checked:e})=>e).length===0;e.checked=t,o(e,t)}},c=()=>{$(`textToggleDisplay-before-on`).each((e,t)=>{let n=$(t);n.next(`.textToggleDisplay`).is(`:not(.textToggleDisplay-on)`)&&n.removeClass(`textToggleDisplay-before-on`)}),$(`.textToggleDisplay:not(.textToggleDisplay-on) + .textToggleDisplay-after-on`).removeClass(`textToggleDisplay-after-on`),$(`.textToggleDisplay-on`).prev(`.textToggleDisplay`).addClass(`textToggleDisplay-before-on`).end().next(`.textToggleDisplay`).addClass(`textToggleDisplay-after-on`)};$(`.textToggleDisplayButtonInput`).on(`change`,({target:t})=>{let{dataset:{id:r,radioCancel:i},checked:a}=t,o=r.split(`$`),l=$(t),u=l.closest(`.textToggleDisplayButtonLabel`),d=$(o.map(e=>`.textToggleDisplay[data-id="${e}"]`).join(`, `)),f=l.closest(`.textToggleDisplayButtons`),{config:{toggleClass:p,radio:m}}=n(f[0]),h=typeof p==`string`&&p.length>0?p:`hidden`;h!==`hidden`&&d.removeClass(`hidden`),h+=` textToggleDisplay-off`,(i?.length??0)>0?(u[a?`addClass`:`removeClass`](`on`).attr(`style`,e(u.attr(a?`data-style-on`:`data-style-off`))),$(f.find(`.textToggleDisplayButtonLabel > input`).toArray().flatMap(({dataset:{id:e}})=>e.split(`$`)).map(e=>`.textToggleDisplay[data-id="${e}"]`).join(`, `)).addClass(h).removeClass(`textToggleDisplay-on`)):(d[a?`removeClass`:`addClass`](h)[a?`addClass`:`removeClass`](`textToggleDisplay-on`),(m?.length??0)>0&&a&&$(f.find(`.textToggleDisplayButtonLabel > input`).not(t).toArray().flatMap(({dataset:{id:e}})=>e.split(`$`)).map(e=>`.textToggleDisplay[data-id="${e}"]`).join(`, `)).addClass(h).removeClass(`textToggleDisplay-on`)),s(),c()}),$(`.textToggleDisplayButtonInputReverse`).on(`change`,({target:t})=>{let{dataset:{id:r,radioCancel:i},checked:a}=t,o=r.split(`$`),l=$(t),u=l.closest(`.textToggleDisplayButtonLabel`),d=$(o.map(e=>`.textToggleDisplay[data-id="${e}"]`).join(`, `)),f=l.closest(`.textToggleDisplayButtons`),{config:{toggleClass:p,radio:m}}=n(f[0]),h=typeof p==`string`&&p.length>0?p:`hidden`;h!==`hidden`&&d.removeClass(`hidden`),h+=` textToggleDisplay-off`,(i?.length??0)>0?(u[a?`addClass`:`removeClass`](`on`).attr(`style`,e(u.attr(a?`data-style-on`:`data-style-off`))),$(f.find(`.textToggleDisplayButtonLabel > input`).toArray().flatMap(({dataset:{id:e}})=>e.split(`$`)).map(e=>`.textToggleDisplay[data-id="${e}"]`).join(`, `)).addClass(h).removeClass(`textToggleDisplay-on`)):(d[a?`addClass`:`removeClass`](h)[a?`removeClass`:`addClass`](`textToggleDisplay-on`),(m?.length??0)>0&&a&&$(f.find(`.textToggleDisplayButtonLabel > input`).not(t).toArray().flatMap(({dataset:{id:e}})=>e.split(`$`)).map(e=>`.textToggleDisplay[data-id="${e}"]`).join(`, `)).removeClass(h).addClass(`textToggleDisplay-on`)),s(),c()});for(let e of a)$(e).prop(`checked`,!0).trigger(`change`);$(window).on(`beforeunload`,()=>{$(`.textToggleDisplayButtons input[type=checkbox]`).prop(`checked`,!1)})}]);</script>