301 lines
8.2 KiB
JavaScript
301 lines
8.2 KiB
JavaScript
import { ref } from 'vue'
|
|
|
|
const windows = ref([]);
|
|
|
|
import LoginWindow from '~/components/windows/LoginWindow.vue';
|
|
|
|
let windowMap = {
|
|
login: LoginWindow
|
|
};
|
|
|
|
async function InjectWindow(window_type, plugin, window_component) {
|
|
let systemWidows = {};
|
|
systemWidows[window_type] = (await import(`../../plugins/${plugin}/views/${window_component}.vue`)).default;
|
|
windowMap = { ...windowMap, ...systemWidows };
|
|
}
|
|
|
|
// Presets
|
|
const defValues = {
|
|
'login': {
|
|
id: 'login',
|
|
title: 'Login',
|
|
}
|
|
}
|
|
|
|
const reload = ref(0);
|
|
|
|
let ReloadRef = () => { return reload };
|
|
let Windows = () => { return windows };
|
|
let WindowMap = () => { return windowMap };
|
|
|
|
let currentIndex = 10;
|
|
|
|
function SetupHandle(id, handle) {
|
|
|
|
// Update window info with handle info
|
|
|
|
let win = GetWindowWithId(id);
|
|
|
|
let currentWindowId = "window-wrapper-" + id;
|
|
let currentWindowHandleId = "window-handle-" + id;
|
|
let currentWindowResizerId = "window-resize-handle-" + id;
|
|
|
|
let draggingWindow = false;
|
|
let resizingWindow = false;
|
|
|
|
let currentWindow = document.getElementById(currentWindowId);
|
|
let handler = document.getElementById(currentWindowHandleId);
|
|
let resizer = document.getElementById(currentWindowResizerId);
|
|
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
|
|
let resizeOffsetX = 0;
|
|
let resizeOffsetY = 0;
|
|
|
|
// Programar un resizer mitjanament competent
|
|
|
|
currentWindow.addEventListener("mousedown", (event) => {
|
|
SetOnTop(id);
|
|
});
|
|
|
|
handler.addEventListener("mousedown", (event) => {
|
|
draggingWindow = true;
|
|
|
|
let windowRect = currentWindow.getBoundingClientRect();
|
|
offsetX = windowRect.left - event.clientX;
|
|
offsetY = windowRect.top - event.clientY;
|
|
})
|
|
|
|
// Move window listeners
|
|
document.addEventListener("mousemove", (event) => {
|
|
if (!draggingWindow) return;
|
|
|
|
if (event.clientX + offsetX < -currentWindow.getBoundingClientRect().width + 20) currentWindow.style.left = (-currentWindow.getBoundingClientRect().width + 20) + "px";
|
|
else if (event.clientX + offsetX > window.innerWidth - 20) currentWindow.style.left = (window.innerWidth - 20) + "px";
|
|
else currentWindow.style.left = (event.clientX + offsetX) + "px";
|
|
|
|
if (event.clientY + offsetY < 0) currentWindow.style.top = (0) + "px";
|
|
else if (event.clientY + offsetY > window.innerHeight - 20) currentWindow.style.top = (window.innerHeight - 20) + "px";
|
|
else currentWindow.style.top = (event.clientY + offsetY) + "px";
|
|
})
|
|
|
|
document.addEventListener("mouseup", (event) => {
|
|
draggingWindow = false;
|
|
// ummm suposo que no pots tancar mentres mous?
|
|
SaveWindowPos({ id, x: parseInt(currentWindow.style.left, 10), y: parseInt(currentWindow.style.top, 10) });
|
|
});
|
|
|
|
// Resize window listeners
|
|
resizer.addEventListener("mousedown", (event) => {
|
|
resizingWindow = true;
|
|
|
|
let windowRect = currentWindow.getBoundingClientRect();
|
|
resizeOffsetX = parseInt(currentWindow.style.width) - event.clientX;
|
|
resizeOffsetY = parseInt(currentWindow.style.height) - event.clientY;
|
|
});
|
|
|
|
document.addEventListener("mousemove", (event) => {
|
|
if (!resizingWindow) return;
|
|
|
|
let newWidth = event.clientX + resizeOffsetX;
|
|
let newHeight = event.clientY + resizeOffsetY;
|
|
|
|
if (win.minHeight) if (win.minHeight > newHeight) newHeight = win.minHeight;
|
|
if (win.maxHeight) if (win.maxHeight < newHeight) newHeight = win.maxHeight;
|
|
|
|
if (win.minWidth) if (win.minWidth > newWidth) newWidth = win.minWidth;
|
|
if (win.maxWidth) if (win.maxWidth < newWidth) newWidth = win.maxWidth;
|
|
|
|
currentWindow.style.width = newWidth + "px";
|
|
currentWindow.style.height = newHeight + "px";
|
|
});
|
|
|
|
document.addEventListener("mouseup", (event) => {
|
|
resizingWindow = false;
|
|
|
|
win.width = parseInt(currentWindow.style.width, 10);
|
|
win.height = parseInt(currentWindow.style.height, 10);
|
|
});
|
|
|
|
handle.value.setupHandle();
|
|
}
|
|
|
|
function SetResizable(id, resizable) {
|
|
let win = GetWindowWithId(id);
|
|
win.resizable = resizable;
|
|
}
|
|
|
|
function SetSize(id, size) {
|
|
let currentWindowId = "window-wrapper-" + id;
|
|
let currentWindow = document.getElementById(currentWindowId);
|
|
let win = GetWindowWithId(id);
|
|
|
|
currentWindow.style.width = size.width + "px";
|
|
currentWindow.style.height = size.height + "px";
|
|
|
|
win.width = size.width;
|
|
}
|
|
|
|
function SetMaxSize(id, maxSize) {
|
|
let win = GetWindowWithId(id);
|
|
|
|
if (maxSize.width) win.maxWidth = maxSize.width;
|
|
else win.maxWidth = win.width;
|
|
|
|
if (maxSize.height) win.maxHeight = maxSize.height;
|
|
else win.maxHeight = win.height;
|
|
}
|
|
|
|
function SetMinSize(id, minSize) {
|
|
let win = GetWindowWithId(id);
|
|
|
|
if (minSize.width) win.minWidth = minSize.width;
|
|
else win.minWidth = win.width;
|
|
|
|
if (minSize.height) win.minHeight = minSize.height;
|
|
else win.minHeight = win.height;
|
|
}
|
|
|
|
function SetPosition(id, pos) {
|
|
let currentWindowId = "window-wrapper-" + id;
|
|
let currentWindow = document.getElementById(currentWindowId);
|
|
|
|
if (pos == "center") {
|
|
let x = window.innerWidth / 2;
|
|
let y = window.innerHeight / 2;
|
|
|
|
currentWindow.style.left = (x - currentWindow.getBoundingClientRect().width / 2) + "px";
|
|
currentWindow.style.top = (y - currentWindow.getBoundingClientRect().height / 2) + "px";
|
|
|
|
return;
|
|
}
|
|
|
|
currentWindow.style.top = pos.y + "px";
|
|
currentWindow.style.left = pos.x + "px";
|
|
|
|
SaveWindowPos({ id, x: pos.x, y: pos.y })
|
|
}
|
|
|
|
function GetPosition(id) {
|
|
let win = GetWindowWithId(id);
|
|
return { x: win.x, y: win.y };
|
|
}
|
|
|
|
function ResetPosition(id, pos) {
|
|
let win = GetWindowWithId(id);
|
|
let data = { x: win.x, y: win.y };
|
|
|
|
if (data.x && data.y) {
|
|
SetPosition(id, data);
|
|
return;
|
|
}
|
|
SetPosition(id, pos);
|
|
}
|
|
|
|
|
|
function CreateWindow(type, data = {}) {
|
|
|
|
let finalData = { ...{ type }, ...defValues[type], ...data }
|
|
console.log(finalData);
|
|
|
|
let contains = false;
|
|
for (let i = 0; i < windows.value.length; i++) {
|
|
if (windows.value[i].id == finalData.id) {
|
|
contains = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!contains) {
|
|
windows.value.push(finalData);
|
|
console.log("Pushed ", finalData.id);
|
|
// reload.value += 1;
|
|
|
|
console.log(windows.value);
|
|
setTimeout(() => {
|
|
SetOnTop(finalData.id);
|
|
if (finalData.create) finalData.create();
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
function CreateChildWindow(parentId, type, data = {}) {
|
|
let finalData = { ...{ type }, ...defValues[type], ...data }
|
|
|
|
let parent = GetWindowWithId(parentId);
|
|
if (parent.children) parent.children.push(finalData.id);
|
|
else parent.children = [finalData.id];
|
|
CreateWindow(type, data);
|
|
}
|
|
|
|
function ClearAll() {
|
|
Object.keys(windows).forEach((key) => {
|
|
windows.value = [];
|
|
});
|
|
}
|
|
|
|
function ClearWindows(data) {
|
|
for (let i = 0; i < windows.value.length; i++) {
|
|
ClearWindow(windows.value[i].id);
|
|
}
|
|
// reload.value += 1;
|
|
}
|
|
|
|
function ClearWindow(id) {
|
|
let win = GetWindowWithId(id);
|
|
if (!win) return;
|
|
if (win.children) for (let i = 0; i < win.children.length; i++) ClearWindow(win.children[i]);
|
|
windows.value = windows.value.filter((e) => { return e.id !== id });
|
|
// reload.value += 1;
|
|
}
|
|
|
|
function GetWindowWithId(id) {
|
|
for (let i = 0; i < windows.value.length; i++) {
|
|
if (windows.value[i].id == id) {
|
|
return windows.value[i];
|
|
}
|
|
}
|
|
}
|
|
|
|
function CallWindow(id, callableName, arg) {
|
|
let win = GetWindowWithId(id);
|
|
win[callableName](arg);
|
|
}
|
|
|
|
function SaveWindowPos(data) {
|
|
let win = GetWindowWithId(data.id);
|
|
if (win === undefined) return;
|
|
win.x = data.x;
|
|
win.y = data.y;
|
|
}
|
|
|
|
function SetOnTop(id) {
|
|
let currentWindowId = "window-wrapper-" + id;
|
|
let currentWindow = document.getElementById(currentWindowId);
|
|
|
|
currentIndex += 1;
|
|
currentWindow.style.zIndex = currentIndex;
|
|
}
|
|
|
|
export {
|
|
SetupHandle,
|
|
SetSize,
|
|
SetResizable,
|
|
SetMaxSize,
|
|
SetMinSize,
|
|
SetPosition,
|
|
ResetPosition,
|
|
Windows,
|
|
WindowMap,
|
|
InjectWindow,
|
|
ReloadRef,
|
|
ClearWindows,
|
|
CreateWindow,
|
|
CreateChildWindow,
|
|
CallWindow,
|
|
GetWindowWithId,
|
|
SaveWindowPos,
|
|
GetPosition,
|
|
ClearWindow,
|
|
ClearAll
|
|
} |