Compare commits

...

6 Commits

6 changed files with 65 additions and 60 deletions

View File

@ -20,8 +20,7 @@ class Finder{
let fileView = new FileView("/kek", newWindow.querySelector(".FileTileView"), Finder.Click)
if (!WebDesktopEnvironment.isMobile){
let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
let closeButton = newWindow.children[0].children[0] //TODO to query selector
closeButton.addEventListener('click', function (params) {
newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
WebDesktopEnvironment.CloseWindow(newWindow)
})
}

View File

@ -10,14 +10,13 @@ class ImgViewer{
.then((response) => response.text())
.then((html) => {
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 450,400 )
newWindow.innerHTML = html
let closeButton = newWindow.children[0].children[0]
closeButton.addEventListener('click', function (params) {
WebDesktopEnvironment.CloseWindow(newWindow)
})
if (!WebDesktopEnvironment.isMobile){
newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
WebDesktopEnvironment.CloseWindow(newWindow)
})
}
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);

View File

@ -22,11 +22,10 @@ class PersonalProperties{
newWindow.innerHTML = html
let closeButton = newWindow.querySelector("closeWindowButton")
let scrollDiv = newWindow.children[1]
let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0])
let scrollBar = new WdeScrollBar(newWindow.querySelector('.ScrollBarScrollElement'), newWindow.querySelector('.ScrollContent'))
closeButton.addEventListener('click', function (params) {
newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
console.log("qewqweqweqweqwe")
WebDesktopEnvironment.CloseWindow(newWindow)
})
})

View File

@ -1,3 +1,4 @@
//TODO Delete this file
;(function(root, factory) {
if (typeof exports === 'object') {
module.exports = factory(window, document)

View File

@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', function() {
wde = new WebDesktopEnvironment
if (!WebDesktopEnvironment.isMobile){
WebDesktopEnvironment.Open("finder", ["kek"])
WebDesktopEnvironment.Open("personal-properties", ["kek"])
}
@ -13,9 +14,8 @@ class WebDesktopEnvironment{
static Applications = {};
static isMobile = false
constructor(){
this.wc = new WindowsCompositor
WebDesktopEnvironment.isMobile = WebDesktopEnvironment.CheckMobile()
let applications = document.createElement("div")
applications.setAttribute('id', 'applications')
document.body.appendChild(applications)
@ -26,40 +26,36 @@ class WebDesktopEnvironment{
let mobileDesktop = document.createElement("div")
mobileDesktop.setAttribute('id', 'mobile-desktop')
document.body.appendChild(mobileDesktop)
// let windowsLayer = document.createElement("div")
// windowsLayer.setAttribute('id', 'windows-layer')
// mobileDesktop.appendChild(windowsLayer)
fetch(`${window.location.origin}/system/wde/renderMobileDesktop` )
.then((response) => response.text())
.then((html) => {
mobileDesktop.innerHTML = html
WebDesktopEnvironment.LoadApp("finder", () =>{
console.log("lel")
new FileView("/kek", mobileDesktop.querySelector(".FileTileView"), Finder.Click)
mobileDesktop.querySelector('#about-me').addEventListener('click', (event) => {
//TODO Do not allow launch second instance
WebDesktopEnvironment.Open("personal-properties", [])
})
mobileDesktop.querySelector('#mobile-dekstop-close').addEventListener('click', (event) => {
// console.log('close')
WebDesktopEnvironment.CloseFocusedWindow()
})
})
}).then(()=>{
})
.catch((error) => {
WebDesktopEnvironment.Alert(error);
})
} else{
document.body.style.setProperty('--zoom', 1)
let windowsLayer = document.createElement("div")
windowsLayer.setAttribute('id', 'windows-layer')
document.body.appendChild(windowsLayer)
}
this.wc = new WindowsCompositor
}
/**
@ -68,18 +64,13 @@ class WebDesktopEnvironment{
* @returns {Application | undefined}
*/
static LoadApp(appId, func){
console.log(`Load application ${appId}`)
// let appDiv = document.createElement("application")
// appDiv.setAttribute("id", `application-${appId}`)
// document.getElementById("applications").appendChild(appDiv)
// console.log(`Load application ${appId}`)
let script = document.createElement("script")
script.setAttribute("appId", appId)
script.setAttribute("src", `${window.location.origin}/system/applications/${appId}/app.js`)
script.setAttribute("async", "false")
document.getElementById("applications").appendChild(script)
// let appElem = document.getElementById("applications").appendChild(script)
script.addEventListener('load', (event) =>{
switch (appId) {
@ -127,7 +118,6 @@ class WebDesktopEnvironment{
* @returns {HTMLElement}
*/
static CreateNewWindow(appId, width, height) {
// let appElem = document.getElementById(`application-${appId}`)
let newWindow = document.createElement("div")
if (WebDesktopEnvironment.isMobile){
newWindow.setAttribute("class", "MobileApplicationWindow")
@ -148,13 +138,13 @@ class WebDesktopEnvironment{
* @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()
// }
}
static CloseFocusedWindow() {
if (document.body.querySelector('#windows-layer').childElementCount > 1){
document.body.querySelector('#windows-layer').lastElementChild.remove()
}
}
/**
@ -168,7 +158,6 @@ class WebDesktopEnvironment{
* @returns {string}
*/
static GetBasicWindow(){
// console.log(this.basicWindow)
return this.basicWindow
}
@ -202,34 +191,53 @@ var getJSON = function(url, callback) {
};
class WindowsCompositor{
windowLayer = undefined
movingElement = null
xPosInit = 0
yPosInit = 0
//TODO refactor this to dynamic add/remove listeners
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 {
}
})
this.windowLayer = document.body.querySelector('#windows-layer')
if (!WebDesktopEnvironment.isMobile) {
addEventListener("mousedown", (event) => {
this.xPosInit = event.offsetX
this.yPosInit = event.offsetY
this.bringWindowToFront(event.target.closest('.StandartApplicationWindow'))
this.catchClick(event)
})
addEventListener("mouseup", (event) => {
this.movingElement = null
this.xPosInit = 0
})
addEventListener("mousemove", (event) => {
if (this.movingElement != null) {
this.dragElement(this.movingElement, event.clientX - this.xPosInit, event.clientY - this.yPosInit)
} else {
}
})
}
}
/**
* @param {HTMLElement} window
*/
bringWindowToFront(window){
this.windowLayer.insertBefore(this.windowLayer.lastChild, window)
}
/**
* @param {MouseEvent} event
*/
catchClick(event){
switch (true) {
case event.target.className == "WindowFrameTopBar":
this.movingElement = event.target.parentElement
// console.log(this.movingElement)
break;
default:
break;
@ -242,8 +250,7 @@ class WindowsCompositor{
* @param {number} posY
*/
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";
element.style.left = `${posX}px`
element.style.top = `${posY}px`
}
}

View File

@ -15,7 +15,7 @@
<div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/desktop.png');"></div>
<div class="FileTileTitle NoClick">Home</div>
</div>
<div id="Home" class="FileTile">
<div id="mobile-dekstop-close" class="FileTile">
<div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/trash.png');"></div>
<div class="FileTileTitle NoClick">Close</div>
</div>