73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
wde = new WebDesktopEnvironment
|
|
|
|
}, false);
|
|
|
|
class WebDesktopEnvironment{
|
|
constructor(){
|
|
this.wc = new WindowsCompositor
|
|
|
|
fetch("http://localhost:8080/getmockapp" /*, options */)
|
|
.then((response) => response.text())
|
|
.then((html) => {
|
|
document.getElementById("WindowsLayer").innerHTML = html;
|
|
})
|
|
.catch((error) => {
|
|
console.warn(error);
|
|
});
|
|
|
|
// var iDiv = document.createElement('div');
|
|
// iDiv.id = 'NewCoolApp';
|
|
// iDiv.className = 'Application';
|
|
// iDiv.style.width = "100px"
|
|
// iDiv.style.height = "100px"
|
|
// document.getElementById('WindowsLayer').appendChild(iDiv)
|
|
// document.getElementById('WindowsLayer')[0].appendChild(iDiv);
|
|
}
|
|
}
|
|
|
|
|
|
class WindowsCompositor{
|
|
movingElement = null
|
|
|
|
constructor(){
|
|
console.log("Windows Compositor is online :)");
|
|
addEventListener("mousedown", (event) => {
|
|
this.catchClick(event)
|
|
})
|
|
addEventListener("mouseup", (event) => {
|
|
this.movingElement = null
|
|
})
|
|
addEventListener("mousemove", (event) => {
|
|
if (this.movingElement != null) {
|
|
this.dragElement(this.movingElement, event.clientX, event.clientY)
|
|
} else {
|
|
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
/**
|
|
* @param {MouseEvent} event
|
|
*/
|
|
catchClick(event){
|
|
switch (true) {
|
|
case event.target.className == "WindowDragArea":
|
|
this.movingElement = event.target.parentElement
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLDivElement} element
|
|
* @param {number} posX
|
|
* @param {number} posY
|
|
*/
|
|
dragElement(element, posX, posY) {
|
|
element.style.left = posX + "px";
|
|
element.style.top = posY + "px";
|
|
}
|
|
} |