☰

Toggle Zoom

Extend image zoom modes with scale-to-width and scale-to-height of window

当前为 2022-01-24 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Toggle Zoom
  3. // @namespace   Nickel
  4. // @description Extend image zoom modes with scale-to-width and scale-to-height of window
  5. // @version     0.4.1
  6. // @license     GNU General Public License v3
  7. // @copyright   2022, Nickel
  8. // @author      Nickel
  9. // @grant       none
  10. // @run-at      document-start
  11. // @noframes
  12. // @include     *
  13. // ==/UserScript==
  14.  
  15.  
  16. (function(){
  17.  
  18. function unscaled() {
  19.     img.removeAttribute( "width" );
  20.     img.removeAttribute( "height" );
  21.     mode = "unscaled";
  22. }
  23. function scaleToWidth() {
  24.     img.removeAttribute( "height" );
  25.     img.width = document.documentElement.clientWidth;
  26.     // do it again due to scrollbars that may have (dis)appeared
  27.     img.width = document.documentElement.clientWidth;
  28.     mode = "scaleToWidth";
  29. }
  30. function scaleToHeight() {
  31.     img.removeAttribute( "width" );
  32.     img.height = document.documentElement.clientHeight;
  33.     // do it again due to scrollbars that may have (dis)appeared
  34.     img.height = document.documentElement.clientHeight;
  35.     mode = "scaleToHeight";
  36. }
  37.  
  38. function setTitle() {
  39.     if( typeof titleBase === "undefined" ){
  40.         return;
  41.     }
  42.  
  43.     if( mode == "unscaled" ) {
  44.         document.title = titleBase;
  45.     }
  46.     else {
  47.         document.title = titleBase + " — " + mode + " (" + (100*img.width/img.naturalWidth).toFixed(0) + "%)";
  48.     }
  49. }
  50.  
  51. function toggle() { 
  52.     if( (img.naturalWidth / img.naturalHeight) > (document.documentElement.clientWidth / document.documentElement.clientHeight) ) {
  53.         if( mode == "unscaled" ) {
  54.             scaleToHeight();
  55.  
  56.             // next is scaleToWidth
  57.             img.style.cursor = "zoom-out";
  58.         }
  59.         else if( mode == "scaleToHeight" || mode == "doScaleToFit" ) {
  60.             scaleToWidth();
  61.  
  62.             // next is unscaled
  63.             if( img.naturalWidth > document.documentElement.clientWidth ) {
  64.                 img.style.cursor = "zoom-in";
  65.             }
  66.             else {
  67.                 img.style.cursor = "zoom-out";
  68.             }
  69.         }
  70.         else {
  71.             unscaled();
  72.  
  73.             // next is scaleToHeight
  74.             img.style.cursor = "zoom-in";
  75.         }
  76.     }
  77.     else {
  78.         if( mode == "unscaled" ) {
  79.             scaleToWidth();
  80.  
  81.             // next is scaleToHeight
  82.             img.style.cursor = "zoom-out";
  83.         }
  84.         else if( mode == "scaleToWidth" || mode == "doScaleToFit" ) {
  85.             scaleToHeight();
  86.  
  87.             // next is unscaled
  88.             if( img.naturalHeight > document.documentElement.clientHeight ) {
  89.                 img.style.cursor = "zoom-in";
  90.             }
  91.             else {
  92.                 img.style.cursor = "zoom-out";
  93.             }
  94.         }
  95.         else {
  96.             unscaled();
  97.  
  98.             // next is scaleToWidth
  99.             img.style.cursor = "zoom-in";
  100.         }
  101.     }
  102.  
  103.     setTitle();
  104. }
  105.  
  106. function initialize() {
  107.     if( initialized == true ) return;
  108.     initialized = true;
  109.     
  110.     // Firefox does some weird shit
  111.     img.style.marginTop = "0";
  112.  
  113.     titleBase = document.title.replace( / — Scaled.*$/, "" );
  114.     
  115.     // set initial mode by setting do* and toggling
  116.     if( (img.naturalWidth > document.documentElement.clientWidth) || (img.naturalHeight > document.documentElement.clientHeight) ) {
  117.         mode = "doScaleToFit";
  118.     }
  119.     else {
  120.         mode = "doUnscaled";
  121.     }
  122.     toggle();
  123.   
  124.     // add new left mouse button event listener
  125.     img.addEventListener( "click", function(e) {
  126.         if( e.button === 0 ) {
  127.             toggle();
  128.         }
  129.     }, true );
  130.     // NOTE: if browser default event listener is still active, put above one on
  131.     // `document` instead of `img` and add a `e.stopPropagation()` after `toggle()`.
  132. }
  133.  
  134. var initialized = false;
  135. var img = document.images[0];
  136. if( typeof img === 'undefined' ) return;
  137. if( img.src != window.location.href ) return;
  138.  
  139. // get image metadata as early as possible
  140. wait = setInterval( function() {
  141.   if( img.naturalWidth !== 0 && img.naturalHeight !== 0 && document.title !== "" ) {
  142.         clearInterval(wait);
  143.         initialize();
  144.     }
  145. }, 10 );
  146.  
  147. // also try initializing when image finishes loading
  148. img.onload = initialize;
  149.  
  150. })();