2023-03-15 00:05:24 +00:00
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
wde = new WebDesktopEnvironment
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
class WebDesktopEnvironment{
|
|
|
|
constructor(){
|
|
|
|
this.wc = new WindowsCompositor
|
|
|
|
|
2023-03-17 01:16:51 +00:00
|
|
|
//Get basic window ready frame
|
2023-03-17 16:13:41 +00:00
|
|
|
fetch("http://localhost:8080/system/wde/getbasicwindow") //TODO Move to wde func
|
2023-03-15 00:05:24 +00:00
|
|
|
.then((response) => response.text())
|
|
|
|
.then((html) => {
|
2023-03-17 01:16:51 +00:00
|
|
|
WebDesktopEnvironment.SetBasicWindow(html)
|
|
|
|
let app = this.loadApp("personal-properties")
|
2023-03-15 00:05:24 +00:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
2023-03-17 01:16:51 +00:00
|
|
|
WebDesktopEnvironment.Alert(error);
|
2023-03-15 00:05:24 +00:00
|
|
|
});
|
2023-03-17 01:16:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {string} appId
|
|
|
|
* @returns {Application | undefined}
|
|
|
|
*/
|
|
|
|
loadApp(appId){
|
|
|
|
let newApp = document.createElement("application")
|
|
|
|
newApp.setAttribute("id", `application-${appId}`)
|
2023-03-18 00:34:56 +00:00
|
|
|
|
2023-03-17 01:16:51 +00:00
|
|
|
let appElem = document.getElementById("WindowsLayer").appendChild(newApp)
|
|
|
|
|
2023-03-17 16:13:41 +00:00
|
|
|
|
2023-03-17 01:16:51 +00:00
|
|
|
let script = document.createElement("script")
|
2023-03-17 16:13:41 +00:00
|
|
|
script.setAttribute("src", "http://localhost:8080/system/applications/personal-properties/app.js")
|
2023-03-17 01:16:51 +00:00
|
|
|
script.setAttribute("async", "false")
|
|
|
|
appElem.appendChild(script)
|
|
|
|
script.addEventListener("load", function () {
|
|
|
|
let newApp = new PersonalProperties(appElem)
|
|
|
|
newApp.Init()
|
|
|
|
}, false)
|
|
|
|
}
|
|
|
|
|
2023-03-18 00:34:56 +00:00
|
|
|
/**
|
|
|
|
* @param {string} appId
|
|
|
|
* @param {string} windowName
|
2023-03-18 02:16:32 +00:00
|
|
|
* @param {number} width
|
|
|
|
* @param {number} height
|
2023-03-18 00:34:56 +00:00
|
|
|
* @returns {HTMLElement}
|
|
|
|
*/
|
2023-03-18 02:16:32 +00:00
|
|
|
static CreateNewWindow(appId, windowName, width, height) {
|
2023-03-18 00:34:56 +00:00
|
|
|
let appElem = document.getElementById(`application-${appId}`)
|
2023-03-18 02:16:32 +00:00
|
|
|
let newWindow = document.createElement("div")
|
|
|
|
newWindow.setAttribute("class", "StandartApplicationWindow")
|
2023-03-18 00:34:56 +00:00
|
|
|
newWindow.style.position = "absolute"
|
2023-03-18 02:16:32 +00:00
|
|
|
newWindow.style.width = width.toString() + "px"
|
|
|
|
newWindow.style.height = height.toString() + "px"
|
2023-03-18 00:34:56 +00:00
|
|
|
return appElem.appendChild(newWindow)
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {HTMLElement} window
|
|
|
|
*/
|
|
|
|
static CloseWindow(window) {
|
|
|
|
let app = window.parentElement
|
|
|
|
window.remove()
|
|
|
|
// console.log(app.childElementCount)
|
|
|
|
if (app.childElementCount < 2){
|
|
|
|
console.log(app)
|
|
|
|
app.remove()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-03-17 01:16:51 +00:00
|
|
|
static basicWindow
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param {string} html
|
|
|
|
*/
|
|
|
|
static SetBasicWindow(html){
|
|
|
|
this.basicWindow = html
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
static GetBasicWindow(){
|
|
|
|
// console.log(this.basicWindow)
|
|
|
|
return this.basicWindow
|
|
|
|
}
|
2023-03-15 00:05:24 +00:00
|
|
|
|
2023-03-18 00:34:56 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param {string} alertText
|
|
|
|
*/
|
2023-03-17 01:16:51 +00:00
|
|
|
static Alert(alertText){
|
|
|
|
console.log(alertText)
|
2023-03-15 00:05:24 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-03-17 01:16:51 +00:00
|
|
|
var getJSON = function(url, callback) {
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('GET', url, true);
|
|
|
|
xhr.responseType = 'json';
|
|
|
|
xhr.onload = function() {
|
|
|
|
var status = xhr.status;
|
|
|
|
if (status === 200) {
|
|
|
|
callback(null, xhr.response);
|
|
|
|
} else {
|
|
|
|
callback(status, xhr.response);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.send();
|
|
|
|
};
|
2023-03-15 00:05:24 +00:00
|
|
|
|
|
|
|
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){
|
2023-03-17 16:13:41 +00:00
|
|
|
|
2023-03-15 00:05:24 +00:00
|
|
|
switch (true) {
|
2023-03-17 16:13:41 +00:00
|
|
|
case event.target.className == "WindowFrameTopBar":
|
2023-03-18 02:16:32 +00:00
|
|
|
this.movingElement = event.target.parentElement
|
|
|
|
// console.log(this.movingElement)
|
2023-03-15 00:05:24 +00:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {HTMLDivElement} element
|
|
|
|
* @param {number} posX
|
|
|
|
* @param {number} posY
|
|
|
|
*/
|
2023-03-18 02:16:32 +00:00
|
|
|
dragElement(element, posX, posY) { //TODO
|
|
|
|
console.log()
|
|
|
|
element.style.left = (posX - element.clientWidth*0.5)+ "px";
|
|
|
|
element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
|
2023-03-15 00:05:24 +00:00
|
|
|
}
|
2023-03-17 01:16:51 +00:00
|
|
|
}
|
|
|
|
|