☰

Hide/Show ruby text/Furigana (hotkey & on-screen button)

Add an on-screen button and hotkey to toggle furigana on an off

Version au 18/10/2020. Voir la dernière version.

// ==UserScript==
// @name         Hide/Show ruby text/Furigana (hotkey & on-screen button)
// @description  Add an on-screen button and hotkey to toggle furigana on an off
// @version      1.2
// @match        <all_urls>
// @grant        none
// @namespace    https://greasyfork.org/users/683917
// ==/UserScript==

(function() {



  /* CONFIGURATION */


  // If left as "", it uses the key under ESC (independed of the keyboard layout). When customized the keyboard layout is respected.
  const HOTKEY = ""; 

  // Show or hide the onscreen button. Doesn't affect the hotkey.
  const ONSCREEN_BUTTON_ENABLED = true;

  // This is inserted verbatim into the CSS for the button, so for example replacing "left" with "right" will put the button on the right of the screen.
  const ONSCREEN_BUTTON_POSITION = "top:5px;left:5px";

  // Enable or disable for the button to be hidden unless the mouse is near.
  const AUTO_HIDE_ENABLED = true;

  // Set the size of the auto hide area
  const AUTO_HIDE_AREA_DIMENSIONS = "width:200px;height:100px";


  /*---------------*/



  const css_visible = 'rt {visibility:visible;}';
  const css_hidden = 'rt {visibility:hidden;}';
  const box_text_visible = 'ふりがな：見';
  const box_text_hidden = 'ふりがな：隠';

  var show_furigana = true;

  window.addEventListener('load', function() {

    //Only activate script if <ruby> tags are actually used on the website
    if(document.getElementsByTagName("ruby").length > 0) {

      //Add global style
      var style = document.createElement('style');
      document.head.appendChild(style);
      style.type = 'text/css';
      //style.innerHTML = css_visible;

      if(ONSCREEN_BUTTON_ENABLED) {
        
        //Add auto hide area
        if(AUTO_HIDE_ENABLED) {
          var autohide_area = document.createElement('div');
          autohide_area.style = 'position:fixed;'+ONSCREEN_BUTTON_POSITION+';z-index:1001;background-color:rgba(0,0,0,0.0);margin:-5px;'+AUTO_HIDE_AREA_DIMENSIONS;
          autohide_area.onmouseover = function() { onscreen_button.style.display='initial'};
          autohide_area.onmouseout = function() {if(AUTO_HIDE_ENABLED) onscreen_button.style.display='none'};
          autohide_area.onclick = function(event) {
            autohide_area.style.display='none';
            document.elementFromPoint(event.clientX,event.clientY).click();
            autohide_area.style.display='initial';
          };
          document.body.appendChild(autohide_area);
        }

        //Add on-screen button
        var onscreen_button = document.createElement('div');
        onscreen_button.style = 'position:fixed;'+ONSCREEN_BUTTON_POSITION+';padding:2px 5px;z-index:1000;border-radius:5px;background-color:rgba(0,0,0,0.9);color:#ffffff;cursor:pointer;';
        onscreen_button.onclick = toggle_furigana;
        onscreen_button.innerHTML = box_text_visible;
        if(AUTO_HIDE_ENABLED) {
          onscreen_button.style.display='none'
        	autohide_area.appendChild(onscreen_button);
        } else {
          document.body.appendChild(onscreen_button);
        }
      }

      window.addEventListener('keydown', function(e) {
        if((HOTKEY != "" && e.key == HOTKEY) || (HOTKEY == "" && e.code == "Backquote")) {
          toggle_furigana();
        }
      },true);

      function toggle_furigana() {
        if(show_furigana) {
          show_furigana = false;
          style.innerHTML = css_hidden;
          onscreen_button.innerHTML = box_text_hidden;
        } else {
          show_furigana = true;
          style.innerHTML = css_visible;
          onscreen_button.innerHTML = box_text_visible;
        }
      }
    }
  });


})();