微件:SaltVoteContainer - 版本历史

Salt lovely：编辑“微件:SaltVoteContainer” // 维基盐编辑器

2024-03-23T11:38:48Z

编辑“微件:SaltVoteContainer” // 维基盐编辑器

←上一版本		2024年3月23日 (六) 19:38的版本
第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;
	}
	};		};

Salt lovely：编辑“微件:SaltVoteContainer” // 维基盐编辑器

2024-03-17T17:52:56Z

编辑“微件:SaltVoteContainer” // 维基盐编辑器

←上一版本		2024年3月18日 (一) 01:52的版本
第48行：		第48行：
	/** 主流程 */		/** 主流程 */
	/** @type {(el: HTMLDivElement) => void} */		/** @type {(el: HTMLDivElement) => void} */
	const ~~main~~ = (el) => {		const process = (el) => {
	~~console~~.~~log~~(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("ul");		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) => {
	~~// salt-vote-option salt-vote-voter~~
	const option = li.querySelector(".salt-vote-option");		const option = li.querySelector(".salt-vote-option");
	~~/** @type {HTMLElement \| null} */~~
	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);
	}		}
	~~console.log(collect, renderBar(collect, color));~~
	~~el.classList.remove("not-init");~~
	};		};

			const main = () => getAllNotInitContainer().forEach((el) => process(el));

	setTimeout(() => {		setTimeout(() => {
	~~getAllNotInitContainer().forEach((el) =>~~ main(~~el)~~);		main();
	}, 0);		}, 0);
			setTimeout(() => {
			main();
			}, 66);
	setInterval(() => {		setInterval(() => {
	~~getAllNotInitContainer().forEach((el) =>~~ main(~~el)~~);		main();
	}, ~~1000~~);		}, 500);
	})(window);		})(window);
	</script></includeonly>		</script></includeonly>

Salt lovely：一些问题修复 // 维基盐编辑器

2024-03-04T17:25:23Z

一些问题修复 // 维基盐编辑器

←上一版本		2024年3月5日 (二) 01:25的版本
第21行：		第21行：
	const len = arr.length;		const len = arr.length;
	if (len) {		if (len) {
	if (index > len) {		if (index >= len) {
	index -= Math.ceil((index - len + 1) / len) * len;		index -= Math.ceil((index - len + 1) / len) * len;
	}		}
第105行：		第105行：
	}		}
	console.log(collect, renderBar(collect, color));		console.log(collect, renderBar(collect, color));
	el.classList.remove('not-init')		el.classList.remove("not-init");
	};		};
	getAllNotInitContainer().forEach((el) => main(el));		setTimeout(() => {
			getAllNotInitContainer().forEach((el) => main(el));
			}, 0);
			setInterval(() => {
			getAllNotInitContainer().forEach((el) => main(el));
			}, 1000);
	})(window);		})(window);
	</script></includeonly>		</script></includeonly>

Salt lovely：用于展示投票箱

2024-03-04T17:13:49Z

用于展示投票箱

新页面

<noinclude>用于展示投票箱</noinclude><includeonly><script>
"use strict";
/**
*
*/
((window) => {
if (window.saltVoteJsInit) return; // 拒绝重复运行
window.saltVoteJsInit = true;
const defaultColor = ["#429DA5", "#7b515f", "#ab8749", "#4C7BA3", "#373D53"];
// /** @type {() => HTMLDivElement[]} */
// const getAllContainer = () =>
// Array.from(document.body.querySelectorAll("div.salt-vote-container"));
/** @type {() => HTMLDivElement[]} */
const getAllNotInitContainer = () =>
Array.from(
document.body.querySelectorAll("div.salt-vote-container.not-init")
);
// const traceElements = getAllNotInitContainer();

const at = (arr, index) => {
const len = arr.length;
if (len) {
if (index > len) {
index -= Math.ceil((index - len + 1) / len) * len;
}
if (index < 0) index += len;
return arr[index];
}
};

/** 渲染条状图内容 @type {(collect: {name: string, set: string[]}[], color: string[]) => string} */
const renderBar = (collect, color) => {
const countAll = collect.reduce((prev, curr) => {
return prev + curr.set.length;
}, 0);
const divList = collect.map(
({ name, set }, i) =>
`<div class="salt-vote-bar-item" title="${name.replace(
/"/g,
"'"
)}" style="--vote-color:${at(color, i)};width:${
set.length ? set.length * 100 : 0
}%">${Number(((set.length * 100) / countAll).toFixed(2))}%</div>`
);
return divList.join("");
};

/** 主流程 */
/** @type {(el: HTMLDivElement) => void} */
const main = (el) => {
console.log(el);
const barEl = el.querySelector(".salt-vote-bar");
const colorEl = el.querySelector(".salt-vote-color");
const list = el.querySelector("ul");
const lists = list && list.querySelectorAll("li");
/** 收集的投票信息 @type {{name: string, set: string[]}[]} */
const collect = [];
/** 有问题的投票信息 @type {Record<string, Set<string>>} */
const wrongCollect = {};
/** @type {string[]} */
const color = [];
// 必须要有投票区域
if (!list || !lists || !lists.length) return;
// 获取颜色
if (!colorEl) color.push(...defaultColor);
else {
const colorPar = (colorEl.textContent || "")
.replace(/\s*[,;，；、*]+\s*/g, "***")
.trim()
.split("***")
.filter(Boolean);
if (colorPar.length) color.push(...colorPar);
else color.push(...defaultColor);
}
// 获取投票信息
const liList = Array.from(lists);
liList.forEach((li, liIndex) => {
// salt-vote-option salt-vote-voter
const option = li.querySelector(".salt-vote-option");
/** @type {HTMLElement | null} */
const voter = li.querySelector(".salt-vote-voter");
if (!option || !voter) return;
const title = option.textContent || "";
const voters = Array.from(voter.querySelectorAll("a"));
// if (title in collect) return;
const thisCollect = { name: title, set: [] };
voters.forEach((v) => {
const res = v.title
.replace(/^(?:User|U|用户):/i, "")
.replace(/\s/, "_");
if (thisCollect.set.includes(res)) {
v.remove();
return;
}
thisCollect.set.push(res);
v.textContent = res;
});
collect.push(thisCollect);
// 配色
li.style.setProperty("--vote-color", at(color, liIndex));
});
// 绘制图形
if (barEl) {
barEl.innerHTML = renderBar(collect, color);
}
console.log(collect, renderBar(collect, color));
el.classList.remove('not-init')
};
getAllNotInitContainer().forEach((el) => main(el));
})(window);
</script></includeonly>

微件:SaltVoteContainer - 版本历史

Salt lovely：​编辑“微件:SaltVoteContainer” // 维基盐编辑器

Salt lovely：​编辑“微件:SaltVoteContainer” // 维基盐编辑器

Salt lovely：​一些问题修复 // 维基盐编辑器

Salt lovely：​用于展示投票箱

Salt lovely：编辑“微件:SaltVoteContainer” // 维基盐编辑器

Salt lovely：编辑“微件:SaltVoteContainer” // 维基盐编辑器

Salt lovely：一些问题修复 // 维基盐编辑器

Salt lovely：用于展示投票箱