Adds FloatingWindow
Устаревшая версия за
Этот скрипт недоступен для установки пользователем. Он является библиотекой, которая подключается к другим скриптам мета-ключом // @require https://update.greasyfork.org/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;
}
}