96 lines
2.2 KiB
JavaScript
96 lines
2.2 KiB
JavaScript
function windowBox(id, initialX = 50, initialY = 50) {
|
|
// Load saved data or user defaults
|
|
const saved = JSON.parse(localStorage.getItem(`win_${id}`)) || {
|
|
x: initialX,
|
|
y: initialY,
|
|
min: false,
|
|
};
|
|
|
|
return {
|
|
id: id,
|
|
pos: { x: saved.x, y: saved.y },
|
|
lastPos: { x: saved.x, y: saved.y },
|
|
dragging: false,
|
|
minimized: saved.min,
|
|
fullscreen: false,
|
|
zIndex: Alpine.store("ui").topZ,
|
|
offset: { x: 0, y: 0 },
|
|
|
|
init() {
|
|
// Move window in viewport when browser is other size
|
|
this.keepInBounds();
|
|
},
|
|
|
|
focus() {
|
|
this.zIndex = Alpine.store("ui").getNewZ();
|
|
},
|
|
|
|
startDrag(e) {
|
|
if (e.target.closest("button") || this.fullscreen) return;
|
|
this.focus();
|
|
this.dragging = true;
|
|
this.offset.x = e.clientX - this.pos.x;
|
|
this.offset.y = e.clientY - this.pos.y;
|
|
},
|
|
|
|
onDrag(e) {
|
|
if (!this.dragging) return;
|
|
|
|
// Calc new position
|
|
let newX = e.clientX - this.offset.x;
|
|
let newY = e.clientY - this.offset.y;
|
|
|
|
// Boundary Check
|
|
const margin = 20;
|
|
this.pos.x = Math.max(
|
|
margin - 350,
|
|
Math.min(newX, window.innerWidth - 50),
|
|
);
|
|
this.pos.y = Math.max(0, Math.min(newY, window.innerHeight - 40));
|
|
},
|
|
|
|
stopDrag() {
|
|
this.dragging = false;
|
|
this.save();
|
|
},
|
|
|
|
keepInBounds() {
|
|
if (this.pos.x > window.innerWidth) this.pos.x = window.innerWidth - 400;
|
|
if (this.pos.y > window.innerHeight) this.pos.y = 50;
|
|
},
|
|
|
|
save() {
|
|
localStorage.setItem(
|
|
`win_${this.id}`,
|
|
JSON.stringify({
|
|
x: this.pos.x,
|
|
y: this.pos.y,
|
|
min: this.minimized,
|
|
}),
|
|
);
|
|
},
|
|
|
|
reset() {
|
|
localStorage.removeItem(`win_${this.id}`);
|
|
location.reload();
|
|
},
|
|
|
|
toggleMinimize() {
|
|
this.minimized = !this.minimized;
|
|
this.save();
|
|
},
|
|
|
|
toggleFullscreen() {
|
|
if (!this.fullscreen) {
|
|
this.lastPos = { ...this.pos }; // Save Position
|
|
this.pos = { x: 0, y: 0 };
|
|
this.fullscreen = true;
|
|
} else {
|
|
this.pos = { ...this.lastPos }; // Back to old Position
|
|
this.fullscreen = false;
|
|
}
|
|
this.focus();
|
|
},
|
|
};
|
|
}
|