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) {
let w = WINDOWS[windowID];
if (w.fullscreen) {
return;
}
if (pos == "top" || pos.startsWith("top-")) {
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);
@ -211,37 +214,38 @@ function createWindow(config) {
}
});
wH.querySelector(".fullscreen").addEventListener("click", function () {
if (WINDOWS[config.id].fullscreen) {
WINDOWS[config.id].posX = WINDOWS[config.id].vars.oldPosX;
WINDOWS[config.id].posY = WINDOWS[config.id].vars.oldPosY;
WINDOWS[config.id].width = WINDOWS[config.id].vars.oldWidth;
WINDOWS[config.id].height = WINDOWS[config.id].vars.oldHeight;
WINDOWS[config.id].fullscreen = false;
delete WINDOWS[config.id].vars.oldPosX;
delete WINDOWS[config.id].vars.oldPosY;
delete WINDOWS[config.id].vars.oldWidth;
delete WINDOWS[config.id].vars.oldHeight;
wC.style.left = `${WINDOWS[config.id].posX}px`;
wC.style.top = `${WINDOWS[config.id].posY}px`;
wC.style.width = `${WINDOWS[config.id].width + _windowPaddingX - 2}px`;
w.style.width = `${WINDOWS[config.id].width}px`;
w.style.height = `${WINDOWS[config.id].height}px`;
let window = WINDOWS[config.id];
if (window.fullscreen) {
window.posX = Math.max(0, Math.min(innerWidth - window.vars.oldWidth - _windowPaddingX, window.vars.oldPosX));
window.posY = Math.max(0, Math.min(innerHeight - window.vars.oldHeight - _windowPaddingY, window.vars.oldPosY));
window.width = Math.max(window.minWidth, Math.min(window.vars.oldWidth, innerWidth - _windowPaddingX));
window.height = Math.max(window.minHeight, Math.min(window.vars.oldHeight, innerHeight - _windowPaddingY));
window.fullscreen = false;
delete window.vars.oldPosX;
delete window.vars.oldPosY;
delete window.vars.oldWidth;
delete window.vars.oldHeight;
wC.style.left = `${window.posX}px`;
wC.style.top = `${window.posY}px`;
wC.style.width = `${window.width + _windowPaddingX - 2}px`;
w.style.width = `${window.width}px`;
w.style.height = `${window.height}px`;
}
else {
WINDOWS[config.id].vars.oldPosX = WINDOWS[config.id].posX;
WINDOWS[config.id].vars.oldPosY = WINDOWS[config.id].posY;
WINDOWS[config.id].vars.oldWidth = WINDOWS[config.id].width;
WINDOWS[config.id].vars.oldHeight = WINDOWS[config.id].height;
WINDOWS[config.id].fullscreen = true;
WINDOWS[config.id].posX = 0;
WINDOWS[config.id].posY = 0;
WINDOWS[config.id].width = innerWidth;
WINDOWS[config.id].height = innerHeight;
window.vars.oldPosX = window.posX;
window.vars.oldPosY = window.posY;
window.vars.oldWidth = window.width;
window.vars.oldHeight = window.height;
window.fullscreen = true;
window.posX = 0;
window.posY = 0;
window.width = innerWidth;
window.height = innerHeight;
wC.style.left = "0px";
wC.style.top = "0px";
wC.style.width = `${WINDOWS[config.id].width}px`;
w.style.width = `${WINDOWS[config.id].width - _windowPaddingX}px`;
w.style.height = `${WINDOWS[config.id].height - _windowPaddingY}px`;
wC.style.width = `${window.width}px`;
w.style.width = `${window.width - _windowPaddingX}px`;
w.style.height = `${window.height - _windowPaddingY}px`;
}
});
globalIncrement++;
@ -288,14 +292,21 @@ onmouseup = function () {
};
onresize = function () {
for (const window of Object.keys(WINDOWS)) {
WINDOWS[window].posX = Math.max(0, Math.min(innerWidth - WINDOWS[window].width - _windowPaddingX, WINDOWS[window].posX));
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));
WINDOWS[window].height = Math.max(WINDOWS[window].minHeight, Math.min(WINDOWS[window].height, innerHeight - _windowPaddingY));
WINDOWS[window].element.style.left = `${WINDOWS[window].posX}px`;
WINDOWS[window].element.style.top = `${WINDOWS[window].posY}px`;
WINDOWS[window].element.style.width = `${WINDOWS[window].width + _windowPaddingX - 2}px`;
WINDOWS[window].element.querySelector(".window").style.width = `${WINDOWS[window].width}px`;
WINDOWS[window].element.querySelector(".window").style.height = `${WINDOWS[window].height}px`;
let w = WINDOWS[window];
if (w.fullscreen) {
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));
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 {
let w: _winConf = WINDOWS[windowID];
if (w.fullscreen) { return; }
if (pos == "top" || pos.startsWith("top-")) {
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);
@ -253,36 +255,37 @@ function createWindow(config: _winInitConf): void {
});
wH.querySelector(".fullscreen").addEventListener("click", function(): void {
if (WINDOWS[config.id].fullscreen) {
WINDOWS[config.id].posX = WINDOWS[config.id].vars.oldPosX;
WINDOWS[config.id].posY = WINDOWS[config.id].vars.oldPosY;
WINDOWS[config.id].width = WINDOWS[config.id].vars.oldWidth;
WINDOWS[config.id].height = WINDOWS[config.id].vars.oldHeight;
WINDOWS[config.id].fullscreen = false;
delete WINDOWS[config.id].vars.oldPosX;
delete WINDOWS[config.id].vars.oldPosY;
delete WINDOWS[config.id].vars.oldWidth;
delete WINDOWS[config.id].vars.oldHeight;
wC.style.left = `${WINDOWS[config.id].posX}px`;
wC.style.top = `${WINDOWS[config.id].posY}px`;
wC.style.width = `${WINDOWS[config.id].width + _windowPaddingX - 2}px`;
w.style.width = `${WINDOWS[config.id].width}px`;
w.style.height = `${WINDOWS[config.id].height}px`;
let window: _winConf = WINDOWS[config.id];
if (window.fullscreen) {
window.posX = Math.max(0, Math.min(innerWidth - window.vars.oldWidth - _windowPaddingX, window.vars.oldPosX)); // window.vars.oldPosX;
window.posY = Math.max(0, Math.min(innerHeight - window.vars.oldHeight - _windowPaddingY, window.vars.oldPosY)); // window.vars.oldPosY;
window.width = Math.max(window.minWidth, Math.min(window.vars.oldWidth, innerWidth - _windowPaddingX)); // window.vars.oldWidth;
window.height = Math.max(window.minHeight, Math.min(window.vars.oldHeight, innerHeight - _windowPaddingY)); // window.vars.oldHeight;
window.fullscreen = false;
delete window.vars.oldPosX;
delete window.vars.oldPosY;
delete window.vars.oldWidth;
delete window.vars.oldHeight;
wC.style.left = `${window.posX}px`;
wC.style.top = `${window.posY}px`;
wC.style.width = `${window.width + _windowPaddingX - 2}px`;
w.style.width = `${window.width}px`;
w.style.height = `${window.height}px`;
} else {
WINDOWS[config.id].vars.oldPosX = WINDOWS[config.id].posX;
WINDOWS[config.id].vars.oldPosY = WINDOWS[config.id].posY;
WINDOWS[config.id].vars.oldWidth = WINDOWS[config.id].width;
WINDOWS[config.id].vars.oldHeight = WINDOWS[config.id].height;
WINDOWS[config.id].fullscreen = true;
WINDOWS[config.id].posX = 0;
WINDOWS[config.id].posY = 0;
WINDOWS[config.id].width = innerWidth;
WINDOWS[config.id].height = innerHeight;
window.vars.oldPosX = window.posX;
window.vars.oldPosY = window.posY;
window.vars.oldWidth = window.width;
window.vars.oldHeight = window.height;
window.fullscreen = true;
window.posX = 0;
window.posY = 0;
window.width = innerWidth;
window.height = innerHeight;
wC.style.left = "0px";
wC.style.top = "0px";
wC.style.width = `${WINDOWS[config.id].width}px`;
w.style.width = `${WINDOWS[config.id].width - _windowPaddingX}px`;
w.style.height = `${WINDOWS[config.id].height - _windowPaddingY}px`;
wC.style.width = `${window.width}px`;
w.style.width = `${window.width - _windowPaddingX}px`;
w.style.height = `${window.height - _windowPaddingY}px`;
}
});
@ -339,17 +342,23 @@ onmouseup = function(): void {
onresize = function(): void {
for (const window of Object.keys(WINDOWS)) {
WINDOWS[window].posX = Math.max(0, Math.min(innerWidth - WINDOWS[window].width - _windowPaddingX, WINDOWS[window].posX));
WINDOWS[window].posY = Math.max(0, Math.min(innerHeight - WINDOWS[window].height - _windowPaddingY, WINDOWS[window].posY));
let w: _winConf = WINDOWS[window];
WINDOWS[window].width = Math.max(WINDOWS[window].minWidth, Math.min(WINDOWS[window].width, innerWidth - _windowPaddingX));
WINDOWS[window].height = Math.max(WINDOWS[window].minHeight, Math.min(WINDOWS[window].height, innerHeight - _windowPaddingY));
if (w.fullscreen) {
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`;
WINDOWS[window].element.style.top = `${WINDOWS[window].posY}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));
}
WINDOWS[window].element.style.width = `${WINDOWS[window].width + _windowPaddingX - 2}px`;
(WINDOWS[window].element.querySelector(".window") as HTMLElement).style.width = `${WINDOWS[window].width }px`;
(WINDOWS[window].element.querySelector(".window") as HTMLElement).style.height = `${WINDOWS[window].height}px`;
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") as HTMLElement).style.width = `${w.width }px`;
(w.element.querySelector(".window") as HTMLElement).style.height = `${w.height}px`;
}
}