☰

Text Direction Selector

Create a sliding button to change text direction between RTL and LTR with improved behavior

目前为 2024-11-08 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Text Direction Selector
  3. // @name:ar      محدد اتجاه النص
  4. // @name:fr      Sélecteur de direction du texte
  5. // @namespace    http://tampermonkey.net/
  6. // @version      1.8
  7. // @description  Create a sliding button to change text direction between RTL and LTR with improved behavior
  8. // @description:ar  أنشئ زرًا منزلقًا لتغيير اتجاه النص بين من اليمين لليسار (RTL) ومن اليسار لليمين (LTR)
  9. // @description:fr  Crée un bouton coulissant pour changer la direction du texte entre RTL et LTR avec un comportement amélioré
  10. // @author       Your Name
  11. // @match        *://*/*
  12. // @grant        none
  13. // @license      MIT
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     // Create the floating button container
  20.     var buttonContainer = document.createElement('div');
  21.     buttonContainer.style.position = 'fixed';
  22.     buttonContainer.style.bottom = '20px';
  23.     buttonContainer.style.left = '-40px'; // Start slightly off the left edge
  24.     buttonContainer.style.zIndex = '1000';
  25.     buttonContainer.style.borderRadius = '50%';
  26.     buttonContainer.style.width = '50px';
  27.     buttonContainer.style.height = '50px';
  28.     buttonContainer.style.backgroundColor = '#3498db';
  29.     buttonContainer.style.display = 'flex';
  30.     buttonContainer.style.alignItems = 'center';
  31.     buttonContainer.style.justifyContent = 'center';
  32.     buttonContainer.style.cursor = 'pointer';
  33.     buttonContainer.style.color = 'white';
  34.     buttonContainer.style.fontSize = '20px';
  35.     buttonContainer.style.textAlign = 'center';
  36.     buttonContainer.style.lineHeight = '50px';
  37.     buttonContainer.style.opacity = '0.8';
  38.     buttonContainer.style.transition = 'left 0.3s ease'; // Smooth sliding effect
  39.     buttonContainer.innerHTML = '⇔';
  40.     document.body.appendChild(buttonContainer);
  41.  
  42.     // Create the LTR option button
  43.     var ltrButton = document.createElement('div');
  44.     ltrButton.innerText = 'LTR';
  45.     ltrButton.style.padding = '10px';
  46.     ltrButton.style.cursor = 'pointer';
  47.     ltrButton.style.backgroundColor = '#2ecc71';
  48.     ltrButton.style.color = 'white';
  49.     ltrButton.style.borderRadius = '5px';
  50.     ltrButton.style.marginBottom = '5px';
  51.     ltrButton.style.textAlign = 'center';
  52.     ltrButton.style.display = 'none';
  53.     ltrButton.style.opacity = '0.9';
  54.     ltrButton.style.transition = 'opacity 0.3s ease';
  55.     ltrButton.style.marginRight = '5px';
  56.     buttonContainer.insertBefore(ltrButton, buttonContainer.firstChild);
  57.  
  58.     // Create the RTL option button
  59.     var rtlButton = document.createElement('div');
  60.     rtlButton.innerText = 'RTL';
  61.     rtlButton.style.padding = '10px';
  62.     rtlButton.style.cursor = 'pointer';
  63.     rtlButton.style.backgroundColor = '#e74c3c';
  64.     rtlButton.style.color = 'white';
  65.     rtlButton.style.borderRadius = '5px';
  66.     rtlButton.style.textAlign = 'center';
  67.     rtlButton.style.display = 'none';
  68.     rtlButton.style.opacity = '0.9';
  69.     rtlButton.style.transition = 'opacity 0.3s ease';
  70.     rtlButton.style.marginLeft = '5px';
  71.     buttonContainer.appendChild(rtlButton);
  72.  
  73.     // Toggle the button's position on click without affecting itself
  74.     buttonContainer.addEventListener('click', function(event) {
  75.         event.stopPropagation(); // Prevent the document click event from triggering
  76.         if (buttonContainer.style.left === '-40px') {
  77.             buttonContainer.style.left = '37px'; // Move fully into view
  78.             rtlButton.style.display = 'block';
  79.             ltrButton.style.display = 'block';
  80.         } else {
  81.             buttonContainer.style.left = '-40px'; // Hide partially off-screen
  82.             rtlButton.style.display = 'none';
  83.             ltrButton.style.display = 'none';
  84.         }
  85.     });
  86.  
  87.     // Set text direction to RTL on RTL button click
  88.     rtlButton.addEventListener('click', function() {
  89.         document.body.style.direction = 'rtl';
  90.     });
  91.  
  92.     // Set text direction to LTR on LTR button click
  93.     ltrButton.addEventListener('click', function() {
  94.         document.body.style.direction = 'ltr';
  95.     });
  96.  
  97.     // Close the button if clicked outside
  98.     document.addEventListener('click', function(event) {
  99.         if (!buttonContainer.contains(event.target)) {
  100.             buttonContainer.style.left = '-40px'; // Hide the button
  101.             rtlButton.style.display = 'none';
  102.             ltrButton.style.display = 'none';
  103.         }
  104.     });
  105. })();