MCBBS Wiki

微件:SaltVoteContainer：修订间差异

微件 讨论

微件:SaltVoteContainer (查看源代码)

2024年3月23日 (六) 19:38的版本

添加599字节 、​ 2024年3月23日 (星期六)
小
编辑“微件:SaltVoteContainer” // 维基盐编辑器
可视化wikitext
小 （编辑“微件:SaltVoteContainer” // 维基盐编辑器）
小 （编辑“微件:SaltVoteContainer” // 维基盐编辑器）
 
第1行： 第1行：
<noinclude>用于展示投票箱</noinclude><includeonly><script>
<noinclude>用于展示投票箱</noinclude><includeonly><script>
"use strict";
/**
/**
  *
  *
第16行： 第15行：
       document.body.querySelectorAll("div.salt-vote-container.not-init")
       document.body.querySelectorAll("div.salt-vote-container.not-init")
     );
     );
  // const traceElements = getAllNotInitContainer();


   const at = (arr, index) => {
   const at = (arr, index) => {
第29行： 第27行：
   };
   };


   /** 渲染条状图内容 @type {(collect: {name: string, set: string[]}[], color: string[]) => string} */
   /** 渲染条状图内容 @type {(collect: {name: string, set: string[], li: HTMLElement, count: HTMLElement}[], color: string[], hasBar: boolean) => { barHTML: string }} */
   const renderBar = (collect, color) => {
   const renderPercent = (collect, color, hasBar) => {
     const countAll = collect.reduce((prev, curr) => {
     const countAll = collect.reduce((prev, curr) => {
       return prev + curr.set.length;
       return prev + curr.set.length;
     }, 0);
     }, 0);
     const divList = collect.map(
    // 计算百分比
      ({ name, set }, i) =>
    const percent = collect.map(({ set, li, count }) => {
        `<div class="salt-vote-bar-item" title="${name.replace(
      const res = Number(((set.length * 100) / countAll).toFixed(2));
          /"/g,
      li.style.setProperty("--vote-percent", `${res}%`); // 顺便把百分比记录上去
          "'"
      count.textContent = `${set.length} (${res}%)`;
        )}" style="--vote-color:${at(color, i)};width:${
      return res;
          set.length ? set.length * 100 : 0
    });
        }%">${Number(((set.length * 100) / countAll).toFixed(2))}%</div>`
     const divList = hasBar
    );
      ? collect.map(
     return divList.join("");
          ({ name, set }, i) =>
            `<div class="salt-vote-bar-item" title="${name.replace(
              /"/g,
              "'"
            )}" style="--vote-color:${at(color, i)};width:${
              set.length ? percent[i] : 0
            }%">${Number(percent[i])}%</div>`
        )
      : [];
     return { barHTML: divList.join("") };
   };
   };


第56行： 第63行：
     const descUl = el.querySelector(".salt-vote-describe");
     const descUl = el.querySelector(".salt-vote-describe");
     const descLi = descUl && descUl.querySelectorAll("li");
     const descLi = descUl && descUl.querySelectorAll("li");
     /** 收集的投票信息 @type {{name: string, set: string[], li: HTMLElement, desc?: HTMLElement}[]} */
     /** 收集的投票信息 @type {{name: string, set: string[], li: HTMLElement, count: HTMLElement, desc?: HTMLElement}[]} */
     const collect = [];
     const collect = [];
     /** 收集的投票信息 @type {{name: string, desc: HTMLElement}[]} */
     /** 收集的投票信息 @type {{name: string, desc: HTMLElement}[]} */
第96行： 第103行：
       const title = option.textContent || "";
       const title = option.textContent || "";
       const voters = Array.from(voter.querySelectorAll("a"));
       const voters = Array.from(voter.querySelectorAll("a"));
       // if (title in collect) return;
       const count = document.createElement("div");
       const thisCollect = { name: title, set: [], li: li };
       const thisCollect = { name: title, set: [], li: li, count };
       voters.forEach((v) => {
       voters.forEach((v) => {
         const res = v.title
         const res = v.title
第116行： 第123行：
       });
       });
       collect.push(thisCollect);
       collect.push(thisCollect);
       // 配色
       // 外观
       li.style.setProperty("--vote-color", at(color, liIndex));
      li.appendChild(count);
      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 desc = descCollect.find(({ name }) => name === title);
第139行： 第149行：
     });
     });
     // 绘制图形
     // 绘制图形
     if (barEl) {
     const { barHTML } = renderPercent(collect, color, !!barEl);
      barEl.innerHTML = renderBar(collect, color);
     if (barEl) barEl.innerHTML = barHTML;
     }
   };
   };


取自“https://mcbbs.wiki/wiki/特殊:移动版差异/54142”