diff --git a/package.json b/package.json index 41a61605..a19a8344 100644 --- a/package.json +++ b/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", diff --git a/src/Window.js b/src/Window.js new file mode 100644 index 00000000..09822f99 --- /dev/null +++ b/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; + } +} diff --git a/src/customCategory.js b/src/customCategory.js index 899a8502..087b74e7 100644 --- a/src/customCategory.js +++ b/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) { diff --git a/style.css b/style.css index f513cf8e..a98e0520 100644 --- a/style.css +++ b/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; }