new folder creation/naming

toast
Kit Kasune 3 years ago
parent cff99732b1
commit 72a95d9088
  1. 1
      index.html
  2. 47
      scripts/contextmenu/newfolder.js
  3. 1
      scripts/startup/initcontext.js
  4. 3
      scripts/startup/preload.js
  5. 2
      styles/context.css
  6. 49
      styles/modal.css

@ -8,6 +8,7 @@
<link href='./styles/files.css' rel='stylesheet'> <link href='./styles/files.css' rel='stylesheet'>
<link href='./styles/controls.css' rel='stylesheet'> <link href='./styles/controls.css' rel='stylesheet'>
<link href='./styles/context.css' rel='stylesheet'> <link href='./styles/context.css' rel='stylesheet'>
<link href='./styles/modal.css' rel='stylesheet'>
<title>FileKade</title> <title>FileKade</title>
</head> </head>

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

@ -3,7 +3,6 @@ const ctxl = require('../../json/ctx.json');
module.exports = () => { module.exports = () => {
document.getElementById('ctx').style.display = 'none'; document.getElementById('ctx').style.display = 'none';
const ctx = document.getElementById('ctx'); const ctx = document.getElementById('ctx');
console.log(ctxl);
try { try {
for (let i = 0; i < ctxl.length; i++) { for (let i = 0; i < ctxl.length; i++) {
let k = ctxl[i]; let k = ctxl[i];

@ -12,7 +12,8 @@ window.addEventListener('DOMContentLoaded', () => {
sort: 'Name', sort: 'Name',
ascend: true, ascend: true,
context: false, context: false,
chdir: [] chdir: [],
ctxFunc: {}
}; };
const startDir = `${os.homedir}\\Desktop`; const startDir = `${os.homedir}\\Desktop`;

@ -2,11 +2,11 @@
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
font-size: 16px; font-size: 16px;
color: #d4d4d4; color: #d4d4d4;
border: 1px solid #af2188a4;
border-radius: 7px 7px; border-radius: 7px 7px;
position: absolute; position: absolute;
background-color: #101010df; background-color: #101010df;
padding: 7px 5px; padding: 7px 5px;
border: 1px solid #af2188a4;
} }
#ctx hr { #ctx hr {

@ -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;}
Loading…
Cancel
Save