diff options
| -rw-r--r-- | css/style.css | 83 | ||||
| -rw-r--r-- | loggedin.js | 249 | ||||
| -rw-r--r-- | loggedin.php | 23 | ||||
| -rw-r--r-- | php/readfile.php | 4 |
4 files changed, 234 insertions, 125 deletions
diff --git a/css/style.css b/css/style.css index fb6a093..651140d 100644 --- a/css/style.css +++ b/css/style.css @@ -14,6 +14,10 @@ body { display: flex; flex: 1 0 0; align-items: stretch; + + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; } #page > * { @@ -141,7 +145,6 @@ form > .content { justify-content: center; } -.filesystem > h2, form > h2 { color: #4d4d4d; margin: 0; @@ -152,11 +155,31 @@ form > h2 { border-top-right-radius: 0.5rem; } + +.window > h2 button { + border: none; + padding: 0.3rem 1rem; + background: inherit; + border-radius: 0; +} + +.window > h2 button:not(.pathentry):hover { + background: white; +} + +.window > h2 > .separator { + flex: 0 0 1px; + align-self: stretch; + background: #bbb; +} + +.window > h2 > *:first-child { + border-top-left-radius: 0.5rem; +} form p { margin: 1rem 0px 0.3rem 0px; } - .hero_form_error { animation: fadein 0.2s; background-color: #ff4d4d; @@ -241,17 +264,40 @@ input[type=submit]:hover { display: none; } -.filesystem { +.window { background: #fafafa; - margin: 1rem; + margin: 0rem; padding: 0; box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); border-radius: 0.5rem; border: 1px solid #b9b9b9; display: block; + position: absolute; + top: 0; + left: 0; + width: 800px; + height: 600px; +} + +.window > h2 { + color: #4d4d4d; + background: #f0f0f0; + margin: 0; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + + cursor: grab; + + display: flex; + align-items: stretch; + font-weight: normal; + padding: 0rem; + border-bottom: 1px solid #bbb; + font-size: 1.3rem; } + .files { padding: 0.3rem; display: grid; @@ -297,35 +343,6 @@ input[type=submit]:hover { filter: brightness(120%); } -.filesystem > h2 { - display: flex; - align-items: stretch; - font-weight: normal; - padding: 0rem; - border-bottom: 1px solid #bbb; - font-size: 1.3rem; -} - -.filesystem > h2 button { - border: none; - padding: 0.3rem 1rem; - background: inherit; - border-radius: 0; -} - -.filesystem > h2 button:not(.pathentry):hover { - background: white; -} - -.filesystem > h2 > .separator { - flex: 0 0 1px; - align-self: stretch; - background: #bbb; -} - -.filesystem > h2 > *:first-child { - border-top-left-radius: 0.5rem; -} .path { display: flex; diff --git a/loggedin.js b/loggedin.js index 4b4cb25..a490e20 100644 --- a/loggedin.js +++ b/loggedin.js @@ -3,14 +3,13 @@ var FORM_ASYNC = true; const upload_form = document.getElementById("upload_form"); const the_file = document.getElementById("the_file"); const filename_input = document.getElementById("filename"); -const upload_btn = document.getElementById("upload_btn"); -const the_path = document.getElementById("the_path"); -const current_directory = document.getElementById("current_directory"); +const current_directory = document.getElementById("current_directory"); const upload_parent_directory = document.getElementById("upload_parent_directory"); the_file.onchange = on_file_added; -var pwd = []; +var windows = []; +var focus = null; var context_menu = null; var dragging = null; @@ -51,7 +50,7 @@ function on_file_added(_e) { body: new FormData(upload_form) }).then((resp) => { if (resp.status == 200) { - load_dir(); + openfile(true); } else { alert("Upload failed"); } @@ -64,17 +63,24 @@ function on_file_added(_e) { } } -function load_dir() { - while (the_path.children.length > 1) +function update_path_visuals() { + var the_path = focus.visuals.getElementsByClassName('path')[0]; + + while (the_path.children.length > 0) the_path.removeChild(the_path.lastChild); - for (let i = 0; i < pwd.length; i++) { - var d = pwd[i]; + for (let i = -1; i < focus.pwd.length; i++) { + var d; + if (i >= 0) { + d = focus.pwd[i]; + var separator_div = document.createElement('div'); + separator_div.classList.add('separator'); + the_path.appendChild(separator_div); + separator_div.innerText = "»"; + } + else + d = "Root"; - var separator_div = document.createElement('div'); - separator_div.classList.add('separator'); - the_path.appendChild(separator_div); - separator_div.innerText = "»"; var entry = document.createElement('button'); entry.classList.add('pathentry'); @@ -83,6 +89,34 @@ function load_dir() { add_link_functionality(entry, i + 1); } +} + +function openfile_nondir() { + var data = new FormData(); + data.append('folder', get_path(focus.pwd.length - 1)); + data.append('filename', focus.pwd[focus.pwd.length - 1]); + + var xhr = new XMLHttpRequest(); + + focus.pwd.push(); + + update_path_visuals(); + + xhr.open('POST', '/php/readfile.php', true); + + focus.filecontents.innerText = "Loading..."; + focus.filecontents.style.display = 'block'; + focus.filegrid.style.display = 'none'; + + xhr.onload = function () { + focus.filecontents.innerText = xhr.responseText; + }; + xhr.send(data); +} + +function opendir() { + + update_path_visuals(); var data = new FormData(); data.append('path', get_path()); @@ -117,6 +151,17 @@ function load_dir() { }; xhr.send(data); + + focus.filecontents.style.display = 'none'; + focus.filegrid.style.display = 'grid'; +} + +function openfile(is_directory) { + if (is_directory) { + opendir(); + } else { + openfile_nondir(); + } } function delete_file(filename) { @@ -128,7 +173,7 @@ function delete_file(filename) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/php/delete.php', true); xhr.onload = function () { - load_dir(); + openfile(true); }; xhr.send(data); } @@ -146,7 +191,7 @@ function rename_file(filename) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/php/rename.php', true); xhr.onload = function () { - load_dir(); + openfile(true); }; xhr.send(data); } @@ -160,7 +205,7 @@ function move_file(new_folder, filename) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/php/move.php', true); xhr.onload = function () { - load_dir(); + openfile(true); }; xhr.send(data); } @@ -177,44 +222,64 @@ function new_folder() { var xhr = new XMLHttpRequest(); xhr.open('POST', '/php/mkdir.php', true); xhr.onload = function () { - load_dir(); + openfile(true); }; xhr.send(data); } -function begin_drag(e, fileview) { +function begin_drag_fileview(e, fileview) { if (dragging) end_drag(); dragging_placeholder = document.createElement('div'); - fileview.visuals.parentNode.insertBefore(dragging_placeholder, fileview.visuals); + dragging_fileview = fileview; dragging = fileview.visuals; - dragging_fileview = fileview; + + // document.body.appendChild(dragging); + + begin_drag(e, fileview.visuals,); +} + +function begin_drag(e, obj) { + + dragging = obj; dragging.classList.add("dragged"); var elemRect = dragging.getBoundingClientRect(); + dragging_offset_x = e.clientX - elemRect.left; + dragging_offset_y = -e.clientY + elemRect.top; + - dragging_offset_x = elemRect.width - (elemRect.left - e.clientX); - dragging_offset_y = elemRect.top - e.clientY; + 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"; - dragging.style.position = "absolute"; dragging.style.width = elemRect.width + "px"; dragging.style.height = elemRect.height + "px"; - document.body.appendChild(dragging); - dragging.style.left = (e.clientX - dragging_offset_x) + "px"; - dragging.style.top = (e.clientY + dragging_offset_y) + "px"; + dragging.style.position = "absolute"; + document.body.appendChild(dragging); } -function end_drag(e) { - dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder); - dragging_placeholder.remove(); - dragging.style.removeProperty("position"); - dragging.style.removeProperty("width"); - dragging.style.removeProperty("height"); - dragging.style.removeProperty("left"); - dragging.style.removeProperty("top"); +function end_drag(_e) { + if (dragging_placeholder) { + dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder); + dragging_placeholder.remove(); + dragging_placeholder = null; + } + + 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; } @@ -229,12 +294,12 @@ function drop_handler(dst, src) { function add_link_functionality(link, length) { link.onclick = () => { - pwd.length = length, - load_dir(); + focus.pwd.length = length, + openfile(true); } link.onmouseup = (e) => { - if (dragging) { + if (dragging && dragging_fileview) { var new_folder = get_path(length); move_file(new_folder, dragging_fileview.filename); end_drag(); @@ -245,21 +310,73 @@ function add_link_functionality(link, length) { } } -add_link_functionality(document.getElementById("home_path_entry"), 0); +class Window { + constructor(pwd) { + this.pwd = pwd; + } +} -function open_file(fileview) { - var data = new FormData(); - data.append('folder', get_path()); - data.append('filename', fileview.filename); - var xhr = new XMLHttpRequest(); - xhr.open('POST', '/php/readfile.php', true); - xhr.onload = function () { - console.log(xhr.responseText); - }; - xhr.send(data); +function make_window(pwd) { + var wnd = new Window(pwd); + windows.push(wnd); + + var wnd_html = document.createElement('div'); + wnd_html.classList.add('window'); + + var h2 = document.createElement('h2'); + wnd_html.appendChild(h2); + + h2.onmousedown = (e) => { + begin_drag(e, wnd_html); + e.preventDefault(); + }; + + var upload_btn = document.createElement('button'); + upload_btn.innerText = "Upload"; + upload_btn.onclick = () => { begin_upload(); } + h2.appendChild(upload_btn); + + var separator = document.createElement('div'); + separator.classList.add('separator'); + h2.appendChild(separator); + + var new_folder_btn = document.createElement('button'); + new_folder_btn.innerText = "New Folder"; + new_folder_btn.onclick = () => { new_folder(); } + h2.appendChild(new_folder_btn); + + separator = document.createElement('div'); + separator.classList.add('separator'); + h2.appendChild(separator); + + path = document.createElement('div'); + path.classList.add('path'); + h2.appendChild(path); + + wnd_html.style.width = "800px"; + wnd_html.style.height = "600px"; + wnd_html.style.position = "absolute"; + wnd_html.style.left = "300px"; + wnd_html.style.top = "300px"; + + wnd.visuals = wnd_html; + + var filegrid = document.createElement('div'); + filegrid.classList.add('files'); + wnd_html.appendChild(filegrid); + wnd.filegrid = filegrid; + + var filecontents = document.createElement('div'); + filegrid.classList.add('filecontents'); + wnd_html.appendChild(filecontents); + wnd.filecontents = filecontents; + + document.body.appendChild(wnd_html); + return wnd; } + function add_file_visuals(fileview) { var visuals = document.createElement('div'); fileview.visuals = visuals; @@ -269,28 +386,23 @@ function add_file_visuals(fileview) { if (fileview.is_directory) { img.src="/mimeicons/directory.png"; - visuals.onclick = () => { - pwd.push(fileview.filename); - load_dir(); - } } else { img.src=`/mimeicons/${fileview.mimetype.replace("/", "-")}.png`; - visuals.onclick = () => { - open_file(fileview); - } + } + + visuals.onclick = () => { + focus.pwd.push(fileview.filename); + openfile(fileview.is_directory); } visuals.oncontextmenu = (e) => { if (!dragging) { context(e, [ ['Open', () => { - if (fileview.is_directory) { - pwd.push(fileview.filename); - load_dir(); - } else { - open_file(fileview); - } + focus.pwd.push(fileview.filename); + openfile(fileview.is_directory); }], + ['Open in New Window', () => {alert('not implemented')}], ['Rename', () => { rename_file(fileview.filename); }], ['Share', () => {alert('not implemented')}], ['Delete', () => { delete_file(fileview.filename); }], @@ -301,7 +413,7 @@ function add_file_visuals(fileview) { } visuals.ondragstart = (e) => { - begin_drag(e, fileview); + begin_drag_fileview(e, fileview); e.preventDefault(); }; @@ -323,7 +435,7 @@ function add_file_visuals(fileview) { visuals.appendChild(img); visuals.appendChild(filename); - current_directory.appendChild(visuals); + focus.visuals.getElementsByClassName('files')[0].appendChild(visuals); } function begin_upload() { @@ -352,12 +464,12 @@ function context(e, entries) { function get_path(max_length) { if (max_length == undefined) { - max_length = pwd.length; + max_length = focus.pwd.length; } var path = "/"; for (let i = 0; i < max_length; i++) { - path += pwd[i]; + path += focus.pwd[i]; if (i != max_length - 1) path += "/"; } @@ -384,7 +496,7 @@ document.body.onmousemove = (e) => { } } -document.body.onmouseup = (e) => { +document.body.onmouseup = (_e) => { if (dragging) end_drag(); } @@ -398,4 +510,7 @@ document.body.oncontextmenu = (e) => { context_menu.remove(); } -load_dir(); + +var root_window = make_window([]); +focus = root_window; +openfile(true); diff --git a/loggedin.php b/loggedin.php index cc31684..708b14b 100644 --- a/loggedin.php +++ b/loggedin.php @@ -1,26 +1,3 @@ -<div> - <div class="filesystem"> - <h2 style="display: flex; gap: 0rem;"> - <button id="upload_btn" onclick="begin_upload()">Upload</button> - <div class="separator"></div> - <button id="upload_btn" onclick="new_folder()">New Folder</button> - <div class="separator"></div> - <div class="path" id="the_path"> - <button class="pathentry" id="home_path_entry"> - <?php - $user=$_SESSION['user_object']; - echo $user->username; - ?> - 's files</button> - </div> - </h2> - - <div class="files" id="current_directory"> - </div> - </div> - -</div> - <form id="upload_form" style="display:none;" action="php/upload.php" method="post" enctype="multipart/form-data"> <input id="filename" name="filename"> <input type="file" name="the_file" id="the_file"> diff --git a/php/readfile.php b/php/readfile.php index 6e759d3..459232e 100644 --- a/php/readfile.php +++ b/php/readfile.php @@ -19,7 +19,7 @@ $filename = $_POST["filename"]; $dir = get_directory($folder, $user); if (!$dir) { - error_log("/php/readfile.php - invalid directory"); + error_log("/php/readfile.php - invalid directory '$folder'"); http_response_code(409); exit(0); } @@ -34,7 +34,7 @@ foreach ($contents_of_dir as $c) { } } if (!$file_node) { - error_log("/php/readfile.php - invalid filename"); + error_log("/php/readfile.php - invalid filename '$filename'"); http_response_code(409); exit(0); } |