// ==UserScript==
// @name         快速上传图片至图床
// @namespace   Violentmonkey Scripts
// @version      1.0
// @match        *://*/*
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @require      https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js
// @require      https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js
// @grant       GM_registerMenuCommand
// @author       yaohunzhanyue
// @description  点击内置按钮，可自动上传本地图片到免费图床，自动生成图片嵌入代码并写入系统粘贴板，直接在帖子中粘贴即可快速插入本地图片或在线图片。
// @downloadURL none
// ==/UserScript==

GM_registerMenuCommand("上传图层", function(){document.getElementById("xxzzyyxx123").click()});

'use strict';
$("#compose .cell:eq(3)").append('<div style="float:right;"><span id="xxzzyyxx123" style="display:inline-block;height:26px;line-height:26px;padding:0 8px;background-image:url(/static/img/bg_blended_light.png);border:1px solid rgba(80,80,90,.2);border-radius:3px;outline:none;color:#333333;text-shadow:0 1px 0 #ffffff;font-weight:700;cursor:pointer;" onclick="javascript:$(\'#popup\').fadeIn();"><li class="fa fa-picture-o" style="line-height:10px;"></li> &nbsp;插入图片</span></div>');
var popupdiv = '\
    <div id="popup" style="width:400px; height: auto; padding-bottom: 10px; border-radius: 10px; background-color: #ffffff; box-shadow: 0 0 5px #444444; display: none; position: absolute; left: 50%; margin-left: -200px; top: 250px; z-index:1000;">\
  <div style="font-size:22px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid #cccccc; border-radius: 10px 10px 0 0; background: #e2e2e2; text-align: center; cursor: move;">V2EX Image Uploader</div>\
  <span id="close" style="display: block; position: absolute; right: 10px; top: 10px; font-size: 12px; color: #ffffff; background-color: #444444; padding: 2px 6px; border-radius: 6px; cursor: pointer;" onMouseOver="this.style.color=\'#ff0000\';" onMouseOut="this.style.color=\'#ffffff\';">关闭</span>\
  <div style="margin: 10px 20px;">\
    <div style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">嵌入本地图片</div>\
    <input type="file" accept="image/*" id="upfile" name="file" style="background: #ffffff; border: 1px solid #cccccc; width: 290px; height: 24px; outline: none;" >\
    <input type="button" class="btn" style="vertical-align:top; height: 26px; width: 60px; border: 1px solid #cccccc; margin-right: 0px; font-weight: 600; font-size: 14px;" value="嵌入" disabled="disabled"/>\
    <span id="tip1" style="font-size: 13px; color: red; margin-top: 10px; display: none;"></span>\
    <div style="font-size: 18px; font-weight: 600; margin: 20px 0 10px 0;">嵌入网络图片</div>\
    <div style="height: 26px;">\
      <input type="text" id="image_link" style="vertical-align:top; width: 280px; height: 24px; line-height: 26px; border: 1px solid #cccccc; background: #ffffff; outline: none; padding: 0 5px; font-size: 12px;" placeholder="请输入网络图片的链接"/>\
      <input type="button" class="btn" style="vertical-align:top; height: 26px; width: 60px; border: 1px solid #cccccc; margin-right: 0px; font-weight: 600; font-size: 14px;" value="嵌入"/>\
    </div>	\
    <span id="tip2" style="font-size: 13px; color: red; margin-top: 10px; display: none;"></span>\
    <div id="image_show" style="margin-top: 20px; display: none;"></div>\
  </div>\
</div>\
';
$("body").append(popupdiv);

new ClipboardJS('.btn'); // 粘贴板js脚本初始化
$("#popup").draggable(); // 弹出框可以拖拽

$("#image_link").change(function(e){
    var image_link = $("#image_link").val();
    $(".btn:eq(1)").attr("data-clipboard-text", '<img style="max-width:100%;" src="' + image_link + '" alt="V2EX image uploaded by TsingScript" />');
});

$(".btn:eq(1)").click(function(){
    var image_link = $("#image_link").val();
    if(image_link == ""){
        alert("图片地址为空！");
    }else{
        $("#image_show").html('<img style="display:block; margin:0 auto; max-width:60%; max-height:200px; box-shadow:0 0 5px #444444;" src="' + image_link + '" alt="V2EX image thumb" onload="online_image_success();" onerror="online_image_fail();">');
    }
});

$("#close").click(function(){ // 关闭弹框
    $("#popup").fadeOut(); // 淡出效果
});

$("#upfile").change(function(e){
    $("#tip1").css("display","block");
    $("#tip1").html("图片正在上传中...");
    var image_form = new FormData();
    image_form.append('smfile',this.files[0]);
    $.ajax({
        url: 'https://sm.ms/api/upload',
        type: 'POST',
        data: image_form,
        mimeType: 'multipart/form-data',
        contentType: false,
        cache: false,
        processData: false,
        dataType: 'json',
        success: function(data) {
            console.log(data);
            $("#tip1").html("图片上传成功！请点击【嵌入】按钮生成图片嵌入代码。");
            $(".btn").removeAttr("disabled");
            $(".btn:first").click(function(){
                $("#tip1").html("图片嵌入代码已写入剪贴板，直接到文中粘贴即可。");
            });
            var status = data['code'];
            if(status == 'success'){
                var image_url = data['data']['url'];
            }
            if(status == 'exception'){ // 重复上传
                var image_url = data['message'].slice(51);
            }
            $(".btn:first").attr("data-clipboard-text", '<img style="max-width:100%;" src="' + image_url + '" alt="V2EX image uploaded by TsingScript" />');
            $("#image_show").css("display","block");
            $("#image_show").html('<img style="display:block; margin:0 auto; max-width:60%; max-height:200px; box-shadow:0 0 5px #444444;" src="' + image_url + '" alt="V2EX image thumb">');
            // $(".btn:first").click();
        },
        error: function(XMLResponse) {
            alert("error:" + XMLResponse.responseText)
        }
    });
});

window.online_image_success = function (){ // 由于存在防盗链，因此远程图片可能显示不了。外部要是调用函数，需要挂靠到window上。
    $("#tip2").css("display","block");
    $("#tip2").html("图片嵌入代码已写入剪贴板，直接到文中粘贴即可。");
    $("#image_show").css("display","block");
}
window.online_image_fail = function (){ // 防盗链，远程图片显示异常。
    $("#tip2").html("由于该网站的图片存在防盗链设置，不可直接嵌入本文，可以下载原图到本地，再上传嵌入。");
    $("#image_show").css("display","none");
}