From 72a95d908888414d4851d1ea391d5b22591f8b10 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Fri, 10 Dec 2021 16:15:28 -0700
Subject: [PATCH] new folder creation/naming

---
 index.html                       |  1 +
 scripts/contextmenu/newfolder.js | 47 ++++++++++++++++++++++++++++++
 scripts/startup/initcontext.js   |  1 -
 scripts/startup/preload.js       |  3 +-
 styles/context.css               |  2 +-
 styles/modal.css                 | 49 ++++++++++++++++++++++++++++++++
 6 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 scripts/contextmenu/newfolder.js
 create mode 100644 styles/modal.css

diff --git a/index.html b/index.html
index 6c3cbf8..7aa076d 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
         <link href='./styles/files.css' rel='stylesheet'>
         <link href='./styles/controls.css' rel='stylesheet'>
         <link href='./styles/context.css' rel='stylesheet'>
+        <link href='./styles/modal.css' rel='stylesheet'>
 
         <title>FileKade</title>
     </head>
diff --git a/scripts/contextmenu/newfolder.js b/scripts/contextmenu/newfolder.js
new file mode 100644
index 0000000..9ad7df7
--- /dev/null
+++ b/scripts/contextmenu/newfolder.js
@@ -0,0 +1,47 @@
+const fs = require('fs');
+const path = require('path');
+
+const lightRefresh = require('../fileview/lightrefresh');
+
+module.exports = () => {
+    let modal = document.createElement('div');
+    modal.className = 'modal';
+    modal.id = 'new-folder-modal-container';
+    document.body.appendChild(modal);
+    let title = document.createElement('h2');
+    title.innerHTML = 'New Folder';
+    modal.appendChild(title);
+    let text = document.createElement('p');
+    text.innerHTML = "Please name your new folder.";
+    modal.appendChild(text);
+    let cont = document.createElement('div');
+    cont.className = 'button-container';
+    modal.appendChild(cont);
+    let input = document.createElement('input');
+    input.placeholder = 'New Folder';
+    input.id = 'new-folder-input';
+    let lastIn = '';
+    input.oninput = () => {
+        if (!input.value.match(/^[a-zA-Z0-9-_() ]*$/gm)) {input.value = lastIn;}
+        else {lastIn = input.value;}
+    };
+    cont.appendChild(input);
+    let conf = document.createElement('button');
+    conf.innerHTML = 'Create';
+    conf.onclick = () => {
+        input.value.trim();
+        if (fs.existsSync(path.join(window.kade.cpath, input.value))) {
+            if (!input.value.match(/^.+\(\d\)$/gm)) {input.value += ' (1)';}
+            else {
+                let tempstr = input.value.split('');
+                tempstr[input.value.length - 2] = `${Number(input.value.charAt(input.value.length - 2)) + 1}`;
+                input.value = tempstr.join('');
+            }
+            return;
+        }
+        fs.mkdirSync(path.join(window.kade.cpath, input.value));
+        lightRefresh();
+        modal.remove();
+    };
+    cont.appendChild(conf);
+}
\ No newline at end of file
diff --git a/scripts/startup/initcontext.js b/scripts/startup/initcontext.js
index 4e555e5..1ba1a0a 100644
--- a/scripts/startup/initcontext.js
+++ b/scripts/startup/initcontext.js
@@ -3,7 +3,6 @@ const ctxl = require('../../json/ctx.json');
 module.exports = () => {
     document.getElementById('ctx').style.display = 'none';
     const ctx = document.getElementById('ctx');
-    console.log(ctxl);
     try {
         for (let i = 0; i < ctxl.length; i++) {
             let k = ctxl[i];
diff --git a/scripts/startup/preload.js b/scripts/startup/preload.js
index d04d8b4..162c137 100644
--- a/scripts/startup/preload.js
+++ b/scripts/startup/preload.js
@@ -12,7 +12,8 @@ window.addEventListener('DOMContentLoaded', () => {
         sort: 'Name',
         ascend: true,
         context: false,
-        chdir: []
+        chdir: [],
+        ctxFunc: {}
     };
 
     const startDir = `${os.homedir}\\Desktop`;
diff --git a/styles/context.css b/styles/context.css
index cd800fb..502b0ba 100644
--- a/styles/context.css
+++ b/styles/context.css
@@ -2,11 +2,11 @@
     font-family: 'Nunito', sans-serif;
     font-size: 16px;
     color: #d4d4d4;
+    border: 1px solid #af2188a4;
     border-radius: 7px 7px;
     position: absolute;
     background-color: #101010df;
     padding: 7px 5px;
-    border: 1px solid #af2188a4;
 }
 
 #ctx hr {
diff --git a/styles/modal.css b/styles/modal.css
new file mode 100644
index 0000000..7d8822d
--- /dev/null
+++ b/styles/modal.css
@@ -0,0 +1,49 @@
+.modal {
+    position: absolute;
+    width: max-content;
+    height: max-content;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 7px 7px;
+    border: 1px solid #af2188a4;
+    background-color: #171717da;
+    padding: 6px 8px;
+}
+
+.modal h1, .modal h2, .modal h3, .modal h4 {
+    color: #af2188;
+    font-family: 'Nunito', sans-serif;
+    margin: 10px;
+}
+
+.modal p, .modal b {
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    margin: 8px 10px;
+}
+
+.modal input, .modal button {
+    background-color: #1e27423f;
+    color: white;
+    border: #5d60ca solid 1px;
+    border-radius: 3px;
+    width: auto;
+    margin: 10px 4px 10px 8px;
+    font-size: .82em;
+    padding: 5px 7px;
+    font-family: "Monsterrat", sans-serif;
+    transition: background-color .65s ease-in-out, border-color .65s ease-in-out, color .65s ease-in-out;
+    cursor: pointer;
+    text-align: left;
+}
+.modal input:hover {
+    border-color: #a172a6;
+}
+.modal input:focus, .modal input:active {
+    background-color: #171717d8;
+    color: white;
+    outline: none;
+}
+
+.modal .button-container, input, .modal .button-container, button {display: inline-block;}
\ No newline at end of file