VIBDataListInsertion

Add VIB Rank, stars, VIB_score decimal, and rating count to anime list based on API data
目前为 2023-10-07 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         VIBDataListInsertion
// @namespace    https://jirehlov.com
// @version      0.1.5
// @description  Add VIB Rank, stars, VIB_score decimal, and rating count to anime list based on API data
// @include      /^https?://(bangumi\.tv|bgm\.tv|chii\.in)/.*
// @author       Jirehlov
// @grant        none
// @license      MIT
// ==/UserScript==

(async function () {
	'use strict';
	let isTraversing = true;
	async function addVIBData(innerElement) {
		if (innerElement.getAttribute('data-vib-processed') === 'true') {
			return;
		}
		const aElement = innerElement.parentElement.querySelector('a[href^="/subject/"]');
		if (!aElement) {
			return;
		}
		const match = aElement.getAttribute('href').match(/\/(\d+)$/);
		if (!match) {
			return;
		}
		const id = match[1];
		const apiUrl = `https://api.jirehlov.com/vib/${ id }`;
		const response = await fetch(apiUrl, { redirect: 'manual' });
		if (response.ok) {
			const data = await response.json();
			const {VIB_rank, VIB_score, VIB_enum} = data;
			const vibRankElement = document.createElement('span');
			vibRankElement.classList.add('rank', 'vibrank');
			vibRankElement.innerHTML = `<small>VIB Rank </small>${ VIB_rank }`;
			vibRankElement.style.right = '85px';
			const starsElement = document.createElement('span');
			starsElement.classList.add('starstop-s');
			const starCount = Math.round(VIB_score);
			starsElement.innerHTML = `<span class="starlight stars${ starCount }"></span>`;
			const vibScoreDecimal = parseFloat(VIB_score).toFixed(1);
			const ratingInfoElement = document.createElement('p');
			ratingInfoElement.classList.add('rateInfo');
			const rankElement = innerElement.querySelector('.rank');
			if (rankElement) {
				rankElement.insertAdjacentElement('afterend', vibRankElement);
			} else {
				innerElement.appendChild(vibRankElement);
			}
			ratingInfoElement.appendChild(starsElement);
			ratingInfoElement.innerHTML += `<small class="fade"> ${ vibScoreDecimal }</small> <span class="tip_j">(${ VIB_enum }人VIB评分)</span>`;
			innerElement.appendChild(ratingInfoElement);
			innerElement.setAttribute('data-vib-processed', 'true');
		} else {
			innerElement.setAttribute('data-vib-processed', 'true');
			return;
		}
	}
	function observeDOMChanges() {
		const browserFullContainer = document.querySelector('.browserFull');
		if (!browserFullContainer) {
			return;
		}
		const mutationObserver = new MutationObserver(async mutations => {
			for (const mutation of mutations) {
				if (mutation.type === 'childList') {
					const addedLiElements = Array.from(mutation.addedNodes).filter(node => node.nodeName === 'LI');
					if (mutation.addedNodes.length > 0) {
						isTraversing = true;
						await processElementWithDelay(addedLiElements);
						isTraversing = false;
					}
				}
			}
		});
		mutationObserver.observe(browserFullContainer, {
			childList: true,
			attributes: false,
			subtree: false
		});
	}
	function delay(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
	}
	async function processElementWithDelay(elements) {
		return new Promise(async (resolve, reject) => {
			try {
				for (const [index, liElement] of elements.entries()) {
					const innerElement = liElement.querySelector('.inner');
					if (innerElement) {
						await delay((index + 1) * 10);
						addVIBData(innerElement);
					}
				}
				resolve();
			} catch (error) {
				reject(error);
			}
		});
	}
	let ascendingOrder = true;
	function sortByVIBRank() {
		const browserFullContainer = document.querySelector('.browserFull');
		if (!browserFullContainer) {
			return;
		}
		const liElements = Array.from(browserFullContainer.querySelectorAll('.browserFull > li'));
		liElements.sort((a, b) => {
			const rankAElement = a.querySelector('.vibrank');
			const rankBElement = b.querySelector('.vibrank');
			if (!rankAElement && !rankBElement) {
				return 0;
			}
			if (!rankAElement) return 1;
			if (!rankBElement) return -1;
			const rankA = parseFloat(rankAElement.textContent.replace('VIB Rank', '').trim());
			const rankB = parseFloat(rankBElement.textContent.replace('VIB Rank', '').trim());
			if (isNaN(rankA)) return 1;
			if (isNaN(rankB)) return -1;
			return ascendingOrder ? rankA - rankB : rankB - rankA;
		});
		while (browserFullContainer.firstChild) {
			browserFullContainer.removeChild(browserFullContainer.firstChild);
		}
		liElements.forEach((liElement, index) => {
			browserFullContainer.appendChild(liElement);
		});
		const vibSortButton = document.querySelector('.vibBtn');
		if (vibSortButton) {
			vibSortButton.textContent = `VIB排序 ${ ascendingOrder ? '\u2191' : '\u2193' }`;
		}
		ascendingOrder = !ascendingOrder;
	}
	observeDOMChanges();
	isTraversing = true;
	const initialLiElements = document.querySelectorAll('.browserFull li');
	await processElementWithDelay(initialLiElements);
	isTraversing = false;
	const browserToolsElement = document.getElementById('browserTools');
	if (browserToolsElement) {
		const vibSortButton = document.createElement('a');
		vibSortButton.classList.add('chiiBtn', 'vibBtn');
		vibSortButton.href = 'javascript:;';
		vibSortButton.textContent = 'VIB排序';
		browserToolsElement.appendChild(vibSortButton);
	}
	const vibSortButton = document.querySelector('.vibBtn');
	if (vibSortButton) {
		vibSortButton.addEventListener('click', function () {
			if (isTraversing) {
				return;
			}
			sortByVIBRank();
		});
	}
}());
欢迎访问Greasy Fork镜像
