1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// ==UserScript==
// @name         plurk Imagehover
// @namespace    https://www.plurk.com/Nathan8489
// @version      0.1234
// @description  YES!
// @author       NOKO
// @match        https://www.plurk.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var style = document.createElement('style');
    style.innerHTML = `
        @keyframes Imagehover{from{outline-color: #fff;}to{outline-color: #000;}}
        a.pictureservices > img{animation-name: Imagehover;}
    `;
    document.head.append(style);

    var ImageHoverEnter = function(e){
        e.target.removeEventListener("mouseenter", ImageHoverEnter);
        var img = document.querySelector('img[src="'+e.target.parentNode.href+'"][data-big]');
        if(!img){
            img = document.createElement('img');
            img.dataset.big = true;
            img.src = e.target.parentNode.href;
            img.style.position = 'fixed';
            document.body.append(img);
        }
        e.target.addEventListener("mousemove", getImageHoverMove(img));
        e.target.addEventListener("mouseleave", getImageHoverLeave(img));
    };
    var getImageHoverMove = function(img){
        var requestId;
        return function(e){
            if(!(img.naturalHeight&&img.naturalWidth)){return;};
            if(requestId){cancelAnimationFrame(requestId);};
            requestId = requestAnimationFrame(function(){
                var padding = 25;
                var windowHeight = window.innerHeight;
                var windowWidth = window.innerWidth;
                var elementRect = e.target.getBoundingClientRect();
                var rightHanded = (e.clientX > windowWidth/2);
                var maxHeight = Math.min(img.naturalHeight, windowHeight-padding);
                var maxWidth = Math.min(img.naturalWidth, -2*padding+(rightHanded ? (elementRect.left) : (windowWidth-elementRect.left-elementRect.width)) );
                var ratio = Math.min(maxHeight / img.naturalHeight, maxWidth / img.naturalWidth);
                var height = img.naturalHeight * ratio;
                var width = img.naturalWidth * ratio;
                var top = Math.max(0,Math.min(windowHeight-height-padding,(e.clientY -height/2)));
                var left = rightHanded ? (e.clientX - width - padding) : (e.clientX + padding);
                img.style.height = height + 'px';
                img.style.width = width + 'px';
                img.style.top = top + 'px';
                img.style.left = left + 'px';
                img.style.display='';
            });
        };
    };
    var getImageHoverLeave = function(img){
        return function(e){
            requestAnimationFrame(function(){
                img.style.display='none';
            });
        };
    };
    var inject = function(e){
        if (e.animationName == 'Imagehover')
        {
            e.target.addEventListener("mouseover", ImageHoverEnter);
        }
    };
    document.addEventListener('animationstart', inject, false);
})();