4 * Copyright 2020 Elias Fleckenstein <eliasfleckenstein@web.de>
6 * This program is free software; you can redistribute it and/or modify
7 * it under the terms of the GNU General Public License as published by
8 * the Free Software Foundation; either version 2 of the License, or
9 * (at your option) any later version.
11 * This program is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 * GNU General Public License for more details.
16 * You should have received a copy of the GNU General Public License
17 * along with this program; if not, write to the Free Software
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
24 dragonblocks.gui = {};
27 let layer = document.body.appendChild(document.createElement("div"));
28 layer.style.opacity = 0.7;
29 layer.style.position = "fixed";
30 layer.style.width = "100%";
31 layer.style.height = "100%";
32 layer.style.top = "0px";
33 layer.style.left = "0px";
34 layer.style.backgroundColor = "black";
35 layer.style.visibility = "hidden";
37 let layerShown = false;
39 dragonblocks.gui.toggleLayer = _ => {
40 layerShown ? dragonblocks.gui.hideLayer() : dragonblocks.gui.showLayer();
43 dragonblocks.gui.showLayer = dragonblocks.gui.openLayer = _ => {
45 layer.style.visibility = "visible";
48 dragonblocks.gui.hideLayer = dragonblocks.gui.closeLayer = _ => {
50 layer.style.visibility = "hidden";
54 dragonblocks.gui.Box = class extends EventTarget
59 this.moveable = false;
60 this.closeable = true;
67 dblib.copy(this, def);
72 this.dragging = false;
74 this.display = document.body.appendChild(document.createElement("div"));
75 this.display.style.width = this.big ? "700px" : "500px";
76 this.display.style.height = this.big ? "500px" : "300px";
77 this.display.style.position = "fixed";
78 this.display.style.backgroundColor = "#7E7E7E";
79 this.display.style.visibility = "hidden";
80 dblib.center(this.display);
81 dblib.centerVertical(this.display);
84 this.display.style.overflowY = "scroll";
86 this.moveable && this.addMoveField();
87 this.closeable && this.addCloseField();
92 let moveField = this.create("div");
93 moveField.style.position = "absolute";
94 moveField.style.left = "0px";
95 moveField.style.top = "0px";
96 moveField.style.width = this.big ? "50px": "30px";
97 moveField.style.height = this.big ? "50px": "30px";
98 moveField.style.background = dragonblocks.getTexture("move.png");
99 moveField.style.backgroundSize = "cover"
100 moveField.style.cursor = "move";
104 moveField.addEventListener("mousedown", event => {
105 self.x = event.clientX;
106 self.y = event.clientY;
108 self.dragging = true;
111 addEventListener("mousemove", event => {
115 let x = self.x - event.clientX;
116 let y = self.y - event.clientY;
118 self.x = event.clientX;
119 self.y = event.clientY;
121 self.display.style.left = self.display.offsetLeft - x + "px";
122 self.display.style.top = self.display.offsetTop - y + "px";
125 addEventListener("mouseup", event => {
126 self.dragging = false;
132 let closeField = this.create("div");
133 closeField.style.position = "absolute";
134 closeField.style.right = "0px";
135 closeField.style.top = "0px";
136 closeField.style.width = this.big ? "50px": "30px";
137 closeField.style.height = this.big ? "50px": "30px";
138 closeField.style.background = dragonblocks.getTexture("close.png");
139 closeField.style.backgroundSize = "cover";
140 closeField.style.cursor = "pointer";
143 closeField.addEventListener("mousedown", _ => {
150 this.display.innerHTML = html;
155 this.display.style.visibility = "visible";
157 this.layer && dragonblocks.gui.openLayer();
158 this.keylock && dragonblocks.keyHandler.lockAll();
160 this.dispatchEvent(new dragonblocks.gui.Box.Event("open"));
165 this.display.style.visibility = "hidden";
167 this.layer && dragonblocks.gui.closeLayer();
168 this.keylock && dragonblocks.keyHandler.unlockAll();
170 this.dispatchEvent(new dragonblocks.gui.Box.Event("close"));
175 return this.display.appendChild(elem);
180 return this.add(document.createElement(tag));
184 dragonblocks.gui.Box.Event = class extends Event
186 constructor(type, box)