// ==UserScript==
// @name         百度贴吧图片点击放大
// @namespace    https://greasyfork.org/users/51104
// @version      1.5.11.20170412
// @description  直接在当前页面查看图片（包括签名档）原图，支持原图的多开、拖拽、缩放和垂直或水平的滚动
// @include      *://tieba.baidu.com/p/*
// @include      *://tieba.baidu.com/f?*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @author       lliwhx
// @copyright    Copyright 2016-2017 lliwhx
// @license      MIT License
// @downloadURL none
// ==/UserScript==

(function(window) {
    "use strict";
    //CSS
    GM_addStyle(".BDE_Image,.j_user_sign{cursor:alias;}#Tie_enlargeImage_parentDIV{position:fixed;z-index:1005;top:0;left:0;}.Tie_enlargeImage{position:absolute;box-shadow:1px 1px 10px #000;cursor:move;}.Tie_enlargeImage:hover{z-index:1006;}#Tie_setValue_DIV{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,0.5);}.Tie_definedDIV{position:absolute;z-index:10000;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);}.Tie_definedDIV_title{border-bottom:1px solid #f2f2f5;line-height:40px;font-size:15px;font-weight:700;padding:0 0 0 15px;}.Tie_definedDIV_point{padding:20px 40px;}.Tie_definedDIV_groupSubtitle{font-weight:bold;}.Tie_definedDIV_configItem{line-height:30px;margin:0 20px}.Tie_definedDIV_configItem select{margin:0.5em}.Tie_definedDIV_configItem br+label{margin-left:3em}.Tie_definedDIV_configItem input{vertical-align:middle;margin-right:0.5em}#Tie_debugConfig{margin:0.5em}.Tie_debugConfig_icon{position:relative;display:inline-block;top:4px;width:16px;height:16px;background-position:-350px -100px;background-image:url('https://img.t.sinajs.cn/t6/style/images/common/icon.png');background-repeat:no-repeat;}.Tie_bubble_DIV{position:absolute;visibility:hidden;max-width:280px;top:20%}.Tie_definedDIV_configItem label:hover+.Tie_bubble_DIV{visibility:visible}.Tie_bubble_content{position:relative;background:#fff;padding:6px 13px 6px 16px;border:1px solid #ccc;border-radius:3px;}.Tie_bubble_mainTxt{line-height:18px;}.Tie_bubble_bor{position:absolute;overflow:hidden;bottom:-14px;line-height:14px;}.Tie_bubble_line{border-color:#ccc transparent transparent transparent;}.Tie_bubble_br{margin:-1px 0 0 -14px;border-color:#fff transparent transparent transparent;}.Tie_bubble_bor i,.Tie_bubble_bor em{display:inline-block;width:0;height:0;border-width:7px;border-style:solid;vertical-align:top;overflow:hidden;}.Tie_definedDIV_SaveBtn{background-color:#f2f2f5;text-align:center;padding:10px 0;}.Tie_SaveBtn_a{background:#ff8140;color:#fff;font-size:15px;display:inline-block;padding:0 15px;line-height:35px;border-radius:3px;}.Tie_SaveBtn_a:hover{background:#f7671d}");
    //数据缓存
    var imageTarget,imageMouse,imageCount,imageButton,winResize,scriptDebug,log = function(){},
        mouseWheel = /Firefox/.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel",
        protocol = window.location.protocol||"http",
        doc = window.document,
        docHeight = doc.documentElement.clientHeight-6,
        docWidth = doc.documentElement.clientWidth-6,
        parentElement = doc.getElementById("j_p_postlist"),
        definedEvent = GM_getValue("definedEvent","click,click,1,0,1").split(","),
        repairDefinedEvent = GM_getValue("repairDefinedEvent",false),
        imageEvent = {
            init:function(e){ //主事件
                var target = e.target,image,imageSrc;
                if(e.button===0&&(target.className==="BDE_Image"||target.className==="j_user_sign")){
                    log("图片创建","开始");
                    imageSrc = target.src.match(/(baidu\.com|poco\.cn)\/.+\/(\w+\.[a-zA-Z]{3,4})(?:\?v=tbs){0,2}$/);
                    log("图片地址获取",function(){if(imageSrc)return "成功";else return "失败";},target.src);
                    if(!imageSrc) return false;
                    image = doc.createElement("img");
                    image.classList.add("Tie_enlargeImage");
                    image.src = imageSrc[1]==="baidu.com"?protocol + "//imgsrc.baidu.com/forum/pic/item/" + imageSrc[2]:target.src;
                    image.onerror = function(){
                        if(protocol==="https:"){
                            log("图片请求","https转向http");
                            protocol = "http:";
                            this.src = "http://imgsrc.baidu.com/forum/pic/item/" + imageSrc[2];
                        }else{
                            this.onerror = null;
                            this.onload = null;
                            imageSrc = null;
                            log("图片请求","失败");
                            alert("图片获取失败\n\n如多次获取失败\n请在设置里勾选“调试脚本”打印脚本日志并截图反馈给作者，以便更好的解决问题");
                        }
                    };
                    image.onload = function(){
                        log("图片创建","进行中");
                        var target = this,width = target.width,height = target.height,
                            Wboolean = width>docWidth,Hboolean = height>docHeight,
                            X = 6,Y = 6;
                        target.onerror = null;
                        target.onload = null;
                        imageSrc = null;
                        if(Hboolean&&!Wboolean)X = (docWidth-width)/2;
                        else if(!Hboolean&&!Wboolean){X = (docWidth-width)/2;Y = (docHeight-height)/2;}
                        else if(!Hboolean&&Wboolean)Y = (docHeight-height)/2;
                        target.imageData = {width:width,height:height,X:X,Y:Y}; //缓存当前图片数据
                        target.style.transform = "translate("+X+"px,"+Y+"px)";
                        parentDIV.appendChild(target);
                        log("图片创建",function(){target.id = Date.now();if(doc.getElementById(target.id))return "成功";else return "失败";},target.imageData);
                    };
                    image = null;
                }
            },
            StopPropagation:function(e){
                if(e.button===0&&e.target.className==="BDE_Image"){
                    e.stopPropagation(); //阻止冒泡，阻止图片原事件
                    log("阻止贴吧图片原事件","已执行");
                }
            },
            Down:function(e){
                var target = e.target,imageData = target.imageData;
                imageTarget = target;
                log("鼠标down事件",function(){if(!target.id)target.id = Date.now();return "开始";});
                if (e.button!==0)return false;
                e.preventDefault();
                e.stopPropagation();
                imageMouse = [e.clientX,e.clientY];
                imageCount = [imageData.X-imageMouse[0],imageData.Y-imageMouse[1],6-imageData.width,6-imageData.height]; //图片宽高的偏移量，图片左右边界预留量
                imageButton = true;
                doc.addEventListener("mousemove",imageEvent.Move);
                doc.addEventListener("mouseup",imageEvent.Up);
                log("鼠标down事件","结束");
            },
            Move:function(e){
                log("鼠标move事件","开始");
                var target = imageTarget,
                    X = e.clientX+imageCount[0],
                    Y = e.clientY+imageCount[1];
                imageButton = false;
                log("鼠标move事件","进行中","X:"+X+"Y:"+Y);
                if(X<imageCount[2]){ //左边界
                    target.style.transform = "translate("+imageCount[2]+"px,"+Y+"px)";
                    return false;
                }
                if(X>docWidth){ //右边界
                    target.style.transform = "translate("+docWidth+"px,"+Y+"px)";
                    return false;
                }
                if(Y<imageCount[3]){ //上边界
                    target.style.transform = "translate("+X+"px,"+imageCount[3]+"px)";
                    return false;
                }
                if(Y>docHeight){ //下边界
                    target.style.transform = "translate("+X+"px,"+docHeight+"px)";
                    return false;
                }
                target.style.transform = "translate("+X+"px,"+Y+"px)";
                log("鼠标move事件","结束",target.style.transform);
            },
            Up:function(e){
                log("鼠标up事件","开始");
                var target = imageTarget,RegEx;
                if(repairDefinedEvent&&e.clientX-imageMouse[0]===0&&e.clientY-imageMouse[1]===0){ //尝试修复关闭图片功能
                    log("尝试修复关闭图片功能","已执行");
                    imageButton = true;
                }else if(scriptDebug&&!imageButton&&e.clientX-imageMouse[0]===0&&e.clientY-imageMouse[1]===0){
                    log("鼠标click事件判断","\n一.操作时页面不在激活状态。请保证浏览器正在被操作，在执行一次\n二.关闭图片功能可能损坏，建议修复");
                }
                if(!imageButton){
                    RegEx = target.style.transform.match(/[-0-9.]+/g);
                    target.imageData.X = parseFloat(RegEx[0]);
                    target.imageData.Y = parseFloat(RegEx[1]);
                }
                imageTarget = null;
                imageMouse = null;
                imageCount = null;
                doc.removeEventListener("mousemove",imageEvent.Move);
                doc.removeEventListener("mouseup",imageEvent.Up);
                log("鼠标up事件","结束",imageButton);
            },
            Close:function(e){
                log("鼠标click事件","开始");
                var target = e.target;
                if(imageButton){
                    imageButton = null;
                    delete target.imageData;
                    parentDIV.removeChild(target);
                    log("鼠标click事件",function(){if(!doc.getElementById(target.id))return "成功";else return "失败";});
                }
            },
            Wheel:function(e){
                var target=e.target,imageData = target.imageData,
                    wheelKey = definedEvent[3],
                    width = imageData.width,height = imageData.height,
                    Wboolean = width>docWidth,Hboolean = height>docHeight,
                    wheelXY;
                log("鼠标wheel事件","开始",imageData);
                e.preventDefault();
                e.stopPropagation();
                if(wheelKey!=="0"){
                    if((e.ctrlKey&&wheelKey==="1")||(e.altKey&&wheelKey==="2")||(e.shiftKey&&wheelKey==="3")){ //判断图片缩放的组合键
                        log("鼠标wheel缩放事件","开始");
                        var eX = e.clientX,eY = e.clientY,
                            ratioX = (eX-imageData.X)/width,ratioY = (eY-imageData.Y)/height,
                            wheelRatio = width+(e.wheelDelta||-e.detail*40)*definedEvent[4];
                        imageData.width = wheelRatio<150?150:wheelRatio;
                        imageData.height = imageData.width*height/width;
                        imageData.X = eX-(imageData.width*ratioX);
                        imageData.Y = eY-(imageData.height*ratioY);
                        log("鼠标wheel缩放事件","进行中",imageData);
                        target.width = imageData.width;
                        target.style.transform = "translate("+imageData.X+"px,"+imageData.Y+"px)"; //基于鼠标位置的缩放
                        log("鼠标wheel缩放事件","结束",target.style.transform);
                        return false;
                    }
                }
                if(!Hboolean&&!Wboolean){log("鼠标wheel滚动事件","图片小于窗口");return false;}
                if(Hboolean){
                    wheelXY = imageData.Y+(-e.wheelDelta||e.detail*40)*definedEvent[2];
                    if(wheelXY>0||wheelXY<docHeight-height){
                        wheelXY = wheelXY>0?6:docHeight-height;
                    }
                    imageData.Y = wheelXY;
                    log("鼠标wheel垂直滚动事件","进行中",wheelXY);
                    target.style.transform = "translate("+imageData.X+"px,"+wheelXY+"px)";
                    log("鼠标wheel垂直滚动事件","结束",target.style.transform);
                }else if(Wboolean){
                    wheelXY = imageData.X+(-e.wheelDelta||e.detail*40)*definedEvent[2];
                    if(wheelXY>0||wheelXY<docWidth-width){
                        wheelXY = wheelXY>0?6:docWidth-width;
                    }
                    imageData.X = wheelXY;
                    log("鼠标wheel水平滚动事件","进行中",wheelXY);
                    target.style.transform = "translate("+wheelXY+"px,"+imageData.Y+"px)";
                    log("鼠标wheel水平滚动事件","结束",target.style.transform);
                }
            }
        };
    //创建父DIV
    var parentDIV = doc.createElement("div");
    parentDIV.id = "Tie_enlargeImage_parentDIV";
    doc.body.appendChild(parentDIV);
    //事件委托
    parentElement.addEventListener("click",imageEvent.StopPropagation,true);
    parentElement.addEventListener(definedEvent[0],imageEvent.init,true);
    parentDIV.addEventListener("mousedown",imageEvent.Down);
    parentDIV.addEventListener(definedEvent[1],imageEvent.Close);
    parentDIV.addEventListener(mouseWheel,imageEvent.Wheel);
    //释放缓存
    parentElement=null;
    //自定义设置
    var userEvent = {
        init:function(){
            this.create();
            this.Event();
        },
        create:function(){
            var definedDIV = doc.createElement("div"); //创建自定义DIV框架
            definedDIV.id = "Tie_setValue_DIV";
            definedDIV.innerHTML = "<div class='Tie_definedDIV'><div class='Tie_definedDIV_title'>自定义设置</div><div><div class='Tie_definedDIV_point'><div class='Tie_definedDIV_groupSubtitle'>请保证鼠标在图片上进行操作</div><div class='Tie_definedDIV_configItem'>默认支持鼠标左键拖拽图片</div><div class='Tie_definedDIV_configItem'>查看图片<select name='Tie_setValue'><option value='click'>单击</option><option value='dblclick'>双击</option></select></div><div class='Tie_definedDIV_configItem'>关闭图片<select name='Tie_setValue'><option value='click'>单击</option><option value='dblclick'>双击</option></select><br><label><input id='Tie_repairValue' type='checkbox'>尝试修复关闭图片功能</label></div><div class='Tie_definedDIV_configItem'>滚动图片<select name='Tie_setValue'><option value='1'>滚轮向上，上移/左移</option><option value='-1'>滚轮向下，上移/左移</option></select></div><div class='Tie_definedDIV_configItem'>缩放图片<select name='Tie_setValue'><option value='0'>关闭</option><option value='1'>Ctrl</option><option value='2'>Alt</option><option value='3'>Shift</option></select>+<select name='Tie_setValue'><option value='1'>滚轮向上放大</option><option value='-1'>滚轮向下放大</option></select></div><div class='Tie_definedDIV_configItem'>调试脚本<label><input id='Tie_debugConfig' type='checkbox'><i class='Tie_debugConfig_icon'></i></label><div class='Tie_bubble_DIV'><div class='Tie_bubble_content'><div class='Tie_bubble_mainTxt'>如果您的脚本出现问题，您可以打开调试功能。<strong>在页面进行平常的图片操作，将操作过后在浏览器控制台（快捷键：F12）输出的脚本日志截图反馈给作者</strong>，以便更好的解决问题。<br>注意，<strong>调试功能打开即生效。并且只在当前页面生效一次，刷新或关闭页面都会取消调试功能，需重新打开</strong>。<br>打开调试功能可能会增加内存占用、降低网页的反应速度甚至导致浏览卡顿。仅供维护使用，不建议一般用户打开调试功能。</div><div><span class='Tie_bubble_bor'><i class='Tie_bubble_line'></i><em class='Tie_bubble_br'></em></span></div></div></div></div></div></div><div class='Tie_definedDIV_SaveBtn'><a id='Tie_setValue_a' class='Tie_SaveBtn_a' href='javascript:void(0);'><span>确定</span></a></div></div>";
            doc.body.appendChild(definedDIV);
            definedDIV = null;
        },
        Event:function(){
            var definedDIV = doc.getElementById("Tie_setValue_DIV"),
                repairValue = doc.getElementById("Tie_repairValue"),
                debugConfig = doc.getElementById("Tie_debugConfig"),
                parentElement = doc.getElementById("j_p_postlist"),
                setValue = doc.getElementsByName("Tie_setValue"),
                oldDefinedEvent = definedEvent; //备份旧设置
            for(var i=0;i<5;i++){
                setValue[i].value = oldDefinedEvent[i];
            }
            if(setValue[3].value==="0")setValue[4].style.visibility = "hidden";
            setValue[3].onchange = function(){
                setValue[4].style.visibility = this.value==="0"?"hidden":"visible";
            };
            repairValue.checked = repairDefinedEvent;
            debugConfig.checked = scriptDebug;
            doc.getElementById("Tie_setValue_a").onclick = function(){
                definedEvent = [setValue[0].value,setValue[1].value,setValue[2].value,setValue[3].value,setValue[4].value];
                repairDefinedEvent = repairValue.checked;
                scriptDebug = debugConfig.checked;
                if(oldDefinedEvent[0]!==definedEvent[0]){
                    parentElement.removeEventListener(oldDefinedEvent[0],imageEvent.init,true);
                    parentElement.addEventListener(definedEvent[0],imageEvent.init,true);
                }
                if(oldDefinedEvent[1]!==definedEvent[1]){
                    parentDIV.removeEventListener(oldDefinedEvent[1],imageEvent.Close);
                    parentDIV.addEventListener(definedEvent[1],imageEvent.Close);
                }
                log = scriptDebug&&function(text,types,data){ //脚本调试，日志
                    if(typeof types==="function"){
                        types = types();
                    }
                    if(data===undefined)console.log(text,types);
                    else console.log(text,types,data);
                }||function(){};
                log("自定义属性设置","已执行",definedEvent+","+repairDefinedEvent);
                this.onclick = null;
                setValue[3].onchange = null;
                doc.body.removeChild(definedDIV);
                GM_setValue("definedEvent",definedEvent.toString());
                GM_setValue("repairDefinedEvent",repairDefinedEvent);
                definedDIV = null;repairValue = null;debugConfig = null;parentElement = null;setValue = null;oldDefinedEvent = null;
            };
        }
    };
    if(!GM_getValue("definedEvent")){
        userEvent.init();
    }
    GM_registerMenuCommand("自定义设置", function(){
        if(!doc.getElementById("Tie_setValue_DIV"))
            userEvent.init();
    });
    window.addEventListener("resize", function(){
        if(typeof winResize!==undefined){
            clearTimeout(winResize);
        }
        winResize = setTimeout(function(){
            docHeight = doc.documentElement.clientHeight-6;
            docWidth = doc.documentElement.clientWidth-6;
        },334);
    });
})(window);