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.
目前為
// ==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();
}
}
});
})();