right click context menu on files

3 files changed, 75 insertions, 2 deletions

diff --git a/css/style.css b/css/style.css
index 39a545c..bbd2035 100644
--- a/css/style.css
+++ b/css/style.css
@@ -331,3 +331,31 @@ input[type=submit]:hover {
 .pathentry:hover {
     text-decoration: underline;
 }
+
+.context {
+    background: white;
+    position: absolute;
+    z-index: 1000;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: 0;
+
+    border: 1px solid #ccc;
+	box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.2);
+}
+
+.context > li {
+    padding: 0.4rem 1.5rem;
+    margin: 0;
+
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
+.context > li:hover {
+    background: #2e91db;
+    color: white;
+}
diff --git a/loggedin.js b/loggedin.js
index 1affb09..d80c734 100644
--- a/loggedin.js
+++ b/loggedin.js
@@ -12,6 +12,8 @@ the_file.onchange = on_file_added;
 var pwd = [];
 const pending_uploads = [];
 
+var context_menu = null;
+
 class FileView {
     constructor(filename, visuals, mimetype, is_directory) {
         this.filename     = filename;
@@ -127,11 +129,27 @@ function add_file_visuals(name, is_directory, mimetype) {
             pwd.push(name);
             load_dir();
         }
-    }
-    else {
+    } else {
         img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`;
     }
 
+    fileDiv.oncontextmenu = (e) => {
+        context(e, [
+            ['Open', () => {
+                if (is_directory) {
+                    pwd.push(name);
+                    load_dir();
+                } else {
+                    alert('not implemented');
+                }
+            }],
+            ['Rename', () => {alert('not implemented')}],
+            ['Share',  () => {alert('not implemented')}],
+            ['Delete', () => {alert('not implemented')}],
+        ]);
+        e.preventDefault();
+    }
+
     fileDiv.classList.add('file');
     filename.classList.add('filename');
     filename.innerText = name;
@@ -153,4 +171,30 @@ function begin_upload() {
     the_file.click();
 }
 
+function context(e, entries) {
+    if (context_menu)
+        context_menu.remove();
+
+    context_menu = document.createElement('ul');
+    context_menu.classList.add('context');
+
+    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);
+    }
+
+    document.body.appendChild(context_menu);
+}
+
+document.body.onclick = () => {
+    if (context_menu)
+        context_menu.remove();
+}
+
 load_dir();
diff --git a/loggedin.php b/loggedin.php
index 34b8997..5c900c9 100644
--- a/loggedin.php
+++ b/loggedin.php
@@ -22,4 +22,5 @@
     <input type="file" name="the_file" id="the_file">
 </form>
 
+
 <script src="loggedin.js"></script>