aboutsummaryrefslogtreecommitdiffstats
path: root/front/main.ts
diff options
context:
space:
mode:
Diffstat (limited to 'front/main.ts')
-rw-r--r--front/main.ts1171
1 files changed, 8 insertions, 1163 deletions
diff --git a/front/main.ts b/front/main.ts
index 1761597..9075dfc 100644
--- a/front/main.ts
+++ b/front/main.ts
@@ -1,1176 +1,21 @@
-// This should be only set to false for debugging purposes
-// If it's set to false, the upload requests will be synchronous
-// and you will be able to see PHP's echo output in the browser
-var FORM_ASYNC = true;
-
-import { OurWindow } from './window';
-
-declare var actions: any;
-
-// A FileView is an entry inside the explorer window
-class FileView {
- filename: string;
- wnd: OurWindow;
- visuals: HTMLElement;
- mimetype: string;
- is_directory: boolean;
- write_permissions: boolean;
-
- constructor(filename, wnd, mimetype, is_directory, write_permissions) {
- this.filename = filename;
- this.wnd = wnd;
- this.visuals = null; // The DOM object with the icon and the filenam text
- this.mimetype = mimetype;
- this.is_directory = is_directory;
- this.write_permissions = write_permissions;
- }
-
- full_path() {
- return path_combine(get_path(this.wnd), this.filename);
- }
-}
-
-// An array of all fileviews currently open
-
-
-// An array with all the windows on the screen
-var windows: OurWindow[] = [];
-
-// The focused window
-var focused_window: OurWindow = null;
-
-// Those all belong to the hidden file upload form
-const upload_form: HTMLFormElement = document.getElementById("upload_form") as any;
-const filename_input: HTMLInputElement = document.getElementById("filename") as any;
-const override_input: HTMLInputElement = document.getElementById("override_input") as any;
-const upload_parent_directory: HTMLInputElement = document.getElementById("upload_parent_directory") as any;
-const the_file: HTMLInputElement = document.getElementById("the_file") as any;
-
-// If this is set to true, requests to uploads.php will be sent with the "override" flag
-// which will override existing files with the same name
-var override_file = false;
-var override_file_filename = "";
-var override_file_path = "";
-
-var open_file = null;
-
-// Some elements have custom right click context menus
-// If there's a custom context menu active, this will be it
-var context_menu = null;
-
-
-// If we're currently dragging something (a window or a file), this is the DOM object we're dragging
-// dragging_offset_x and dragging_offset_y are the difference between the objec's top left point and the cursor position
-// this is then added to the cursor position when the mouse is moved
-var dragging = null;
-var dragging_offset_x = 0, dragging_offset_y = 0;
-
-// If we have pressed down a window's title bar but haven't yet started dragging it, it's the drag candidate
-// This is needed because we don't yet know whether we want to start dragging the window or click an element in the titlebar
-// Once the mouse has moved sufficiently far away from dragging_candidate_x or y, we start dragging
-var dragging_candidate = null;
-var dragging_candidate_x, dragging_candidate_y;
-
-// If we're dragging a fileview, this is set to the fileview class instance itself, because 'dragging' is just a DOM object
-// The placeholder is a dummy DIV that we insert in the object's place on the grid to keep things nicely aligned
-var dragging_fileview;
-var dragging_placeholder = null;
-
-// Windows have a z-index. When we click a window it is sent to the top this will be its new z-index
-// We then increment the depth, and the next window we click will go on top of the current one
-var depth = 20;
-
+import { ExplorerWindow } from './explorer';
+import { oncontextmenu_hook as contextmenu_oncontextmenu_hook } from './contextmenu';
+import { oncontextmenu_hook as dragging_oncontextmenu_hook } from './dragging';
function main() {
// Create a window that looks at the root directory
- var root_window = make_window([], false);
+ var root_window = new ExplorerWindow([], 100, 100, 800, 600, false);
// Focus that window and load the directory
- focus_window(root_window);
- openfile(true, root_window);
-}
-
-function focus_window(wnd: OurWindow) {
- // Unfocus the old window
- if (focused_window)
- focused_window.visuals.classList.remove('focus');
- focused_window = wnd;
- // And focus the new one!
- if (wnd) {
- wnd.visuals.classList.add('focus');
- wnd.visuals.style.zIndex = (depth ++).toString();
- }
-}
-
-// Delete the focused window
-function delete_window(wnd: OurWindow) {
- var index = windows.indexOf(wnd);
-
- if (index >= 0)
- windows.splice(index, 1);
-
- wnd.visuals.parentNode.removeChild(wnd.visuals);
- if (wnd == focused_window)
- focused_window = null;
-}
-
-// Create a right click context menu
-function context(e, entries) {
- if (context_menu)
- context_menu.remove();
-
- context_menu = mk(document.body, 'ul', 'context');
-
- context_menu.onmousedown = (e) => {
- e.stopPropagation();
- }
-
- context_menu.onclick = (_e) => {
- context_menu.remove();
- context_menu = null;
- }
-
-
- context_menu.style.left = e.clientX + "px";
- context_menu.style.top = e.clientY + "px";
-
- for (const e of entries) {
- const li = document.createElement('li');
- li.innerText = e[0];
- li.onclick = e[1];
- context_menu.appendChild(li);
- }
-}
-
-// This is called whenever the <input type="file">'s value changes
-function on_file_added(_e) {
- if (the_file.files.length >= 1) {
-
- if (override_file) {
- filename_input.value = override_file_filename;
- override_input.value = "1";
- upload_parent_directory.value = override_file_path;
- console.log(filename_input.value, override_input.value, upload_parent_directory.value);
- } else {
- filename_input.value = the_file.files[0].name;
- override_input.value = "0";
- upload_parent_directory.value = get_path(focused_window);
- }
-
- if (!FORM_ASYNC) {
- upload_form.submit();
- return;
- }
-
- // Send the form asynchronously through the fetch api
- fetch(upload_form.action, {
- method: upload_form.method,
- body: new FormData(upload_form)
- }).then((resp) => {
- if (resp.status == 200) {
- // Reload the directory so the user can see the newly uploaded file
- openfile(true, focused_window);
- } else {
- alert("Upload failed");
- }
- }, () => {
- alert("Upload failed")
- });
- }
- else {
- alert("No files selected");
- }
-}
-
-// It's honestly really sad that we need this
-// We have an image viewer, but we load the uploaded via the XMLHttpRequest API, which gives us an array buffer
-// We need to base64 encode the image data so we can feed it into the <img src="...">
-// and the standart base64 encode API is shit
-// https://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de
-function base64ArrayBuffer(arrayBuffer) {
- var base64 = ''
- var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
-
- var bytes = new Uint8Array(arrayBuffer)
- var byteLength = bytes.byteLength
- var byteRemainder = byteLength % 3
- var mainLength = byteLength - byteRemainder
-
- var a, b, c, d
- var chunk
-
- // Main loop deals with bytes in chunks of 3
- for (var i = 0; i < mainLength; i = i + 3) {
- // Combine the three bytes into a single integer
- chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]
-
- // Use bitmasks to extract 6-bit segments from the triplet
- a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
- b = (chunk & 258048) >> 12 // 258048 = (2^6 - 1) << 12
- c = (chunk & 4032) >> 6 // 4032 = (2^6 - 1) << 6
- d = chunk & 63 // 63 = 2^6 - 1
-
- // Convert the raw binary segments to the appropriate ASCII encoding
- base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
- }
-
- // Deal with the remaining bytes and padding
- if (byteRemainder == 1) {
- chunk = bytes[mainLength]
-
- a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2
-
- // Set the 4 least significant bits to zero
- b = (chunk & 3) << 4 // 3 = 2^2 - 1
-
- base64 += encodings[a] + encodings[b] + '=='
- } else if (byteRemainder == 2) {
- chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]
-
- a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
- b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4
-
- // Set the 2 least significant bits to zero
- c = (chunk & 15) << 2 // 15 = 2^4 - 1
-
- base64 += encodings[a] + encodings[b] + encodings[c] + '='
- }
-
- return base64
-}
-
-
-// This updates the path of the window's DOM (the "Root > Folder1 > Folder2 > foo.png")
-function update_path_visuals(wnd) {
- if (!wnd) {
- alert("YOU ARE NOT SUPPOSED TO SEE THIS. PLEASE COPY THE STACKTRACE FROM THE CONSOLE AND SEND IT TO THE NEAREST DEVELOPER");
- wnd = focused_window;
- }
-
- var the_path = wnd.visuals.getElementsByClassName('path')[0];
-
- // Remove the old path
- while (the_path.children.length > 0)
- the_path.removeChild(the_path.lastChild);
-
- for (let i = -1; i < wnd.pwd.length; i++) {
- var d;
- // For each element after the first create a separator
- if (i >= 0) {
- d = wnd.pwd[i];
- var separator_div = mk(the_path, 'div', 'separator');
- separator_div.innerText = "ยป";
- }
- else
- d = "Root";
-
- var entry = mk(the_path, 'button', 'pathentry');
- entry.innerText = d;
-
- // When we click the entry, go to its folder
- entry.onclick = (_e) => {
- if (length < wnd.pwd.length) {
- wnd.pwd.length = i + 1;
- openfile(true, wnd);
- }
- }
-
- // We can drop files onto the path, which will omve them to teh folder
- entry.onmouseup = (e) => {
- if (dragging && dragging_fileview) {
- var new_folder = get_path(wnd, i + 1);
- move_file(dragging_fileview.wnd, wnd, new_folder, dragging_fileview.filename);
- end_drag(e);
-
- e.preventDefault();
- e.stopPropagation();
- }
- }
- }
-}
-
+ root_window.focus();
+ root_window.openfile(true);
-// This asks the server for the contents of the specified file
-// The 'cb' callback is then called, which gives you the file as either text or binary
-// depending on whether or not text is true/false
-function read_file_contents(text, cb, folder, filename) {
- var data = new FormData();
- data.append('folder', folder);
- data.append('filename', filename);
-
- let xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/readfile.php', true);
-
- if (text) {
- xhr.onload = function () {
- cb(xhr.responseText);
- };
- } else {
- xhr.responseType = 'arraybuffer';
- xhr.onload = function () {
- cb(xhr.response);
- };
- }
-
- xhr.send(data);
-}
-
-
-// This opens a file.
-// If the file has image/* mimetype, it will be displayed as an image
-// otherwise it will be displayed as plaintext
-function openfile_nondir(wnd) {
-
- while (wnd.filecontents.children.length > 0)
- wnd.filecontents.removeChild(wnd.filecontents.lastChild);
-
- // Send a request to readfile.php, which will give us the contents
- var data = new FormData();
- data.append('folder', get_path(wnd, wnd.pwd.length - 1));
- data.append('filename', wnd.pwd[wnd.pwd.length - 1]);
-
- var xhr = new XMLHttpRequest();
-
- update_path_visuals(wnd);
-
- xhr.open('POST', '/php/readfile.php', true);
-
- wnd.filecontents.innerText = "";
- wnd.filecontentsroot.style.display = 'flex';
- wnd.foldercontents.style.display = 'none';
-
- let is_image = open_file.mimetype.split("/")[0] == "image";
- wnd.save_btn_container.style.display = (open_file.write_permissions && !is_image) ? "flex" : "none";
-
- if (is_image) {
- xhr.responseType = 'arraybuffer';
- xhr.onload = function () {
- let b = `data:image/png;base64,${base64ArrayBuffer(xhr.response)}`;
- wnd.filecontents.style.backgroundImage = `url('${b}')`;
- wnd.filecontents.classList.add('imgview');
- }
- }
- else {
- wnd.filecontents.classList.remove('imgview');
- wnd.filecontents.style.backgroundImage = "unset";
-
- wnd.txt_editor = mk(wnd.filecontents, 'pre');
-
- xhr.onload = function () {
- wnd.txt_editor.innerText = xhr.responseText;
- if (open_file.write_permissions)
- wnd.txt_editor.contentEditable = "true";
- };
- }
-
- xhr.send(data);
-}
-
-// This is a tiny wrapper around the share_window.
-function share(in_file: boolean, filename: string, wnd: OurWindow) {
- if (in_file) {
- var folder = get_path(wnd, wnd.pwd.length - 1);
- filename = wnd.pwd[wnd.pwd.length - 1];
- } else {
- var folder = get_path(wnd);
- }
-
- var wnd = make_share_window(folder, filename);
- focus_window(wnd);
-}
-
-// Replace an existing file with a new one
-function replace_file(in_file, filename, wnd) {
- if (in_file) {
- var folder = get_path(wnd, wnd.pwd.length - 1);
- filename = wnd.pwd[wnd.pwd.length - 1];
- } else {
- var folder = get_path(wnd);
- }
-
- override_file = true;
- override_file_path = folder;
- override_file_filename = filename;
- the_file.click();
-}
-
-// This loads the contents of the current directory
-function openfile_dir(wnd) {
- update_path_visuals(wnd);
-
- var data = new FormData();
- data.append('path', get_path(wnd));
-
- var xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/readdir.php', true);
- xhr.onload = function () {
- for (const f of wnd.files)
- f.visuals.remove();
- wnd.files = [];
-
- var json = JSON.parse(xhr.responseText);
- if (!json)
- return;
-
- // Create the FileViews from the json response
- for (const f of json) {
- var view = new FileView(f.name,
- wnd,
- f.mimetype,
- f.is_directory && f.is_directory != "0",
- f.can_edit && f.can_edit != "0");
- wnd.files.push(view);
- }
-
- // Sort the files nicely before adding their visuals
- // Folders come first, then files, then the special trash directory
- // Everything inside the categories is lexically sorted
- wnd.files.sort((a, b) => {
- if (wnd.pwd.length == 0 && a.filename == "share")
- return -10;
- if (wnd.pwd.length == 0 && b.filename == "share")
- return 10;
-
- if (wnd.pwd.length == 0 && a.filename == "trash")
- return 10;
- if (wnd.pwd.length == 0 && b.filename == "trash")
- return -10;
- if (a.is_directory && !b.is_directory)
- return -1;
- if (!a.is_directory && b.is_directory)
- return 1;
- return a.filename.localeCompare(b.filename);
- });
-
- for (const f of wnd.files) {
- add_file_visuals(f, wnd);
- }
-
- };
- xhr.send(data);
-
- wnd.filecontentsroot.style.display = 'none';
- wnd.foldercontents.style.display = 'flex';
-
- wnd.foldercontents.onmouseup = () => {
- if (dragging && dragging_fileview) {
- move_file(dragging_fileview.wnd, wnd, get_path(wnd), dragging_fileview.filename);
- }
- }
-}
-
-
-function openfile(is_directory, wnd) {
- if (!wnd) {
- alert("YOU ARE NOT SUPPOSED TO SEE THIS. PLEASE COPY THE STACKTRACE FROM THE CONSOLE AND SEND IT TO THE NEAREST DEVELOPER");
- console.trace();
- wnd = focused_window;
- }
-
- if (is_directory) {
- openfile_dir(wnd);
- } else {
- openfile_nondir(wnd);
- }
-}
-
-function move_to_trash(wnd, filename) {
- move_file(wnd, wnd, "/trash", filename, path_combine(get_path(wnd), filename));
-}
-
-function restore_from_trash(wnd, filename) {
- var split = filename.split("/");
- var new_filename = split.pop();
- var new_directory = "/" + split.join("/");
-
- move_file(wnd, wnd, new_directory, filename, new_filename);
-}
-
-
-// This deletes the file, *for real*
-// move_to_trash is what is actually called when the user clicks 'Delete'
-function delete_file(wnd, filename) {
- var data = new FormData();
- data.append('folder', get_path(wnd));
- data.append('filename', filename);
-
- var xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/delete.php', true);
- xhr.onload = function () {
- openfile(true, wnd);
- };
- xhr.send(data);
-}
-
-function rename_file(filename, wnd) {
- var new_name = prompt(`Rename ${filename} to`, filename);
- if (!new_name)
- return;
-
- var data = new FormData();
- data.append('folder', get_path(wnd));
- data.append('old_filename', filename);
- data.append('new_filename', new_name);
-
- var xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/rename.php', true);
- xhr.onload = function () {
- openfile(true, wnd);
- };
- xhr.send(data);
-}
-
-function move_file(srcwnd: OurWindow, dstwnd: OurWindow, new_folder: string, filename: string, new_filename?: string) {
- if (!new_filename)
- new_filename = filename;
-
- var data = new FormData();
- data.append('old_folder', get_path(srcwnd));
- data.append('new_folder', new_folder);
- data.append('filename', filename);
- data.append('new_filename',new_filename);
-
- var xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/move.php', true);
- xhr.onload = () => {
- openfile(true, srcwnd);
- openfile(true, dstwnd);
- };
- xhr.send(data);
-}
-
-function new_folder(wnd) {
- var dirname = prompt(`Directory name`, "New Folder");
- if (!dirname)
- return;
-
- var data = new FormData();
- data.append('parent_directory', get_path(wnd));
- data.append('dirname', dirname);
-
- var xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/mkdir.php', true);
- xhr.onload = function () {
- openfile(true, wnd);
- };
- xhr.send(data);
-}
-
-
-// Dragging a fileview is a bit different from dragging a window
-// This does some setup work before calling the common begin_drag
-function begin_drag_fileview(e, fileview) {
- if (dragging)
- end_drag(e);
-
- // The dragging_placeholder is inserted into its place by the begin_drag function
- dragging_placeholder = document.createElement('div');
- dragging_fileview = fileview;
-
- dragging = fileview.visuals;
- dragging.style.zIndex = 50000;
-
- begin_drag(e, fileview.visuals);
-}
-
-// Start dragging the 'obj' DOM element
-// e is a DOM event, this should only get called in response of a DOM event
-function begin_drag(e, obj: HTMLElement, dont_set_width?: boolean) {
- set_iframe_enabled(false);
- dragging = obj;
- dragging_candidate = null;
- dragging.classList.add("dragged");
-
- var elemRect = dragging.getBoundingClientRect();
- dragging_offset_x = e.clientX - elemRect.left;
- dragging_offset_y = -e.clientY + elemRect.top;
-
- if (dragging_placeholder)
- obj.parentNode.insertBefore(dragging_placeholder, obj);
-
- dragging.style.left = (e.clientX - dragging_offset_x) + "px";
- dragging.style.top = (e.clientY + dragging_offset_y) + "px";
-
- if (!dont_set_width) {
- dragging.style.width = elemRect.width + "px";
- dragging.style.height = elemRect.height + "px";
- }
-
- dragging.style.position = "absolute";
- document.body.appendChild(dragging);
-}
-
-function end_drag(_e) {
- set_iframe_enabled(true);
-
- // If there's a dragging placeholder remove it and put the dragged node back into its place
- if (dragging_placeholder) {
- dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
- dragging_placeholder.remove();
- dragging_placeholder = null;
- }
-
- // If we were dragging a FileView, we need to reset some CSS
- if (dragging_fileview) {
- dragging.style.removeProperty("position");
- dragging.style.removeProperty("width");
- dragging.style.removeProperty("height");
- dragging.style.removeProperty("left");
- dragging.style.removeProperty("top");
- dragging_fileview = null;
- }
-
- dragging.classList.remove("dragged");
- dragging = null;
-}
-
-// This creates the parts of a window that are common between all window types
-// This should only really be called by another function that will then fill up the window
-function make_window_base(pwd, x, y, w, h) {
- var wnd = new OurWindow(pwd);
- windows.push(wnd);
-
- wnd.visuals = mk(document.body, 'div', 'window');
-
- wnd.visuals.style.width = w + "px";
- wnd.visuals.style.height = h ? (h + "px") : "unset";
- wnd.visuals.style.position = "absolute";
- wnd.visuals.style.left = x + "px";
- wnd.visuals.style.top = y + "px";
-
- wnd.h2 = mk(wnd.visuals, 'h2');
-
- wnd.visuals.onmousedown = (_e) => {
- focus_window(wnd);
- }
-
- wnd.h2.onmousedown = (e) => {
- if (!dragging) {
- dragging_candidate = wnd.visuals;
- dragging_candidate_x = e.clientX;
- dragging_candidate_y = e.clientY;
- }
- };
-
- return wnd;
-}
-
-// This is a widely abused helper function that creates a DOM element, attaches it as the
-// last child of 'parent' and possibly gives it a class
-function mk(parent: HTMLElement, type: keyof HTMLElementTagNameMap, _class?: string): HTMLElement {
- var el = document.createElement(type);
- parent.appendChild(el);
- if (_class)
- el.classList.add(_class);
- return el;
-}
-
-// Crate a horizontal div
-function mkhdiv(parent) {
- var hdiv = mk(parent, 'div');
- hdiv.style.display = "flex";
- hdiv.style.alignItems = "center";
- hdiv.style.padding = "0.3rem";
- hdiv.style.gap = "0.3rem";
- return hdiv;
-}
-
-// Create a checkbocx with a label.
-// togglefn will be called when its value changes with an argument that's either true/false
-function mkcheckbox(parent, label, togglefn) {
- var hdiv = mkhdiv(parent);
-
- var write_checkbox: HTMLInputElement = mk(hdiv, 'input') as any;
- write_checkbox.type = 'checkbox';
-
- var write_checkbox_label = mk(hdiv, 'label');
- write_checkbox_label.innerText = label;
- write_checkbox_label.onclick = (_e) => { write_checkbox.click(); }
- write_checkbox_label.classList.add('noselect');
-
- write_checkbox.onchange = (_e) => {
- togglefn(write_checkbox.checked);
- };
-}
-
-// This monstrocity creates the 'Share file' window
-function make_share_window(folder, filename): OurWindow {
- var wnd = make_window_base(null, 400, 400, 400, 0);
-
- wnd.h2.style.display = 'flex';
-
- // The title of the window. WE set its 'flex' to 1 1 0 so it fills up the titlebar
- // and pushes the X button to the very right
- var heading = mk(wnd.h2, 'span', 'wndtitle');
- heading.innerText = "Share " + filename;
-
- // Close button
- var x_button = mk(wnd.h2, 'button', 'close_button');
- x_button.innerText = "X";
- x_button.onclick = () => delete_window(wnd);
-
- wnd.foldercontents = mk(wnd.visuals, 'div', 'share_dialog_contents');
- wnd.foldercontents.style.padding = "0.5rem";
-
- // This is the data that will be sent when we hit "Generate link"
- var data = {
- write_permissions: false,
- private: false,
- has_password: false,
- password: "",
- userlist: [],
- }
-
- // If private link is clicked, show the "Add user" button and the user list
- var userlist, add_user;
- mkcheckbox(wnd.foldercontents, "Private link", (toggled) => {
- add_user.style.display = toggled ? "block" : "none";
- userlist.style.display = toggled ? "block" : "none";
- data.private = toggled;
- });
-
- userlist = mk(wnd.foldercontents, 'div');
- userlist.style.display = "none";
- add_user = mk(wnd.foldercontents, 'button');
- add_user.innerText = "Add user";
- add_user.style.display = "none";
-
- // When we hit 'Add user', add an input field for a new user
- add_user.onclick = (_e) => {
- var i = mk(userlist, 'input') as HTMLInputElement;
- i.value = 'John Doe';
-
- let index = data.userlist.length;
- data.userlist.push(i.value);
-
- i.onchange = (_e) => {
- data.userlist[index] = i.value;
- }
- }
-
- // Click the add_user once to add a default user, since a URL that nobody can use makes no sense
- add_user.click();
-
- mkcheckbox(wnd.foldercontents, "Give write permissions", (toggled) => {
- data.write_permissions = toggled;
- });
-
- // If 'Password protected' is checked, show the password field
- let password_container;
- mkcheckbox(wnd.foldercontents, "Password protected", (toggled) => {
- data.has_password = toggled;
- password_container.style.display = toggled ? "flex" : "none";
- });
-
- password_container = mkhdiv(wnd.foldercontents);
- password_container.style.display = 'none'
- var password_label = mk(password_container, 'label');
- password_label.innerText = "Password";
- var password_input = mk(password_container, 'input') as HTMLInputElement;
- password_input.type = 'password';
- password_input.autocomplete = 'off'
-
- password_input.style.flex = "1 0 0";
- password_input.onchange = (_e) => {
- data.password = password_input.value;
- };
-
- var generate_url_button = mk(wnd.foldercontents, 'button');
- generate_url_button.innerText = "Generate link";
-
- generate_url_button.onclick = () => {
- // The backend expects the users to be either an empty string, if the URL is public
- // or a comma separated list of usernaems
- var users = "";
- if (data.private) {
- users = data.userlist.join(',');
- }
-
- var form_data = new FormData();
- form_data.append('folder', folder);
- form_data.append('filename', filename);
- form_data.append('users', users);
- // 0 = No permissions, 1 = Read only, 2 = Write , 1|2 = 3 = RW
- // Only 1 and 3 make sense in the context of a URL
- form_data.append('permissions', (data.write_permissions ? 3 : 1).toString());
- form_data.append('password', data.has_password ? data.password : "");
-
- var xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/share.php', true);
- xhr.onload = function () {
- alert(xhr.response);
- }
-
- xhr.send(form_data);
- delete_window(wnd);
- }
-
- return wnd;
-}
-
-function download_file(in_file, filename?: any, wnd?: any) {
- if (!wnd) {
- alert (802);
- wnd = focused_window;
- }
- if (in_file) {
- var folder = get_path(wnd, wnd.pwd.length - 1);
- filename = wnd.pwd[wnd.pwd.length - 1];
- } else {
- var folder = get_path(wnd);
- }
-
- // Read the file contents and then do DISGUSTING javascript things to download the ifle
- // We create a invisible <a> that we click and then delete
- // That <a> has its download attribute set so we download the contents instead of opening it in a new tab
- // and of course its href is a virtual object URL that has its content set to a blob
- read_file_contents(false, (x) => {
- var blob = new Blob([new Uint8Array(x, 0, x.length)]);
- var url = URL.createObjectURL(blob);
- var a = document.createElement('a');
- a.href = url;
- a.download = filename;
- document.body.appendChild(a);
- a.click();
- setTimeout(() => {
- document.body.removeChild(a);
- URL.revokeObjectURL(url);
- });
- }, folder, filename);
-
- return;
-}
-
-
-// make_window creates an explorer window - the kind that can list directories/open files
-function make_window(pwd: string[], has_close: boolean): OurWindow {
- var wnd = make_window_base(pwd, 100, 100, 800, 600);
-
- mk(wnd.h2, 'div', 'path');
-
- if (has_close) {
- var x_button = mk(wnd.h2, 'button', 'close_button');
- x_button.innerText = "X";
- x_button.onclick = () => delete_window(wnd);
- }
-
- // wnd.foldercontents is where the FileViews will be stored
- // it also has a subheader (h3) with 'Upload' and 'New FOlder' buttons
- {
- wnd.foldercontents = mk(wnd.visuals, 'div', 'foldercontents');
- var h3 = mk(wnd.foldercontents, 'h3');
-
- var upload_btn = mk(h3, 'button');
- upload_btn.innerText = "Upload";
-
- upload_btn.onclick = () => {
- override_file = false;
- the_file.click();
- }
-
- mk(h3, 'div', 'separator');
-
- var new_folder_btn = mk(h3, 'button');
- new_folder_btn.innerText = "New Folder";
- new_folder_btn.onclick = () => { new_folder(wnd); }
-
- mk(h3, 'div', 'separator');
-
- wnd.filegrid = mk(wnd.foldercontents, 'div', 'files');
- }
-
- // wnd.filecontentsroot is where the filedata will be stored for open files
- // it also has a subheader (h3) with Share and Download buttons
- {
- wnd.filecontentsroot = mk(wnd.visuals, 'div', 'filecontentsroot');
- var h3 = mk(wnd.filecontentsroot, 'h3');
-
- let download_btn = mk(h3, 'button');
- download_btn.innerText = "Download";
- download_btn.onclick = () => { download_file(true); }
- mk(h3, 'div', 'separator');
-
- let share_btn = mk(h3, 'button');
- share_btn.innerText = "Share";
- share_btn.onclick = () => { alert("TODO NOT IMPLEMENTETD"); } //share(true, fileview.filename, wnd); }
- mk(h3, 'div', 'separator');
-
- wnd.save_btn_container = mk(h3, 'div');
- wnd.save_btn_container.style.display = 'flex';
-
- let save_btn = mk(wnd.save_btn_container, 'button');
- save_btn.innerText = "Save";
- save_btn.onclick = () => save_open_text_file(wnd);
- mk(wnd.save_btn_container, 'div', 'separator');
-
- wnd.filecontents = mk(wnd.filecontentsroot, 'div', 'filecontents');
- }
-
- return wnd;
-}
-
-
-function save_open_text_file(wnd) {
- const contents = wnd.txt_editor.innerText;
- let xhr = new XMLHttpRequest();
- xhr.open('POST', '/php/upload.php', true);
-
- var data = new FormData();
- data.append('parent_directory', get_path (wnd, wnd.pwd.length - 1));
- data.append('filename', wnd.pwd[wnd.pwd.length - 1]);
- data.append('content', contents);
- data.append('overwrite', '1');
-
- xhr.send(data);
-}
-
-
-// Create the visuals for a FileView
-function add_file_visuals(fileview, wnd) {
- // Are we in a subdirectory of the trash folder?
- var is_in_trash = wnd.pwd.length > 0 && wnd.pwd[0] == "trash";
-
- // Is the current filewview the trash folder itself?
- var is_trash = wnd.pwd.length == 0 && fileview.filename == "trash";
- var is_share = wnd.pwd.length == 0 && fileview.filename == "share";
-
- var visuals = mk(wnd.filegrid, 'div');
- fileview.visuals = visuals;
-
- var img = document.createElement('img');
- var filename = document.createElement('div');
-
- if (fileview.is_directory) {
- if (get_path(wnd) == "/" && fileview.filename == "trash")
- img.src="/mimeicons/user-trash.png";
- else if (get_path(wnd) == "/" && fileview.filename == "share")
- img.src = "/mimeicons/user-share.png";
- else
- img.src="/mimeicons/directory.png";
- } else {
- img.src=`/mimeicons/${fileview.mimetype.replace("/", "-")}.png`;
- }
-
- fileview.visuals.onclick = () => {
- wnd.pwd.push(fileview.filename);
- if (!fileview.is_directory) {
- open_file = fileview;
- }
- openfile(fileview.is_directory, wnd);
- }
-
- visuals.oncontextmenu = (e) => {
- if (!dragging) {
-
- var context_list = [
- // Open is always in the context list
- ['Open', () => {
- wnd.pwd.push(fileview.filename);
- openfile(fileview.is_directory, wnd);
- }],
- ['Open in New Window', () => {
- var new_pwd = wnd.pwd.slice();
- new_pwd.push(fileview.filename);
- var new_wnd = make_window(new_pwd, true);
- open_file = fileview;
- openfile(fileview.is_directory, new_wnd);
- focus_window(new_wnd);
- }],
- ];
-
- if (is_in_trash) {
- // If we're in the trash, we can restore files or delete them forever
- context_list.push(['Restore', () => { restore_from_trash(wnd, fileview.filename); }]);
- context_list.push(['Delete forever', () => { delete_file(wnd, fileview.filename); }]);
- } else if (!is_trash && !is_share) {
- // If we;'re not in trash we can rename/share/download/move files to trash
- context_list.push(
- ['Rename', () => { rename_file(fileview.filename, wnd); }],
- );
- if (!fileview.is_directory) {
- for (let a of actions) {
- if (fileview.filename.endsWith(a.extension)) {
- context_list.push(
- [a.text, () => {
- read_file_contents(true, (x) => {
- const ue = encodeURIComponent(x);
- let url = a.url.replace("$content_urlencoded", ue)
- .replace("$filename", fileview.filename);
-
- if (a.open_in_iframe) {
- const wnd = make_window_base([], 10, 10, 800, 600);
-
- var title = mk(wnd.h2, 'span', 'wndtitle');
- title.innerText = fileview.filename;
-
- // Close button
- var x_button = mk(wnd.h2, 'button', 'close_button');
- x_button.innerText = "X";
- x_button.onclick = () => delete_window(wnd);
-
- const contents = mk(wnd.visuals, 'div', 'filecontentsroot');
- const iframe = mk(contents, 'iframe') as HTMLIFrameElement;
- iframe.style.flex = '1 0 0';
- iframe.src = url;
-
- focus_window(wnd);
- } else {
- window.location = url;
- }
- }, get_path(wnd), fileview.filename);
- }]
- );
- }
- }
-
- if (fileview.write_permissions) {
- context_list.push(
- ['Replace', () => { replace_file(false, fileview.filename, wnd); }],
- );
- }
- context_list.push(
- ['Share', () => { share(false, fileview.filename, wnd); }],
- ['Download', () => { download_file(false, fileview.filename); }],
- );
- }
- context_list.push(
- ['Delete', () => { move_to_trash(wnd, fileview.filename); }]
- );
- }
-
- context(e, context_list);
- }
- e.preventDefault();
- e.stopPropagation();
- }
-
- visuals.ondragstart = (e) => {
- if (is_trash || is_in_trash || is_share) {
- e.preventDefault();
- return;
- }
- begin_drag_fileview(e, fileview);
- e.preventDefault();
- };
-
- visuals.onmouseup = (e) => {
- if (dragging) {
- if (fileview.is_directory) {
- if (get_path(wnd) == "/" && fileview.filename == "trash") {
- // If we've dragged something onto the trashcan, it's trash
- move_to_trash(wnd, dragging_fileview.filename);
- }
- else if (get_path(wnd) == "/" && fileview.filename == "share") {
- // move to 'share' is invalid
- } else {
- // If we've dragged something onto a directory, move it into that directory
- move_file(dragging_fileview.wnd, wnd, path_combine(get_path(wnd), fileview.filename), dragging_fileview.filename);
- }
- } else {
- // alert(`Dropped ${dst.filename} on ${src.filename}`);
- }
- end_drag(e);
- }
- e.preventDefault();
- };
-
- visuals.classList.add('file');
- filename.classList.add('filename');
-
- if (is_in_trash) {
- var split = fileview.filename.split("/");
- filename.innerText = split[split.length - 1];
- } else if (is_trash) {
- filename.innerText = "Trash";
- } else if (is_share) {
- var x = mk(filename, 'span');
- x.style.fontSize = "0.8rem";
- x.innerText = "Shared with me";
- } else{
- filename.innerText = fileview.filename;
- }
-
- visuals.appendChild(img);
- visuals.appendChild(filename);
-}
-
-
-// Reads the 'pwd' of the focused window
-// If pwd is ['foo', 'bar', 'baz'], this returns '/foo/bar/baz'
-function get_path(wnd: OurWindow, max_length?: number) {
- if (!wnd) {
- alert("YOU ARE NOT SUPPOSED TO SEE THIS. PLEASE COPY THE STACKTRACE FROM THE CONSOLE AND SEND IT TO THE NEAREST DEVELOPER");
- console.trace();
- wnd = focused_window;
- }
- if (max_length == undefined) {
- max_length = wnd.pwd.length;
- }
-
- var path = "/";
- for (let i = 0; i < max_length; i++) {
- path += wnd.pwd[i];
- if (i != max_length - 1)
- path += "/";
- }
- return path;
-}
-
-function path_combine(a, b) {
- const last_char = a.slice(-1);
- if (last_char == "/")
- return a + b;
- else
- return a + "/" + b;
-}
-
-
-// When we click anywhere, remove the context menu
-// The context menu itself has a onmousedown that prevents propagation so we can click its elements
-document.body.onmousedown = (_e) => {
- if (context_menu) {
- context_menu.remove();
- context_menu = null;
- }
-}
-
-document.body.onmousemove = (e) => {
- if (dragging) {
- dragging.style.left = (e.clientX - dragging_offset_x) + "px";
- dragging.style.top = (e.clientY + dragging_offset_y) + "px";
- }
- else if (dragging_candidate) {
- var d = Math.abs(e.clientX - dragging_candidate_x) + Math.abs(e.clientY - dragging_candidate_y);
- if (d > 15)
- begin_drag(e, dragging_candidate, true);
- }
-}
-
-document.body.onmouseup = (_e) => {
- if (dragging_candidate)
- dragging_candidate = null;
- if (dragging)
- end_drag(_e);
}
document.body.oncontextmenu = (e) => {
- if (dragging) {
- end_drag(e);
- e.preventDefault();
- }
- if (context_menu) {
- context_menu.remove();
- context_menu = null;
- }
-}
-
-the_file.onchange = (e) => { on_file_added(e); };
-
-function set_iframe_enabled(en) {
- const frames = document.getElementsByTagName('iframe');
- for (var i = 0; i < frames.length; i++)
- frames.item(i).hidden = !en;
+ contextmenu_oncontextmenu_hook(e);
+ dragging_oncontextmenu_hook(e);
}
main();