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 dragonblocks.gui = {};
  24 dragonblocks.gui.toggleLayer = function(){
  25         dragonblocks.gui.layerShown ? dragonblocks.gui.hideLayer() : dragonblocks.gui.showLayer();
  26 }
  27 dragonblocks.gui.showLayer = dragonblocks.gui.openLayer = function(){
  28         dragonblocks.gui.layerShown = true;
  29         document.getElementById("dragonblocks.gui.layer").style.visibility = "visible";
  30 }
  31 dragonblocks.gui.hideLayer = dragonblocks.gui.closeLayer = function(){
  32         dragonblocks.gui.layerShown = false;
  33         document.getElementById("dragonblocks.gui.layer").style.visibility = "hidden";
  34 }
  35 {
  36         let layer = document.createElement("div");
  37         layer.id = "dragonblocks.gui.layer";
  38         layer.style.opacity = 0.7;
  39         layer.style.position = "fixed";
  40         layer.style.width = "100%";
  41         layer.style.height = "100%";
  42         layer.style.top = "0px";
  43         layer.style.left = "0px";
  44         layer.style.backgroundColor = "black";
  45         layer.style.visibility = "hidden";
  46         document.body.appendChild(layer);
  47 }
  48 dragonblocks.gui.Box = class{
  49         constructor(properties){
  50                 this.moveable = false;
  51                 this.closeable = true;
  52                 this.size = "big";
  53                 this.layer = true;
  54                 this.scroll = true;
  55                 this.keylock = false;
  56                 if(properties)
  57                         dblib.copy(this, properties);
  58                 let self = this;
  59                 this.id = "dragonblocks.gui.box[" + dragonblocks.getToken() + "]";
  60                 this.x = 0;
  61                 this.y = 0;
  62                 this.dragging = false;
  63                 let display = document.createElement("div");
  64                 display.id = this.id;
  65                 display.style.width = "500px";
  66                 display.style.height = "300px";
  67                 if(this.size == "big"){
  68                         display.style.width = "700px";
  69                         display.style.height = "500px";
  70                 }
  71                 display.style.position = "fixed";
  72                 display.style.backgroundColor = "#7E7E7E";
  73                 display.style.visibility = "hidden";
  74                 if(this.scroll)
  75                         display.style.overflowY = "scroll";
  76                 let moveField = document.createElement("div");
  77                 moveField.id = this.id + ".moveField";
  78                 moveField.style.position = "absolute";
  79                 moveField.style.left = "0px";
  80                 moveField.style.top = "0px";
  81                 moveField.style.width = "30px";
  82                 moveField.style.height = "30px";
  83                 if(this.size == "big"){
  84                         moveField.style.width = "50px";
  85                         moveField.style.height = "50px";
  86                 }
  87                 moveField.style.background = dragonblocks.getTexture("move.png");
  88                 moveField.style.backgroundSize = "cover"
  89                 moveField.style.cursor = "move";
  90                 if(this.moveable)
  91                         display.appendChild(moveField);
  92                 let closeField = document.createElement("div");
  93                 closeField.id = this.id + ".closeField";
  94                 closeField.style.position = "absolute";
  95                 closeField.style.right = "0px";
  96                 closeField.style.top = "0px";
  97                 closeField.style.width = "30px";
  98                 closeField.style.height = "30px";
  99                 if(this.size == "big"){
 100                         closeField.style.width = "50px";
 101                         closeField.style.height = "50px";
 102                 }
 103                 closeField.style.background = dragonblocks.getTexture("close.png");
 104                 closeField.style.backgroundSize = "cover";
 105                 closeField.style.cursor = "pointer";
 106                 closeField.addEventListener("mousedown", _ => {
 107                         self.close();
 108                 });
 109                 if(this.closeable)
 110                         display.appendChild(closeField);
 111                 display.addEventListener("mousedown", event => {
 112                         if(event.srcElement.id != moveField.id)
 113                                 return;
 114                         self.x = event.clientX;
 115                         self.y = event.clientY;
 116                         self.dragging = true;
 117                 });
 118                 display.addEventListener("mousemove", event => {
 119                         if(! self.dragging)
 120                                 return;
 121                         let display = self.getDisplay();
 122                         let posX = self.x - event.clientX;
 123                         let posY = self.y - event.clientY;
 124                         self.x = event.clientX;
 125                         self.y = event.clientY;
 126                         display.style.left = display.offsetLeft - posX + "px";
 127                         display.style.top = display.offsetTop - posY + "px";
 128                 });
 129                 addEventListener("mouseup", event => {
 130                         self.dragging = false;
 131                 });
 132                 document.body.appendChild(display);
 133                 dblib.center(this.getDisplay());
 134                 dblib.centerVertical(this.getDisplay());
 135         }
 136         getDisplay(){
 137                 return document.getElementById(this.id);
 138         }
 139         setContent(html){
 140                 this.getDisplay().innerHTML = html;
 141         }
 142         open(){
 143                 this.getDisplay().style.visibility = "visible";
 144                 if(this.layer)
 145                         dragonblocks.gui.openLayer();
 146                 if(this.keylock)
 147                         dragonblocks.keyHandler.lockAll();
 148                 this.onopen && this.onopen();
 149         }
 150         close(){
 151                 this.getDisplay().style.visibility = "hidden";
 152                 if(this.layer)
 153                         dragonblocks.gui.closeLayer();
 154                 if(this.keylock)
 155                         dragonblocks.keyHandler.unlockAll();
 156                 this.onclose && this.onclose();
 157         }
 158         add(elem){
 159                 return this.getDisplay().appendChild(elem);
 160         }
 161         create(elementname){
 162                 return this.add(document.createElement(elementname));
 163         }
 164 }
 165 dragonblocks.gui.createBox = function(properties){
 166         return new dragonblocks.gui.Box(properties);
 167 }