MCBBS Wiki欢迎您共同参与编辑!在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题,可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户,请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线!
您可以在回声洞中发表吐槽!
服务器状态监控。点击进入
本站由MCBBS用户自行搭建,与MCBBS及东银河系漫游指南(北京)科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
微件:SaltVoteContainer:修订间差异
跳到导航
跳到搜索
Salt lovely(留言 | 贡献) (一些问题修复 // 维基盐编辑器) |
Salt lovely(留言 | 贡献) 小 (编辑“微件:SaltVoteContainer” // 维基盐编辑器) |
||
| 第48行: | 第48行: | ||
/** 主流程 */ | /** 主流程 */ | ||
/** @type {(el: HTMLDivElement) => void} */ | /** @type {(el: HTMLDivElement) => void} */ | ||
const | const process = (el) => { | ||
el.classList.remove("not-init"); | |||
const barEl = el.querySelector(".salt-vote-bar"); | const barEl = el.querySelector(".salt-vote-bar"); | ||
const colorEl = el.querySelector(".salt-vote-color"); | const colorEl = el.querySelector(".salt-vote-color"); | ||
const list = el.querySelector(" | const list = el.querySelector(".salt-vote-options"); | ||
const lists = list && list.querySelectorAll("li"); | const lists = list && list.querySelectorAll("li"); | ||
/** 收集的投票信息 @type {{name: string, set: string[]}[]} */ | const descUl = el.querySelector(".salt-vote-describe"); | ||
const descLi = descUl && descUl.querySelectorAll("li"); | |||
/** 收集的投票信息 @type {{name: string, set: string[], li: HTMLElement, desc?: HTMLElement}[]} */ | |||
const collect = []; | const collect = []; | ||
/** 收集的投票信息 @type {{name: string, desc: HTMLElement}[]} */ | |||
const descCollect = []; | |||
/** 有问题的投票信息 @type {Record<string, Set<string>>} */ | /** 有问题的投票信息 @type {Record<string, Set<string>>} */ | ||
const wrongCollect = {}; | const wrongCollect = {}; | ||
| 第73行: | 第77行: | ||
else color.push(...defaultColor); | else color.push(...defaultColor); | ||
} | } | ||
// 获取投票选项描述 | |||
const descList = Array.from(descLi || []); | |||
descList.forEach((desc) => { | |||
const option = desc.querySelector(".salt-vote-desc-option"); | |||
const value = desc.querySelector(".salt-vote-desc"); | |||
if (!option || !value) return; | |||
const title = option.textContent || ""; | |||
const thisCollect = { name: title, desc: value }; | |||
descCollect.push(thisCollect); | |||
desc.style.setProperty("--height", "0"); | |||
}); | |||
// 获取投票信息 | // 获取投票信息 | ||
const liList = Array.from(lists); | const liList = Array.from(lists); | ||
liList.forEach((li, liIndex) => { | liList.forEach((li, liIndex) => { | ||
const option = li.querySelector(".salt-vote-option"); | const option = li.querySelector(".salt-vote-option"); | ||
const voter = li.querySelector(".salt-vote-voter"); | const voter = li.querySelector(".salt-vote-voter"); | ||
if (!option || !voter) return; | if (!option || !voter) return; | ||
| 第84行: | 第97行: | ||
const voters = Array.from(voter.querySelectorAll("a")); | const voters = Array.from(voter.querySelectorAll("a")); | ||
// if (title in collect) return; | // if (title in collect) return; | ||
const thisCollect = { name: title, set: [] }; | const thisCollect = { name: title, set: [], li: li }; | ||
voters.forEach((v) => { | voters.forEach((v) => { | ||
const res = v.title | const res = v.title | ||
.replace(/^(?:User|U|用户):/i, "") | .replace(/^(?:User|U|用户):/i, "") | ||
.replace(/\s/, "_"); | .replace(/\s/g, "_"); | ||
if (thisCollect.set.includes(res)) { | if (thisCollect.set.includes(res)) { | ||
v.remove(); | v.remove(); | ||
| 第94行: | 第107行: | ||
} | } | ||
thisCollect.set.push(res); | thisCollect.set.push(res); | ||
v.textContent = res; | // 允许自定义用户名样式 | ||
if ( | |||
!v.textContent || | |||
v.textContent.toUpperCase().trim().replace(/\s/g, "_") !== | |||
res.toUpperCase() | |||
) | |||
v.textContent = res; | |||
}); | }); | ||
collect.push(thisCollect); | collect.push(thisCollect); | ||
// 配色 | // 配色 | ||
li.style.setProperty("--vote-color", at(color, liIndex)); | li.style.setProperty("--vote-color", at(color, liIndex)); | ||
// 点击展开选项描述 | |||
const desc = descCollect.find(({ name }) => name === title); | |||
if (desc) { | |||
const descEl = desc.desc; | |||
thisCollect.desc = descEl; | |||
li.classList.add("has-desc"); | |||
descEl.classList.add("salt-vote-option-hooked"); | |||
descEl.style.setProperty("--height", `${descEl.scrollHeight}px`); | |||
descEl.style.setProperty("--vote-color", at(color, liIndex)); | |||
li.addEventListener("click", () => { | |||
if (descEl.classList.contains("show")) { | |||
descEl.classList.remove("show"); | |||
} else { | |||
descEl.classList.add("show"); | |||
descEl.style.setProperty("--height", `${descEl.scrollHeight}px`); | |||
} | |||
}); | |||
li.appendChild(descEl); | |||
} | |||
}); | }); | ||
// 绘制图形 | // 绘制图形 | ||
| 第104行: | 第142行: | ||
barEl.innerHTML = renderBar(collect, color); | barEl.innerHTML = renderBar(collect, color); | ||
} | } | ||
}; | }; | ||
const main = () => getAllNotInitContainer().forEach((el) => process(el)); | |||
setTimeout(() => { | setTimeout(() => { | ||
main(); | |||
}, 0); | }, 0); | ||
setTimeout(() => { | |||
main(); | |||
}, 66); | |||
setInterval(() => { | setInterval(() => { | ||
main(); | |||
}, | }, 500); | ||
})(window); | })(window); | ||
</script></includeonly> | </script></includeonly> | ||
2024年3月18日 (一) 01:52的版本
用于展示投票箱