Notion Floating Heads Toggle

Toggle visibility of floating head icons in Notion with a movable, color-changing icon button
目前為 2024-09-11 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Notion Floating Heads Toggle
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Toggle visibility of floating head icons in Notion with a movable, color-changing icon button
// @match        https://www.notion.so/*
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let isVisible = true;
    let isDragging = false;
    let startX, startY, startLeft, startTop;

    function toggleFloatingHeads() {
        const containers = document.querySelectorAll('.notion-presence-container');
        containers.forEach(container => {
            container.style.display = isVisible ? 'none' : '';
        });
        isVisible = !isVisible;
        updateButtonAppearance();
    }

    function updateButtonAppearance() {
        const button = document.getElementById('toggleFloatingHeadsBtn');
        if (button) {
            const iconColor = isVisible ? '#2eaadc' : '#ff4d4d';
            button.querySelector('svg').style.fill = iconColor;
            button.title = isVisible ? 'Hide Floating Heads' : 'Show Floating Heads';
        }
    }

    function createFloatingButton() {
        const button = document.createElement('button');
        button.id = 'toggleFloatingHeadsBtn';
        button.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
            </svg>
        `;
        button.style.cssText = `
            position: fixed;
            bottom: 20px;
            right: 70px;
            z-index: 9999;
            background-color: white;
            border: none;
            cursor: move;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        `;
        button.addEventListener('click', toggleFloatingHeads);
        button.addEventListener('mousedown', startDragging);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', stopDragging);
        document.body.appendChild(button);
        updateButtonAppearance();
        restorePosition(button);
    }

    function startDragging(e) {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        startLeft = parseInt(window.getComputedStyle(this).left);
        startTop = parseInt(window.getComputedStyle(this).top);
        e.preventDefault(); // Prevent text selection
    }

    function drag(e) {
        if (!isDragging) return;
        const button = document.getElementById('toggleFloatingHeadsBtn');
        const newLeft = startLeft + e.clientX - startX;
        const newTop = startTop + e.clientY - startY;
        button.style.left = `${newLeft}px`;
        button.style.top = `${newTop}px`;
        button.style.right = 'auto';
        button.style.bottom = 'auto';
    }

    function stopDragging() {
        if (!isDragging) return;
        isDragging = false;
        const button = document.getElementById('toggleFloatingHeadsBtn');
        savePosition(button);
    }

    function savePosition(button) {
        const position = {
            left: button.style.left,
            top: button.style.top
        };
        GM_setValue('buttonPosition', JSON.stringify(position));
    }

    function restorePosition(button) {
        const savedPosition = GM_getValue('buttonPosition');
        if (savedPosition) {
            const position = JSON.parse(savedPosition);
            button.style.left = position.left;
            button.style.top = position.top;
            button.style.right = 'auto';
            button.style.bottom = 'auto';
        }
    }

    function init() {
        console.log('Notion Floating Heads Toggle: Script started');
        createFloatingButton();
        console.log('Notion Floating Heads Toggle: Floating button created');
    }

    // Run the script after a short delay to ensure Notion's UI is loaded
    setTimeout(init, 2000);
})();