☰

Reading Ruler

A firefox addon that adds a horizontal translucent bar that follows the cursor. A reading aid for pages with wiiiiiiide paragraphs. Ctrl+Shift+R to toggle.

目前为 2018-09-23 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Reading Ruler
  3. // @namespace    https://old.reddit.com/r/SomebodyMakeThis/comments/9huwbw/smt_a_firefox_addon_that_adds_a_horizontal/
  4. // @version      1.0.1
  5. // @description  A firefox addon that adds a horizontal translucent bar that follows the cursor. A reading aid for pages with wiiiiiiide paragraphs. Ctrl+Shift+R to toggle.
  6. // @author       /u/defproc
  7. // @match        */*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // quick options
  15.     const conf = {
  16.         colour: "#55cc551c",
  17.         lineColour: "#33aa3334", // colour of the bottom edge of the bar
  18.         scale: 1.05, // how many times the text's line-height should the bar's height be
  19.         shadow: 0.08, // opacity of the bar's shadow (0 to 1)
  20.     };
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.     const bar = document.createElement("div");
  29.     const styles = {
  30.         left: 0,
  31.         right: 0,
  32.         height: "1em",
  33.         backgroundColor: conf.colour,
  34.         borderBottom: conf.lineColour ? `1px ${conf.lineColour} solid` : void 0,
  35.         position: "fixed",
  36.         transform: "translateY(-50%)",
  37.         display: "none",
  38.         pointerEvents: "none",
  39.         transition: "120ms height",
  40.         boxShadow: `0 1px 4px rgba(0, 0, 0, ${conf.shadow})`,
  41.         zIndex: 9999999
  42.     };
  43.     Object.keys(styles).forEach(function(k){ bar.style[k] = styles[k] });
  44.     document.body.addEventListener("mousemove", function(ev){
  45.         bar.style.top = ev.clientY + "px";
  46.         if(visible){
  47.             const over = document.elementFromPoint(ev.clientX, ev.clientY);
  48.             const size = window.getComputedStyle(over).getPropertyValue("line-height");
  49.             const [m, num, unit] = (size && size.match(/([\d\.]+)([^\d]+)/)) || [];
  50.             bar.style.height = m ? num * conf.scale + unit : "1em";
  51.         }
  52.     });
  53.     let visible = false;
  54.     const toggle = function(){
  55.         visible = !visible;
  56.         document.body.appendChild(bar);
  57.         bar.style.display = visible ? "block" : "none";
  58.     };
  59.     window.addEventListener("keypress", function(ev){
  60.         if(ev.ctrlKey && ev.altKey && ev.which == 114){
  61.             toggle();
  62.             ev.preventDefault();
  63.         }
  64.     });
  65.  
  66. })();