Toggle Button for Non-sep Items

Hide li elements without "sep" class and add toggle button
Wrap lines
// ==UserScript==
// @name         Toggle Button for Non-sep Items
// @namespace    https://jirehlov.com
// @version      0.4
// @description  Hide li elements without "sep" class and add toggle button
// @author       Jirehlov
// @match        https://bgm.tv/subject/*
// @match        https://bangumi.tv/subject/*
// @match        https://chii.in/subject/*
// @grant        none
// @license      MIT
// ==/UserScript==
(function () {
	"use strict";
	const style = document.createElement("style");
	style.textContent = `
    span.toggleButton {
        cursor: pointer;
        color: #2EA6FF;
        margin-left: 5px;
    }
    div.avatarCnt {
        margin-right: 15px;
        margin-top: 0px;
        margin-top: -15px;
        text-align: right;
        opacity: 0.99;
    }
    span.avatarOverlay {
        width: 75px;
        margin-top: -8px;
        border-radius: 0 0 8px 8px;
        mask-image: linear-gradient(to top, black, transparent);
        background-size: cover
    }
    span.avatar_1o2 {
        height: 42px;
        opacity: 0.65;
        clip-path: path("M0,-2 a8,8,0,0,0,8,8 l59,0 a8,8,0,0,0,8,-8 L75,44 L0,44 Z");
    }
    span.avatar_1o3 {
        height: 24px;
        opacity: 0.75;
        clip-path: path("M0,-2 a8,8,0,0,0,8,8 l59,0 a8,8,0,0,0,8,-8 L75,26 L0,26 Z");
    }
    span.avatar_2o3 {
        height: 24px;
        opacity: 0.40;
        clip-path: path("M0,-2 a8,8,0,0,0,8,8 l59,0 a8,8,0,0,0,8,-8 L75,26 L0,26 Z");
    }
    span.avatar_1o4 {
        height: 18px;
        opacity: 0.85;
        clip-path: path("M0,-2 a8,8,0,0,0,8,8 l59,0 a8,8,0,0,0,8,-8 L75,20 L0,20 Z");
    }
    span.avatar_2o4 {
        height: 18px;
        opacity: 0.60;
        clip-path: path("M0,-2 a8,8,0,0,0,8,8 l59,0 a8,8,0,0,0,8,-8 L75,20 L0,20 Z");
    }
    span.avatar_3o4 {
        height: 18px;
        opacity: 0.35;
        clip-path: path("M0,-2 a8,8,0,0,0,8,8 l59,0 a8,8,0,0,0,8,-8 L75,20 L0,20 Z");
    }
    `;
	document.head.appendChild(style);
	const ulElement = document.querySelector("div.subject_section ul.browserCoverMedium");
	if (!ulElement) return;
	const liElements = ulElement.querySelectorAll("li");
	let lastSepElement = null;
	let relatedItems = [];
	liElements.forEach(li => {
		if (li.classList.contains("sep")) {
			if (relatedItems.length > 0) {
				doCollection(lastSepElement, relatedItems);
				lastSepElement.style.display = "none";
				relatedItems = [];
			}
			lastSepElement = li;
		} else {
			if (lastSepElement) {
				relatedItems.push(li);
				li.style.display = "none";
			}
		}
	});
	if (relatedItems.length > 0) {
		doCollection(lastSepElement, relatedItems);
		lastSepElement.style.display = "none";
	}
	function doCollection(sepElement, relatedItems) {
		const sepSubSpan = sepElement.querySelector("span.sub");
		if (!sepSubSpan) return;
		const parentDiv = sepElement.parentNode;
		const collSubSpan = sepSubSpan.cloneNode(true);
		const collElement = document.createElement("li");
		relatedItems.unshift(sepElement);
		addToggleButton(collSubSpan, collElement, relatedItems, "[展开]");
		addToggleButton(sepSubSpan, collElement, relatedItems, "[折叠]");
		collElement.className = "sep collection";
		collElement.appendChild(collSubSpan);
		addCollection(collElement, relatedItems);
		addCollCnt(collElement, relatedItems.length);
		const links = collElement.querySelectorAll("a");
		links.forEach(link => link.removeAttribute("href"));
		parentDiv.insertBefore(collElement, sepElement);
	}
	function addCollection(collElement, relatedItems) {
		const realLen = relatedItems.length;
		const shownLen = Math.min(realLen, 4);
		const prefix = "avatarNeue avatarOverlay avatar_";
		for (let i = 0; i < shownLen; i++) {
			const avatarElement = relatedItems[i].querySelector(".avatar");
			if (avatarElement) {
				const avatar = avatarElement.cloneNode(true);
				if (i) avatar.querySelector("span").className = `${ prefix }${ i }o${ shownLen }`;
				collElement.appendChild(avatar);
			}
		}
	}
	function addCollCnt(collElement, len) {
		const div = document.createElement("div");
		div.className = "avatarCnt";
		const span = document.createElement("span");
		span.className = "tip";
		span.textContent = len;
		div.appendChild(span);
		collElement.appendChild(div);
	}
	function addToggleButton(subSpan, collElement, relatedItems, textContent) {
		const toggleButton = document.createElement("span");
		toggleButton.textContent = textContent;
		toggleButton.className = "toggleButton";
		toggleButton.addEventListener("click", event => {
			event.stopPropagation();
			toggleItems(collElement, relatedItems);
		});
		subSpan.appendChild(toggleButton);
	}
	function toggleItems(collElement, relatedItems) {
		const isHidden = relatedItems[0].style.display === "none";
		relatedItems.forEach(item => {
			item.style.display = isHidden ? "list-item" : "none";
		});
		collElement.style.display = !isHidden ? "list-item" : "none";
	}
}());
欢迎访问Greasy Fork镜像
