FloatingWindow

Adds FloatingWindow
当前为 2023-10-15 提交的版本，查看最新版本。
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/477480/1265097/FloatingWindow.js
换行
// ==UserScript==
// @name             FloatingWindow
// @version          1.0
// @grant            GM_addStyle
// @grant            GM_getValue
// @grant            GM_setValue
// @description Adds FloatingWindow
// ==/UserScript==
 
GM_addStyle(`
.floatingWindowContainer {
  width:200px;
  position:fixed;
  opacity:0.5;
}
.floatingWindowTitleBar {
  background-color:#fff;
  font-weight:bold;
  text-align:center;
  cursor:pointer;
}
.floatingWindowContainer.active {
	opacity:1;
}
`);
 
class FloatingWindow {
  constructor(title) {
    this.container = document.createElement("div");
    this.container.className = "floatingWindowContainer";
    this.container.id = title.replaceAll(/\W+/g,"_");
    this.windowPosition = GM_getValue(`${this.container.id}_position`,{x:window.innerWidth*0.8,y:100});
    this.container.style.left = `${this.windowPosition.x}px`;
    this.container.style.top = `${this.windowPosition.y}px`;
    this.titleBar = document.createElement("div");
    this.titleBar.className = "floatingWindowTitleBar";
    this.titleBar.appendChild(document.createTextNode(title));
    this.titleBar.addEventListener("pointerdown",(e)=>{this.pointerDownHandler(e);});
    this.titleBar.addEventListener("pointermove",(e)=>{this.pointerMoveHandler(e);});
    this.titleBar.addEventListener("pointerleave",(e)=>{this.pointerMoveHandler(e);});
    this.titleBar.addEventListener("pointerout",(e)=>{this.pointerMoveHandler(e);});
    this.titleBar.addEventListener("pointerup",(e)=>{this.pointerUpHandler(e);});
    this.container.appendChild(this.titleBar);
    this.body = document.createElement("div");
    this.body.className = "floatingWindowBody";
    this.windowOpen = GM_getValue(`${this.container.id}_open`,true);
    if (this.windowOpen) this.container.classList.add("active");
    this.body.style.display = this.windowOpen ? "block" : "none";
    this.container.appendChild(this.body);
    document.body.appendChild(this.container);
    this.pointerValues = {
      dragging:false,
      newPosition:null,
      positionOffset:null
    };
  }
  toggleWindow() {
    this.windowOpen = !this.windowOpen;
    this.container.classList.toggle("active");
    GM_setValue(`${this.container.id}_open`,this.windowOpen);
    this.body.style.display = this.windowOpen ? "block" : "none";
  }
  pointerDownHandler(e) {
    e.preventDefault();
    this.pointerValues.positionOffset = {
      x:e.clientX - this.windowPosition.x,
      y:e.clientY - this.windowPosition.y
    };
  }
  pointerMoveHandler(e) {
    if (this.pointerValues.positionOffset) {
      e.preventDefault();
      this.pointerValues.newPosition = {
        x:e.clientX - this.pointerValues.positionOffset.x,
        y:e.clientY - this.pointerValues.positionOffset.y
      };
      if (!this.pointerValues.dragging) {
        if (Math.abs(this.pointerValues.newPosition.x-this.windowPosition.x) > 10 || Math.abs(this.pointerValues.newPosition.y-this.windowPosition.y) > 10) this.pointerValues.dragging = true;
      }
      if (this.pointerValues.dragging) {
        this.container.style.left = `${this.pointerValues.newPosition.x}px`;
        this.container.style.top = `${this.pointerValues.newPosition.y}px`;
      }
    }
  }
  pointerUpHandler(e) {
    e.preventDefault();
    if (this.pointerValues.dragging) {
      this.pointerValues.newPosition = {
        x:e.clientX - this.pointerValues.positionOffset.x,
        y:e.clientY - this.pointerValues.positionOffset.y
      };
      this.container.style.left = `${this.pointerValues.newPosition.x}px`;
      this.container.style.top = `${this.pointerValues.newPosition.y}px`;
      this.windowPosition = this.pointerValues.newPosition;
      GM_setValue(`${this.container.id}_position`,this.windowPosition);
      this.pointerValues.dragging = false;
    } else {
      this.toggleWindow();
    }
    this.pointerValues.positionOffset = this.pointerValues.newPosition = null;
  }
}
欢迎访问Greasy Fork镜像
