Toggle Zoom

Extend image zoom modes with scale-to-width and scale-to-height of window
当前为 2020-12-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Toggle Zoom
// @namespace   Nickel
// @description Extend image zoom modes with scale-to-width and scale-to-height of window
// @version     0.4
// @license     GNU General Public License v3
// @copyright   2020, Nickel
// @author      Nickel
// @grant       none
// @run-at      document-start
// @noframes
// @include     *
// ==/UserScript==


(function(){

function unscaled() {
    img.removeAttribute( "width" );
    img.removeAttribute( "height" );
    mode = "unscaled";
}
function scaleToWidth() {
    img.removeAttribute( "height" );
    img.width = document.body.clientWidth;
    // do it again due to scrollbars that may have (dis)appeared
    img.width = document.body.clientWidth;
    mode = "scaleToWidth";
}
function scaleToHeight() {
    img.removeAttribute( "width" );
    img.height = document.body.clientHeight;
    // do it again due to scrollbars that may have (dis)appeared
    img.height = document.body.clientHeight;
    mode = "scaleToHeight";
}

function setTitle() {
    if( typeof titleBase === "undefined" ){
        return;
    }

    if( mode == "unscaled" ) {
        document.title = titleBase;
    }
    else {
        document.title = titleBase + " — " + mode + " (" + (100*img.width/img.naturalWidth).toFixed(0) + "%)";
    }
}

function toggle() { 
    if( (img.naturalWidth / img.naturalHeight) > (document.body.clientWidth / document.body.clientHeight) ) {
        if( mode == "unscaled" ) {
            scaleToHeight();

            // next is scaleToWidth
            img.style.cursor = "zoom-out";
        }
        else if( mode == "scaleToHeight" || mode == "doScaleToFit" ) {
            scaleToWidth();

            // next is unscaled
            if( img.naturalWidth > document.body.clientWidth ) {
                img.style.cursor = "zoom-in";
            }
            else {
                img.style.cursor = "zoom-out";
            }
        }
        else {
            unscaled();

            // next is scaleToHeight
            img.style.cursor = "zoom-in";
        }
    }
    else {
        if( mode == "unscaled" ) {
            scaleToWidth();

            // next is scaleToHeight
            img.style.cursor = "zoom-out";
        }
        else if( mode == "scaleToWidth" || mode == "doScaleToFit" ) {
            scaleToHeight();

            // next is unscaled
            if( img.naturalHeight > document.body.clientHeight ) {
                img.style.cursor = "zoom-in";
            }
            else {
                img.style.cursor = "zoom-out";
            }
        }
        else {
            unscaled();

            // next is scaleToWidth
            img.style.cursor = "zoom-in";
        }
    }

    setTitle();
}

function initialize(){
    if( initialized == true ) return;
    initialized = true;
    
    // Firefox does some weird shit
    img.style.marginTop = "0";

    titleBase = document.title.replace( / — Scaled.*$/, "" );
    
    // set initial mode by pretending "previous" mode and toggling
    if( (img.naturalWidth > document.body.clientWidth) || (img.naturalHeight > document.body.clientHeight) ) {
        mode = "doScaleToFit";
    }
    else {
        mode = "doUnscaled";
    }
    toggle();
  
    // add new left mouse button event listener
    img.addEventListener( "click", function(e) {
        if( e.button === 0 ) {
            toggle();
        }
    }, true );
    // NOTE: if browser default event listener is still active, put above one on
    // `document` instead of `img` and add a `e.stopPropagation()` after `toggle()`.
}

var initialized = false;
var img = document.images[0];
if( typeof img === 'undefined' ) return;
if( img.src != window.location.href ) return;

// get image metadata as early as possible
wait = setInterval( function() {
  if( img.naturalWidth !== 0 && img.naturalHeight !== 0 && document.title !== "" ) {
        clearInterval(wait);
        initialize();
    }
}, 10 );

// also try initializing when image finishes loading
img.onload = initialize;

})();