// ==UserScript==
// @name        提取HTML内容
// @namespace   LiuZhengdong's Script
// @match       https://*/*
// @grant       none
// @version     1.2
// @author      Liu
// @license     MIT
// @run-at      document-body
// @description 利用此插件只需要按住alt/option键即可提取html元素 2022/8/19 15:35:23
// 
// @downloadURL none
// ==/UserScript==

(() => {

  /**
   * 设置选取框的背景颜色
   */
  let backgroundColor = "rgba(255,0,0,0.5)"
  /**
   * 设置选取框的边框颜色
   */
  let borderColor = "rgba(255,0,0,0.9)"
  /**
   * 设置复制文本的前缀
   */
  let preffix = `Come from [${document.title}](${window.location.href});\n`

  /**
   * 此方法用于自定义html的净化方法
   */
  function purifyHTML(purehtml) {
    let purifiedhtml = purehtml
    return purifiedhtml;
  }

  /**
   * 此方法自定义最终的HTML如何处理
   */
  function handleHTML(finalhtml) {
    navigator.clipboard.writeText(finalhtml).then(() => {
      l("截取HTML成功")
    })
  }

  let selectBox = CreateSelectBox();
  window.onmousemove = (ev) => {
    /**
     * 如果没有按住alt/option键的话
     */
    if (!ev.altKey) {
      HideSelectBox(selectBox);
      return;
    }
    selectBox.style.display = ""


    let element = document.elementsFromPoint(ev.clientX, ev.clientY)[2];
    let eleRect = element.getBoundingClientRect();
    let clientX = eleRect.left;
    let clientY = eleRect.top;
    let margin = 5;

    /**
     * Box的点击事件
     */
    selectBox.onclick = () => {
      let purehtml = element.outerHTML;
      let purifiedhtml = purifyHTML(purehtml)
      let finalhtml = preffix + purifiedhtml;
      handleHTML(finalhtml)
    }
    //console.log(clientX,clientY,window.scrollY)

    //console.log(eleRect.left - margin)


    selectBox.style.position = "absolute";
    selectBox.style.left = window.scrollX + clientX - margin + 'px';

    //console.log(eleRect)
    //console.log(selectBox)
    selectBox.style.top = window.scrollY + clientY - margin + 'px';
    selectBox.style.width = eleRect.width + 2 * margin + 'px';
    selectBox.style.height = eleRect.height + 2 * margin + 'px';
    selectBox.style.zIndex = "99"

    //console.log(selectBox)

  }




  function l(elements) {
    console.log(elements)
    return elements
  }

  /**
   * 初始化一个盒子
   */
  function CreateSelectBox() {
    let selectBox = document.createElement("div");
    selectBox.style.backgroundColor = backgroundColor
    selectBox.style.borderStyle = "dashed";
    selectBox.style.borderWidth = "5px";
    selectBox.style.borderRadius = "5px";
    selectBox.style.borderColor = borderColor;
    selectBox.style.opacity = "0.5";
    selectBox.style.transitionProperty = "all"
    selectBox.style.transitionDuration = "0.5s"
    document.body.appendChild(selectBox);
    return selectBox;
  }


  function HideSelectBox(selectBox) {
    selectBox.style.display = "none";
  }





})()