new folder creation/naming

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>

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);
+}

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];

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`;

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 {

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;}