Replace 'window-modal' by a self-written class (with some copy&paste)

package.json

@@ -48,8 +48,7 @@
     "query-string": "^6.13.8",
     "sheet-router": "^4.2.3",
     "sprintf-js": "^1.1.2",
-    "weight-sort": "^1.3.1",
-    "window-modal": "^1.0.5"
+    "weight-sort": "^1.3.1"
   },
   "scripts": {
     "test": "mocha --bail",

src/Window.js

@@ -0,0 +1,79 @@
+const EventEmitter = require('events')
+
+module.exports = class Window extends EventEmitter {
+  constructor (options) {
+    super()
+
+    this.dom = document.createElement('div')
+    this.dom.className = 'Window'
+
+    this.header = document.createElement('div')
+    this.header.className = 'header'
+    this.header.innerHTML = options.title
+    this.dom.appendChild(this.header)
+
+    this.closeBtn = document.createElement('div')
+    this.closeBtn.className = 'closeBtn'
+    this.closeBtn.onclick = () => this.close()
+    this.header.appendChild(this.closeBtn)
+
+    this.content = document.createElement('div')
+    this.content.className = 'content'
+    this.dom.appendChild(this.content)
+
+    dragElement(this.dom)
+  }
+
+  show () {
+    document.body.appendChild(this.dom)
+    this.emit('show')
+  }
+
+  close () {
+    document.body.removeChild(this.dom)
+    this.emit('close')
+  }
+}
+
+// copied from https://www.w3schools.com/HOWTO/howto_js_draggable.asp
+// Make the DIV element draggable:
+function dragElement(elmnt) {
+  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+  if (elmnt.firstChild) {
+    // if present, the header is where you move the DIV from:
+    elmnt.firstChild.onmousedown = dragMouseDown;
+  } else {
+    // otherwise, move the DIV from anywhere inside the DIV:
+    elmnt.onmousedown = dragMouseDown;
+  }
+
+  function dragMouseDown(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+  }
+
+  function closeDragElement() {
+    // stop moving when mouse button is released:
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+}

src/customCategory.js

@@ -1,8 +1,8 @@
-const ModalWindow = require('window-modal')
 const tabs = require('modulekit-tabs')
 const yaml = require('js-yaml')
 const md5 = require('md5')
 
+const Window = require('./Window')
 const OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
 
 const cache = {}
@@ -48,30 +48,28 @@ class CustomCategory {
   }
 
   edit () {
-    if (this.modal) {
-      this.modal.focused = true
+    if (this.window) {
+      this.window.focused = true
       return
     }
 
-    this.modal = new ModalWindow({
-      title: 'Custom Category',
-      hideMinimize: true,
-      zIndex: '99999'
+    this.window = new Window({
+      title: 'Custom Category'
     })
 
-    this.modal.addEventListener('close', () => {
-      this.modal = null
+    this.window.on('close', () => {
+      this.window = null
     })
 
     this.textarea = document.createElement('textarea')
-    this.modal.content.element.appendChild(this.textarea)
+    this.window.content.appendChild(this.textarea)
     if (this.content !== undefined) {
       this.textarea.value = this.content
     }
 
     const controls = document.createElement('div')
     controls.className = 'controls'
-    this.modal.content.element.appendChild(controls)
+    this.window.content.appendChild(controls)
 
     const input = document.createElement('input')
     input.type = 'submit'
@@ -90,6 +88,8 @@ class CustomCategory {
       ajax('customCategory', { content: this.textarea.value }, (result) => {})
       return true
     }
+
+    this.window.show()
   }
 
   applyContent (content) {

style.css

@@ -613,18 +613,55 @@ ul.overpass-layer-list > li > a > .content > .details {
   background-color: #ffdfdf;
 }
 
-.WindowModal-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-content: stretch;
-}
-.WindowModal-content textarea {
+.Window > .content textarea {
   height: 100%;
   width: 100%;
   resize: none;
   box-sizing: border-box;
 }
-.WindowModal-content .controls {
+.Window > .content .controls {
+  flex-grow: 0;
+}
+
+/* Window */
+.Window {
+  position: absolute;
+  z-index: 99999;
+  background-color: #f1f1f1;
+  border: 1px solid #000000;
+  resize: both;
+  overflow: hidden;
+  width: min(60em, 80%);
+  height: min(30em, 60%);
+  left: 10%;
+  top: 10%;
+
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+}
+.Window > .header {
+  padding: 0.25em;
+  font-weight: bold;
+  cursor: move;
+  z-index: 100000;
+  background-color: #dfdfdf;
+  color: #000000;
   flex-grow: 0;
+  position: relative;
+}
+.Window > .header > .closeBtn {
+}
+.Window > .header > .closeBtn::before {
+  font-family: "Font Awesome 5 Free";
+  content: "\f00d";
+  position: absolute;
+  right: 0.25em;
+  top: 0.25em;
+}
+.Window > .content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
 }