Mythos Webpage Editor

The "Mythos Webpage Editor" script adds a Greek mythology-themed floating toolbar to webpages, enabling text editing with undo/redo options and customizable button positions. It also reveals font family details on copy, ideal for website designers and branding professionals seeking a unique, efficient editing tool.
当前为 2024-08-15 提交的版本，查看最新版本。
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name         Mythos Webpage Editor
// @namespace    https://aveusaid.wordpress.com
// @version      1.x
// @description  The "Mythos Webpage Editor" script adds a Greek mythology-themed floating toolbar to webpages, enabling text editing with undo/redo options and customizable button positions. It also reveals font family details on copy, ideal for website designers and branding professionals seeking a unique, efficient editing tool.
// @author       Usaid bin Khalid Khan
// @match        *://*/*
// @grant        none
// @license      CC BY-NC-ND 4.0 - https://creativecommons.org/licenses/by-nc-nd/4.0/
 
// ==/UserScript==
 
(function() {
    'use strict';
 
    const websiteUrl = 'https://aveusaid.wordpress.com';
    let isEditingEnabled = false;
    let editButton;
    let toolbar;
 
    // Enable editing mode
    const enableEditing = () => {
        document.querySelectorAll('*').forEach(elem => elem.setAttribute('contenteditable', 'true'));
        document.addEventListener('copy', handleCopy); // Add copy event listener
        isEditingEnabled = true;
        editButton.textContent = 'Deactivate Mythos';
        editButton.style.backgroundColor = '#ff6347'; // Hades' Flame
        showToolbar(); // Show toolbar when enabling editing
    };
 
    // Disable editing mode
    const disableEditing = () => {
        document.querySelectorAll('*').forEach(elem => elem.setAttribute('contenteditable', 'false'));
        document.removeEventListener('copy', handleCopy); // Remove copy event listener
        isEditingEnabled = false;
        editButton.textContent = 'Activate Mythos';
        editButton.style.backgroundColor = '#1e90ff'; // Athena's Wisdom
        hideToolbar(); // Hide toolbar when disabling editing
    };
 
    // Toggle between enabling and disabling editing
    const toggleEditing = () => {
        if (isEditingEnabled) {
            disableEditing();
        } else {
            enableEditing();
        }
    };
 
    // Handle copy event to include font family in clipboard
    const handleCopy = (event) => {
        const selection = window.getSelection();
        const selectedText = selection.toString();
 
        if (selectedText) {
            const range = selection.getRangeAt(0);
            const fontFamily = getComputedStyle(range.startContainer.parentElement).fontFamily;
            const textWithFont = `${selectedText}\n\nFont Family: ${fontFamily}`;
 
            // Modify clipboard data to include font family
            event.clipboardData.setData('text/plain', textWithFont);
            event.preventDefault();
        }
    };
 
    // Create and style the edit button
    const createEditButton = () => {
        editButton = document.createElement('button');
        editButton.textContent = 'Activate Mythos'; // Reference to Mythology
        editButton.id = 'edit-text-button';
        editButton.style.position = 'fixed';
        editButton.style.zIndex = '10000';
        editButton.style.backgroundColor = '#1e90ff'; // Athena's Wisdom
        editButton.style.color = 'white';
        editButton.style.border = 'none';
        editButton.style.padding = '10px 15px';
        editButton.style.borderRadius = '8px';
        editButton.style.fontSize = '16px';
        editButton.style.cursor = 'pointer';
        editButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
        editButton.style.transition = 'background-color 0.3s';
 
        // Position the button based on user preference
        const position = localStorage.getItem('editButtonPosition') || 'top-right';
        setButtonPosition(position);
 
        editButton.onclick = function() {
            toggleEditing(); // Toggle editing mode
        };
 
        document.body.appendChild(editButton);
    };
 
    // Set the button position
    const setButtonPosition = (position) => {
        switch (position) {
            case 'top-left':
                editButton.style.top = '10px';
                editButton.style.left = '10px';
                editButton.style.right = '';
                editButton.style.bottom = '';
                break;
            case 'bottom-right':
                editButton.style.bottom = '10px';
                editButton.style.right = '10px';
                editButton.style.top = '';
                editButton.style.left = '';
                break;
            case 'bottom-left':
                editButton.style.bottom = '10px';
                editButton.style.left = '10px';
                editButton.style.top = '';
                editButton.style.right = '';
                break;
            default: // top-right
                editButton.style.top = '10px';
                editButton.style.right = '10px';
                editButton.style.bottom = '';
                editButton.style.left = '';
                break;
        }
    };
 
    // Create and style the floating toolbar
    const createToolbar = () => {
        toolbar = document.createElement('div');
        toolbar.id = 'edit-toolbar';
        toolbar.style.position = 'fixed';
        toolbar.style.zIndex = '10001';
        toolbar.style.backgroundColor = '#333'; // Underworld's Darkness
        toolbar.style.color = 'white';
        toolbar.style.borderRadius = '8px';
        toolbar.style.padding = '10px';
        toolbar.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
        toolbar.style.display = 'none'; // Initially hidden
        toolbar.style.top = '50px'; // Adjust position as needed
        toolbar.style.right = '10px'; // Adjust position as needed
 
        const undoButton = createToolbarButton('↻ Undo - Mnemosyne', undoAction); // Mnemosyne, goddess of memory
        const redoButton = createToolbarButton('↺ Redo - Clio', redoAction); // Clio, muse of history
        const visitButton = createToolbarButton('🌟 Visit Delphi', visitWebsite); // Delphi, the oracle
 
        const positionSelect = createPositionSelect();
 
        toolbar.appendChild(undoButton);
        toolbar.appendChild(redoButton);
        toolbar.appendChild(visitButton);
        toolbar.appendChild(positionSelect);
 
        document.body.appendChild(toolbar);
    };
 
    // Create a button for the toolbar with Greek-themed icons
    const createToolbarButton = (text, action) => {
        const button = document.createElement('button');
        button.innerHTML = text; // Using innerHTML to include Unicode symbols
        button.style.backgroundColor = '#555'; // Hermes' Shade
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.padding = '5px 10px';
        button.style.borderRadius = '5px';
        button.style.margin = '2px';
        button.style.cursor = 'pointer';
        button.style.fontSize = '14px';
        button.onclick = action;
 
        return button;
    };
 
    // Create a select element for choosing button position
    const createPositionSelect = () => {
        const select = document.createElement('select');
        select.style.backgroundColor = '#555'; // Hermes' Shade
        select.style.color = 'white';
        select.style.border = 'none';
        select.style.padding = '5px';
        select.style.borderRadius = '5px';
        select.style.margin = '2px';
        select.style.fontSize = '14px';
 
        const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
        positions.forEach(pos => {
            const option = document.createElement('option');
            option.value = pos;
            option.textContent = `Position: ${pos.replace('-', ' ')}`;
            select.appendChild(option);
        });
 
        select.value = localStorage.getItem('editButtonPosition') || 'top-right';
        select.onchange = (event) => {
            const newPosition = event.target.value;
            localStorage.setItem('editButtonPosition', newPosition);
            setButtonPosition(newPosition);
        };
 
        return select;
    };
 
    // Show the toolbar
    const showToolbar = () => {
        if (!toolbar) createToolbar();
        toolbar.style.display = 'block';
    };
 
    // Hide the toolbar
    const hideToolbar = () => {
        if (toolbar) toolbar.style.display = 'none';
    };
 
    // Undo action
    const undoAction = () => {
        document.execCommand('undo');
    };
 
    // Redo action
    const redoAction = () => {
        document.execCommand('redo');
    };
 
    // Open author's website
    const visitWebsite = () => {
        window.open(websiteUrl, '_blank');
    };
 
    // Initialize the button and toolbar
    const initializeScript = () => {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => {
                createEditButton();
                createToolbar();
            });
        } else {
            createEditButton();
            createToolbar();
        }
    };
 
    // Run initialization function
    initializeScript();
 
    // Prevent toolbar from being editable
    document.addEventListener('keydown', (event) => {
        if (isEditingEnabled) {
            if (event.target === toolbar) {
                event.preventDefault();
            }
        }
    });
 
})();