trinkey/website
1
0
Fork 0
Code Issues Pull requests Activity

bugfix with fullscreen and resizing

Browse source
This commit is contained in:
trinkey 2025-02-13 19:31:05 -05:00
parent 3b0c5e52e2
commit 0ce02af75f
2 changed files with 92 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
js/index.js
View file

@ -16,6 +16,9 @@ function incrementZIndex(windowID, focus = false) {
} }
function edgeMoveEvent(x, y, pos, windowID) { function edgeMoveEvent(x, y, pos, windowID) {
let w = WINDOWS[windowID]; let w = WINDOWS[windowID];
if (w.fullscreen) {
return;
}
if (pos == "top" || pos.startsWith("top-")) { if (pos == "top" || pos.startsWith("top-")) {
w.height = Math.max(-(y - w.vars.mouseOffsetY - w.vars.startingPosY) + w.vars.startingHeight, w.minHeight); w.height = Math.max(-(y - w.vars.mouseOffsetY - w.vars.startingPosY) + w.vars.startingHeight, w.minHeight);
w.posY = Math.max(w.vars.startingHeight - w.height + w.vars.startingPosY, 0); w.posY = Math.max(w.vars.startingHeight - w.height + w.vars.startingPosY, 0);
@ -211,37 +214,38 @@ function createWindow(config) {
} }
}); });
wH.querySelector(".fullscreen").addEventListener("click", function () { wH.querySelector(".fullscreen").addEventListener("click", function () {
if (WINDOWS[config.id].fullscreen) { let window = WINDOWS[config.id];
WINDOWS[config.id].posX = WINDOWS[config.id].vars.oldPosX; if (window.fullscreen) {
WINDOWS[config.id].posY = WINDOWS[config.id].vars.oldPosY; window.posX = Math.max(0, Math.min(innerWidth - window.vars.oldWidth - _windowPaddingX, window.vars.oldPosX));
WINDOWS[config.id].width = WINDOWS[config.id].vars.oldWidth; window.posY = Math.max(0, Math.min(innerHeight - window.vars.oldHeight - _windowPaddingY, window.vars.oldPosY));
WINDOWS[config.id].height = WINDOWS[config.id].vars.oldHeight; window.width = Math.max(window.minWidth, Math.min(window.vars.oldWidth, innerWidth - _windowPaddingX));
WINDOWS[config.id].fullscreen = false; window.height = Math.max(window.minHeight, Math.min(window.vars.oldHeight, innerHeight - _windowPaddingY));
delete WINDOWS[config.id].vars.oldPosX; window.fullscreen = false;
delete WINDOWS[config.id].vars.oldPosY; delete window.vars.oldPosX;
delete WINDOWS[config.id].vars.oldWidth; delete window.vars.oldPosY;
delete WINDOWS[config.id].vars.oldHeight; delete window.vars.oldWidth;
wC.style.left = `${WINDOWS[config.id].posX}px`; delete window.vars.oldHeight;
wC.style.top = `${WINDOWS[config.id].posY}px`; wC.style.left = `${window.posX}px`;
wC.style.width = `${WINDOWS[config.id].width + _windowPaddingX - 2}px`; wC.style.top = `${window.posY}px`;
w.style.width = `${WINDOWS[config.id].width}px`; wC.style.width = `${window.width + _windowPaddingX - 2}px`;
w.style.height = `${WINDOWS[config.id].height}px`; w.style.width = `${window.width}px`;
w.style.height = `${window.height}px`;
} }
else { else {
WINDOWS[config.id].vars.oldPosX = WINDOWS[config.id].posX; window.vars.oldPosX = window.posX;
WINDOWS[config.id].vars.oldPosY = WINDOWS[config.id].posY; window.vars.oldPosY = window.posY;
WINDOWS[config.id].vars.oldWidth = WINDOWS[config.id].width; window.vars.oldWidth = window.width;
WINDOWS[config.id].vars.oldHeight = WINDOWS[config.id].height; window.vars.oldHeight = window.height;
WINDOWS[config.id].fullscreen = true; window.fullscreen = true;
WINDOWS[config.id].posX = 0; window.posX = 0;
WINDOWS[config.id].posY = 0; window.posY = 0;
WINDOWS[config.id].width = innerWidth; window.width = innerWidth;
WINDOWS[config.id].height = innerHeight; window.height = innerHeight;
wC.style.left = "0px"; wC.style.left = "0px";
wC.style.top = "0px"; wC.style.top = "0px";
wC.style.width = `${WINDOWS[config.id].width}px`; wC.style.width = `${window.width}px`;
w.style.width = `${WINDOWS[config.id].width - _windowPaddingX}px`; w.style.width = `${window.width - _windowPaddingX}px`;
w.style.height = `${WINDOWS[config.id].height - _windowPaddingY}px`; w.style.height = `${window.height - _windowPaddingY}px`;
} }
}); });
globalIncrement++; globalIncrement++;
@ -288,14 +292,21 @@ onmouseup = function () {
}; };
onresize = function () { onresize = function () {
for (const window of Object.keys(WINDOWS)) { for (const window of Object.keys(WINDOWS)) {
WINDOWS[window].posX = Math.max(0, Math.min(innerWidth - WINDOWS[window].width - _windowPaddingX, WINDOWS[window].posX)); let w = WINDOWS[window];
WINDOWS[window].posY = Math.max(0, Math.min(innerHeight - WINDOWS[window].height - _windowPaddingY, WINDOWS[window].posY)); if (w.fullscreen) {
WINDOWS[window].width = Math.max(WINDOWS[window].minWidth, Math.min(WINDOWS[window].width, innerWidth - _windowPaddingX)); w.width = innerWidth - _windowPaddingX + 2;
WINDOWS[window].height = Math.max(WINDOWS[window].minHeight, Math.min(WINDOWS[window].height, innerHeight - _windowPaddingY)); w.height = innerHeight - _windowPaddingY + 2;
WINDOWS[window].element.style.left = `${WINDOWS[window].posX}px`; }
WINDOWS[window].element.style.top = `${WINDOWS[window].posY}px`; else {
WINDOWS[window].element.style.width = `${WINDOWS[window].width + _windowPaddingX - 2}px`; w.posX = Math.max(0, Math.min(innerWidth - w.width - _windowPaddingX, w.posX));
WINDOWS[window].element.querySelector(".window").style.width = `${WINDOWS[window].width}px`; w.posY = Math.max(0, Math.min(innerHeight - w.height - _windowPaddingY, w.posY));
WINDOWS[window].element.querySelector(".window").style.height = `${WINDOWS[window].height}px`; w.width = Math.max(w.minWidth, Math.min(w.width, innerWidth - _windowPaddingX));
w.height = Math.max(w.minHeight, Math.min(w.height, innerHeight - _windowPaddingY));
}
w.element.style.left = `${w.posX}px`;
w.element.style.top = `${w.posY}px`;
w.element.style.width = `${w.width + _windowPaddingX - 2}px`;
w.element.querySelector(".window").style.width = `${w.width}px`;
w.element.querySelector(".window").style.height = `${w.height}px`;
} }
}; };

