set up contextmenu

index.html

@@ -7,6 +7,7 @@
         <link href="./styles/styles.css" rel="stylesheet">
         <link href='./styles/files.css' rel='stylesheet'>
         <link href='./styles/controls.css' rel='stylesheet'>
+        <link href='./styles/context.css' rel='stylesheet'>
 
         <title>FileKade</title>
     </head>
@@ -33,6 +34,35 @@
             </div>
         </div>
 
+        <div id="ctx">
+            <div class="ctx-group">
+                <div class="ctx-item">
+                    <p class="ctx-name nosel">New Folder</p>
+                </div>
+            </div>
+            <hr>
+            <div class="ctx-group">
+                <div class="ctx-item">
+                    <p class="ctx-name nosel">Sort by: Name</p>
+                </div>
+                <div class="ctx-item">
+                    <p class="ctx-name nosel">Order: Ascending</p>
+                </div>
+            </div>
+            <hr>
+            <div class="ctx-group">
+                <div class="ctx-item">
+                    <p class="ctx-name nosel">Reload</p>
+                </div>
+                <div class="ctx-item">
+                    <p class="ctx-name nosel">Refresh</p>
+                </div>
+                <div class="ctx-item">
+                    <p class="ctx-name nosel">Options</p>
+                </div>
+            </div>
+        </div>
+
 
         <script src="./scripts/renderer.js"></script>
 

main.js

@@ -17,7 +17,7 @@ async function createWindow () {
         },
         titleBarStyle: "hidden",
         //titleBarOverlay: true,
-    })
+    });
 
     // and load the index.html of the app.
     mainWindow.maximize();

scripts/contextmenu/createcontext.js

@@ -0,0 +1,7 @@
+module.exports = (e, target, window) => {
+    window.kade.context = true;
+    let ctx = document.getElementById('ctx');
+    ctx.style.left = `${e.pageX}px`;
+    ctx.style.top = `${e.pageY}px`;
+    ctx.style.display = 'block';
+};

scripts/contextmenu/hidecontext.js

@@ -0,0 +1,4 @@
+module.exports = (window) => {
+    document.getElementById('ctx').style.display = 'none';
+    window.kade.context = false;
+};

scripts/fileview/load/render.js

@@ -1,6 +1,7 @@
 const loadHierarchy = require("../hierarchy");
 
 const isOverflowing = require('../../dep/overflowing');
+const refresh = require("../refresh");
 
 module.exports = (dir) => {
     const refresh = require("../refresh");
@@ -20,6 +21,12 @@ module.exports = (dir) => {
             if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
             window.kade.cl = cfc;
         };
+        cfc.oncontextmenu = function () {
+            window.kade.elc = true;
+            if (!cfc.classList.contains('file-active')) {cfc.classList.add('file-active');}
+            if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
+            window.kade.cl = cfc;
+        };
         cfc.style = `animation-delay: ${num * .03}s`;
         cfc.onanimationend = () => {
             cfc.style = '';

scripts/startup/preload.js

@@ -1,6 +1,7 @@
 const os = require('os');
 
 const setButtons = require('./setbuttons');
+const hideContext = require('../contextmenu/hidecontext');
 
 window.addEventListener('DOMContentLoaded', () => {
     window.kade = {};
@@ -9,6 +10,7 @@ window.addEventListener('DOMContentLoaded', () => {
     window.kade.cpath = '';
     window.kade.sort = 'Name';
     window.kade.ascend = true;
+    window.kade.context = false;
 
     const startDir = `${os.homedir}\\Desktop`;
 
@@ -20,12 +22,19 @@ window.addEventListener('DOMContentLoaded', () => {
             if (window.kade.elc) {window.kade.elc = false; return;}
             if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
         }, 100);
+        if (window.kade.context) {hideContext(window);}
     }
 
+    document.getElementById('ctx').style.display = 'none';
+
     require('../keybinds/handleKey')();
 });
 
 window.addEventListener('contextmenu', e => {
     e.preventDefault();
-    
+    require('../contextmenu/createcontext')(e, e.target, window);
+    setTimeout(function () {
+        if (window.kade.elc) {window.kade.elc = false; return;}
+        if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
+    }, 100);
 });

styles/context.css

@@ -0,0 +1,35 @@
+#ctx {
+    font-family: 'Nunito', sans-serif;
+    font-size: 16px;
+    color: #d4d4d4;
+    border-radius: 7px 7px;
+    position: absolute;
+    background-color: #101010df;
+    padding: 7px 5px;
+    border: 1px solid #af2188a4;
+}
+
+#ctx hr {
+    margin: 4px 5px;
+    border-color: #f3f3f3ca;
+}
+
+.ctx-item p {margin: 0 0; padding: 0 0;}
+
+.ctx-item {
+    cursor: pointer;
+    border-radius: 3px;
+    transition: background-color .1s ease-in;
+    margin: 0 0;
+    padding: 4px;
+}
+.ctx-item:hover {background-color: #90909049;}
+
+.ctx-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+    align-content: stretch;
+    row-gap: 2px;
+}

styles/styles.css

@@ -54,6 +54,7 @@ body {
     overflow: hidden;
     background-color: #0000006d;
     z-index: 1;
+    -webkit-app-region: drag;
 }
 
 .nosel {-webkit-user-select: none;}