Greasy Fork is available in English.
For anilist.co, make manga and anime scores more prominent by moving them to the title.
// ==UserScript==
// @name AniList Unlimited - Score in Header
// @namespace https://github.com/mysticflute
// @version 1.0.3
// @description For anilist.co, make manga and anime scores more prominent by moving them to the title.
// @author mysticflute
// @homepageURL https://github.com/mysticflute/ani-list-unlimited
// @supportURL https://github.com/mysticflute/ani-list-unlimited/issues
// @match https://anilist.co/*
// @connect graphql.anilist.co
// @connect api.jikan.moe
// @connect kitsu.io
// @grant GM_xmlhttpRequest
// @grant GM_setValue
// @grant GM_getValue
// @grant GM.xmlHttpRequest
// @grant GM.setValue
// @grant GM.getValue
// @license MIT
// ==/UserScript==
// This user script was tested with the following user script managers:
// - Violentmonkey (preferred): https://violentmonkey.github.io/
// - TamperMonkey: https://www.tampermonkey.net/
// - GreaseMonkey: https://www.greasespot.net/
(async function () {
'use strict';
/**
* Default user configuration options.
*
* You can override these options if your user script runner supports it. Your
* changes will persist across user script updates.
*
* In Violentmonkey:
* 1. Install the user script.
* 2. Let the script run at least once by loading an applicable url.
* 3. Click the edit button for this script from the Violentmonkey menu.
* 4. Click on the "Values" tab for this script.
* 5. Click on the configuration option you want to change and edit the value
* (change to true or false).
* 6. Click the save button.
* 7. Refresh or visit the page to see the changes.
*
* In TamperMonkey:
* 1. Install the user script.
* 2. Let the script run at least once by loading an applicable url.
* 3. From the TamperMonkey dashboard, click the "Settings" tab.
* 4. Change the "Config mode" mode to "Advanced".
* 5. On the "Installed userscripts" tab (dashboard), click the edit button
* for this script.
* 6. Click the "Storage" tab. If you don't see this tab be sure the config
* mode is set to "Advanced" as described above. Also be sure that you have
* visited an applicable page with the user script enabled first.
* 7. Change the value for any desired configuration options (change to true
* or false).
* 8. Click the "Save" button.
* 9. Refresh or visit the page to see the changes. If it doesn't seem to be
* working, refresh the TamperMonkey dashboard to double check your change
* has stuck. If not try again and click the save button.
*
* Other user script managers:
* 1. Change any of the options below directly in the code editor and save.
* 2. Whenever you update this script or reinstall it you will have to make
* your changes again.
*/
const defaultConfig = {
/** When true, adds the AniList average score to the header. */
addAniListScoreToHeader: true,
/** When true, adds the MyAnimeList score to the header. */
addMyAnimeListScoreToHeader: true,
/** When true, adds the Kitsu score to the header. */
addKitsuScoreToHeader: false,
/** When true, show the smile/neutral/frown icons next to the AniList score. */
showIconWithAniListScore: true,
/**
* When true, show AniList's "Mean Score" instead of the "Average Score".
* Regardless of this value, if the "Average Score" is not available
* then the "Mean Score" will be shown.
*/
preferAniListMeanScore: false,
/** When true, shows loading indicators when scores are being retrieved. */
showLoadingIndicators: true,
};
/**
* Constants for this user script.
*/
const constants = {
/** Endpoint for the AniList API */
ANI_LIST_API: 'https://graphql.anilist.co',
/** Endpoint for the MyAnimeList API */
MAL_API: 'https://api.jikan.moe/v4',
/** Endpoint for the Kitsu API */
KITSU_API: 'https://kitsu.io/api/edge',
/** Regex to extract the page type and media id from a AniList url path */
ANI_LIST_URL_PATH_REGEX: /(anime|manga)\/([0-9]+)/i,
/** Prefix message for logs to the console */
LOG_PREFIX: '[AniList Unlimited User Script]',
/** Prefix for class names added to created elements (prevent conflicts) */
CLASS_PREFIX: 'user-script-ani-list-unlimited',
/** Title suffix added to created elements (for user information) */
CUSTOM_ELEMENT_TITLE:
'(this content was added by the ani-list-unlimited user script)',
/** When true, output additional logs to the console */
DEBUG: false,
};
/**
* User script manager functions.
*
* Provides compatibility between Tampermonkey, Greasemonkey 4+, etc...
*/
const userScriptAPI = (() => {
const api = {};
if (typeof GM_xmlhttpRequest !== 'undefined') {
api.GM_xmlhttpRequest = GM_xmlhttpRequest;
} else if (
typeof GM !== 'undefined' &&
typeof GM.xmlHttpRequest !== 'undefined'
) {
api.GM_xmlhttpRequest = GM.xmlHttpRequest;
}
if (typeof GM_setValue !== 'undefined') {
api.GM_setValue = GM_setValue;
} else if (
typeof GM !== 'undefined' &&
typeof GM.setValue !== 'undefined'
) {
api.GM_setValue = GM.setValue;
}
if (typeof GM_getValue !== 'undefined') {
api.GM_getValue = GM_getValue;
} else if (
typeof GM !== 'undefined' &&
typeof GM.getValue !== 'undefined'
) {
api.GM_getValue = GM.getValue;
}
/** whether GM_xmlhttpRequest is supported. */
api.supportsXHR = typeof api.GM_xmlhttpRequest !== 'undefined';
/** whether GM_setValue and GM_getValue are supported. */
api.supportsStorage =
typeof api.GM_getValue !== 'undefined' &&
typeof api.GM_setValue !== 'undefined';
return api;
})();
/**
* Utility functions.
*/
const utils = {
/**
* Logs an error message to the console.
*
* @param {string} message - The error message.
* @param {...any} additional - Additional values to log.
*/
error(message, ...additional) {
console.error(`${constants.LOG_PREFIX} Error: ${message}`, ...additional);
},
/**
* Logs a group of related error messages to the console.
*
* @param {string} label - The group label.
* @param {...any} additional - Additional error messages.
*/
groupError(label, ...additional) {
console.groupCollapsed(`${constants.LOG_PREFIX} Error: ${label}`);
additional.forEach(entry => {
console.log(entry);
});
console.groupEnd();
},
/**
* Logs a debug message which only shows when constants.DEBUG = true.
*
* @param {string} message The message.
* @param {...any} additional - ADditional values to log.
*/
debug(message, ...additional) {
if (constants.DEBUG) {
console.debug(`${constants.LOG_PREFIX} ${message}`, ...additional);
}
},
/**
* Makes an XmlHttpRequest using the user script util.
*
* Common options include the following:
*
* - url (url endpoint, e.g., https://api.endpoint.com)
* - method (e.g., GET or POST)
* - headers (an object containing headers such as Content-Type)
* - responseType (e.g., 'json')
* - data (body data)
*
* See https://wiki.greasespot.net/GM.xmlHttpRequest for other options.
*
* If `options.responseType` is set then the response data is returned,
* otherwise `responseText` is returned.
*
* @param {Object} options - The request options.
*
* @returns A Promise that resolves with the response or rejects on any
* errors or status code other than 200.
*/
xhr(options) {
return new Promise((resolve, reject) => {
const xhrOptions = Object.assign({}, options, {
onabort: res => reject(res),
ontimeout: res => reject(res),
onerror: res => reject(res),
onload: res => {
if (res.status === 200) {
if (options.responseType && res.response) {
resolve(res.response);
} else {
resolve(res.responseText);
}
} else {
reject(res);
}
},
});
userScriptAPI.GM_xmlhttpRequest(xhrOptions);
});
},
/**
* Waits for an element to load.
*
* @param {string} selector - Wait for the element matching this
* selector to be found.
* @param {Element} [container=document] - The root element for the
* selector, defaults to `document`.
* @param {number} [timeoutSecs=7] - The number of seconds to wait
* before timing out.
*
* @returns {Promise<Element>} A Promise returning the DOM element, or a
* rejection if a timeout occurred.
*/
async waitForElement(selector, container = document, timeoutSecs = 7) {
const element = container.querySelector(selector);
if (element) {
return Promise.resolve(element);
}
return new Promise((resolve, reject) => {
const timeoutTime = Date.now() + timeoutSecs * 1000;
const handler = () => {
const element = document.querySelector(selector);
if (element) {
resolve(element);
} else if (Date.now() > timeoutTime) {
reject(new Error(`Timed out waiting for selector '${selector}'`));
} else {
setTimeout(handler, 100);
}
};
setTimeout(handler, 1);
});
},
/**
* Loads user configuration from storage.
*
* @param {Object} defaultConfiguration - An object containing all of
* the user configuration keys mapped to their default values. This
* object will be used to set an initial value for any keys not currently
* in storage.
*
* @param {Boolean} [setDefault=true] - When true, save the value from
* defaultConfiguration for keys not present in storage for next time.
* This lets the user edit the configuration more easily.
*
* @returns {Promise<Object>} A Promise returning an object that has the
* config from storage, or an empty object if the storage APIs are not
* defined.
*/
async loadUserConfiguration(defaultConfiguration, setDefault = true) {
if (!userScriptAPI.supportsStorage) {
utils.debug('User configuration is not enabled');
return {};
}
const userConfig = {};
for (let [key, value] of Object.entries(defaultConfiguration)) {
const userValue = await userScriptAPI.GM_getValue(key);
// initialize any config values that haven't been set
if (setDefault && userValue === undefined) {
utils.debug(`setting default config value for ${key}: ${value}`);
userScriptAPI.GM_setValue(key, value);
} else {
userConfig[key] = userValue;
}
}
utils.debug('loaded user configuration from storage', userConfig);
return userConfig;
},
};
/**
* Functions to make API calls.
*/
const api = {
/**
* Loads data from the AniList API.
*
* @param {('anime'|'manga')} type - The type of media content.
* @param {string} aniListId - The AniList media id.
*
* @returns {Promise<Object>} A Promise returning the media's data, or a
* rejection if there was a problem calling the API.
*/
async loadAniListData(type, aniListId) {
var query = `
query ($id: Int, $type: MediaType) {
Media (id: $id, type: $type) {
idMal
averageScore
meanScore
title {
english
romaji
}
}
}
`;
const variables = {
id: aniListId,
type: type.toUpperCase(),
};
try {
const response = await utils.xhr({
url: constants.ANI_LIST_API,
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
responseType: 'json',
data: JSON.stringify({
query,
variables,
}),
});
utils.debug('AniList API response:', response);
return response.data.Media;
} catch (res) {
const message = `AniList API request failed for media with ID '${aniListId}'`;
utils.groupError(
message,
`Request failed with status ${res.status}`,
...(res.response ? res.response.errors : [res])
);
const error = new Error(message);
error.response = res;
throw error;
}
},
/**
* Loads data from the MyAnimeList API.
*
* @param {('anime'|'manga')} type - The type of media content.
* @param {string} myAnimeListId - The MyAnimeList media id.
*
* @returns {Promise<Object>} A Promise returning the media's data, or a
* rejection if there was a problem calling the API.
*/
async loadMyAnimeListData(type, myAnimeListId) {
try {
const response = await utils.xhr({
url: `${constants.MAL_API}/${type}/${myAnimeListId}`,
method: 'GET',
responseType: 'json',
});
utils.debug('MyAnimeList API response:', response);
return response.data;
} catch (res) {
const message = `MyAnimeList API request failed for mapped MyAnimeList ID '${myAnimeListId}'`;
utils.groupError(
message,
`Request failed with status ${res.status}`,
res.response ? res.response.error || res.response.message : res
);
const error = new Error(message);
error.response = res;
throw error;
}
},
/**
* Loads data from the Kitsu API.
*
* @param {('anime'|'manga')} type - The type of media content.
* @param {string} englishTitle - Search for media with this title.
* @param {string} romajiTitle - Search for media with this title.
*
* @returns {Promise<Object>} A Promise returning the media's data, or a
* rejection if there was a problem calling the API.
*/
async loadKitsuData(type, englishTitle, romajiTitle) {
try {
const fields = 'slug,averageRating,userCount,titles';
const response = await utils.xhr({
url: encodeURI(
`${
constants.KITSU_API
}/${type}?page[limit]=3&fields[${type}]=${fields}&filter[text]=${
englishTitle || romajiTitle
}`
),
method: 'GET',
headers: {
Accept: 'application/vnd.api+json',
'Content-Type': 'application/vnd.api+json',
},
responseType: 'json',
});
utils.debug('Kitsu API response:', response);
if (response.data && response.data.length) {
let index = 0;
let isExactMatch = false;
const collator = new Intl.Collator({
usage: 'search',
sensitivity: 'base',
ignorePunctuation: true,
});
const matchedIndex = response.data.findIndex(result => {
return Object.values(result.attributes.titles).find(kitsuTitle => {
return (
collator.compare(englishTitle, kitsuTitle) === 0 ||
collator.compare(romajiTitle, kitsuTitle) === 0
);
});
});
if (matchedIndex > -1) {
utils.debug(
`matched title for Kitsu result at index ${matchedIndex}`,
response.data[index]
);
index = matchedIndex;
isExactMatch = true;
} else {
utils.debug('exact title match not found in Kitsu results');
}
return {
isExactMatch,
data: response.data[index].attributes,
};
} else {
utils.debug(`Kitsu API returned 0 results for '${englishTitle}'`);
return {};
}
} catch (res) {
const message = `Kitsu API request failed for text '${englishTitle}'`;
utils.groupError(
message,
`Request failed with status ${res.status}`,
...(res.response ? res.response.errors : [])
);
const error = new Error(message);
error.response = res;
throw error;
}
},
};
/**
* AniList SVGs.
*/
const svg = {
/** from AniList */
smile:
'<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" color="rgb(var(--color-green))" class="icon svg-inline--fa fa-smile fa-w-16"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z" class=""></path></svg>',
/** from AniList */
straight:
'<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="meh" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" color="rgb(var(--color-orange))" class="icon svg-inline--fa fa-meh fa-w-16"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z" class=""></path></svg>',
/** from AniList */
frown:
'<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="frown" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" color="rgb(var(--color-red))" class="icon svg-inline--fa fa-frown fa-w-16"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z" class=""></path></svg>',
/** From https://github.com/SamHerbert/SVG-Loaders */
// License/accreditation https://github.com/SamHerbert/SVG-Loaders/blob/master/LICENSE.md
loading:
'<svg width="60" height="8" viewbox="0 0 130 32" style="fill: rgb(var(--color-text-light, 80%, 80%, 80%))" xmlns="http://www.w3.org/2000/svg" fill="#fff"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="60" cy="15" r="9" fill-opacity=".3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from=".5" to=".5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/></circle></svg>',
};
/**
* Handles manipulating the current AniList page.
*/
class AniListPage {
/**
* @param {Object} config - The user script configuration.
*/
constructor(config) {
this.selectors = {
pageTitle: 'head > title',
header: '.page-content .header .content',
};
this.config = config;
this.lastCheckedUrlPath = null;
}
/**
* Initialize the page and apply page modifications.
*/
initialize() {
utils.debug('initializing page');
this.applyPageModifications().catch(e =>
utils.error(`Unable to apply modifications to the page - ${e.message}`)
);
// eslint-disable-next-line no-unused-vars
const observer = new MutationObserver((mutations, observer) => {
utils.debug('mutation observer', mutations);
this.applyPageModifications().catch(e =>
utils.error(
`Unable to apply modifications to the page - ${e.message}`
)
);
});
const target = document.querySelector(this.selectors.pageTitle);
observer.observe(target, { childList: true, characterData: true });
}
/**
* Applies modifications to the page based on config settings.
*
* This will only add content if we are on a relevant page in the app.
*/
async applyPageModifications() {
const pathname = window.location.pathname;
utils.debug('checking page url', pathname);
if (this.lastCheckedUrlPath === pathname) {
utils.debug('url path did not change, skipping');
return;
}
this.lastCheckedUrlPath = pathname;
const matches = constants.ANI_LIST_URL_PATH_REGEX.exec(pathname);
if (!matches) {
utils.debug('url did not match');
return;
}
const pageType = matches[1];
const mediaId = matches[2];
utils.debug('pageType:', pageType, 'mediaId:', mediaId);
const aniListData = await api.loadAniListData(pageType, mediaId);
if (this.config.addAniListScoreToHeader) {
this.addAniListScoreToHeader(pageType, mediaId, aniListData);
}
if (this.config.addMyAnimeListScoreToHeader) {
this.addMyAnimeListScoreToHeader(pageType, mediaId, aniListData);
}
if (this.config.addKitsuScoreToHeader) {
this.addKitsuScoreToHeader(pageType, mediaId, aniListData);
}
}
/**
* Adds the AniList score to the header.
*
* @param {('anime'|'manga')} type - The type of media content.
* @param {string} mediaId - The AniList media id.
* @param {Object} aniListData - The data from the AniList api.
*/
async addAniListScoreToHeader(pageType, mediaId, aniListData) {
const slot = 1;
const source = 'AniList';
let rawScore, info;
if (
aniListData.meanScore &&
(this.config.preferAniListMeanScore || !aniListData.averageScore)
) {
rawScore = aniListData.meanScore;
info = ' (mean)';
} else if (aniListData.averageScore) {
rawScore = aniListData.averageScore;
info = ' (average)';
}
const score = rawScore ? `${rawScore}%` : '(N/A)';
let iconMarkup;
if (this.config.showIconWithAniListScore) {
if (rawScore === null || rawScore == undefined) {
iconMarkup = svg.straight;
} else if (rawScore >= 75) {
iconMarkup = svg.smile;
} else if (rawScore >= 60) {
iconMarkup = svg.straight;
} else {
iconMarkup = svg.frown;
}
}
this.addToHeader({ slot, source, score, iconMarkup, info }).catch(e => {
utils.error(
`Unable to add the ${source} score to the header: ${e.message}`
);
});
}
/**
* Adds the MyAnimeList score to the header.
*
* @param {('anime'|'manga')} type - The type of media content.
* @param {string} mediaId - The AniList media id.
* @param {Object} aniListData - The data from the AniList api.
*/
async addMyAnimeListScoreToHeader(pageType, mediaId, aniListData) {
const slot = 2;
const source = 'MyAnimeList';
if (!aniListData.idMal) {
utils.error(`no ${source} id found for media ${mediaId}`);
return this.clearHeaderSlot(slot);
}
if (this.config.showLoadingIndicators) {
await this.showSlotLoading(slot);
}
api
.loadMyAnimeListData(pageType, aniListData.idMal)
.then(data => {
const score = data.score;
const href = data.url;
return this.addToHeader({ slot, source, score, href });
})
.catch(e => {
utils.error(
`Unable to add the ${source} score to the header: ${e.message}`
);
// https://github.com/jikan-me/jikan-rest/issues/102
if (e.response && e.response.status === 503) {
return this.addToHeader({
slot,
source,
score: 'Unavailable',
info: ': The Jikan API is temporarily unavailable. Please try again later',
});
} else if (e.response && e.response.status === 429) {
// rate limited
return this.addToHeader({
slot,
source,
score: 'Unavailable*',
info: ': Temporarily unavailable due to rate-limiting, since you made too many requests to the MyAnimeList API. Reload in a few seconds to try again',
});
}
});
}
/**
* Adds the Kitsu score to the header.
*
* @param {('anime'|'manga')} type - The type of media content.
* @param {string} mediaId - The AniList media id.
* @param {Object} aniListData - The data from the AniList api.
*/
async addKitsuScoreToHeader(pageType, mediaId, aniListData) {
const slot = 3;
const source = 'Kitsu';
const englishTitle = aniListData.title.english;
const romajiTitle = aniListData.title.romaji;
if (!englishTitle && !romajiTitle) {
utils.error(
`Unable to search ${source} - no media title found for ${mediaId}`
);
return this.clearHeaderSlot(slot);
}
if (this.config.showLoadingIndicators) {
await this.showSlotLoading(slot);
}
api
.loadKitsuData(pageType, englishTitle, romajiTitle)
.then(entry => {
if (!entry.data) {
utils.error(`no ${source} matches found for media ${mediaId}`);
return this.clearHeaderSlot(slot);
}
const data = entry.data;
let score = null;
if (data.averageRating !== undefined && data.averageRating !== null) {
score = `${data.averageRating}%`;
if (!entry.isExactMatch) {
score += '*';
}
}
const href = `https://kitsu.io/${pageType}/${data.slug}`;
let info = '';
if (!entry.isExactMatch) {
info += ', *exact match not found';
}
const kitsuTitles = Object.values(data.titles).join(', ');
info += `, matched on "${kitsuTitles}"`;
return this.addToHeader({ slot, source, score, href, info });
})
.catch(e => {
utils.error(
`Unable to add the ${source} score to the header: ${e.message}`
);
});
}
/**
* Shows a loading indicator in the given slot position.
*
* @param {number} slot - The slot position.
*/
async showSlotLoading(slot) {
const slotEl = await this.getSlotElement(slot);
if (slotEl) {
slotEl.innerHTML = svg.loading;
}
}
/**
* Removes markup from the header for the given slot position.
*
* @param {number} slot - The slot position.
*/
async clearHeaderSlot(slot) {
const slotEl = await this.getSlotElement(slot);
if (slotEl) {
while (slotEl.lastChild) {
slotEl.removeChild(slotEl.lastChild);
}
slotEl.style.marginRight = '0';
}
}
/**
* Add score data to a slot in the header section.
*
* @param {Object} info - Data about the score.
* @param {number} info.slot - The ordering position within the header.
* @param {string} info.source - The source of the data.
* @param {string} [info.score] - The score text.
* @param {string} [info.href] - The link for the media from the source.
* @param {string} [info.iconMarkup] - Icon markup representing the score.
* @param {string} [info=''] - Additional info about the score.
*/
async addToHeader({ slot, source, score, href, iconMarkup, info = '' }) {
const slotEl = await this.getSlotElement(slot);
if (slotEl) {
const newSlotEl = slotEl.cloneNode(false);
newSlotEl.title = `${source} Score${info} ${constants.CUSTOM_ELEMENT_TITLE}`;
newSlotEl.style.marginRight = '1rem';
if (slot > 1) {
newSlotEl.style.fontSize = '.875em';
}
if (iconMarkup) {
newSlotEl.insertAdjacentHTML('afterbegin', iconMarkup);
newSlotEl.firstElementChild.style.marginRight = '6px';
}
const scoreEl = document.createElement('span');
if (slot > 1) {
scoreEl.style.fontWeight = 'bold';
}
scoreEl.append(document.createTextNode(score || 'No Score'));
newSlotEl.appendChild(scoreEl);
if (href) {
newSlotEl.appendChild(document.createTextNode(' on '));
const link = document.createElement('a');
link.href = href;
link.title = `View this entry on ${source} ${constants.CUSTOM_ELEMENT_TITLE}`;
link.textContent = source;
newSlotEl.appendChild(link);
}
slotEl.replaceWith(newSlotEl);
} else {
throw new Error(`Unable to find element to place ${source} score`);
}
}
/**
* Gets the slot element at the given position.
*
* @param {number} slot - Get the slot element at this ordering position.
*/
async getSlotElement(slot) {
const containerEl = await this.getContainerElement();
const slotClass = `${constants.CLASS_PREFIX}-slot${slot}`;
return containerEl.querySelector(`.${slotClass}`);
}
/**
* Gets the container for new content, adding it to the DOM if
* necessary.
*/
async getContainerElement() {
const headerEl = await utils.waitForElement(this.selectors.header);
const insertionPoint =
headerEl.querySelector('h1') || headerEl.firstElementChild;
const containerClass = `${constants.CLASS_PREFIX}-scores`;
let containerEl = headerEl.querySelector(`.${containerClass}`);
if (!containerEl) {
containerEl = document.createElement('div');
containerEl.className = containerClass;
containerEl.style.display = 'flex';
containerEl.style.marginTop = '1em';
containerEl.style.alignItems = 'center';
const numSlots = 3;
for (let i = 0; i < numSlots; i++) {
const slotEl = document.createElement('div');
slotEl.className = `${constants.CLASS_PREFIX}-slot${i + 1}`;
containerEl.appendChild(slotEl);
}
insertionPoint.insertAdjacentElement('afterend', containerEl);
}
return containerEl;
}
}
// execution:
// check for compatibility
if (!userScriptAPI.supportsXHR) {
utils.error(
'The current version of your user script manager ' +
'does not support required features. Please update ' +
'it to the latest version and try again.'
);
return;
}
// setup configuration
const userConfig = await utils.loadUserConfiguration(defaultConfig);
const config = Object.assign({}, defaultConfig, userConfig);
utils.debug('configuration values:', config);
const page = new AniListPage(config);
page.initialize();
})();