ฺBASIC AMQ Window Script
Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/534648/1581420/AMQ%20Window%20Script.js
// AMQ Window Script
// This code is fetched automatically
// Do not attempt to add it to tampermonkey
if (typeof Listener === "undefined") return;
windowSetup();
class AMQWindow {
constructor(data) {
this.id = data.id === undefined ? "" : data.id;
this.title = data.title === undefined ? "Window" : data.title;
this.resizable = data.resizable === undefined ? false : data.resizable;
this.draggable = data.draggable === undefined ? false : data.draggable;
this.width = data.width === undefined ? 200 : data.width;
this.height = data.height === undefined ? 300 : data.height;
this.minWidth = data.minWidth === undefined ? 200 : data.minWidth;
this.minHeight = data.minHeight === undefined ? 300: data.minHeight;
this.position = data.position === undefined ? {x: 0, y: 0} : data.position;
this.closeHandler = data.closeHandler === undefined ? function () {} : data.closeHandler;
this.zIndex = data.zIndex === undefined ? 1060 : data.zIndex;
this.resizers = null;
this.panels = [];
this.window = $("<div></div>")
.addClass("customWindow")
.addClass(data.class === undefined ? "" : data.class)
.attr("id", this.id)
.css("position", "absolute")
.css("z-index", this.zIndex.toString())
.offset({
top: this.position.y !== undefined ? this.position.y : 0,
left: this.position.x !== undefined ? this.position.x : 0
})
.height(this.height)
.width(this.width)
this.content = $(`<div class="customWindowContent"></div>`);
this.header = $("<div></div>")
.addClass("modal-header customWindowHeader")
.addClass(this.draggable === true ? "draggableWindow" : "")
.append($(`<div class="close" type="button"><span aria-hidden="true">×</span></div>`)
.click(() => {
this.close(this.closeHandler);
})
)
.append($("<h2></h2>")
.addClass("modal-title")
.text(this.title)
)
this.body = $(`<div class="modal-body customWindowBody"></div>`)
.addClass(this.resizable === true ? "resizableWindow" : "")
.height(this.height - 75);
if (this.resizable === true) {
this.resizers = $(
`<div class="windowResizers">
<div class="windowResizer top-left"></div>
<div class="windowResizer top-right"></div>
<div class="windowResizer bottom-left"></div>
<div class="windowResizer bottom-right"></div>
</div>`
);
}
this.content.append(this.header);
this.content.append(this.body);
if (this.resizers !== null) {
this.window.append(this.resizers);
let tmp = this;
let startWidth = 0;
let startHeight = 0;
let startX = 0;
let startY = 0;
let startMouseX = 0;
let startMouseY = 0;
this.resizers.find(".windowResizer").each(function (index, resizer) {
$(resizer).mousedown(function (event) {
tmp.window.css("user-select", "none");
startWidth = tmp.window.width();
startHeight = tmp.window.height();
startX = tmp.window.position().left;
startY = tmp.window.position().top;
startMouseX = event.originalEvent.clientX;
startMouseY = event.originalEvent.clientY;
let curResizer = $(this);
$(document.documentElement).mousemove(function (event) {
if (curResizer.hasClass("bottom-right")) {
let newWidth = startWidth + (event.originalEvent.clientX - startMouseX);
let newHeight = startHeight + (event.originalEvent.clientY - startMouseY);
if (newWidth > tmp.minWidth) {
tmp.window.width(newWidth);
}
if (newHeight > tmp.minHeight) {
tmp.body.height(newHeight - 103);
tmp.window.height(newHeight);
}
}
if (curResizer.hasClass("bottom-left")) {
let newWidth = startWidth - (event.originalEvent.clientX - startMouseX);
let newHeight = startHeight + (event.originalEvent.clientY - startMouseY);
let newLeft = startX + (event.originalEvent.clientX - startMouseX);
if (newWidth > tmp.minWidth) {
tmp.window.width(newWidth);
tmp.window.css("left", newLeft + "px");
}
if (newHeight > tmp.minHeight) {
tmp.body.height(newHeight - 103);
tmp.window.height(newHeight);
}
}
if (curResizer.hasClass("top-right")) {
let newWidth = startWidth + (event.originalEvent.clientX - startMouseX);
let newHeight = startHeight - (event.originalEvent.clientY - startMouseY);
let newTop = startY + (event.originalEvent.clientY - startMouseY);
if (newWidth > tmp.minWidth) {
tmp.window.width(newWidth);
}
if (newHeight > tmp.minHeight) {
tmp.window.css("top", newTop + "px");
tmp.body.height(newHeight - 103);
tmp.window.height(newHeight);
}
}
if (curResizer.hasClass("top-left")) {
let newWidth = startWidth - (event.originalEvent.clientX - startMouseX);
let newHeight = startHeight - (event.originalEvent.clientY - startMouseY);
let newLeft = startX + (event.originalEvent.clientX - startMouseX);
let newTop = startY + (event.originalEvent.clientY - startMouseY);
if (newWidth > tmp.minWidth) {
tmp.window.width(newWidth);
tmp.window.css("left", newLeft + "px");
}
if (newHeight > tmp.minHeight) {
tmp.window.css("top", newTop + "px");
tmp.body.height(newHeight - 103);
tmp.window.height(newHeight);
}
}
});
$(document.documentElement).mouseup(function (event) {
$(document.documentElement).off("mousemove");
$(document.documentElement).off("mouseup");
tmp.window.css("user-select", "text");
});
});
});
}
if (this.draggable === true) {
this.window.draggable({
handle: this.header,
containment: "#gameContainer"
});
}
this.window.append(this.content);
$("#gameContainer").append(this.window);
}
setId(newId) {
this.id = newId;
this.window.attr("id", this.id);
}
addClass(newClass) {
this.window.addClass(newClass);
}
removeClass(removedClass) {
this.window.removeClass(removedClass);
}
setWidth(newWidth) {
this.width = newWidth;
this.window.width(this.width);
}
setTitle(newTitle) {
this.title = newTitle;
this.header.find(".modal-title").text(newTitle);
}
setZIndex(newZIndex) {
this.zIndex = newZIndex;
this.window.css("z-index", this.zIndex.toString());
}
isVisible() {
return this.window.is(":visible");
}
clear() {
this.body.children().remove();
}
open() {
this.window.show();
}
open(handler) {
this.window.show();
if (handler !== undefined) {
handler();
}
}
close() {
this.window.hide();
}
close(handler) {
this.window.hide();
if (handler !== undefined) {
handler();
}
}
addPanel(data) {
let newPanel = new AMQWindowPanel(data);
this.panels.push(newPanel);
this.body.append(newPanel.panel);
}
}
class AMQWindowPanel {
constructor(data) {
this.id = data.id === undefined ? "" : data.id;
this.width = data.width === undefined ? 200 : data.width;
this.height = data.height === undefined ? 300 : data.height;
this.position = data.position === undefined ? {x: 0, y: 0} : data.position;
this.scrollable = data.scrollable === undefined ? {x: false, y: false} : data.scrollable;
this.panels = [];
this.panel = $("<div></div>")
.addClass("customWindowPanel")
.addClass(data.class === undefined ? "" : data.class)
.attr("id", this.id)
.css("position", "absolute")
this.updateWidth();
this.updateHeight();
this.updatePosition();
this.updateScrollable();
}
setId(newId) {
this.id = newId;
this.panel.attr("id", this.id);
}
addClass(newClass) {
this.panel.addClass(newClass);
}
removeClass(removedClass) {
this.panel.removeClass(removedClass);
}
setWidth(newWidth) {
this.width = newWidth;
this.updateWidth();
}
setHeight(newHeight) {
this.height = newHeight;
this.updateHeight();
}
updateWidth() {
if (typeof this.width === "string") {
this.panel.css("width", this.width);
}
else if (parseFloat(this.width) >= 0.0 && parseFloat(this.width) <= 1.0) {
this.panel.css("width", (parseFloat(this.width) * 100) + "%");
}
else {
this.panel.width(parseInt(this.width));
}
}
updateHeight() {
if (typeof this.height === "string") {
this.panel.css("height", this.height);
}
else if (parseFloat(this.height) >= 0.0 && parseFloat(this.height) <= 1.0) {
this.panel.css("height", (parseFloat(this.height) * 100) + "%");
}
else {
this.panel.height(parseInt(this.height));
}
}
setPositionX(newPositionX) {
this.position.x = newPositionX;
this.updatePosition();
}
setPositionY(newPositionY) {
this.position.y = newPositionY;
this.updatePosition();
}
setPosition(newPosition) {
this.position.x = newPosition.x;
this.position.y = newPosition.y;
this.updatePosition();
}
updatePosition() {
if (typeof this.position.x === "string") {
this.panel.css("left", this.position.x);
}
else if (parseFloat(this.position.x) >= 0.0 && parseFloat(this.position.x) <= 1.0) {
this.panel.css("left", (parseFloat(this.position.x) * 100) + "%");
}
else {
this.panel.css("left", parseInt(this.position.x) + "px");
}
if (typeof this.position.y === "string") {
this.panel.css("top", this.position.y);
}
else if (parseFloat(this.position.y) >= 0.0 && parseFloat(this.position.y) <= 1.0) {
this.panel.css("top", (parseFloat(this.position.y) * 100) + "%");
}
else {
this.panel.css("top", parseInt(this.position.y) + "px");
}
}
setScrollableX(newScrollableX) {
this.scrollable.x = newScrollableX;
this.updateScrollable();
}
setScrollableY(newScrollableY) {
this.scrollable.y = newScrollableY;
this.updateScrollable();
}
updateScrollable() {
this.panel.css("overflow-x", this.scrollable.x === true ? "auto" : "hidden");
this.panel.css("overflow-y", this.scrollable.y === true ? "auto" : "hidden");
}
show() {
this.panel.show();
}
show(handler) {
this.show();
handler();
}
hide() {
this.panel.hide();
}
hide(handler) {
this.hide();
handler();
}
addPanel(data) {
let newPanel = new AMQWindowPanel(data);
this.panels.push(newPanel);
this.panel.append(newPanel.panel);
}
clear() {
this.panel.children().remove();
}
}
function windowSetup() {
if ($("#customWindowStyle").length) return;
let style = document.createElement("style");
style.type = "text/css";
style.id = "customWindowStyle";
style.appendChild(document.createTextNode(`
.customWindow {
overflow-y: hidden;
top: 0px;
left: 0px;
margin: 0px;
background-color: #424242;
border: 1px solid rgba(27, 27, 27, 0.2);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
user-select: text;
display: none;
}
.draggableWindow {
cursor: move;
}
.customWindowBody {
width: 100%;
overflow-y: auto;
}
.customWindowContent {
width: 100%;
position: absolute;
top: 0px;
}
.customWindow .close {
font-size: 32px;
}
.windowResizers {
width: 100%;
height: 100%;
}
.windowResizer {
width: 10px;
height: 10px;
position: absolute;
z-index: 100;
}
.windowResizer.top-left {
top: 0px;
left: 0px;
cursor: nwse-resize;
}
.windowResizer.top-right {
top: 0px;
right: 0px;
cursor: nesw-resize;
}
.windowResizer.bottom-left {
bottom: 0px;
left: 0px;
cursor: nesw-resize;
}
.windowResizer.bottom-right {
bottom: 0px;
right: 0px;
cursor: nwse-resize;
}
`));
document.head.appendChild(style);
}