3,382
个编辑
小
编辑“微件:SaltVoteContainer” // 维基盐编辑器
Salt lovely（留言 | 贡献） 小 （编辑“微件:SaltVoteContainer” // 维基盐编辑器） |
Salt lovely（留言 | 贡献） 小 （编辑“微件:SaltVoteContainer” // 维基盐编辑器） |
||
|
<noinclude>用于展示投票箱</noinclude><includeonly><script>
/**
*
document.body.querySelectorAll("div.salt-vote-container.not-init")
);
const at = (arr, index) => {
};
/** 渲染条状图内容 @type {(collect: {name: string, set: string[], li: HTMLElement, count: HTMLElement}[], color: string[], hasBar: boolean) => { barHTML: string }} */
const
const countAll = collect.reduce((prev, curr) => {
return prev + curr.set.length;
}, 0);
// 计算百分比
const divList = collect.map(▼
const percent = collect.map(({
`<div class="salt-vote-bar-item" title="${name.replace(▼
/"/g,▼
count.textContent = `${set.length} (${res}%)`;
"'"▼
return res;
)}" style="--vote-color:${at(color, i)};width:${▼
});▼
set.length ? set.length * 100 : 0▼
▲ }%">${Number(((set.length * 100) / countAll).toFixed(2))}%</div>`
({ name, set }, i) =>
return divList.join("");▼
▲ `<div class="salt-vote-bar-item" title="${name.replace(
▲ /"/g,
▲ "'"
▲ )}" style="--vote-color:${at(color, i)};width:${
}%">${Number(percent[i])}%</div>`
)
: [];
▲ return { barHTML: divList.join("") };
};
const descUl = el.querySelector(".salt-vote-describe");
const descLi = descUl && descUl.querySelectorAll("li");
/** 收集的投票信息 @type {{name: string, set: string[], li: HTMLElement, count: HTMLElement, desc?: HTMLElement}[]} */
const collect = [];
/** 收集的投票信息 @type {{name: string, desc: HTMLElement}[]} */
const title = option.textContent || "";
const voters = Array.from(voter.querySelectorAll("a"));
const count = document.createElement("div");
const thisCollect = { name: title, set: [], li: li, count };
voters.forEach((v) => {
const res = v.title
});
collect.push(thisCollect);
//
li.appendChild(count);
▲ li.style.setProperty("--vote-color", at(color, liIndex));
count.className = "salt-vote-option-count";
li.style.setProperty("--vote-color", at(color, liIndex)); // 配色
li.style.setProperty("--vote-count", `${thisCollect.set.length}`);
// 点击展开选项描述
const desc = descCollect.find(({ name }) => name === title);
});
// 绘制图形
const { barHTML } = renderPercent(collect, color, !!barEl);
if (barEl) barEl.innerHTML =
▲ }
};
| |||