☰

dA_dragFullscreen

drag too large image in fullscreen

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

// ==UserScript==
// @name         dA_dragFullscreen
// @namespace    http://phi.pf-control.de/userscripts/dA_dragFullscreen
// @version      1.0
// @description  drag too large image in fullscreen
// @author       Dediggefedde
// @match        https://www.deviantart.com/*/art/*
// @require    	 http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js
// @grant        none
// ==/UserScript==

/* globals $*/
/* jshint esnext:true */

(function() {
    'use strict';

    /* //works, but too much drag on very large images
    function addDragger(){
        var el=$("div.ReactModal__Content--after-open img").not("[dA_dragFullscreen]").attr("dA_dragFullscreen",1).draggable();
        if(el.length>0)console.log(el);
    }
    setInterval(addDragger,1000);
    */

    let tracking=false;
    let trackingMoved=false;
    let copyImg, img, highRec;

    let cImgW,cImgH,imgW,imgH, winW,winH;

    function leaveTracking(){
        tracking=false;
        copyImg.hide();
        highRec.hide();
    }

    function addDragger(){
        let el=$("div.ReactModal__Content--after-open img").not("[dA_dragFullscreen]").attr("dA_dragFullscreen",1).attr("draggable","false");
        if(el.length>0){
            img=el;

            winW=window.innerWidth;
            winH=window.innerHeight;
            let ratImg=img.width()/img.height();
            let ratWin=winW/winH;
            copyImg=img.clone().attr("dA_dragFullscreen",2).css({
                position:"fixed",'max-height':winH*0.8+"px",'max-width':winW*0.8+"px",top:winH*0.1+"px",left:winW*0.1+"px",
                opacity:0.8,display:"none",cursor:"move",'z-index':2
            });
            if(ratImg>ratWin){//wider than window
                copyImg.css({top:(winH-winW*0.8/ratImg)/2+"px"});
                console.log("top");
            }else{
                copyImg.css({left:(winW-winH*0.8*ratImg)/2+"px"});
                console.log("left");
            }
            img.after(copyImg);

            highRec=$("<div id='dA_dragFullscreen_highR'></div>").css({
                position:"fixed",border:"2px solid #475c4daa",'box-shadow':"0px 0px 10px white inset",display:"none",'box-sizing':"border-box",'z-index':3
            });
            img.after(highRec);

            cImgW=copyImg.width();
            cImgH=copyImg.height();

            $(document).on("mouseleave",function (ev){
                leaveTracking();
            });
            img.on("mousedown",function(ev){

                imgW=img.width();
                imgH=img.height();

                if(imgW>winW||imgH>winH){
                    tracking=true;
                }

                trackingMoved=false;
                ev.preventDefault();
                ev.stopPropagation();
            }).on("mouseup",function(ev){
                leaveTracking()
                ev.preventDefault();
                ev.stopPropagation();
            }).on("click",function(ev){
                if(trackingMoved){
                    ev.preventDefault();
                    ev.stopPropagation();
                }
            }).on("mousemove",function(ev){
                if(!tracking)return;
                if(!trackingMoved){
                    copyImg.show();
                    highRec.show();
                }
                trackingMoved=true;
            });
            copyImg.on("mousemove",function(ev){
                if(!tracking)return;
                trackingMoved=true;

                imgW=img.width();
                imgH=img.height();

                let maxOffX=imgW-winW;
                let maxOffY=imgH-winH;

                let highw=winW/imgW*cImgW;
                let highh=winH/imgH*cImgH;

                let cImgOff=copyImg.offset();

                let x = ev.pageX-cImgOff.left-highw/2;
                let y = ev.pageY-cImgOff.top-highh/2;

                if(x<0)x=0;
                else if(x>cImgW-highw)x=cImgW-highw;
                if(y<0)y=0;
                else if(y>cImgH-highh)y=cImgH-highh;

                highRec.css({width:highw+"px",height:highh+"px",top: cImgOff.top+y+"px", left: cImgOff.left+x+"px"});

                let scrollX=x/(cImgW-highw)*maxOffX;
                let scrollY=y/(cImgH-highh)*maxOffY;

                console.log(x/(cImgW-highw),y/(cImgH-highh))

                $("div.ReactModal__Content--after-open").parent().scrollLeft(scrollX).scrollTop(scrollY);

            }).on("mouseup",function(ev){
                leaveTracking()
                ev.preventDefault();
                ev.stopPropagation();
            });
        }
    }
    setInterval(addDragger,1000);
})();