deviantART easy scroll

Scrolls image to middle and allows horizontal scroll on mouse move event

Versione datata 31/05/2014. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name        deviantART easy scroll
// @description Scrolls image to middle and allows horizontal scroll on mouse move event
// @namespace   https://greasyfork.org/users/2366-graenfur
// @author      Graenfur
// @include     *deviantart.com*
// @version     3
// @grant       none
// ==/UserScript==


// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback){
    var script = document.createElement("script");
    script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
    script.addEventListener('load', function() {
        var script = document.createElement("script");
        script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
        document.body.appendChild(script);
    }, false);
    document.body.appendChild(script);
}

function main() {
    // Note, jQ replaces $ to avoid conflicts.
    //console.log("There are " + jQ('a').length + " links on this page.");
    
    var b = jQ('body'), //body
        bw = b.width(), //body width
        ph = jQ('.dev-page-view'), //page holder
        ih = jQ('.dev-view-deviation'), //image holder
        sd = 0; //scrollable distance
    
    //force large images to be scrollable inline instead of making the whole page as wide as image
    jQ('<style>.view-mode-full_zoomed .dev-view-deviation{overflow-x:scroll;}</style>').appendTo('head');
    
    b.on("click mouseup",".dev-view-deviation img", function () {
        //refreshing variables
        ph = jQ('.dev-page-view');
        ih = jQ('.dev-view-deviation');
        
        var img = jQ(this), //image
            iw = img.attr("width"), //image width
            hasZoomIn = ph.hasClass("cursor-zoom-in"), //can be zoomed in
            hasZoomOut = ph.hasClass("cursor-zoom-out"); //can be zoomed out
            
        sd = iw - bw; //scrollable distance
        
        
        if(hasZoomIn && !hasZoomOut){
            jQ('html, body, .dev-view-deviation').stop().animate({
                scrollTop:(img.offset().top),
                scrollLeft:sd/2 //scrolls to zoomed images middle
            },400,function(){
                if(ph.hasClass('view-mode-full_zoomed')){ //after full zoom
                    b.addClass('animated'); //signal that mousemove can add scrolling
                }
            });
        }else if(hasZoomOut){
            jQ('html, body, .dev-view-deviation').stop().animate({
                scrollTop:0,
                scrollLeft:0
            },400);
            b.removeClass('scrollable animated');
        }
    });
    
    var mouseX = 0,
        sp = 0, //scroll position
        xp = 0; //x position
    b.on('mousemove','.dev-view-deviation',function(e){
        mouseX = e.pageX;
        mouseX += (mouseX-(bw/2))*0.3; //increases mousemove/scroll sensitivity closer to edges
        if(b.hasClass('animated')){
            b.addClass('scrollable'); //allows scrolling after image is zoomed
        }
    });
    
    //scroll easing loop
    var loop = setInterval(function(){
        if(b.hasClass('scrollable')){
            xp += (mouseX - xp) / 10; //easig
            sp = (xp/bw)*sd; //converts mouse position to scroll position
            jQ('.dev-view-deviation').scrollLeft(sp);
        }else{
            xp = bw/2; //force scrolling to start from middle instead of left edge
        }
    }, 20);
}

addJQuery(main);