408 lines
17 KiB
JavaScript
408 lines
17 KiB
JavaScript
const _windowPaddingX = 1 * 2 + 10 * 2;
|
|
const _windowPaddingY = 1 * 2 + 10 * 2 + 35;
|
|
let WINDOWS = {};
|
|
let MOUSE_MOVE_PROCESSING = {};
|
|
let globalIncrement = 1;
|
|
function escapeHTML(string) {
|
|
return string.replaceAll("&", "&").replaceAll("<", "<").replaceAll("\"", """);
|
|
}
|
|
function incrementZIndex(windowID, focus = false) {
|
|
WINDOWS[windowID].element.style.zIndex = String(globalIncrement);
|
|
WINDOWS[windowID].zIndex = globalIncrement;
|
|
globalIncrement++;
|
|
if (focus) {
|
|
WINDOWS[windowID].element.focus();
|
|
}
|
|
}
|
|
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);
|
|
if (w.posY < 0) {
|
|
w.height -= w.posY;
|
|
w.posY = 0;
|
|
}
|
|
}
|
|
else if (pos == "bottom" || pos.startsWith("bottom-")) {
|
|
w.height = Math.max(y - w.vars.mouseOffsetY - w.vars.startingPosY + w.vars.startingHeight, w.minHeight);
|
|
}
|
|
if (pos == "left" || pos.endsWith("-left")) {
|
|
w.width = Math.max(-(x - w.vars.mouseOffsetX - w.vars.startingPosX) + w.vars.startingWidth, w.minWidth);
|
|
w.posX = Math.max(w.vars.startingWidth - w.width + w.vars.startingPosX, 0);
|
|
if (w.posX < 0) {
|
|
w.width -= w.posX;
|
|
w.posX = 0;
|
|
}
|
|
}
|
|
else if (pos == "right" || pos.endsWith("-right")) {
|
|
w.width = Math.max(x - w.vars.mouseOffsetX - w.vars.startingPosX + w.vars.startingWidth, w.minWidth);
|
|
}
|
|
if (w.posX + w.width + _windowPaddingX > innerWidth) {
|
|
w.width = Math.max(innerWidth - w.posX - _windowPaddingX, w.minWidth);
|
|
}
|
|
if (w.posY + w.height + _windowPaddingY > innerHeight) {
|
|
w.height = Math.max(innerHeight - w.posY - _windowPaddingY, w.minHeight);
|
|
}
|
|
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`;
|
|
}
|
|
function mouseMoveEvent(windowID, x, y) {
|
|
let w = WINDOWS[windowID];
|
|
w.posX = Math.max(0, Math.min(innerWidth - w.width - _windowPaddingX, x - w.vars.mouseOffsetX));
|
|
w.posY = Math.max(0, Math.min(innerHeight - w.height - _windowPaddingY, y - w.vars.mouseOffsetY));
|
|
w.element.style.left = `${w.posX}px`;
|
|
w.element.style.top = `${w.posY}px`;
|
|
}
|
|
function syncInputs(windowID) {
|
|
let windowInput = WINDOWS[windowID].element.querySelector("input.window-input");
|
|
let windowVisualText = WINDOWS[windowID].element.querySelector("[data-type-area]");
|
|
let w = WINDOWS[windowID].element.querySelector(".window");
|
|
if (!windowVisualText) {
|
|
return;
|
|
}
|
|
setTimeout(function () {
|
|
let text = windowInput.value;
|
|
let cursor = windowInput.selectionStart;
|
|
if (cursor == text.length) {
|
|
windowVisualText.innerHTML = `${escapeHTML(text)}<i class="cursor"> </i>`;
|
|
}
|
|
else {
|
|
windowVisualText.innerHTML = `${escapeHTML(text.slice(0, cursor))}<span class="cursor">${escapeHTML(text[cursor])}</span>${escapeHTML(text.slice(cursor + 1))}`;
|
|
}
|
|
}, 1);
|
|
w.scrollTop = w.scrollHeight;
|
|
}
|
|
function setCursor(windowID) {
|
|
let windowInput = WINDOWS[windowID].element.querySelector("input.window-input");
|
|
setTimeout(() => {
|
|
windowInput.setSelectionRange(windowInput.value.length, windowInput.value.length);
|
|
syncInputs(windowID);
|
|
}, 1);
|
|
}
|
|
function toggleFullscreen(windowID) {
|
|
let w = WINDOWS[windowID];
|
|
if (w.fullscreen) {
|
|
w.posX = Math.max(0, Math.min(innerWidth - w.vars.oldWidth - _windowPaddingX, w.vars.oldPosX));
|
|
w.posY = Math.max(0, Math.min(innerHeight - w.vars.oldHeight - _windowPaddingY, w.vars.oldPosY));
|
|
w.width = Math.max(w.minWidth, Math.min(w.vars.oldWidth, innerWidth - _windowPaddingX));
|
|
w.height = Math.max(w.minHeight, Math.min(w.vars.oldHeight, innerHeight - _windowPaddingY));
|
|
w.fullscreen = false;
|
|
delete w.vars.oldPosX;
|
|
delete w.vars.oldPosY;
|
|
delete w.vars.oldWidth;
|
|
delete w.vars.oldHeight;
|
|
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`;
|
|
}
|
|
else {
|
|
w.vars.oldPosX = w.posX;
|
|
w.vars.oldPosY = w.posY;
|
|
w.vars.oldWidth = w.width;
|
|
w.vars.oldHeight = w.height;
|
|
w.fullscreen = true;
|
|
w.posX = 0;
|
|
w.posY = 0;
|
|
w.width = innerWidth;
|
|
w.height = innerHeight;
|
|
w.element.style.left = "0px";
|
|
w.element.style.top = "0px";
|
|
w.element.style.width = `${w.width}px`;
|
|
w.element.querySelector(".window").style.width = `${w.width - _windowPaddingX}px`;
|
|
w.element.querySelector(".window").style.height = `${w.height - _windowPaddingY}px`;
|
|
}
|
|
}
|
|
function createWindow(config) {
|
|
if (document.getElementById(config.id)) {
|
|
incrementZIndex(config.id);
|
|
return;
|
|
}
|
|
config.width = config.width || 600;
|
|
config.height = config.height || 400;
|
|
config.minWidth = config.minWidth || 200;
|
|
config.minHeight = config.minHeight || 200;
|
|
let realWidth = Math.max(config.minWidth, Math.min(config.width, innerWidth - _windowPaddingX - 20));
|
|
let realHeight = Math.max(config.minHeight, Math.min(config.height, innerHeight - _windowPaddingY - 20));
|
|
let posX = config.posX || Math.round((innerWidth / 2) - ((realWidth + _windowPaddingX) / 2));
|
|
let posY = config.posY || Math.round((innerHeight / 2) - ((realHeight + _windowPaddingY) / 2));
|
|
let wO = document.createElement("div");
|
|
wO.classList.add("window-outer");
|
|
let w = document.createElement("div");
|
|
w.classList.add("window");
|
|
w.style.width = `${realWidth}px`;
|
|
w.style.height = `${realHeight}px`;
|
|
w.innerHTML = config.content;
|
|
let wH = document.createElement("div");
|
|
wH.classList.add("window-header");
|
|
wH.innerHTML = `
|
|
<i class="window-header-button blank"></i>
|
|
<i class="window-header-button blank"></i>
|
|
<i class="window-header-button blank"></i>
|
|
<strong class="window-header-title">${config.title}</strong>
|
|
<i data-no-move class="window-header-button minimize"></i>
|
|
<i data-no-move class="window-header-button fullscreen"></i>
|
|
<i data-no-move class="window-header-button close"></i>
|
|
`;
|
|
let wC;
|
|
let wI = null;
|
|
if (config.typeable !== false) {
|
|
wI = document.createElement("input");
|
|
wI.classList.add("window-input");
|
|
wI.id = `${config.id}__input`;
|
|
wI.oninput = (event) => {
|
|
syncInputs(config.id);
|
|
w.scrollTop = w.scrollHeight;
|
|
};
|
|
wI.onkeydown = (event) => {
|
|
if (event.key == "Enter") {
|
|
commandManager(config.id, wI.value.trim());
|
|
w.scrollTop = w.scrollHeight;
|
|
wI.value = "";
|
|
}
|
|
else if (event.key == "Tab") {
|
|
event.preventDefault();
|
|
let val = wI.value.trim();
|
|
let possibilities = [];
|
|
let parent;
|
|
if (!val) {
|
|
return;
|
|
}
|
|
if (val.split(" ").length == 1 && wI.value[wI.value.length - 1] != " ") {
|
|
possibilities = Object.keys(_internal_commands).filter((cmd) => (cmd.startsWith(val) && !cmd.startsWith("_")));
|
|
}
|
|
else if (_internal_commands[val.split(" ")[0]] && _internal_commands[val.split(" ")[0]].autocomplete) {
|
|
let ac = _internal_commands[val.split(" ")[0]].autocomplete;
|
|
let path = val.split(" ").slice(1).join(" ").trim();
|
|
let sw = path.split("/")[path.split("/").length - 1];
|
|
if (typeof ac == "object") {
|
|
possibilities = ac;
|
|
}
|
|
else {
|
|
if (path) {
|
|
if (path[path.length - 1] == "/") {
|
|
parent = _internal_getFile(_internal_sanitizePath(_internal_joinPaths(windowInformation[config.id].PWD, path)));
|
|
}
|
|
else {
|
|
parent = _internal_getFile(_internal_sanitizePath(_internal_joinPaths(windowInformation[config.id].PWD, path + "/..")));
|
|
}
|
|
}
|
|
else {
|
|
parent = _internal_getFile(windowInformation[config.id].PWD);
|
|
}
|
|
if (parent && parent.type == "directory") {
|
|
let f = parent.files;
|
|
possibilities = Object.keys(f);
|
|
if (ac == "dir") {
|
|
possibilities = possibilities.filter((file) => (f[file] && f[file].type == "directory"));
|
|
}
|
|
}
|
|
else {
|
|
parent = null;
|
|
}
|
|
}
|
|
possibilities = possibilities.filter((v) => v.startsWith(sw));
|
|
}
|
|
if (possibilities.length == 1) {
|
|
if (val.split(" ").length == 1 && wI.value[wI.value.length - 1] != " ") {
|
|
wI.value = possibilities[0] + " ";
|
|
}
|
|
else if (_internal_commands[val.split(" ")[0]] && _internal_commands[val.split(" ")[0]].autocomplete) {
|
|
let path = val;
|
|
if (val[val.length - 1] == "/") {
|
|
path += possibilities[0];
|
|
}
|
|
else {
|
|
let p = path.split("/");
|
|
if (p.length == 1) {
|
|
p = p[0].split(" ", 2);
|
|
if (p.length == 1) {
|
|
p.push("");
|
|
}
|
|
p.pop();
|
|
path = p.join(" ") + " " + possibilities[0];
|
|
}
|
|
else {
|
|
p.pop();
|
|
path = p.join("/") + "/" + possibilities[0];
|
|
}
|
|
}
|
|
wI.value = path + (parent && parent.type == "directory" && parent.files[possibilities[0]].type == "directory" ? "/" : " ");
|
|
}
|
|
syncInputs(config.id);
|
|
}
|
|
else if (possibilities) {
|
|
addWindowCommand(config.id, possibilities.join(" "));
|
|
syncInputs(config.id);
|
|
}
|
|
}
|
|
else {
|
|
syncInputs(config.id);
|
|
}
|
|
};
|
|
wI.onfocus = () => { setCursor(config.id); };
|
|
wI.onclick = () => { setCursor(config.id); };
|
|
wC = document.createElement("label");
|
|
wC.htmlFor = `${config.id}__input`;
|
|
}
|
|
else {
|
|
wC = document.createElement("div");
|
|
}
|
|
wC.classList.add("window-container");
|
|
wC.tabIndex = 0;
|
|
wC.style.left = `${posX}px`;
|
|
wC.style.top = `${posY}px`;
|
|
wC.id = config.id;
|
|
wC.style.zIndex = String(globalIncrement);
|
|
wC.style.width = `${realWidth + _windowPaddingX - 2}px`;
|
|
let edges = document.createDocumentFragment();
|
|
for (const pos of ["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"]) {
|
|
let el = document.createElement("div");
|
|
el.classList.add("edge", pos);
|
|
el.addEventListener("mousedown", function (e) {
|
|
incrementZIndex(config.id);
|
|
e.preventDefault();
|
|
WINDOWS[config.id].vars.mouseOffsetX = e.clientX - WINDOWS[config.id].posX;
|
|
WINDOWS[config.id].vars.mouseOffsetY = e.clientY - WINDOWS[config.id].posY;
|
|
WINDOWS[config.id].vars.startingWidth = WINDOWS[config.id].width;
|
|
WINDOWS[config.id].vars.startingHeight = WINDOWS[config.id].height;
|
|
WINDOWS[config.id].vars.startingPosX = WINDOWS[config.id].posX;
|
|
WINDOWS[config.id].vars.startingPosY = WINDOWS[config.id].posY;
|
|
MOUSE_MOVE_PROCESSING[config.id] = {
|
|
callback: (x, y) => { edgeMoveEvent(x, y, pos, config.id); },
|
|
mouseUp: true
|
|
};
|
|
});
|
|
edges.append(el);
|
|
}
|
|
wO.append(w);
|
|
wC.append(wH, wO, edges);
|
|
document.body.append(wC);
|
|
if (config.typeable !== false) {
|
|
wC.append(wI);
|
|
wI.focus();
|
|
}
|
|
else {
|
|
wC.focus();
|
|
}
|
|
WINDOWS[config.id] = {
|
|
element: wC,
|
|
height: realHeight,
|
|
width: realWidth,
|
|
minHeight: config.minHeight,
|
|
minWidth: config.minWidth,
|
|
posX: posX,
|
|
posY: posY,
|
|
fullscreen: false,
|
|
zIndex: globalIncrement,
|
|
vars: {}
|
|
};
|
|
windowInformation[config.id] = {
|
|
PWD: HOME_DIR
|
|
};
|
|
wC.addEventListener("focus", function () { incrementZIndex(config.id); });
|
|
for (const link of wC.querySelectorAll("a")) {
|
|
link.addEventListener("focus", function () { incrementZIndex(config.id); });
|
|
}
|
|
wH.addEventListener("mousedown", function (e) {
|
|
if (e.target.dataset.noMove !== undefined) {
|
|
return;
|
|
}
|
|
WINDOWS[config.id].vars.mouseOffsetX = e.clientX - WINDOWS[config.id].posX;
|
|
WINDOWS[config.id].vars.mouseOffsetY = e.clientY - WINDOWS[config.id].posY;
|
|
MOUSE_MOVE_PROCESSING[config.id] = {
|
|
callback: (x, y) => { mouseMoveEvent(config.id, x, y); },
|
|
mouseUp: true
|
|
};
|
|
});
|
|
wH.querySelector(".close").addEventListener("click", function () {
|
|
delete WINDOWS[config.id];
|
|
delete windowInformation[config.id];
|
|
delete MOUSE_MOVE_PROCESSING[config.id];
|
|
wC.remove();
|
|
if (typeof config.onDestroy === "function") {
|
|
config.onDestroy();
|
|
}
|
|
});
|
|
wH.querySelector(".fullscreen").addEventListener("click", () => (toggleFullscreen(config.id)));
|
|
wH.addEventListener("dblclick", () => (toggleFullscreen(config.id)));
|
|
globalIncrement++;
|
|
}
|
|
function windowPreset(template, dontDisableTyping = false) {
|
|
let el = document.querySelector(`#window-templates > [data-template-id="${template}"]`);
|
|
if (!el) {
|
|
return;
|
|
}
|
|
if (WINDOWS[template]) {
|
|
incrementZIndex(template, true);
|
|
return;
|
|
}
|
|
let config = {
|
|
id: template,
|
|
title: "~ - tSh",
|
|
content: "<div><b class=\"green\">trinkey@website</b>:<b class=\"blue\">~</b>$ <span data-type-area><i class=\"cursor\"> </i></span></div>"
|
|
};
|
|
for (const field of el.querySelectorAll("[data-template-field]")) {
|
|
config[field.dataset.templateField] = field.dataset.isNumber === "" ? +field.innerText : field.innerHTML;
|
|
}
|
|
createWindow(config);
|
|
for (const command of el.querySelectorAll("li")) {
|
|
WINDOWS[template].element.querySelector("[data-type-area]").innerHTML = command.innerHTML;
|
|
commandManager(template, command.innerHTML);
|
|
}
|
|
if (!dontDisableTyping) {
|
|
WINDOWS[template].element.querySelector("input").remove();
|
|
}
|
|
}
|
|
function emptyWindow() {
|
|
createWindow({
|
|
id: `terminal-${Math.random()}`,
|
|
title: "~ - tSh",
|
|
content: "<div><b class=\"green\">trinkey@website</b>:<b class=\"blue\">~</b>$ <span data-type-area><i class=\"cursor\"> </i></span></div>"
|
|
});
|
|
}
|
|
function copyButton() {
|
|
navigator.clipboard.writeText("<a href=\"https://trinkey.com/\" target=\"_blank\"><img src=\"https://trinkey.com/img/88x31.png\" alt=\"trinkey's 88x31. image of her cat on the right with the word 'trinkey' taking up the rest of the button.\" title=\"trinkey's 88x31. image of her cat on the right with the word 'trinkey' taking up the rest of the button.\"></a>");
|
|
}
|
|
onmousemove = function (e) {
|
|
e.preventDefault();
|
|
for (const key of Object.keys(MOUSE_MOVE_PROCESSING)) {
|
|
MOUSE_MOVE_PROCESSING[key].callback(e.clientX, e.clientY);
|
|
}
|
|
};
|
|
onmouseup = function () {
|
|
for (const key of Object.keys(MOUSE_MOVE_PROCESSING)) {
|
|
if (MOUSE_MOVE_PROCESSING[key].mouseUp) {
|
|
delete MOUSE_MOVE_PROCESSING[key];
|
|
}
|
|
;
|
|
}
|
|
};
|
|
onresize = function () {
|
|
for (const window of Object.keys(WINDOWS)) {
|
|
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`;
|
|
}
|
|
};
|