Create a sliding button to change text direction between RTL and LTR with improved behavior
От
// ==UserScript==
// @name Text Direction Selector
// @name:ar محدد اتجاه النص
// @name:fr Sélecteur de direction du texte
// @namespace http://tampermonkey.net/
// @version 1.8
// @description Create a sliding button to change text direction between RTL and LTR with improved behavior
// @description:ar أنشئ زرًا منزلقًا لتغيير اتجاه النص بين من اليمين لليسار (RTL) ومن اليسار لليمين (LTR)
// @description:fr Crée un bouton coulissant pour changer la direction du texte entre RTL et LTR avec un comportement amélioré
// @author Your Name
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Create the floating button container
var buttonContainer = document.createElement('div');
buttonContainer.style.position = 'fixed';
buttonContainer.style.bottom = '20px';
buttonContainer.style.left = '-40px'; // Start slightly off the left edge
buttonContainer.style.zIndex = '1000';
buttonContainer.style.borderRadius = '50%';
buttonContainer.style.width = '50px';
buttonContainer.style.height = '50px';
buttonContainer.style.backgroundColor = '#3498db';
buttonContainer.style.display = 'flex';
buttonContainer.style.alignItems = 'center';
buttonContainer.style.justifyContent = 'center';
buttonContainer.style.cursor = 'pointer';
buttonContainer.style.color = 'white';
buttonContainer.style.fontSize = '20px';
buttonContainer.style.textAlign = 'center';
buttonContainer.style.lineHeight = '50px';
buttonContainer.style.opacity = '0.8';
buttonContainer.style.transition = 'left 0.3s ease'; // Smooth sliding effect
buttonContainer.innerHTML = '⇔';
document.body.appendChild(buttonContainer);
// Create the LTR option button
var ltrButton = document.createElement('div');
ltrButton.innerText = 'LTR';
ltrButton.style.padding = '10px';
ltrButton.style.cursor = 'pointer';
ltrButton.style.backgroundColor = '#2ecc71';
ltrButton.style.color = 'white';
ltrButton.style.borderRadius = '5px';
ltrButton.style.marginBottom = '5px';
ltrButton.style.textAlign = 'center';
ltrButton.style.display = 'none';
ltrButton.style.opacity = '0.9';
ltrButton.style.transition = 'opacity 0.3s ease';
ltrButton.style.marginRight = '5px';
buttonContainer.insertBefore(ltrButton, buttonContainer.firstChild);
// Create the RTL option button
var rtlButton = document.createElement('div');
rtlButton.innerText = 'RTL';
rtlButton.style.padding = '10px';
rtlButton.style.cursor = 'pointer';
rtlButton.style.backgroundColor = '#e74c3c';
rtlButton.style.color = 'white';
rtlButton.style.borderRadius = '5px';
rtlButton.style.textAlign = 'center';
rtlButton.style.display = 'none';
rtlButton.style.opacity = '0.9';
rtlButton.style.transition = 'opacity 0.3s ease';
rtlButton.style.marginLeft = '5px';
buttonContainer.appendChild(rtlButton);
// Toggle the button's position on click without affecting itself
buttonContainer.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent the document click event from triggering
if (buttonContainer.style.left === '-40px') {
buttonContainer.style.left = '37px'; // Move fully into view
rtlButton.style.display = 'block';
ltrButton.style.display = 'block';
} else {
buttonContainer.style.left = '-40px'; // Hide partially off-screen
rtlButton.style.display = 'none';
ltrButton.style.display = 'none';
}
});
// Set text direction to RTL on RTL button click
rtlButton.addEventListener('click', function() {
document.body.style.direction = 'rtl';
});
// Set text direction to LTR on LTR button click
ltrButton.addEventListener('click', function() {
document.body.style.direction = 'ltr';
});
// Close the button if clicked outside
document.addEventListener('click', function(event) {
if (!buttonContainer.contains(event.target)) {
buttonContainer.style.left = '-40px'; // Hide the button
rtlButton.style.display = 'none';
ltrButton.style.display = 'none';
}
});
})();