multi install, remove context menu

package-lock.json

 {
-  "name": "customspeens-client",
+  "name": "spinshare-client",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.19.2",
     "electron-dl": "^3.0.0",
     "electron-is-dev": "^1.1.0",
+    "glob": "^7.1.6",
     "ncp": "^2.0.0",
     "rimraf": "^3.0.2",
     "uniqid": "^5.2.0",

src/app.htm

@@ -393,6 +393,21 @@
         </div>
       </div>
 
+      <div class="contextmenu">
+        <div class="menu-item">
+          <div class="icon"><i class="mdi mdi-close"></i></div>
+          <div class="text">Lorem Ipsum</div>
+        </div>
+        <div class="menu-item">
+          <div class="icon"><i class="mdi mdi-close"></i></div>
+          <div class="text">Lorem Ipsum</div>
+        </div>
+        <div class="menu-item">
+          <div class="icon"><i class="mdi mdi-close"></i></div>
+          <div class="text">Lorem Ipsum</div>
+        </div>
+      </div>
+
       <!-- Scripts -->
       <script src="./assets/js/init.js"></script>
       <script src="./assets/js/update.js"></script>
@@ -404,6 +419,7 @@
       <script src="./assets/js/section.settings.js"></script>
       <script src="./assets/js/download.js"></script>
       <script src="./assets/js/navigation.js"></script>
+      <script src="./assets/js/contextmenu.js"></script>
       <script src="./assets/js/protocol.js"></script>
     </body>
   </html>

src/assets/css/main.css

@@ -301,3 +301,40 @@ button:focus,
     background-position: 173px 0px;
   }
 }
+.contextmenu {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 250px;
+  background: #000;
+  border-radius: 6px;
+  z-index: 90;
+  display: none;
+  overflow: hidden;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+}
+.contextmenu .menu-item {
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  grid-gap: 10px;
+}
+.contextmenu .menu-item .icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}
+.contextmenu .menu-item .text {
+  display: flex;
+  align-items: center;
+}
+.contextmenu .menu-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+}
+.contextmenu.active {
+  display: block;
+}

src/assets/css/main.less

@@ -336,4 +336,44 @@ button, .button {
     to {
         background-position: 173px 0px;
     }
+}
+.contextmenu {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 250px;
+    background: #000;
+    border-radius: 6px;
+    z-index: 90;
+    display: none;
+    overflow: hidden;
+    box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
+
+    & .menu-item {
+        padding: 10px;
+        display: grid;
+        grid-template-columns: 24px 1fr;
+        grid-gap: 10px;
+
+        & .icon {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+        }
+        & .text {
+            display: flex;
+            align-items: center;
+        }
+
+        &:hover {
+            background: rgba(255,255,255,0.2);
+            cursor: pointer;
+        }
+    }
+    &.active {
+        display: block;
+    }
 }
\ No newline at end of file

src/assets/js/contextmenu.js

+let DOMContextMenu = document.querySelector(".contextmenu");
+
+function ShowContextMenu(x, y) {
+    DOMContextMenu.classList.add("active");
+
+    if(x > window.innerWidth - DOMContextMenu.getBoundingClientRect().width) {
+        x = window.innerWidth - DOMContextMenu.getBoundingClientRect().width;
+    }
+    if(y > window.innerHeight - DOMContextMenu.getBoundingClientRect().height) {
+        y = window.innerHeight - DOMContextMenu.getBoundingClientRect().height;
+    }
+
+    DOMContextMenu.style.top = y + "px";
+    DOMContextMenu.style.left = x + "px";
+}
+
+document.addEventListener('click', function() {
+    HideContextMenu();
+});
+
+function HideContextMenu() {
+    DOMContextMenu.classList.remove("active");
+}
+
+function AddContextMenuItem(icon, text, callFunction) {
+    let contextMenuItem = document.createElement("div");
+    contextMenuItem.classList.add("menu-item");
+
+    let contextMenuIcon = document.createElement("div");
+    contextMenuIcon.classList.add("icon");
+    contextMenuIcon.innerHTML = "<i class=\"mdi mdi-" + icon + "\"></i>";
+    contextMenuItem.appendChild(contextMenuIcon);
+
+    let contextMenuText = document.createElement("div");
+    contextMenuText.classList.add("text");
+    contextMenuText.innerText = text;
+    contextMenuItem.appendChild(contextMenuText);
+
+    contextMenuItem.addEventListener('click', function() {
+        callFunction();
+    });
+
+    DOMContextMenu.appendChild(contextMenuItem);
+}
+function ClearContextMenu() {
+    DOMContextMenu.innerHTML = "";
+}
\ No newline at end of file

src/assets/js/download.js

@@ -59,11 +59,9 @@ async function installBackup(backupLocation) {
             DOMDownloadActions.classList.add("active");
             // DOMDownloadOutput.innerText = locale.get('download.status.installingFailed');
         }
-
-        setTimeout(function() {
-            DOMDownloadActions.classList.add("active");
-            UpdateDownloadStatus(3);
-        }, 750);
+        
+        DOMDownloadActions.classList.add("active");
+        UpdateDownloadStatus(3);
     });
 }
 

src/assets/js/init.js

@@ -9,6 +9,7 @@ const Locale = require( path.resolve(__dirname, './assets/js/module.locale.js')
 const fs = require('fs');
 const ncp = require('ncp');
 const http = require('http');
+const glob = require('glob');
 
 let systemOS = process.platform;
 let tempDirLocation = app.getPath('temp');

src/assets/js/module.srxd.js

@@ -141,16 +141,13 @@ class SRXD {
     }
     //Deletes Files
     deleteFiles(songDetail) {
-        var deleteFiles = [songDetail[2], songDetail[3], songDetail[4]];
-        console.log('Deleting files:')
-        for(var i = 0; i < deleteFiles.length; i++){
-                try {
-                    fs.unlinkSync(deleteFiles[i]);
-                    console.log("Deleted " + deleteFiles[i]);
-                  } catch(err) {
-                    console.error(deleteFiles[i] + " doesn't exist, therefore weren't deleted: " + err)
-                  }
-        }
+        let deleteFiles = [songDetail[2], songDetail[3], songDetail[4]];
+        deleteFiles.forEach(function(file) {
+            let foundFiles = glob.sync(file);
+            if(foundFiles.length > 0) {
+                fs.unlinkSync(foundFiles[0]);
+            }
+        });
         RefreshLibrary();
     }
 }

src/assets/js/section.library.js

 const DOMLibrarySongsList = document.querySelector(".song-row-library .song-list");
 
-function ExtractionProcess(filePath) {
-if (filePath.endsWith('.zip')){
-    let fileName = path.basename(filePath);
-    srxdControl.extractBackup(filePath, fileName).then(function(extractResults) {
-        if(extractResults) {
-            installBackup(extractResults);
-            setTimeout(function() {
-                RefreshLibrary();
-            }, 200);
-        } else {
-            console.error("Backup could not be loaded!");
-        }
-    });   
-}
-    else {console.error('Not a zip!');}
+async function ExtractionProcess(filePath) {
+    console.log(filePath);
+
+    if(filePath.endsWith('.zip')) {
+        let fileName = path.basename(filePath);
+        let newControl = new SRXD();
+
+        newControl.extractBackup(filePath, fileName).then(function(extractResults) {
+            if(extractResults) {
+                installBackup(extractResults).then(function() {
+                    RefreshLibrary();
+                });
+
+                // I know this sucks, but it works. So don't be mad at me!
+                // ~ thatanimeweirdo
+                setTimeout(function() {
+                    RefreshLibrary();
+                }, 200);
+            } else {
+                console.error("Backup could not be loaded!");
+            }
+        });
+    } else {
+        console.error('Not a zip!');
+    }
 }
 
 //Upload Manually
 function InstallBackupManually() {
-    dialog.showOpenDialog({ title: "Open Backup", properties: ['openFile'], filters: [{"name": "Backup Archive", "extensions": ["zip"]}] }).then(result => {
+    dialog.showOpenDialog({ title: "Open Backup", properties: ['openFile', 'multiSelections'], filters: [{"name": "Backup Archive", "extensions": ["zip"]}] }).then(result => {
         if(!result.canceled) {
-            let filePath = result.filePaths[0];
-            ExtractionProcess(filePath);
+            result.filePaths.forEach(function(rawFilePath) {
+                let filePath = glob.sync(rawFilePath);
+                if(filePath.length > 0) {
+                    ExtractionProcess(filePath[0]);
+                }
+            });
         }
     });
 }
@@ -33,10 +47,11 @@ document.ondragover = document.ondrop = function(dragndrop) {
 }
   
 document.body.ondrop = function(ev) {
-    let filePath = (ev.dataTransfer.files[0].path);
+    Array.from(ev.dataTransfer.files).forEach(function(file) {
+        ExtractionProcess(file.path);
+    });
+    NavigateToSection(2);
     ev.preventDefault();
-	NavigateToSection(2);
-    ExtractionProcess(filePath);
 }
 
 function RefreshLibrary() {
@@ -61,7 +76,7 @@ function RefreshLibrary() {
         }
 
         DOMLibrarySongsList.appendChild(BuildLibrarySongDOM(songDetail, spinShareReference));
-    })
+    });
 }
 
 function BuildLibrarySongDOM(songDetail, spinShareReference) {
@@ -83,12 +98,6 @@ function BuildLibrarySongDOM(songDetail, spinShareReference) {
     songCharter.classList.add("song-charter");
     songCharter.innerHTML = "<i class=\"mdi mdi-account-circle\"></i><span>" + songDetail[0].charter + "</span>";
     songCharterInfo.appendChild(songCharter);
-    
-    let songDeleteButton = document.createElement("button"); //Creates delete button
-    songDeleteButton.classList.add("song-delete-button");
-    songDeleteButton.addEventListener("click", function(){srxdControl.deleteFiles(songDetail);});
-    songDeleteButton.innerHTML = "X";
-    songCharter.appendChild(songDeleteButton);
 
     songCover.appendChild(songCharterInfo);
     songContainer.appendChild(songCover);
@@ -114,5 +123,12 @@ function BuildLibrarySongDOM(songDetail, spinShareReference) {
         });
     }
 
+    songContainer.addEventListener('contextmenu', function(e) {
+        e.preventDefault();
+        ClearContextMenu();
+        AddContextMenuItem("delete", "Delete", function() { srxdControl.deleteFiles(songDetail) });
+        ShowContextMenu(e.clientX, e.clientY);
+    });
+
     return songContainer;
 }
\ No newline at end of file