diff options
| -rw-r--r-- | css/style.css | 24 | ||||
| -rw-r--r-- | loggedin.js | 310 |
2 files changed, 233 insertions, 101 deletions
diff --git a/css/style.css b/css/style.css index 37e694c..407cc5f 100644 --- a/css/style.css +++ b/css/style.css @@ -10,6 +10,12 @@ body { overflow: hidden; } +.noselect { + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + #page { display: flex; flex: 1 0 0; @@ -267,6 +273,7 @@ input[type=submit]:hover { } .window { + overflow: hidden; box-sizing: border-box; margin: 0rem; padding: 0; @@ -286,8 +293,12 @@ input[type=submit]:hover { flex-direction: column; } +.window.focus { + border-color: black; +} + .foldercontents, .filecontents { - background: rgba(250, 250, 250, .8); + background: rgba(250, 250, 250, .9); flex: 1 0 0; } @@ -319,6 +330,10 @@ input[type=submit]:hover { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; cursor: grab; + + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; } .window h3 { @@ -431,3 +446,10 @@ input[type=submit]:hover { background-image: url("/img/backdrop.jpg"); background-size: cover; } + +.share_dialog_contents { + display: flex; + flex-direction: column; + background: white; + background: rgba(255,255,255, 0.9); +} diff --git a/loggedin.js b/loggedin.js index 18f7910..31c72c9 100644 --- a/loggedin.js +++ b/loggedin.js @@ -21,6 +21,8 @@ var dragging_fileview; var dragging_placeholder = null; var dragging_offset_x = 0, dragging_offset_y = 0; +var depth = 20; + class FileView { constructor(filename, visuals, mimetype, is_directory) { this.filename = filename; @@ -130,19 +132,14 @@ function update_path_visuals() { 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); + var separator_div = mk(the_path, 'div', 'separator'); separator_div.innerText = "ยป"; } else d = "Root"; - - var entry = document.createElement('button'); - entry.classList.add('pathentry'); + var entry = mk(the_path, 'button', 'pathentry'); entry.innerText = d; - the_path.appendChild(entry); add_link_functionality(entry, i + 1); } @@ -205,26 +202,8 @@ function share(in_file, filename) { var folder = get_path(); } - var users = prompt("Enter comma separated list of users. empty = public", ""); - if (users === null) - return; - var password = prompt("Enter a passcode", ""); - if (password === null) - return; - - - var data = new FormData(); - data.append('folder', folder); - data.append('filename', filename); - data.append('users', users); - data.append('password', password); - - var xhr = new XMLHttpRequest(); - xhr.open('POST', '/php/share.php', true); - xhr.onload = function () { - } - - xhr.send(data); + var wnd = make_share_window(folder, filename); + focus_window(wnd); } function opendir() { @@ -359,17 +338,17 @@ function begin_drag_fileview(e, fileview) { if (dragging) end_drag(); + // Inserted in place by begin_drag dragging_placeholder = document.createElement('div'); dragging_fileview = fileview; dragging = fileview.visuals; + dragging.style.zIndex = 50000; - // document.body.appendChild(dragging); - - begin_drag(e, fileview.visuals,); + begin_drag(e, fileview.visuals); } -function begin_drag(e, obj) { +function begin_drag(e, obj, dont_set_width) { dragging = obj; dragging_candidate = null; dragging.classList.add("dragged"); @@ -384,8 +363,10 @@ function begin_drag(e, obj) { dragging.style.left = (e.clientX - dragging_offset_x) + "px"; dragging.style.top = (e.clientY + dragging_offset_y) + "px"; - dragging.style.width = elemRect.width + "px"; - dragging.style.height = elemRect.height + "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); @@ -447,101 +428,226 @@ class Window { } } +function focus_window(wnd) { + if (focus) + focus.visuals.classList.remove('focus'); + focus = wnd; + if (wnd) { + wnd.visuals.classList.add('focus'); + wnd.visuals.style.zIndex = depth ++; + } +} -function make_window(pwd) { +function make_window_base(pwd, x, y, w, h) { var wnd = new Window(pwd); windows.push(wnd); - var wnd_html = document.createElement('div'); - wnd_html.classList.add('window'); + 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"; - var h2 = document.createElement('h2'); - wnd_html.appendChild(h2); + wnd.h2 = mk(wnd.visuals, 'h2'); - h2.onmousedown = (e) => { - // begin_drag(e, wnd_html); + wnd.visuals.onmousedown = (e) => { + focus_window(wnd); + } + + wnd.h2.onmousedown = (e) => { if (!dragging) { - dragging_candidate = wnd_html; + dragging_candidate = wnd.visuals; dragging_candidate_x = e.clientX; dragging_candidate_y = e.clientY; } }; - path = document.createElement('div'); - path.classList.add('path'); - h2.appendChild(path); + return wnd; +} + +function mk(parent, type, _class) { + var el = document.createElement(type); + parent.appendChild(el); + if (_class) + el.classList.add(_class); + return el; +} - wnd_html.style.width = "900px"; - wnd_html.style.height = "600px"; - wnd_html.style.position = "absolute"; - wnd_html.style.left = "200px"; - wnd_html.style.top = "100px"; +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; +} - wnd.visuals = wnd_html; +function mkcheckbox(parent, label, togglefn) { + var hdiv = mkhdiv(parent); - { - wnd.foldercontents = document.createElement('div'); - wnd.foldercontents.classList.add('foldercontents'); - wnd_html.appendChild(wnd.foldercontents); + var write_checkbox = mk(hdiv, 'input'); + 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); + }; +} + +function make_share_window(folder, filename) { + var wnd = make_window_base(null, 400, 400, 400, 0); + + wnd.h2.innerText = "Share " + filename; + wnd.h2.style.padding = "0.2rem 0.4rem"; + + wnd.foldercontents = mk(wnd.visuals, 'div', 'share_dialog_contents'); + wnd.foldercontents.style.padding = "0.5rem"; + + var data = { + write_permissions: false, + private: false, + has_password: false, + password: "", + userlist: [], + } + + 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"; - var h3 = document.createElement('h3'); - wnd.foldercontents.appendChild(h3); + add_user.onclick = (e) => { + var i = mk(userlist, 'input'); + i.value = 'John Doe'; - var upload_btn = document.createElement('button'); + let index = data.userlist.length; + data.userlist.push(i.value); + + i.onchange = (e) => { + data.userlist[index] = i.value; + } + } + + // Click the add_user to add a default user + add_user.click(); + + mkcheckbox(wnd.foldercontents, "Give write permissions", (toggled) => { + data.write_permissions = toggled; + }); + + 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'); + password_input.type = 'password'; + 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 = () => { + console.log(data); + + 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); + 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(); + } + + return wnd; +} + +function delete_window() { + var index = windows.indexOf(focus); + if (index >= 0) { + windows.splice(index, 1); + } + focus.visuals.parentNode.removeChild(focus.visuals); + fous = null; +} + +function make_window(pwd) { + var wnd = make_window_base(pwd, 100, 100, 800, 600); + + path = mk(wnd.h2, 'div', 'path'); + + { + 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 = () => { begin_upload(); } - h3.appendChild(upload_btn); - var separator = document.createElement('div'); - separator.classList.add('separator'); - h3.appendChild(separator); + mk(h3, 'div', 'separator'); - var new_folder_btn = document.createElement('button'); + var new_folder_btn = mk(h3, 'button'); new_folder_btn.innerText = "New Folder"; new_folder_btn.onclick = () => { new_folder(); } - h3.appendChild(new_folder_btn); - separator = document.createElement('div'); - separator.classList.add('separator'); - h3.appendChild(separator); + mk(h3, 'div', 'separator'); - wnd.filegrid = document.createElement('div'); - wnd.filegrid.classList.add('files'); - wnd.foldercontents.appendChild(wnd.filegrid); + wnd.filegrid = mk(wnd.foldercontents, 'div', 'files'); } { - wnd.filecontentsroot = document.createElement('div'); - wnd_html.appendChild(wnd.filecontentsroot); - - var h3 = document.createElement('h3'); - wnd.filecontentsroot.appendChild(h3); + wnd.filecontentsroot = mk(wnd.visuals, 'div'); + var h3 = mk(wnd.filecontentsroot, 'h3'); - var download_btn = document.createElement('button'); + var download_btn = mk(h3, 'button'); download_btn.innerText = "Download"; download_btn.onclick = () => { download_file(); } - h3.appendChild(download_btn); - separator = document.createElement('div'); - separator.classList.add('separator'); - h3.appendChild(separator); + mk(h3, 'div', 'separator'); - var download_btn = document.createElement('button'); + var download_btn = mk(h3, 'button'); download_btn.innerText = "Share"; download_btn.onclick = () => { share(true); } - h3.appendChild(download_btn); - - separator = document.createElement('div'); - separator.classList.add('separator'); - h3.appendChild(separator); - - wnd.filecontents = document.createElement('div'); - wnd.filecontents.classList.add('filecontents'); - wnd.filecontentsroot.appendChild(wnd.filecontents); + + mk(h3, 'div', 'separator'); + wnd.filecontents = mk(wnd.filecontentsroot, 'div', 'filecontents'); } - document.body.appendChild(wnd_html); return wnd; } @@ -552,7 +658,7 @@ function add_file_visuals(fileview) { // Is the current filewview the trash folder itself var is_trash = focus.pwd.length == 0 && fileview.filename == "trash"; - var visuals = document.createElement('div'); + var visuals = mk(focus.filegrid, 'div'); fileview.visuals = visuals; var img = document.createElement('img'); @@ -567,7 +673,7 @@ function add_file_visuals(fileview) { img.src=`/mimeicons/${fileview.mimetype.replace("/", "-")}.png`; } - visuals.onclick = () => { + fileview.visuals.onclick = () => { focus.pwd.push(fileview.filename); openfile(fileview.is_directory); } @@ -632,7 +738,6 @@ function add_file_visuals(fileview) { visuals.appendChild(img); visuals.appendChild(filename); - focus.filegrid.appendChild(visuals); } function begin_upload() { @@ -643,8 +748,11 @@ function context(e, entries) { if (context_menu) context_menu.remove(); - context_menu = document.createElement('ul'); - context_menu.classList.add('context'); + context_menu = mk(document.body, 'ul', 'context'); + + context_menu.onmousedown = (e) => { + e.stopPropagation(); + } context_menu.style.left = e.clientX + "px"; context_menu.style.top = e.clientY + "px"; @@ -655,8 +763,6 @@ function context(e, entries) { li.onclick = e[1]; context_menu.appendChild(li); } - - document.body.appendChild(context_menu); } function get_path(max_length) { @@ -694,10 +800,15 @@ document.body.onmousemove = (e) => { 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); + begin_drag(e, dragging_candidate, true); } } +document.body.onmousedown = (_e) => { + if (context_menu) + context_menu.remove(); +} + document.body.onmouseup = (_e) => { if (dragging_candidate) dragging_candidate = null; @@ -714,7 +825,6 @@ document.body.oncontextmenu = (e) => { context_menu.remove(); } - var root_window = make_window([]); -focus = root_window; +focus_window(root_window); openfile(true); |