81
ts/index.ts
View file

@ -31,6 +31,8 @@ function incrementZIndex(windowID: string, focus: boolean=false): void {
function edgeMoveEvent(x: number, y: number, pos: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | string, windowID: string): void { function edgeMoveEvent(x: number, y: number, pos: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | string, windowID: string): void {
let w: _winConf = WINDOWS[windowID]; let w: _winConf = WINDOWS[windowID];
if (w.fullscreen) { return; }
if (pos == "top" || pos.startsWith("top-")) { if (pos == "top" || pos.startsWith("top-")) {
w.height = Math.max(-(y - w.vars.mouseOffsetY - w.vars.startingPosY) + w.vars.startingHeight, w.minHeight); w.height = Math.max(-(y - w.vars.mouseOffsetY - w.vars.startingPosY) + w.vars.startingHeight, w.minHeight);
w.posY = Math.max(w.vars.startingHeight - w.height + w.vars.startingPosY, 0); w.posY = Math.max(w.vars.startingHeight - w.height + w.vars.startingPosY, 0);
@ -253,36 +255,37 @@ function createWindow(config: _winInitConf): void {
}); });
wH.querySelector(".fullscreen").addEventListener("click", function(): void { wH.querySelector(".fullscreen").addEventListener("click", function(): void {
if (WINDOWS[config.id].fullscreen) { let window: _winConf = WINDOWS[config.id];
WINDOWS[config.id].posX = WINDOWS[config.id].vars.oldPosX; if (window.fullscreen) {
WINDOWS[config.id].posY = WINDOWS[config.id].vars.oldPosY; window.posX = Math.max(0, Math.min(innerWidth - window.vars.oldWidth - _windowPaddingX, window.vars.oldPosX)); // window.vars.oldPosX;
WINDOWS[config.id].width = WINDOWS[config.id].vars.oldWidth; window.posY = Math.max(0, Math.min(innerHeight - window.vars.oldHeight - _windowPaddingY, window.vars.oldPosY)); // window.vars.oldPosY;
WINDOWS[config.id].height = WINDOWS[config.id].vars.oldHeight; window.width = Math.max(window.minWidth, Math.min(window.vars.oldWidth, innerWidth - _windowPaddingX)); // window.vars.oldWidth;
WINDOWS[config.id].fullscreen = false; window.height = Math.max(window.minHeight, Math.min(window.vars.oldHeight, innerHeight - _windowPaddingY)); // window.vars.oldHeight;
delete WINDOWS[config.id].vars.oldPosX; window.fullscreen = false;
delete WINDOWS[config.id].vars.oldPosY; delete window.vars.oldPosX;
delete WINDOWS[config.id].vars.oldWidth; delete window.vars.oldPosY;
delete WINDOWS[config.id].vars.oldHeight; delete window.vars.oldWidth;
wC.style.left = `${WINDOWS[config.id].posX}px`; delete window.vars.oldHeight;
wC.style.top = `${WINDOWS[config.id].posY}px`; wC.style.left = `${window.posX}px`;
wC.style.width = `${WINDOWS[config.id].width + _windowPaddingX - 2}px`; wC.style.top = `${window.posY}px`;
w.style.width = `${WINDOWS[config.id].width}px`; wC.style.width = `${window.width + _windowPaddingX - 2}px`;
w.style.height = `${WINDOWS[config.id].height}px`; w.style.width = `${window.width}px`;
w.style.height = `${window.height}px`;
} else { } else {
WINDOWS[config.id].vars.oldPosX = WINDOWS[config.id].posX; window.vars.oldPosX = window.posX;
WINDOWS[config.id].vars.oldPosY = WINDOWS[config.id].posY; window.vars.oldPosY = window.posY;
WINDOWS[config.id].vars.oldWidth = WINDOWS[config.id].width; window.vars.oldWidth = window.width;
WINDOWS[config.id].vars.oldHeight = WINDOWS[config.id].height; window.vars.oldHeight = window.height;
WINDOWS[config.id].fullscreen = true; window.fullscreen = true;
WINDOWS[config.id].posX = 0; window.posX = 0;
WINDOWS[config.id].posY = 0; window.posY = 0;
WINDOWS[config.id].width = innerWidth; window.width = innerWidth;
WINDOWS[config.id].height = innerHeight; window.height = innerHeight;
wC.style.left = "0px"; wC.style.left = "0px";
wC.style.top = "0px"; wC.style.top = "0px";
wC.style.width = `${WINDOWS[config.id].width}px`; wC.style.width = `${window.width}px`;
w.style.width = `${WINDOWS[config.id].width - _windowPaddingX}px`; w.style.width = `${window.width - _windowPaddingX}px`;
w.style.height = `${WINDOWS[config.id].height - _windowPaddingY}px`; w.style.height = `${window.height - _windowPaddingY}px`;
} }
}); });
@ -339,17 +342,23 @@ onmouseup = function(): void {
onresize = function(): void { onresize = function(): void {
for (const window of Object.keys(WINDOWS)) { for (const window of Object.keys(WINDOWS)) {
WINDOWS[window].posX = Math.max(0, Math.min(innerWidth - WINDOWS[window].width - _windowPaddingX, WINDOWS[window].posX)); let w: _winConf = WINDOWS[window];
WINDOWS[window].posY = Math.max(0, Math.min(innerHeight - WINDOWS[window].height - _windowPaddingY, WINDOWS[window].posY));
WINDOWS[window].width = Math.max(WINDOWS[window].minWidth, Math.min(WINDOWS[window].width, innerWidth - _windowPaddingX)); if (w.fullscreen) {
WINDOWS[window].height = Math.max(WINDOWS[window].minHeight, Math.min(WINDOWS[window].height, innerHeight - _windowPaddingY)); w.width = innerWidth - _windowPaddingX + 2;
w.height = innerHeight - _windowPaddingY + 2;
} else {
w.posX = Math.max(0, Math.min(innerWidth - w.width - _windowPaddingX, w.posX));
w.posY = Math.max(0, Math.min(innerHeight - w.height - _windowPaddingY, w.posY));
WINDOWS[window].element.style.left = `${WINDOWS[window].posX}px`; w.width = Math.max(w.minWidth, Math.min(w.width, innerWidth - _windowPaddingX));
WINDOWS[window].element.style.top = `${WINDOWS[window].posY}px`; w.height = Math.max(w.minHeight, Math.min(w.height, innerHeight - _windowPaddingY));
}
WINDOWS[window].element.style.width = `${WINDOWS[window].width + _windowPaddingX - 2}px`; w.element.style.left = `${w.posX}px`;
(WINDOWS[window].element.querySelector(".window") as HTMLElement).style.width = `${WINDOWS[window].width }px`; w.element.style.top = `${w.posY}px`;
(WINDOWS[window].element.querySelector(".window") as HTMLElement).style.height = `${WINDOWS[window].height}px`; w.element.style.width = `${w.width + _windowPaddingX - 2}px`;
(w.element.querySelector(".window") as HTMLElement).style.width = `${w.width }px`;
(w.element.querySelector(".window") as HTMLElement).style.height = `${w.height}px`;
} }
} }