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);
69 this.id = "dragonblocks.gui.box[" + dragonblocks.getToken() + "]";
74 this.dragging = false;
76 let display = document.body.appendChild(document.createElement("div"));
78 display.style.width = this.big ? "700px" : "500px";
79 display.style.height = this.big ? "500px" : "300px";
80 display.style.position = "fixed";
81 display.style.backgroundColor = "#7E7E7E";
82 display.style.visibility = "hidden";
83 dblib.center(display);
84 dblib.centerVertical(display);
87 display.style.overflowY = "scroll";
89 this.moveable && this.addMoveField();
90 this.closeable && this.addCloseField();
95 let moveField = this.create("div");
96 moveField.id = this.id + ".moveField";
97 moveField.style.position = "absolute";
98 moveField.style.left = "0px";
99 moveField.style.top = "0px";
100 moveField.style.width = this.big ? "50px": "30px";
101 moveField.style.height = this.big ? "50px": "30px";
102 moveField.style.background = dragonblocks.getTexture("move.png");
103 moveField.style.backgroundSize = "cover"
104 moveField.style.cursor = "move";
107 let display = this.getDisplay();
109 display.addEventListener("mousedown", event => {
110 if (event.srcElement.id != moveField.id)
113 self.x = event.clientX;
114 self.y = event.clientY;
116 self.dragging = true;
119 display.addEventListener("mousemove", event => {
123 let display = self.getDisplay();
125 let x = self.x - event.clientX;
126 let y = self.y - event.clientY;
128 self.x = event.clientX;
129 self.y = event.clientY;
131 display.style.left = display.offsetLeft - x + "px";
132 display.style.top = display.offsetTop - y + "px";
135 addEventListener("mouseup", event => {
136 self.dragging = false;
142 let closeField = this.create("div");
143 closeField.id = this.id + ".closeField";
144 closeField.style.position = "absolute";
145 closeField.style.right = "0px";
146 closeField.style.top = "0px";
147 closeField.style.width = this.big ? "50px": "30px";
148 closeField.style.height = this.big ? "50px": "30px";
149 closeField.style.background = dragonblocks.getTexture("close.png");
150 closeField.style.backgroundSize = "cover";
151 closeField.style.cursor = "pointer";
154 closeField.addEventListener("mousedown", _ => {
161 return document.getElementById(this.id);
166 this.getDisplay().innerHTML = html;
171 this.getDisplay().style.visibility = "visible";
173 this.layer && dragonblocks.gui.openLayer();
174 this.keylock && dragonblocks.keyHandler.lockAll();
176 this.dispatchEvent(new dragonblocks.gui.Box.Event("open"));
181 this.getDisplay().style.visibility = "hidden";
183 this.layer && dragonblocks.gui.closeLayer();
184 this.keylock && dragonblocks.keyHandler.unlockAll();
186 this.dispatchEvent(new dragonblocks.gui.Box.Event("close"));
191 return this.getDisplay().appendChild(elem);
196 return this.add(document.createElement(tag));
200 dragonblocks.gui.Box.Event = class extends Event
202 constructor(type, box)