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
// ==UserScript==
// @name         plurk Imagehover
// @namespace    http://tampermonkey.net/
// @version      0.123
// @description  YES!
// @author       NOKO
// @match        https://www.plurk.com/*
// @grant        none
// ==/UserScript==

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

    var ImageHoverOver = function(e){
        if(e.target.dataset.hovered){return;}
        e.target.dataset.hovered = true;

        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("mouseout", getImageHoverOut(img));
    };
    var getImageHoverMove = function(img){
        return function(e){
            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 getImageHoverOut = function(img){
        return function(e){
            img.style.display='none';
        };
    };
    var inject = function(e){
        if (e.animationName == 'nodeInserted')
        {
            e.target.addEventListener("mouseover", ImageHoverOver);
        }
    };
    document.addEventListener('animationstart', inject, false);
})();