Skip to content

Commit

Permalink
reworking resizing
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronw-dev
aaronw-dev committed Jun 26, 2024
1 parent b9f0fda commit e7f16eb
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 89 deletions.
4 changes: 2 additions & 2 deletions os/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
<img src="./icons/search.svg" id="search">
<div class="taskbar-icons">
<img src="./icons/browser.svg"
onclick="new OSWindow('DuckDuckGo','/os/browser','./placeholder-icons/duckduckgo.svg')">
onclick="createWindow('DuckDuckGo','/os/browser','./placeholder-icons/duckduckgo.svg')">
<img src="./icons/terminal.svg"
onclick="new OSWindow('Terminal','/','https:\/\/www.svgrepo.com/show/369598/terminal.svg')">
onclick="createWindow('Terminal','/','https:\/\/www.svgrepo.com/show/369598/terminal.svg')">
<img src="./icons/folder-closed.svg">
</div>
<div class="datetime-block">
Expand Down
80 changes: 78 additions & 2 deletions os/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ var isWindowMaximized
var lastcurrentWindow
var currentSensor
var mouseDownStart = []

function windowGrabHandler(target, mouseInfo) {
if (!isWindowMaximized) {
currentlyGrabbing = true
Expand All @@ -62,7 +63,15 @@ function closeWindowFromActionButton(button) {
let window = button.parentElement.parentElement.parentElement
window.style.display = "none"
}

function minimizeWindow(target) {
target.classList.remove("maximized")
target.style.left = windowPosition[0] + "px"
target.style.top = windowPosition[1] + "px"
}
function maximizeWindow(target) {
target.style = ""
target.classList.add("maximized")
}
document.addEventListener("mousedown", (e) => {
if (e.target.parentElement.className == "window-bar") {
windowGrabHandler(e.target.parentElement.parentElement, e)
Expand All @@ -81,4 +90,71 @@ document.addEventListener("mousemove", (e) => {
windowMoveHandler(e)
})

new OSWindow('DuckDuckGo', '/os/browser', './placeholder-icons/duckduckgo.svg', position = [123, 123])
function elementAttribute(element, key, value) {
element.setAttribute(key, value)
return value
}

function elementAttribute(element, key) {
return element.getAttribute(key)
}
function createWindow(title = "Test", windowsource, icon = "./logo.png", position = [0, 0], dimensions = [500, 500], maximized = false) {
isIconActionsOpen = false
isWindowMaximized = maximized
canGrabWindow = true


let windowElement = document.createElement("div")
windowElement.innerHTML = windowHTML
windowElement.className = "window"

let windowSize = dimensions

windowElement.style.width = windowSize[0] + "px"
windowElement.style.height = windowSize[1] + "px"

windowElement.style.left = position[0] + "px"
windowElement.style.top = position[1] + "px"

let windowPosition = position

windowElement = document.body.appendChild(windowElement)

let frame = windowElement.querySelector("iframe")
frame.src = windowsource
let iconActions = windowElement.querySelector("#icon-actions")
let windowIcon = windowElement.querySelector("#window-icon")
windowIcon.src = icon
windowTitle = windowElement.querySelector("#window-title")

windowTitle.innerText = title

windowIcon.addEventListener("click", (e) => {
isIconActionsOpen = true
iconActions.style.display = ""
})

sensorClickStart = []
document.addEventListener("mousedown", (e) => {
if (isIconActionsOpen && e.target.parentElement.className != "window-bar-action" && e.target.parentElement.className != "window-bar-icon-actions" && e.target.className != "window-icon") {
iconActions.style.display = "none"
}
})
windowElement.querySelector("#close-button").addEventListener("click", (e) => {
windowElement.remove();
})
let directions = ["u", "d", "r", "l", "ur", "ul", "dr", "dl"];
directions.forEach(element => {
console.log(element)
let directionSensor = windowElement.querySelector(`#${element}`)
directionSensor.addEventListener("mousedown", (e) => {
sensorClickStart = [e.clientX, e.clientY]
resizeUp = directionSensor.id.includes("u")
resizeDown = directionSensor.id.includes("d")
resizeRight = directionSensor.id.includes("r")
resizeLeft = directionSensor.id.includes("l")
})
})
}

createWindow('DuckDuckGo', '/os/browser', './placeholder-icons/duckduckgo.svg', position = [123, 123])
91 changes: 6 additions & 85 deletions os/window.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,25 @@ const windowHTML = `
src="https://assets.hackclub.com/icon-rounded.svg">
<span class="window-title" id="window-title">TITLE</span>
<div class="window-bar-action-buttons">
<span class="action-button" style="background-color: #46dd67;" onclick="maximizeWindow()"></span>
<span class="action-button" style="background-color: #eedc39;" onclick="minimizeWindow()"></span>
<span class="action-button" style="background-color: #FF5050;"
<span class="action-button" style="background-color: #46dd67;" onclick="maximizeWindow(this.parentElement.parentElement.parentElement)"></span>
<span class="action-button" style="background-color: #eedc39;" onclick="minimizeWindow(this.parentElement.parentElement.parentElement)"></span>
<span class="action-button" id="close-button" style="background-color: #FF5050;"
onclick="closeWindowFromActionButton(this)"></span>
</div>
<div class="window-bar-icon-actions" id="icon-actions" style="display: none;">
<div class="window-bar-action">
<img src="https://www.svgrepo.com/show/357194/resize-diagonal.svg">
<span>Size</span>
</div>
<div class="window-bar-action" onclick="minimizeWindow()">
<div class="window-bar-action" onclick="minimizeWindow(this.parentElement.parentElement)">
<img src="https://www.svgrepo.com/show/342913/window-minimize.svg">
<span>Minimize</span>
</div>
<div class="window-bar-action" onclick="maximizeWindow()">
<div class="window-bar-action" onclick="maximizeWindow(this.parentElement.parentElement)">
<img src="https://www.svgrepo.com/show/446722/maximize.svg">
<span>Maximize</span>
</div>
<div class="window-bar-action" onclick="closeWindowFromActionButton(this)">
<div class="window-bar-action">
<img src="./close.svg">
<span>Close</span>
</div>
Expand Down Expand Up @@ -61,83 +61,4 @@ class OSWindow {
this.windowElement.style.height = newHeight
}
}
maximizeWindow() {
this.windowElement.style = ""
this.windowElement.classList.add("maximized")
}
minimizeWindow() {
this.windowElement.classList.remove("maximized")
this.windowElement.style.left = windowPosition[0] + "px"
this.windowElement.style.top = windowPosition[1] + "px"
}
constructor(title = "Test", windowsource, icon = "./logo.png", position = [0, 0], dimensions = [500, 500], maximized = false) {
this.windowPosition = []
this.isIconActionsOpen = false
this.isWindowMaximized = maximized
this.canGrabWindow = true


this.windowElement = document.createElement("div")
this.windowElement.innerHTML = windowHTML
this.windowElement.className = "window"

this.windowSize = dimensions

this.windowElement.style.width = this.windowSize[0] + "px"
this.windowElement.style.height = this.windowSize[1] + "px"

this.windowElement.style.left = position[0] + "px"
this.windowElement.style.top = position[1] + "px"
this.windowPosition = position

this.windowElement = document.body.appendChild(this.windowElement)

this.frame = this.windowElement.querySelector("iframe")
this.frame.src = windowsource
this.iconActions = this.windowElement.querySelector("#icon-actions")
this.windowIcon = this.windowElement.querySelector("#window-icon")
this.windowIcon.src = icon
this.windowTitle = this.windowElement.querySelector("#window-title")

this.windowTitle.innerText = title

this.windowIcon.addEventListener("click", (e) => {
this.isIconActionsOpen = true
this.iconActions.style.display = ""
})
this.resizeUp = false;
this.resizeDown = false;
this.resizeRight = false;
this.resizeLeft = false;

this.sensorClickStart = []
document.addEventListener("mousedown", (e) => {
if (this.isIconActionsOpen && e.target.parentElement.className != "window-bar-action" && e.target.parentElement.className != "window-bar-icon-actions" && e.target.className != "window-icon") {
this.iconActions.style.display = "none"
}
})
document.addEventListener("mouseup", (e) => {
this.resizeUp = false;
this.resizeDown = false;
this.resizeRight = false;
this.resizeLeft = false;
this.windowSize = [this.windowElement.style.width.slice(-2), this.windowElement.style.height.slice(-2)]
this.windowPosition = [this.windowElement.style.left.slice(-2), this.windowElement.style.top.slice(-2)]
})
document.addEventListener("mousemove", (e) => {
this.resizeHandler(e)
})
let directions = ["u", "d", "r", "l", "ur", "ul", "dr", "dl"];
directions.forEach(element => {
console.log(element)
let directionSensor = this.windowElement.querySelector(`#${element}`)
directionSensor.addEventListener("mousedown", (e) => {
this.sensorClickStart = [e.clientX, e.clientY]
this.resizeUp = directionSensor.id.includes("u")
this.resizeDown = directionSensor.id.includes("d")
this.resizeRight = directionSensor.id.includes("r")
this.resizeLeft = directionSensor.id.includes("l")
})
})
}
}

0 comments on commit e7f16eb

Please sign in to comment.