Add VIB Rank, stars, VIB_score decimal, and rating count to anime list based on API data
// ==UserScript==
// @name VIBDataListInsertion
// @namespace https://jirehlov.com
// @version 0.1.6
// @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 vibenum">(${ 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 sortBy(property) {
const browserFullContainer = document.querySelector('.browserFull');
if (!browserFullContainer) {
return;
}
const liElements = Array.from(browserFullContainer.querySelectorAll('.browserFull > li'));
liElements.sort((a, b) => {
const elementA = a.querySelector(property);
const elementB = b.querySelector(property);
if (!elementA && !elementB) {
return 0;
}
if (!elementA) return 1;
if (!elementB) return -1;
const contentA = elementA.textContent;
const contentB = elementB.textContent;
const matchA = contentA.match(/\d+/);
const matchB = contentB.match(/\d+/);
const valueA = parseInt(matchA[0]);
const valueB = parseInt(matchB[0]);
if (isNaN(valueA) || isNaN(valueB)) {
return 0;
}
return ascendingOrder ? valueA - valueB : valueB - valueA;
});
while (browserFullContainer.firstChild) {
browserFullContainer.removeChild(browserFullContainer.firstChild);
}
liElements.forEach((liElement, index) => {
browserFullContainer.appendChild(liElement);
});
const sortButton = document.querySelector(property === '.vibrank' ? '.vibBtn' : '.vibEnumBtn');
if (sortButton) {
sortButton.textContent = `${ property === '.vibrank' ? 'VIB评分排序' : '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 vibSortEnumButton = document.createElement('a');
vibSortEnumButton.classList.add('chiiBtn', 'vibEnumBtn');
vibSortEnumButton.href = 'javascript:;';
vibSortEnumButton.textContent = 'VIB人数排序';
browserToolsElement.appendChild(vibSortEnumButton);
}
const vibSortButton = document.querySelector('.vibBtn');
if (vibSortButton) {
vibSortButton.addEventListener('click', function () {
if (isTraversing) {
return;
}
sortBy('.vibrank');
});
}
const vibSortEnumButton = document.querySelector('.vibEnumBtn');
if (vibSortEnumButton) {
vibSortEnumButton.addEventListener('click', function () {
if (isTraversing) {
return;
}
sortBy('.vibenum');
});
}
}());