Stephan Bösch-Plepelits
2 years ago
4 changed files with 136 additions and 21 deletions
-
3package.json
-
79src/Window.js
-
22src/customCategory.js
-
53style.css
@ -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; |
||||
|
} |
||||
|
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue