fancy compression modal

scripts/contextmenu/compress.js

@@ -33,6 +33,7 @@ module.exports = () => {
     modal.appendChild(cont);
     let input = document.createElement('input');
     input.placeholder = window.kade.cpath.split(/\\+|\/+/gm).reverse()[0];
+    input.value = input.placeholder;
     input.id = 'compress-folder-input';
     let lastIn = '';
     input.oninput = () => {
@@ -45,7 +46,6 @@ module.exports = () => {
     conf.onclick = () => {
         try {
             input.value = input.value.trim();
-            if (!input.value.endsWith('.zip')) {input.value = `${input.value}.zip`;}
             if (!input.value.length) {return;}
             if (fs.existsSync(path.join(window.kade.cpath, input.value))) {
                 if (!input.value.match(/^.+\(\d\)$/gm)) {input.value += ' (1)';}
@@ -56,18 +56,29 @@ module.exports = () => {
                 }
                 return;
             }
+            input.style.display = 'none';
+            conf.style.display = 'none';
+            cont.style.display = 'none';
+            text.innerHTML = "Please wait a moment...";
             zip.addLocalFolderPromise(window.kade.cpath).then(() => {
-                modalOut.remove();
-                postModal(modalOut.id);
-                zip.writeZipPromise(`${window.kade.cpath}/${input.value}`, {overwrite: true}).then(() => {
-                    newToast("Folder compressed", [`The current folder was compressed into "${input.value}" created successfully`, `<em>${window.kade.cpath}/${input.value}</em>`], undefined, false, 5);
+                title.innerHTML += " - In Progress..."
+                text.innerHTML = "Your folder is being compressed. Please wait a moment.<br><br>This may take some time...";
+                closeWrap.style.display = 'none';
+                let bar = document.createElement('div');
+                bar.className = "loading-bar";
+                modal.appendChild(bar);
+                zip.writeZipPromise(`${window.kade.cpath}/${input.value}${input.value.endsWith('.zip') ? '' : '.zip'}`, {overwrite: true}).then(() => {
+                    newToast("Folder compressed", [`The current folder was compressed into "${input.value}" successfully`, `<em>${window.kade.cpath}/${input.value}</em>`], undefined, false, 5);
+                    lightRefresh();
+                    modalOut.remove();
+                    postModal(modalOut.id);    
                 });
             });
         } catch {
             newToast("Folder not Compressed", "An error caused that folder to not be compressed.", "#b24355", false, 5, () => {showError("Folder Creation", "There was an unknown error while trying to compress that folder. It may be a permissions issue, or the host folder doesn't exist anymore.");});
             clearModals();
+            postModal(modalOut.id);
         }
-        postModal(modalOut.id);
     };
     cont.appendChild(conf);
     input.focus();

scripts/contextmenu/createcontext.js

@@ -13,6 +13,7 @@ module.exports = (e, target, window) => {
         ctxf.style.display = 'none';
         ctxf.previousElementSibling.style.display = 'none';
     }
+    document.getElementById('ctx-decompress').style.display = 'none';
     ctx.style.left = `${Math.min(e.pageX, (window.innerWidth - (ctx.clientWidth + 2)))}px`;
     ctx.style.top = `${Math.min(e.pageY, ((window.innerHeight + window.scrollY) - (ctx.clientHeight + 2)))}px`;
 };

scripts/contextmenu/hidecontext.js

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

styles/modal.css

@@ -134,4 +134,15 @@
     overflow: hidden;
 }
 
-#changelog-modal {max-height: 70vh;}
+#changelog-modal {max-height: 70vh;}
+
+.loading-bar {
+    width: 90%;
+    margin: 12px auto 10px auto;
+    border-radius: 3px;
+    padding: 0 0;
+    height: 5px;
+    animation: 12s linear infinite, moving-stripes 10s linear infinite;
+    background-image: repeating-linear-gradient(-45deg, #a172a6 10px, #5d60ca98, #a172a6 30px);
+    background-size: 200%;
+}