☰

Enhance

Enlarge all p-Tags on a page with AltGr+p, reduce with AltGr+l, reset with AltGr-o. ALtGr+b sets all p-Tags to have black text and a white background. AltGr+m tries to apply some styles that should make any page look better.

  1. // ==UserScript==
  2. // @name        Enhance
  3. // @namespace   meyerk.com
  4. // @match       *://*/*
  5. // @grant       none
  6. // @version     1.6
  7. // @author      MeyerK
  8. // @description Enlarge all p-Tags on a page with AltGr+p, reduce with AltGr+l, reset with AltGr-o. ALtGr+b sets all p-Tags to have black text and a white background. AltGr+m tries to apply some styles that should make any page look better.
  9. // ==/UserScript==
  10.  
  11. class enhance
  12. {
  13.   constructor()
  14.   {
  15.     this.rightAltKeyIsOn = false;
  16.     this.zoomInc = 3;
  17.     this.currentZoomStep = 0;
  18.     this.maxZoomSteps = 7;
  19.   }
  20.  
  21.   toggleAltGr(ev)
  22.   {
  23.     if (ev.code == 'AltRight')
  24.     {
  25.       this.rightAltKeyIsOn = (ev.type == 'keydown') ? true : false;
  26.     }
  27.   }
  28.  
  29.   do(ev)
  30.   {
  31.     if (this.rightAltKeyIsOn)
  32.     {
  33.       if (ev.code == 'KeyP')
  34.       {
  35.         if (this.currentZoomStep < this.maxZoomSteps)
  36.         {
  37.           this.currentZoomStep = this.currentZoomStep + 1;
  38.           this.setFontSize('inc');
  39.         }
  40.         else
  41.         {
  42.           this.currentZoomStep = this.maxZoomSteps;
  43.         }
  44.       }
  45.  
  46.       if (ev.code == 'KeyL')
  47.       {
  48.         if (this.currentZoomStep > 0)
  49.         {
  50.           this.currentZoomStep = this.currentZoomStep - 1;
  51.           this.setFontSize('dec');
  52.         }
  53.         else
  54.         {
  55.           this.currentZoomStep = 0;
  56.         }
  57.       }
  58.  
  59.       if (ev.code == 'KeyO')
  60.       {
  61.         this.currentZoomStep = 0;
  62.         this.resetFontSize();
  63.       }
  64.  
  65.       if (ev.code == 'KeyB')
  66.       {
  67.         this.setPropertyOfPs('color', 'black');
  68.         this.setPropertyOfPs('backgroundColor', 'white');
  69.       }
  70.  
  71.       if (ev.code == 'KeyM')
  72.       {
  73.         let htmlEl = document.getElementsByTagName('html')[0];
  74.         if (htmlEl.style.maxWidth != "70ch")
  75.         {
  76.           htmlEl.style.maxWidth = "70ch";
  77.           htmlEl.style.padding = "3em 1em";
  78.           htmlEl.style.margin = "auto";
  79.           htmlEl.style.lineHeight = "1.75";
  80.           htmlEl.style.fontSize = "1.25em";
  81.         }
  82.         else
  83.         {
  84.           htmlEl.style.maxWidth = "";
  85.           htmlEl.style.padding = "";
  86.           htmlEl.style.margin = "";
  87.           htmlEl.style.lineHeight = "";
  88.           htmlEl.style.fontSize = "";
  89.         }
  90.       }
  91.     }
  92.   }
  93.  
  94.   setFontSize(act)
  95.   {
  96.     let newSize = null;
  97.     let currentSize = null;
  98.     let pElems = document.querySelectorAll('p');
  99.  
  100.     pElems.forEach((pElem) =>
  101.     {
  102.       currentSize = parseInt(window.getComputedStyle(pElem).fontSize, 10);
  103.  
  104.       if (this.currentZoomStep == 0)
  105.       {
  106.         newSize = '';
  107.       }
  108.       else
  109.       {
  110.         if (act == 'inc')
  111.         {
  112.           newSize = (currentSize + this.zoomInc) + 'px';
  113.         }
  114.         else if (act == 'dec')
  115.         {
  116.           newSize = (currentSize - this.zoomInc) + 'px';
  117.         }
  118.       }
  119.  
  120.       pElem.style.fontSize = newSize;
  121.  
  122.     });
  123.   }
  124.  
  125.   resetFontSize()
  126.   {
  127.     this.setPropertyOfPs('fontSize', '');
  128.   }
  129.  
  130.   setPropertyOfPs(propName, val)
  131.   {
  132.     var i = 0;
  133.     var pElems = null;
  134.  
  135.     pElems = document.querySelectorAll('p');
  136.     pElems.forEach((pElem) =>
  137.     {
  138.       pElem.style[propName] = val;
  139.     });
  140.   }
  141. }
  142.  
  143. var e = new enhance();
  144. document.addEventListener('keydown', e.toggleAltGr.bind(e));
  145. document.addEventListener('keyup',   e.toggleAltGr.bind(e));
  146. document.addEventListener('keyup',   e.do.bind(e));