// ==UserScript==
// @name yande.re floating button
// @namespace http://tampermonkey.net/
// @version 0.0.1
// @description External sidebar button is a floating button.外置侧边栏按钮为悬浮按钮
// @author rowink
// @license MIT
// @match *://yande.re/post/show/*
// @downloadURL none
// ==/UserScript==
(function () {
"use strict";
const features = {
options: {
edit: {
tips: "edit",
target: document.querySelector("ul a.js-posts-show-edit-tab"),
icon: ``,
},
viewOrigin: {
tips: "View larger version",
target: document.querySelector("ul a.original-file-changed.highres-show"),
icon: ``,
},
download: {
tips: "Download larger version",
target: document.querySelector("ul a.original-file-changed"),
icon: ``,
},
addDeleteFlag: {
tips: "Flag for deletion",
target: document.querySelector("ul:has(.original-file-changed) a[onclick*='Post']"),
icon: ``,
},
addTranslation: {
tips: "Add translation",
target: document.querySelector("ul a.js-notes-manager--create"),
icon: ``,
},
addToFavorite: {
tips: "Add to favorites",
target: document.querySelector("#add-to-favs a"),
icon: ``,
},
removeFavorite: {
tips: "Remove from favorites",
target: document.querySelector("#remove-from-favs a"),
icon: ``,
},
setAvatar: {
tips: "Set avatar",
target: document.querySelector("#set-avatar a"),
icon: ``,
},
viewHistory: {
tips: "Post history",
target: document.querySelector("ul:has(.original-file-changed) a[href*='/history']"),
icon: ``,
},
},
related: {
FindDupes: {
tips: "Find dupes",
target: document.querySelector("ul a#find-dupes"),
icon: ``,
},
findSimilar: {
tips: "Find similar",
target: document.querySelector("ul a#find-similar"),
icon: ``,
},
},
router: {
previous: {
tips: "Previous",
target: document.querySelectorAll("ul:has(a[href*='/post/similar']) a[href*='/post/show']")[0],
icon: ``,
},
next: {
tips: "Next",
target: document.querySelectorAll("ul:has(a[href*='/post/similar']) a[href*='/post/show']")[1],
icon: ``,
},
random: {
tips: "Random",
target: document.querySelector("ul a[href*='/post/random']"),
icon: ``,
},
},
};
const floatBtnContainer = document.createElement("div");
Object.assign(floatBtnContainer.style, {
position: "fixed",
bottom: "15px",
right: "15px",
zIndex: "9999",
display: "flex",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "10px",
});
const floatBtnList = [
{ group: "options", color: "#ee8887" },
{ group: "related", color: "#CC0" },
{ group: "router", color: "#0A0" },
];
floatBtnList.forEach((btnInfo) => {
const floatBtn = document.createElement("button");
Object.assign(floatBtn.style, {
width: "25px",
height: "25px",
padding: "5px",
border: "none",
borderRadius: "50%",
backgroundColor: btnInfo.color,
color: "#ee8887",
cursor: "pointer",
});
floatBtn.addEventListener("click", () => {
const actionGroup = document.querySelector(`.${btnInfo.group}`);
const style = actionGroup.style.display;
actionGroup.style.display = style === "none" ? "block" : "none";
});
floatBtnContainer.appendChild(floatBtn);
const actionGroupBar = document.createElement("div");
actionGroupBar.className = btnInfo.group;
actionGroupBar.style.display = "none";
const actionBtnBar = document.createElement("div");
Object.assign(actionBtnBar.style, {
display: "flex",
flexDirection: "column",
gap: "7px",
transition: "opacity 0.3s ease-in-out",
});
Object.values(features[btnInfo.group]).forEach((targetElement) => {
const actionBtn = document.createElement("button");
actionBtn.innerHTML = targetElement.icon;
actionBtn.className = btnInfo.group;
Object.assign(actionBtn.style, {
border: "1px solid #ffffff",
borderRadius: "50px",
width: "30px",
height: "30px",
padding: "5px",
cursor: "pointer",
backgroundColor: "#00000000",
color: "#ee8887",
display: "flex",
alignItems: "center",
justifyContent: "center",
});
actionBtn.addEventListener("click", () => targetElement.target.click());
actionBtn.addEventListener("mouseover", (event) => {
const tooltip = document.createElement("div");
tooltip.className = "tooltip";
tooltip.innerText = targetElement.tips;
document.body.appendChild(tooltip);
const rect = actionBtn.getBoundingClientRect();
tooltip.style.position = "fixed";
tooltip.style.backgroundColor = "#333";
tooltip.style.color = "#fff";
tooltip.style.padding = "5px";
tooltip.style.borderRadius = "5px";
tooltip.style.zIndex = "1000";
tooltip.style.pointerEvents = "none";
tooltip.style.whiteSpace = "nowrap";
tooltip.style.left = `${rect.left - tooltip.offsetWidth - 10}px`; // 显示在按钮左侧，并留出10px的间距
tooltip.style.top = `${rect.top}px`; // 与按钮顶部对齐
});
actionBtn.addEventListener("mouseout", () => {
const tooltip = document.querySelector(".tooltip");
if (tooltip) {
tooltip.remove();
}
});
actionBtnBar.appendChild(actionBtn);
});
actionGroupBar.appendChild(actionBtnBar);
floatBtnContainer.appendChild(actionGroupBar);
});
document.body.appendChild(floatBtnContainer);
})();