Greasy Fork is available in English.
Reusable library that initialized lucide icons and serves functions to turn stats and menus into icons
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/539241/1606701/AO3LucideIcons.js
// ==UserScript== // @exclude * // @author Yours Truly // @version 1.0.0 // @require https://unpkg.com/lucide@latest
// ==UserLibrary== // @name AO3LucideIcons // @description Reusable library that initialized lucide icons and serves functions to turn stats and menus into icons // @license MIT
// ==/UserScript==
// ==/UserLibrary==
/** *
a but not in b, the value stays like it is.b but not in a, it gets copied over.a and b, the value of b takes preference.
*// set global settings and overwrite with incoming settings const settings = {}; mergeSettings(settings, customSettings);
/**
.lucide {
width: 1em;
height: 1em;
margin-right: .3em;
};
document.head.appendChild(lucideCSS);
}/**
@returns Element with the neccessary classes for a boxicons icon. */ function getNewIconElement(options = {}) { const i = document.createElement("i"); i.setAttribute("data-lucide", options.icon);
return i; }
/**
tooltip needs to be present in options.
*/
function setIcon(element, options = {}) {
if (element.tagName !== "I") element.prepend(getNewIconElement(options));
if (options?.addTooltip && options?.tooltip) element.setAttribute("title", options.tooltip);
}/**
tooltip needs to be present in options.
*/
function findElementsAndSetIcon(querySelector, options = {}) {
const els = document.querySelectorAll(querySelector);
els.forEach((el) => (el.firstChild.nodeType === Node.ELEMENT_NODE ? setIcon(el.firstChild, options) : setIcon(el, options)));
}/**
Adds an CSS that will hide the stats titles and prepends an icon to all stats. */ function iconifyStats() { const TotalWords = "dl.statistics dd.words"; const TotalHits = "dl.statistics dd.hits"; const TotalKudos = "dl.statistics dd.kudos"; const TotalBookmarks = "dl.statistics dd.bookmarks"; const TotalCommentThreads = "dl.statistics dd.comment.thread"; const TotalSubscribersWorks = "dl.statistics dd[class=subscriptions]"; const TotalSubscribersAuthor = "dl.statistics dd.user.subscriptions";
const WorkLanguage = "dl.stats dd.language"; const WorkWords = "dl.stats dd.words"; const WorkChapters = "dl.stats dd.chapters"; const WorkHits = "dl.stats dd.hits"; const WorkKudos = "dl.stats dd.kudos"; const WorkComments = "dl.stats dd.comments"; const WorkBookmarks = "dl.stats dd.bookmarks"; const WorkCollections = "dl.stats dd.collections"; const WorkSubscribers = "dl.stats dd.subscriptions"; const WorkKudos2Hits = "dl.stats dd.kudos-hits-ratio"; const WorkReadingTime = "dl.stats dd.reading-time"; const WorkDatePublished = "dl.work dl.stats dd.published";
const SeriesWords = ".series.group dl.stats>dd.words"; const SeriesWorks = ".series.group dl.stats>dd.works"; const SeriesBookmarks = ".series.group dl.stats>dd.bookmarks"; const SeriesComplete = ".series.group dl.stats>dd[title~=Complete]";
const CollectionWorks = ".collection.group dl.stats dd a[href$=works]"; const CollectionFandoms = ".collection.group dl.stats dd a[href$=fandoms]"; const CollectionRequests = ".collection.group dl.stats dd a[href$=requests]"; const CollectionBookmarks = ".collection.group dl.stats dd a[href$=bookmarks]"; const CollectionChallenges = ".collection.group dl.stats dd a[href$=collections]";
const DateStatusTitle = "dl.work dl.stats dt.status"; const DateStatusWork = "dl.work dl.stats dd.status";
const localSettings = { languageOptions: { tooltip: "Language", icon: "languages" }, wordCountOptions: { tooltip: "Word Count", icon: "pencil-line" }, chaptersOptions: { tooltip: "Chapters", icon: "notebook" }, collectionsOptions: { tooltip: "Collections", icon: "square-library" }, commentsOptions: { tooltip: "Comments", icon: "message-square" }, kudosOptions: { tooltip: "Kudos", icon: "heart" }, bookmarksOptions: { tooltip: "Bookmarks", icon: "bookmark" }, hitsOptions: { tooltip: "Hits", icon: "eye" }, workSubsOptions: { tooltip: "Subscriptions", icon: "mail-check" }, authorSubsOptions: { tooltip: "User Subscriptions", icon: "user-round-check" }, commentThreadsOptions: { tooltip: "Comment Threads", icon: "messages-square" }, challengesOptions: { tooltip: "Challenges/Subcollections", icon: "swords" }, fandomsOptions: { tooltip: "Fandoms", icon: "crown" }, requestsOptions: { tooltip: "Prompts", icon: "cake-slice" }, workCountOptions: { tooltip: "Work Count", icon: "library" }, seriesCompleteOptions: { tooltip: "Series Complete", icon: "circle-check-big" }, kudos2HitsOptions: { tooltip: "Kudos to Hits", icon: "flame" }, timeToReadOptions: { tooltip: "Time to Read", icon: "hourglass" }, dateWorkPublishedOptions: { tooltip: "Published", icon: "calendar-plus" }, dateWorkUpdateOptions: { tooltip: "Updated", icon: "calendar-clock" }, dateWorkCompleteOptions: { tooltip: "Completed", icon: "calendar-check-2" }, }; // merge incoming settings into local settings (overwrite) mergeSettings(localSettings, settings?.statsSettings);
// css to hide stats titles
const statsCSS = document.createElement("style");
statsCSS.setAttribute("type", "text/css");
statsCSS.innerHTML =
dl.stats dt {
display: none !important;
};
document.head.appendChild(statsCSS);
findElementsAndSetIcon(WorkLanguage, localSettings.languageOptions);
findElementsAndSetIcon(${TotalWords}, ${WorkWords}, ${SeriesWords}, localSettings.wordCountOptions);
findElementsAndSetIcon(WorkChapters, localSettings.chaptersOptions);
findElementsAndSetIcon(WorkCollections, localSettings.collectionsOptions);
findElementsAndSetIcon(WorkComments, localSettings.commentsOptions);
findElementsAndSetIcon(${TotalKudos}, ${WorkKudos}, localSettings.kudosOptions);
findElementsAndSetIcon(${TotalBookmarks}, ${WorkBookmarks}, ${CollectionBookmarks}, ${SeriesBookmarks}, localSettings.bookmarksOptions);
findElementsAndSetIcon(${TotalHits}, ${WorkHits}, localSettings.hitsOptions);
findElementsAndSetIcon(${TotalSubscribersWorks}, ${WorkSubscribers}, localSettings.workSubsOptions);
findElementsAndSetIcon(TotalSubscribersAuthor, localSettings.authorSubsOptions);
findElementsAndSetIcon(TotalCommentThreads, localSettings.commentThreadsOptions);
findElementsAndSetIcon(CollectionChallenges, localSettings.challengesOptions);
findElementsAndSetIcon(CollectionFandoms, localSettings.fandomsOptions);
findElementsAndSetIcon(CollectionRequests, localSettings.requestsOptions);
findElementsAndSetIcon(${CollectionWorks}, ${SeriesWorks}, localSettings.workCountOptions);
findElementsAndSetIcon(SeriesComplete, localSettings.seriesCompleteOptions);
// AO3E elements findElementsAndSetIcon(WorkKudos2Hits, localSettings.kudos2HitsOptions); findElementsAndSetIcon(WorkReadingTime, localSettings.timeToReadOptions);
// calendar icons at works page findElementsAndSetIcon(WorkDatePublished, localSettings.dateWorkPublishedOptions); const workStatus = document.querySelector(DateStatusTitle); if (workStatus && workStatus.innerHTML.startsWith("Updated")) { setIcon(document.querySelector(DateStatusWork), localSettings.dateWorkUpdateOptions); } else if (workStatus && workStatus.innerHTML.startsWith("Completed")) { setIcon(document.querySelector(DateStatusWork), localSettings.dateWorkCompleteOptions); } }
/**
Replaces the "Hi, {user}!", "Post" and "Log out" text at the top of the page with icons. */ function iconifyUserNav() { const localSettings = { accountOptions: { tooltip: "User Area", addTooltip: true, icon: "circle-user-round" }, postNewOptions: { tooltip: "New Work", addTooltip: true, icon: "book-plus" }, logoutOptions: { tooltip: "Logout", addTooltip: true, icon: "log-out" }, }; // merge incoming settings into local settings (overwrite) mergeSettings(localSettings, settings?.userNavSettings);
const AccountUserNav = "#header a.dropdown-toggle[href*='/users/']"; const PostUserNav = "#header a.dropdown-toggle[href*='/works/new']"; const LogoutUserNav = "#header a[href*='/users/logout']";
// add css for user navigation icons const userNavCss = document.createElement("style"); userNavCss.setAttribute("type", "text/css"); userNavCss.innerHTML = ` ${LogoutUserNav}, ${AccountUserNav}, ${PostUserNav} { /* font size needs to be higher to make icons the right size / font-size: 1.25rem; / left and right padding for a slightly bigger hover hitbox */ padding: 0 .3rem; }
${LogoutUserNav} i.bx { /* overwrite the right margin for logout icon / margin-right: 0; / add left margin instead to add more space to user actions */ margin-left: .3em; }`; document.head.appendChild(userNavCss);
// replace text with icons document.querySelector(AccountUserNav).replaceChildren(getNewIconElement(localSettings.accountOptions)); document.querySelector(PostUserNav).replaceChildren(getNewIconElement(localSettings.postNewOptions)); document.querySelector(LogoutUserNav).replaceChildren(getNewIconElement(localSettings.logoutOptions)); }
if (settings?.iconifyStats) iconifyStats(); if (settings?.iconifyUserNav) iconifyUserNav(); initLucide(); }