☰

AMQ Window Script

ฺBASIC AMQ Window Script

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/534648/1581420/AMQ%20Window%20Script.js 

  1. // AMQ Window Script
  2. // This code is fetched automatically
  3. // Do not attempt to add it to tampermonkey
  4.  
  5. if (typeof Listener === "undefined") return;
  6. windowSetup();
  7.  
  8. class AMQWindow {
  9.     constructor(data) {
  10.         this.id = data.id === undefined ? "" : data.id;
  11.         this.title = data.title === undefined ? "Window" : data.title;
  12.         this.resizable = data.resizable === undefined ? false : data.resizable;
  13.         this.draggable = data.draggable === undefined ? false : data.draggable;
  14.         this.width = data.width === undefined ? 200 : data.width;
  15.         this.height = data.height === undefined ? 300 : data.height;
  16.         this.minWidth = data.minWidth === undefined ? 200 : data.minWidth;
  17.         this.minHeight = data.minHeight === undefined ? 300: data.minHeight;
  18.         this.position = data.position === undefined ? {x: 0, y: 0} : data.position;
  19.         this.closeHandler = data.closeHandler === undefined ? function () {} : data.closeHandler;
  20.         this.zIndex = data.zIndex === undefined ? 1060 : data.zIndex;
  21.         this.resizers = null;
  22.         this.panels = [];
  23.  
  24.         this.window = $("<div></div>")
  25.             .addClass("customWindow")
  26.             .addClass(data.class === undefined ? "" : data.class)
  27.             .attr("id", this.id)
  28.             .css("position", "absolute")
  29.             .css("z-index", this.zIndex.toString())
  30.             .offset({
  31.                 top: this.position.y !== undefined ? this.position.y : 0,
  32.                 left: this.position.x !== undefined ? this.position.x : 0
  33.             })
  34.             .height(this.height)
  35.             .width(this.width)
  36.  
  37.         this.content = $(`<div class="customWindowContent"></div>`);
  38.  
  39.         this.header = $("<div></div>")
  40.             .addClass("modal-header customWindowHeader")
  41.             .addClass(this.draggable === true ? "draggableWindow" : "")
  42.             .append($(`<div class="close" type="button"><span aria-hidden="true">×</span></div>`)
  43.                 .click(() => {
  44.                     this.close(this.closeHandler);
  45.                 })
  46.             )
  47.             .append($("<h2></h2>")
  48.                 .addClass("modal-title")
  49.                 .text(this.title)
  50.             )
  51.  
  52.         this.body = $(`<div class="modal-body customWindowBody"></div>`)
  53.             .addClass(this.resizable === true ? "resizableWindow" : "")
  54.             .height(this.height - 75);
  55.  
  56.         if (this.resizable === true) {
  57.             this.resizers = $(
  58.                 `<div class="windowResizers">
  59.                     <div class="windowResizer top-left"></div>
  60.                     <div class="windowResizer top-right"></div>
  61.                     <div class="windowResizer bottom-left"></div>
  62.                     <div class="windowResizer bottom-right"></div>
  63.                 </div>`
  64.             );
  65.         }
  66.  
  67.         this.content.append(this.header);
  68.         this.content.append(this.body);
  69.         if (this.resizers !== null) {
  70.             this.window.append(this.resizers);
  71.             let tmp = this;
  72.             let startWidth = 0;
  73.             let startHeight = 0;
  74.             let startX = 0;
  75.             let startY = 0;
  76.             let startMouseX = 0;
  77.             let startMouseY = 0;
  78.             this.resizers.find(".windowResizer").each(function (index, resizer) {
  79.                 $(resizer).mousedown(function (event) {
  80.                     tmp.window.css("user-select", "none");
  81.                     startWidth = tmp.window.width();
  82.                     startHeight = tmp.window.height();
  83.                     startX = tmp.window.position().left;
  84.                     startY = tmp.window.position().top;
  85.                     startMouseX = event.originalEvent.clientX;
  86.                     startMouseY = event.originalEvent.clientY;
  87.                     let curResizer = $(this);
  88.                     $(document.documentElement).mousemove(function (event) {
  89.                         if (curResizer.hasClass("bottom-right")) {
  90.                             let newWidth = startWidth + (event.originalEvent.clientX - startMouseX);
  91.                             let newHeight = startHeight + (event.originalEvent.clientY - startMouseY);
  92.                             if (newWidth > tmp.minWidth) {
  93.                                 tmp.window.width(newWidth);
  94.                             }
  95.                             if (newHeight > tmp.minHeight) {
  96.                                 tmp.body.height(newHeight - 103);
  97.                                 tmp.window.height(newHeight);
  98.                             }
  99.                         }
  100.                         if (curResizer.hasClass("bottom-left")) {
  101.                             let newWidth = startWidth - (event.originalEvent.clientX - startMouseX);
  102.                             let newHeight = startHeight + (event.originalEvent.clientY - startMouseY);
  103.                             let newLeft = startX + (event.originalEvent.clientX - startMouseX);
  104.                             if (newWidth > tmp.minWidth) {
  105.                                 tmp.window.width(newWidth);
  106.                                 tmp.window.css("left", newLeft + "px");
  107.                             }
  108.                             if (newHeight > tmp.minHeight) {
  109.                                 tmp.body.height(newHeight - 103);
  110.                                 tmp.window.height(newHeight);
  111.                             }
  112.                         }
  113.                         if (curResizer.hasClass("top-right")) {
  114.                             let newWidth = startWidth + (event.originalEvent.clientX - startMouseX);
  115.                             let newHeight = startHeight - (event.originalEvent.clientY - startMouseY);
  116.                             let newTop = startY + (event.originalEvent.clientY - startMouseY);
  117.                             if (newWidth > tmp.minWidth) {
  118.                                 tmp.window.width(newWidth);
  119.                             }
  120.                             if (newHeight > tmp.minHeight) {
  121.                                 tmp.window.css("top", newTop + "px");
  122.                                 tmp.body.height(newHeight - 103);
  123.                                 tmp.window.height(newHeight);
  124.                             }
  125.                         }
  126.                         if (curResizer.hasClass("top-left")) {
  127.                             let newWidth = startWidth - (event.originalEvent.clientX - startMouseX);
  128.                             let newHeight = startHeight - (event.originalEvent.clientY - startMouseY);
  129.                             let newLeft = startX + (event.originalEvent.clientX - startMouseX);
  130.                             let newTop = startY + (event.originalEvent.clientY - startMouseY);
  131.                             if (newWidth > tmp.minWidth) {
  132.                                 tmp.window.width(newWidth);
  133.                                 tmp.window.css("left", newLeft + "px");
  134.                             }
  135.                             if (newHeight > tmp.minHeight) {
  136.                                 tmp.window.css("top", newTop + "px");
  137.                                 tmp.body.height(newHeight - 103);
  138.                                 tmp.window.height(newHeight);
  139.                             }
  140.                         }
  141.                     });
  142.                     $(document.documentElement).mouseup(function (event) {
  143.                         $(document.documentElement).off("mousemove");
  144.                         $(document.documentElement).off("mouseup");
  145.                         tmp.window.css("user-select", "text");
  146.                     });
  147.                 });
  148.             });
  149.         }
  150.         if (this.draggable === true) {
  151.             this.window.draggable({
  152.                 handle: this.header,
  153.                 containment: "#gameContainer"
  154.             });
  155.         }
  156.  
  157.         this.window.append(this.content);
  158.         $("#gameContainer").append(this.window);
  159.     }
  160.  
  161.     setId(newId) {
  162.         this.id = newId;
  163.         this.window.attr("id", this.id);
  164.     }
  165.  
  166.     addClass(newClass) {
  167.         this.window.addClass(newClass);
  168.     }
  169.  
  170.     removeClass(removedClass) {
  171.         this.window.removeClass(removedClass);
  172.     }
  173.  
  174.     setWidth(newWidth) {
  175.         this.width = newWidth;
  176.         this.window.width(this.width);
  177.     }
  178.  
  179.     setTitle(newTitle) {
  180.         this.title = newTitle;
  181.         this.header.find(".modal-title").text(newTitle);
  182.     }
  183.  
  184.     setZIndex(newZIndex) {
  185.         this.zIndex = newZIndex;
  186.         this.window.css("z-index", this.zIndex.toString());
  187.     }
  188.  
  189.     isVisible() {
  190.         return this.window.is(":visible");
  191.     }
  192.  
  193.     clear() {
  194.         this.body.children().remove();
  195.     }
  196.  
  197.     open() {
  198.         this.window.show();
  199.     }
  200.  
  201.     open(handler) {
  202.         this.window.show();
  203.         if (handler !== undefined) {
  204.             handler();
  205.         }
  206.     }
  207.  
  208.     close() {
  209.         this.window.hide();
  210.     }
  211.  
  212.     close(handler) {
  213.         this.window.hide();
  214.         if (handler !== undefined) {
  215.             handler();
  216.         }
  217.     }
  218.  
  219.     addPanel(data) {
  220.         let newPanel = new AMQWindowPanel(data);
  221.         this.panels.push(newPanel);
  222.         this.body.append(newPanel.panel);
  223.     }
  224. }
  225.  
  226. class AMQWindowPanel {
  227.     constructor(data) {
  228.         this.id = data.id === undefined ? "" : data.id;
  229.         this.width = data.width === undefined ? 200 : data.width;
  230.         this.height = data.height === undefined ? 300 : data.height;
  231.         this.position = data.position === undefined ? {x: 0, y: 0} : data.position;
  232.         this.scrollable = data.scrollable === undefined ? {x: false, y: false} : data.scrollable;
  233.         this.panels = [];
  234.  
  235.         this.panel = $("<div></div>")
  236.             .addClass("customWindowPanel")
  237.             .addClass(data.class === undefined ? "" : data.class)
  238.             .attr("id", this.id)
  239.             .css("position", "absolute")
  240.  
  241.         this.updateWidth();
  242.         this.updateHeight();
  243.         this.updatePosition();
  244.         this.updateScrollable();
  245.     }
  246.  
  247.     setId(newId) {
  248.         this.id = newId;
  249.         this.panel.attr("id", this.id);
  250.     }
  251.  
  252.     addClass(newClass) {
  253.         this.panel.addClass(newClass);
  254.     }
  255.  
  256.     removeClass(removedClass) {
  257.         this.panel.removeClass(removedClass);
  258.     }
  259.  
  260.     setWidth(newWidth) {
  261.         this.width = newWidth;
  262.         this.updateWidth();
  263.     }
  264.  
  265.     setHeight(newHeight) {
  266.         this.height = newHeight;
  267.         this.updateHeight();
  268.     }
  269.  
  270.     updateWidth() {
  271.         if (typeof this.width === "string") {
  272.             this.panel.css("width", this.width);
  273.         }
  274.         else if (parseFloat(this.width) >= 0.0 && parseFloat(this.width) <= 1.0) {
  275.             this.panel.css("width", (parseFloat(this.width) * 100) + "%");
  276.         }
  277.         else {
  278.             this.panel.width(parseInt(this.width));
  279.         }
  280.     }
  281.  
  282.     updateHeight() {
  283.         if (typeof this.height === "string") {
  284.             this.panel.css("height", this.height);
  285.         }
  286.         else if (parseFloat(this.height) >= 0.0 && parseFloat(this.height) <= 1.0) {
  287.             this.panel.css("height", (parseFloat(this.height) * 100) + "%");
  288.         }
  289.         else {
  290.             this.panel.height(parseInt(this.height));
  291.         }
  292.     }
  293.  
  294.     setPositionX(newPositionX) {
  295.         this.position.x = newPositionX;
  296.         this.updatePosition();
  297.     }
  298.  
  299.     setPositionY(newPositionY) {
  300.         this.position.y = newPositionY;
  301.         this.updatePosition();
  302.     }
  303.  
  304.     setPosition(newPosition) {
  305.         this.position.x = newPosition.x;
  306.         this.position.y = newPosition.y;
  307.         this.updatePosition();
  308.     }
  309.  
  310.     updatePosition() {
  311.         if (typeof this.position.x === "string") {
  312.             this.panel.css("left", this.position.x);
  313.         }
  314.         else if (parseFloat(this.position.x) >= 0.0 && parseFloat(this.position.x) <= 1.0) {
  315.             this.panel.css("left", (parseFloat(this.position.x) * 100) + "%");
  316.         }
  317.         else {
  318.             this.panel.css("left", parseInt(this.position.x) + "px");
  319.         }
  320.  
  321.         if (typeof this.position.y === "string") {
  322.             this.panel.css("top", this.position.y);
  323.         }
  324.         else if (parseFloat(this.position.y) >= 0.0 && parseFloat(this.position.y) <= 1.0) {
  325.             this.panel.css("top", (parseFloat(this.position.y) * 100) + "%");
  326.         }
  327.         else {
  328.             this.panel.css("top", parseInt(this.position.y) + "px");
  329.         }
  330.     }
  331.  
  332.     setScrollableX(newScrollableX) {
  333.         this.scrollable.x = newScrollableX;
  334.         this.updateScrollable();
  335.     }
  336.  
  337.     setScrollableY(newScrollableY) {
  338.         this.scrollable.y = newScrollableY;
  339.         this.updateScrollable();
  340.     }
  341.  
  342.     updateScrollable() {
  343.         this.panel.css("overflow-x", this.scrollable.x === true ? "auto" : "hidden");
  344.         this.panel.css("overflow-y", this.scrollable.y === true ? "auto" : "hidden");
  345.     }
  346.  
  347.     show() {
  348.         this.panel.show();
  349.     }
  350.  
  351.     show(handler) {
  352.         this.show();
  353.         handler();
  354.     }
  355.  
  356.     hide() {
  357.         this.panel.hide();
  358.     }
  359.  
  360.     hide(handler) {
  361.         this.hide();
  362.         handler();
  363.     }
  364.  
  365.     addPanel(data) {
  366.         let newPanel = new AMQWindowPanel(data);
  367.         this.panels.push(newPanel);
  368.         this.panel.append(newPanel.panel);
  369.     }
  370.  
  371.     clear() {
  372.         this.panel.children().remove();
  373.     }
  374. }
  375.  
  376. function windowSetup() {
  377.     if ($("#customWindowStyle").length) return;
  378.     let style = document.createElement("style");
  379.     style.type = "text/css";
  380.     style.id = "customWindowStyle";
  381.     style.appendChild(document.createTextNode(`
  382.         .customWindow {
  383.             overflow-y: hidden;
  384.             top: 0px;
  385.             left: 0px;
  386.             margin: 0px;
  387.             background-color: #424242;
  388.             border: 1px solid rgba(27, 27, 27, 0.2);
  389.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  390.             user-select: text;
  391.             display: none;
  392.         }
  393.         .draggableWindow {
  394.             cursor: move;
  395.         }
  396.         .customWindowBody {
  397.             width: 100%;
  398.             overflow-y: auto;
  399.         }
  400.         .customWindowContent {
  401.             width: 100%;
  402.             position: absolute;
  403.             top: 0px;
  404.         }
  405.         .customWindow .close {
  406.             font-size: 32px;
  407.         }
  408.         .windowResizers {
  409.             width: 100%;
  410.             height: 100%;
  411.         }
  412.         .windowResizer {
  413.             width: 10px;
  414.             height: 10px;
  415.             position: absolute;
  416.             z-index: 100;
  417.         }
  418.         .windowResizer.top-left {
  419.             top: 0px;
  420.             left: 0px;
  421.             cursor: nwse-resize;
  422.         }
  423.         .windowResizer.top-right {
  424.             top: 0px;
  425.             right: 0px;
  426.             cursor: nesw-resize;
  427.         }
  428.         .windowResizer.bottom-left {
  429.             bottom: 0px;
  430.             left: 0px;
  431.             cursor: nesw-resize;
  432.         }
  433.         .windowResizer.bottom-right {
  434.             bottom: 0px;
  435.             right: 0px;
  436.             cursor: nwse-resize;
  437.         }
  438.     `));
  439.     document.head.appendChild(style);
  440. }