engine/gui.js

   1 /*
   2  * gui.js
   3  *
   4  * Copyright 2020 Elias Fleckenstein <eliasfleckenstein@web.de>
   5  *
   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.
  10  *
  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.
  15  *
  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,
  19  * MA 02110-1301, USA.
  20  *
  21  *
  22  */
  23
  24 dragonblocks.gui = {};
  25
  26 {
  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";
  36
  37         let layerShown = false;
  38
  39         dragonblocks.gui.toggleLayer = _ => {
  40                 layerShown ? dragonblocks.gui.hideLayer() : dragonblocks.gui.showLayer();
  41         };
  42
  43         dragonblocks.gui.showLayer = dragonblocks.gui.openLayer = _ => {
  44                 layerShown = true;
  45                 layer.style.visibility = "visible";
  46         };
  47
  48         dragonblocks.gui.hideLayer = dragonblocks.gui.closeLayer = _ => {
  49                 layerShown = false;
  50                 layer.style.visibility = "hidden";
  51         };
  52 }
  53
  54 dragonblocks.gui.Box = class extends EventTarget
  55 {
  56         constructor(def)
  57         {
  58                 super();
  59                 this.moveable = false;
  60                 this.closeable = true;
  61                 this.big = true;
  62                 this.layer = true;
  63                 this.scroll = true;
  64                 this.keylock = false;
  65
  66                 if (def)
  67                         dblib.copy(this, def);
  68
  69                 this.id = "dragonblocks.gui.box[" + dragonblocks.getToken() + "]";
  70
  71                 this.x = 0;
  72                 this.y = 0;
  73
  74                 this.dragging = false;
  75
  76                 let display = document.body.appendChild(document.createElement("div"));
  77                 display.id = this.id;
  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);
  85
  86                 if (this.scroll)
  87                         display.style.overflowY = "scroll";
  88
  89                 this.moveable && this.addMoveField();
  90                 this.closeable && this.addCloseField();
  91         }
  92
  93         addMoveField()
  94         {
  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";
 105
 106                 let self = this;
 107                 let display = this.getDisplay();
 108
 109                 display.addEventListener("mousedown", event => {
 110                         if (event.srcElement.id != moveField.id)
 111                                 return;
 112
 113                         self.x = event.clientX;
 114                         self.y = event.clientY;
 115
 116                         self.dragging = true;
 117                 });
 118
 119                 display.addEventListener("mousemove", event => {
 120                         if (! self.dragging)
 121                                 return;
 122
 123                         let display = self.getDisplay();
 124
 125                         let x = self.x - event.clientX;
 126                         let y = self.y - event.clientY;
 127
 128                         self.x = event.clientX;
 129                         self.y = event.clientY;
 130
 131                         display.style.left = display.offsetLeft - x + "px";
 132                         display.style.top = display.offsetTop - y + "px";
 133                 });
 134
 135                 addEventListener("mouseup", event => {
 136                         self.dragging = false;
 137                 });
 138         }
 139
 140         addCloseField()
 141         {
 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";
 152
 153                 let self = this;
 154                 closeField.addEventListener("mousedown", _ => {
 155                         self.close();
 156                 });
 157         }
 158
 159         getDisplay()
 160         {
 161                 return document.getElementById(this.id);
 162         }
 163
 164         setContent(html)
 165         {
 166                 this.getDisplay().innerHTML = html;
 167         }
 168
 169         open()
 170         {
 171                 this.getDisplay().style.visibility = "visible";
 172
 173                 this.layer && dragonblocks.gui.openLayer();
 174                 this.keylock && dragonblocks.keyHandler.lockAll();
 175
 176                 this.dispatchEvent(new dragonblocks.gui.Box.Event("open"));
 177         }
 178
 179         close()
 180         {
 181                 this.getDisplay().style.visibility = "hidden";
 182
 183                 this.layer && dragonblocks.gui.closeLayer();
 184                 this.keylock && dragonblocks.keyHandler.unlockAll();
 185
 186                 this.dispatchEvent(new dragonblocks.gui.Box.Event("close"));
 187         }
 188
 189         add(elem)
 190         {
 191                 return this.getDisplay().appendChild(elem);
 192         }
 193
 194         create(tag)
 195         {
 196                 return this.add(document.createElement(tag));
 197         }
 198 };
 199
 200 dragonblocks.gui.Box.Event = class extends Event
 201 {
 202         constructor(type, box)
 203         {
 204                 super(type);
 205                 this.box = box;
 206         }
 207 };