Show magazine subscription information on hover
目前为
// ==UserScript==
// @name Magazine Pop-up
// @namespace Violentmonkey Scripts
// @match https://kbin.social/*
// @grant GM_getValue
// @version 1.1
// @author -
// @license MIT
// @description Show magazine subscription information on hover
// ==/UserScript==
// Select all magazine URL elements
let magazineURLs = document.querySelectorAll('a.magazine-inline');
// Create a pop-up element to display the sidebar information
const popUp = document.createElement('div');
popUp.className = 'pop-up';
popUp.style.zIndex = '9999'; // Set the desired z-index value
// Apply box styling to the pop-up element
popUp.style.border = '1px solid #363434'; // Customize the border style
popUp.style.backgroundColor = '#2c2c2c'; // Customize the background color
popUp.style.padding = '10px'; // Customize the padding
popUp.style.width = '440px';
popUp.style.height = '165px';
popUp.style.borderRadius = '8px';
popUp.style.overflow = 'none'; // Add this line to enable scrolling
// Adjust the spacing within the pop-up content
popUp.style.lineHeight = '1.0'; // Reduce line height to make content closer
popUp.style.margin = '0'; // Remove margin to reduce spacing
// Adjust the spacing for specific elements within the pop-up
popUp.querySelectorAll('p').forEach((paragraph) => {
paragraph.style.margin = '0 0 10px'; // Adjust margin as desired
});
popUp.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((heading) => {
heading.style.margin = '0 0 5px'; // Adjust margin as desired
});
popUp.querySelectorAll('ul, ol').forEach((list) => {
list.style.margin = '0 0 5px'; // Adjust margin as desired
});
popUp.querySelectorAll('li').forEach((listItem) => {
listItem.style.margin = '0 0 5px'; // Adjust margin as desired
});
// Function to fetch sidebar information for a given URL
async function fetchSidebarInfo(url) {
const cachedContent = GM_getValue(url); // Check if content is cached
if (cachedContent) {
return cachedContent;
} else {
try {
const response = await fetch(url);
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const sidebarElement = doc.querySelector('section.magazine.section'); // Adjust the selector based on the structure of the sidebar on the page
const sidebarHTML = sidebarElement.innerHTML;
return sidebarHTML;
} catch (error) {
console.error('Error fetching sidebar information:', error);
return null;
}
}
}
function showPopUp(magazineURL) {
// Check if the pop-up is already appended to the document body
// Get the URL from the magazine link
const url = magazineURL.getAttribute('href');
// Fetch the sidebar information for the URL
fetchSidebarInfo(url)
.then((sidebarHTML) => {
if (sidebarHTML) {
// Create a temporary container element to manipulate the sidebar content
const tempContainer = document.createElement('div');
tempContainer.innerHTML = sidebarHTML;
// Remove unnecessary items from the magazine
const itemsToRemove = [
'h3',
'.magazine__description',
'.mb-2',
'.mt-3',
'.meta',
'.magazine__rules'
];
itemsToRemove.forEach((selector) => {
const element = tempContainer.querySelector(selector);
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
});
if (!document.body.contains(popUp)) {
// Clear the previous content of the pop-up
popUp.innerHTML = '';
// Move the magazine's image figure to the top of the pop-up
const figureElement = tempContainer.querySelector('img');
if (figureElement) {
figureElement.style.maxWidth = '145px'; // Adjust the desired maximum width for the image
figureElement.style.width = 'auto'; // Allow the image to resize while maintaining aspect ratio
figureElement.style.borderRadius = '8px'; // Add border radius to the image
const popUpContent = document.createElement('div');
popUpContent.className = 'pop-up-content';
popUpContent.style.display = 'flex'; // Enable flexbox layout
popUpContent.style.alignItems = 'flex-start'; // Align items at the top
// Move the magazine header and subscribe section to the right of the image
const headerElement = tempContainer.querySelector('header');
const magazineName = tempContainer.querySelector('.magazine__name');
const subscribeElement = tempContainer.querySelector('.magazine__subscribe');
if (headerElement || magazineName || subscribeElement) {
const infoWrapper = document.createElement('div');
infoWrapper.style.display = 'flex'; // Enable flexbox layout
infoWrapper.style.flexDirection = 'column'; // Stack items vertically
infoWrapper.style.marginLeft = '25px'; // Add margin to the left side of the header and subscribe sections
infoWrapper.style.marginTop = '-25px'; // Add margin to the left side of the header and subscribe sections
infoWrapper.style.alignItems = 'center'; // Center items vertically
infoWrapper.style.gap = '5px'; // Adjust the desired spacing between the header and subscribe sections
if (headerElement) {
headerElement.style.textAlign = 'center'; // Center align the header
headerElement.style.fontFamily = 'Arial, sans-serif'; // Adjust the font family
headerElement.style.fontSize = '12.5px'; // Adjust the font size
headerElement.style.marginBottom = '-10px'; // Adjust the negative margin bottom value to move the figure higher
infoWrapper.appendChild(headerElement);
}
if (magazineName) {
magazineName.style.fontFamily = 'Arial, sans-serif'; // Adjust the font family
magazineName.style.fontSize = '13.5px'; // Adjust the font size
magazineName.style.overflow = 'hidden'; // Add this line to hide the overflowed text
magazineName.style.textOverflow = 'ellipsis'; // Add this line to display ellipsis (...) for overflowed text
magazineName.style.whiteSpace = 'auto'; // Add this line to prevent line wrapping
infoWrapper.appendChild(magazineName);
}
if (subscribeElement) {
subscribeElement.style.marginTop = '0'; // Remove the margin at the top of the subscribe section
subscribeElement.style.fontFamily = 'Arial, sans-serif'; // Adjust the font family
subscribeElement.style.fontSize = '10px'; // Adjust the font size
infoWrapper.appendChild(subscribeElement);
}
popUpContent.appendChild(figureElement);
popUpContent.appendChild(infoWrapper);
} else {
popUpContent.appendChild(figureElement);
}
// Append the pop-up content to the pop-up element
popUp.appendChild(popUpContent);
}
// Position the pop-up element relative to the magazine URL
const magazineURLRect = magazineURL.getBoundingClientRect();
const popUpHeight = popUp.offsetHeight;
const popUpWidth = popUp.offsetWidth;
let popUpTop, popUpLeft;
if (magazineURLRect.bottom + popUpHeight > window.innerHeight) {
popUpTop = magazineURLRect.top - popUpHeight;
} else {
popUpTop = magazineURLRect.bottom;
}
if (magazineURLRect.left + popUpWidth > window.innerWidth) {
popUpLeft = window.innerWidth - popUpWidth;
} else {
popUpLeft = magazineURLRect.left;
}
// Apply the calculated position to the pop-up element
popUp.style.position = 'fixed';
popUp.style.top = `${popUpTop}px`;
popUp.style.left = `${popUpLeft}px`;
// Add the pop-up element to the document body
document.body.appendChild(popUp);
// Apply fade-in animation to the pop-up
popUp.style.opacity = '0';
popUp.style.transition = 'opacity 0.3s';
requestAnimationFrame(() => {
popUp.style.opacity = '1';
});
}
}
})
.catch((error) => {
console.error('Error fetching sidebar information:', error);
});
}
// Function to hide the pop-up
function hidePopUp() {
// Check if the cursor is still inside the pop-up
if (popUp.matches(':hover')) {
return;
}
// Apply fade-out animation to the pop-up
popUp.style.opacity = '0';
popUp.style.transition = 'opacity 0.3s';
// Remove the pop-up element from the document body after the animation ends
setTimeout(() => {
document.body.removeChild(popUp);
}, 1000);
}
// Function to attach hover functionality to the magazine URLs
function attachHoverFunctionality() {
magazineURLs.forEach((magazineURL) => {
let hideTimeout; // Variable to store the timeout ID
// Add event listener to show the pop-up when hovering over the magazine URL or the pop-up itself
magazineURL.addEventListener('mouseenter', () => {
// Clear the timeout if it exists (to prevent premature hiding)
clearTimeout(hideTimeout);
// Set a timeout of 1000ms (1 second) before showing the pop-up
hideTimeout = setTimeout(() => {
showPopUp(magazineURL);
}, 2000);
// Position the pop-up immediately above the link if near the bottom of the window
const magazineURLRect = magazineURL.getBoundingClientRect();
const popUpHeight = popUp.offsetHeight;
if (magazineURLRect.bottom + popUpHeight > window.innerHeight) {
const popUpTop = magazineURLRect.top - popUpHeight;
const popUpLeft = magazineURLRect.left;
// Apply the calculated position to the pop-up element
popUp.style.position = 'fixed';
popUp.style.top = `${popUpTop}px`;
popUp.style.left = `${popUpLeft}px`;
}
});
// Add event listener to hide the pop-up when the cursor leaves the magazine URL or the pop-up itself
magazineURL.addEventListener('mouseleave', () => {
// Clear the timeout to prevent the pop-up from appearing
clearTimeout(hideTimeout);
// Set a delay of 1000ms (1 second) before hiding the pop-up
hideTimeout = setTimeout(() => {
hidePopUp();
}, 1000);
});
// Add event listener to hide the pop-up when the cursor leaves the pop-up
popUp.addEventListener('mouseleave', () => {
// Set a delay of 1000ms (1 second) before hiding the pop-up
hideTimeout = setTimeout(() => {
hidePopUp();
}, 1000);
});
});
}
// Function to observe changes in the page and attach hover functionality to new magazine URLs
function observePageChanges() {
const observer = new MutationObserver(() => {
magazineURLs = document.querySelectorAll('a.magazine-inline');
attachHoverFunctionality();
});
const config = { childList: true, subtree: true };
observer.observe(document.body, config);
}
// Call the function to attach hover functionality to existing magazine URLs
attachHoverFunctionality();
// Call the function to observe page changes and attach hover functionality to newly added magazine URLs
observePageChanges();