Scrolls image to middle and allows horizontal scroll on mouse move event
От
// ==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);