modal handling

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,10 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <Languages>
+        <language minSize="70" name="JavaScript" />
+      </Languages>
+    </inspection_tool>
+  </profile>
+</component>

scripts/contextmenu/createcontext.js

@@ -1,7 +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';
+    ctx.style.left = `${Math.min(e.pageX, (window.innerWidth - (ctx.clientWidth + 2)))}px`;
+    ctx.style.top = `${Math.min(e.pageY, (window.innerHeight - (ctx.clientHeight + 2)))}px`;
 };

scripts/contextmenu/newfolder.js

@@ -2,8 +2,15 @@ const fs = require('fs');
 const path = require('path');
 
 const lightRefresh = require('../fileview/lightrefresh');
+const preModal = require('../modal/pre');
+const postModal = require('../modal/post');
+const showError = require('../modal/common/error');
+const clearModals = require('../modal/clearmodals');
 
 module.exports = () => {
+    console.log('e');
+    if (window.kade.modal) {console.log('hboonk'); return;}
+    preModal('new-folder-modal-container');
     let modal = document.createElement('div');
     modal.className = 'modal';
     modal.id = 'new-folder-modal-container';
@@ -29,6 +36,7 @@ module.exports = () => {
     let conf = document.createElement('button');
     conf.innerHTML = 'Create';
     conf.onclick = () => {
+        try {
             input.value.trim();
             if (fs.existsSync(path.join(window.kade.cpath, input.value))) {
                 if (!input.value.match(/^.+\(\d\)$/gm)) {input.value += ' (1)';}
@@ -42,6 +50,11 @@ module.exports = () => {
             fs.mkdirSync(path.join(window.kade.cpath, input.value));
             lightRefresh();
             modal.remove();
+            postModal(modal.id);
+        } catch {
+            clearModals();
+            showError("Folder Creation", "There was an unknown error while trying to create that folder. It may be a permissions issue, or the host folder doesn't exist anymore.");
+        }
     };
     cont.appendChild(conf);
 }

scripts/modal/clearmodals.js

@@ -0,0 +1,11 @@
+const transit = require("./transit");
+
+module.exports = (...modals) => {
+    let tc = modals.length ? modals : window.kade.modals;
+    tc.forEach(modal => {
+        if (window.kade.modals.includes(modal)) {
+            transit(modal, false);
+            document.getElementById(modal).remove();
+        }
+    });
+};

scripts/modal/post.js

@@ -0,0 +1,7 @@
+const transit = require("./transit");
+
+module.exports = (id) => {
+    document.getElementById('modal-block').remove();
+    window.kade.modal = false;
+    transit(id, false);
+};

scripts/modal/pre.js

@@ -0,0 +1,9 @@
+const transit = require('./transit');
+
+module.exports = (id) => {
+    let bl = document.createElement('div');
+    bl.id = 'modal-block';
+    document.body.appendChild(bl);
+    window.kade.modal = true;
+    transit(id, true);
+};

scripts/modal/transit.js

@@ -0,0 +1,4 @@
+module.exports = (id, open=false) => {
+    if (open && !window.kade.modals.includes(id)) {window.kade.modals.push(id);}
+    else if (window.kade.modals.includes(id)) {window.kade.modals.splice(window.kade.modals.indexOf(id), 1);}
+};

scripts/startup/preload.js

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

styles/modal.css

@@ -9,6 +9,8 @@
     border: 1px solid #af2188a4;
     background-color: #171717da;
     padding: 6px 8px;
+    z-index: 3;
+    max-width: 60%;
 }
 
 .modal h1, .modal h2, .modal h3, .modal h4 {
@@ -47,3 +49,13 @@
 }
 
 .modal .button-container, input, .modal .button-container, button {display: inline-block;}
+
+#modal-block {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background-color: #1717176d;
+    z-index: 2;
+}