path: root/front/explorer.ts

import { BaseWindow } from './window'
import { mk, path_combine, base64ArrayBuffer  } from './util';
import { show_upload_dialog, show_upload_dialog_replace_file } from './upload_form';
import { dragging, dragging_fileview, begin_drag_fileview, end_drag } from './dragging'
import { ShareWindow } from './share_window';
import { context } from './contextmenu';

declare var actions: any;

export class ExplorerWindow extends BaseWindow {
    foldercontents: any;
    filecontents: any;
    filecontentsroot: any;
    filegrid: any;
    save_btn_container: any;

    opened_file: FileView;

    constructor(pwd, x, y, w, h, has_close) {
        super(pwd, x, y, w, h);
        make_window(this, has_close);
    }

    openfile(is_directory) {
        if (is_directory) {
            openfile_dir(this);
        } else {
            openfile_nondir(this);
        }
    }
}

// A FileView is an entry inside the explorer window
export class FileView {
    filename: string;
    wnd: ExplorerWindow;
    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(this.wnd.get_path(), this.filename);
    }
}

// make_window creates an explorer window - the kind that can list directories/open files
function make_window(wnd, has_close: boolean): BaseWindow {
    mk(wnd.h2, 'div', 'path');

    if (has_close) {
        var x_button = mk(wnd.h2, 'button', 'close_button');
        x_button.innerText = "X";
        x_button.onclick = () => { wnd.destroy(); };
    }

    // 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 = () => {
            show_upload_dialog();
        }

        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;
}

// Create the visuals for a FileView
function add_file_visuals(fileview: FileView, wnd: ExplorerWindow) {
    // 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 (wnd.get_path() == "/" && fileview.filename == "trash")
            img.src = "/mimeicons/user-trash.png";
        else if (wnd.get_path() == "/" && 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) {
            wnd.opened_file = fileview;
        }
        wnd.openfile(fileview.is_directory);
    }

    visuals.oncontextmenu = (e) => {
        if (!dragging) {

            var context_list = [
                // Open is always in the context list
                ['Open', () => {
                    wnd.pwd.push(fileview.filename);
                    wnd.openfile(fileview.is_directory);
                }],
                ['Open in New Window', () => {
                    var new_pwd = wnd.pwd.slice();
                    new_pwd.push(fileview.filename);
                    var new_wnd = new ExplorerWindow(new_pwd, 100, 100, 800, 600, true);
                    new_wnd.opened_file = fileview;
                    new_wnd.openfile(fileview.is_directory);
                    new_wnd.focus();
                }],
            ];

            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 = new BaseWindow([], 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 = () => { wnd.destroy(); };

                                            const contents = mk(wnd.visuals, 'div', 'filecontentsroot');
                                            const iframe = mk(contents, 'iframe') as HTMLIFrameElement;
                                            iframe.style.flex = '1 0 0';
                                            iframe.src = url;

                                            wnd.focus();
                                        } else {
                                            window.location = url;
                                        }
                                    }, wnd.get_path(), 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 (wnd.get_path() == "/" && fileview.filename == "trash") {
                    // If we've dragged something onto the trashcan, it's trash
                    move_to_trash(wnd, dragging_fileview.filename);
                }
                else if (wnd.get_path() == "/" && 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(wnd.get_path(), 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);
}

function openfile_nondir(wnd: ExplorerWindow) {

    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', wnd.get_path(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 = wnd.opened_file.mimetype.split("/")[0] == "image";
    wnd.save_btn_container.style.display = (wnd.opened_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 (wnd.opened_file.write_permissions)
                wnd.txt_editor.contentEditable = "true";
        };
    }

    xhr.send(data);
}

// This loads the contents of the current directory
function openfile_dir(wnd) { 
    update_path_visuals(wnd);

    var data = new FormData();
    data.append('path', wnd.get_path());

    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, wnd.get_path(), dragging_fileview.filename);
        }
    }
}



function move_to_trash(wnd, filename) {
    move_file(wnd, wnd, "/trash", filename, path_combine(wnd.get_path(), 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', wnd.get_path());
    data.append('filename', filename);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/php/delete.php', true);
    xhr.onload = function () {
        wnd.openfile(true);
    };
    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', wnd.get_path());
    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 () {
        wnd.openfile(true);
    };
    xhr.send(data);
}

function move_file(srcwnd: ExplorerWindow, dstwnd: ExplorerWindow, new_folder: string, filename: string, new_filename?: string) {
    if (!new_filename)
        new_filename = filename;

    var data = new FormData();
    data.append('old_folder',  srcwnd.get_path());
    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 = () => {
        srcwnd.openfile(true);
        dstwnd.openfile(true);
    };
    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', wnd.get_path());
    data.append('dirname', dirname);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/php/mkdir.php', true);
    xhr.onload = function () {
        wnd.openfile(true);
    };
    xhr.send(data);
}


// Replace an existing file with a new one
function replace_file(in_file, filename, wnd) {
    if (in_file) {
        var folder = wnd.get_path(wnd.pwd.length - 1);
        filename = wnd.pwd[wnd.pwd.length - 1];
    } else {
        var folder = wnd.get_path();
    }

    show_upload_dialog_replace_file(folder, filename);
}

// This updates the path of the window's DOM (the "Root > Folder1 > Folder2 > foo.png")
function update_path_visuals(wnd) {
    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_dir(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 = wnd.get_path(i + 1);
                move_file(dragging_fileview.wnd, wnd, new_folder, dragging_fileview.filename);
                end_drag(e);
    
                e.preventDefault();
                e.stopPropagation();
            }
        }
    }
}

function download_file(in_file, filename?: any, wnd?: any) {
    if (in_file) {
        var folder = wnd.get_path(wnd.pwd.length - 1);
        filename = wnd.pwd[wnd.pwd.length - 1];
    } else {
        var folder = wnd.get_path();
    }

    // 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;
}

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', wnd.get_path(wnd.pwd.length - 1));
    data.append('filename', wnd.pwd[wnd.pwd.length - 1]);
    data.append('content', contents);
    data.append('overwrite', '1');

    xhr.send(data);
}

// 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
// This is a tiny wrapper around the share_window.
function share(in_file: boolean, filename: string, wnd: BaseWindow) {
    if (in_file) {
        var folder = wnd.get_path(wnd.pwd.length - 1);
        filename = wnd.pwd[wnd.pwd.length - 1];
    } else {
        var folder = wnd.get_path();
    }

    var sharewnd = new ShareWindow(folder, filename, 400, 400, 400);
    sharewnd.focus();
}