Expand avatars on hover for Kiwifarms Users
// ==UserScript==
// @name Kiwifarms - Expand Avatars on Hover
// @namespace typpi.online
// @version 1.2.1
// @description Expand avatars on hover for Kiwifarms Users
// @author Nick2bad4u
// @match kiwifarms.com/*
// @match kiwifarms.net/*
// @match kiwifarms.ms/*
// @match kiwifarms.ru/*
// @match kiwifarms.is/*
// @match kiwifarms.top/*
// @match kiwifarms.tw/*
// @match kiwifarms.hk/*
// @match kiwifarms.nl/*
// @match sneed.today/*
// @match kiwifarms.pl/*
// @match kiwifarms.st/*
// @connect kiwifarms.st/*
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @homepageURL https://github.com/Nick2bad4u/UserStyles
// @license Unlicense
// @resource https://www.google.com/s2/favicons?sz=64&domain=kiwifarms.st
// @icon https://www.google.com/s2/favicons?sz=64&domain=kiwifarms.st
// @icon64 https://www.google.com/s2/favicons?sz=64&domain=kiwifarms.st
// @tag kiwifarms
// ==/UserScript==
/* eslint-disable no-undef */
(function () {
'use strict';
// Default settings
const defaultSize = 400;
const defaultScale = 2;
let avatarSize = GM_getValue('avatarSize', defaultSize);
let avatarScale = GM_getValue('avatarScale', defaultScale);
// Add custom styles for the expanded avatar
const style = document.createElement('style');
style.textContent = `
.expanded-avatar {
position: absolute;
border: 2px solid #000;
border-radius: 50%;
max-width: ${avatarSize}px;
max-height: ${avatarSize}px;
z-index: 9999;
display: none;
transform: scale(${avatarScale});
}
`;
document.head.appendChild(style);
// Create an element to show the expanded avatar
const expandedAvatar = document.createElement('img');
expandedAvatar.className = 'expanded-avatar';
document.body.appendChild(expandedAvatar);
// Function to show the expanded avatar
function showExpandedAvatar(event) {
const avatar = event.target;
expandedAvatar.src = avatar.src;
expandedAvatar.style.left = `${event.pageX + 60}px`;
expandedAvatar.style.top = `${event.pageY + 60}px`;
expandedAvatar.style.display = 'block';
}
// Function to hide the expanded avatar
function hideExpandedAvatar() {
expandedAvatar.style.display = 'none';
}
// Attach event listeners to avatar images
document.querySelectorAll('.avatar img').forEach((avatar) => {
avatar.addEventListener('mouseover', showExpandedAvatar);
avatar.addEventListener('mouseout', hideExpandedAvatar);
});
// Update avatar position on mouse move
document.addEventListener('mousemove', (event) => {
if (expandedAvatar.style.display === 'block') {
expandedAvatar.style.left = `${event.pageX + 60}px`;
expandedAvatar.style.top = `${event.pageY + 60}px`;
}
});
// Function to set avatar size
function setAvatarSize() {
const size = prompt('Enter the avatar size (in pixels, max 400):', avatarSize);
if (size !== null) {
// Check if the input is a valid number and within the limit
const parsedSize = parseInt(size, 10);
if (!isNaN(parsedSize) && parsedSize > 0 && parsedSize <= 400) {
avatarSize = parsedSize;
GM_setValue('avatarSize', avatarSize);
updateStyle();
} else {
alert('Please enter a valid positive number up to 400 for avatar size.');
}
}
}
// Function to set avatar scale
function setAvatarScale() {
const scale = prompt('Enter the avatar scale (e.g., 2 for 200%):', avatarScale);
if (scale !== null) {
// Check if the input is a valid number
const parsedScale = parseFloat(scale);
if (!isNaN(parsedScale) && parsedScale > 0 && parsedScale <= 2) {
avatarScale = parsedScale;
GM_setValue('avatarScale', avatarScale);
updateStyle();
} else {
alert('Please enter a valid positive number for avatar scale.');
}
}
}
// Function to update the custom styles
function updateStyle() {
style.textContent = `
.expanded-avatar {
position: absolute;
border: 2px solid #000;
border-radius: 50%;
max-width: ${avatarSize}px;
max-height: ${avatarSize}px;
z-index: 9999;
display: none;
transform: scale(${avatarScale});
}
`;
}
// Register menu commands to set avatar size and scale
GM_registerMenuCommand('Set Avatar Hover Size', setAvatarSize);
GM_registerMenuCommand('Set Avatar Hover Scale', setAvatarScale);
})();