Text Direction Selector

Create a sliding button to change text direction between RTL and LTR with improved behavior
2024-11-08 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.
Ask a question, post a review, or report the script.
Wrap lines
// ==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';
        }
    });
})();