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
// ==UserScript==
// @name         plurk Imagehover
// @namespace    http://tampermonkey.net/
// @version      0.12
// @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.createElement('img');
        img.dataset.big = true;
        img.src = e.target.parentNode.href;
        img.style.position = 'fixed';
        document.body.append(img);
    };
    var ImageHoverMove = function(e){
        var padding = 25;
        var img = document.querySelector('img[src="'+e.target.parentNode.href+'"][data-big]');
        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 ImageHoverOut = function(e){
        var img = document.querySelector('img[src="'+e.target.parentNode.href+'"][data-big]');
        img.style.display='none';
    };
    var inject = function(e){
        if (e.animationName == 'nodeInserted')
        {
            e.target.addEventListener("mouseover", ImageHoverOver);
            e.target.addEventListener("mousemove", ImageHoverMove);
            e.target.addEventListener("mouseout", ImageHoverOut);
        }
    };
    document.addEventListener('animationstart', inject, false);
})();