Electron 9, Fixed breaking changes from 7 and 8.

Fixed file selectors not behaving properly due to breaking change in Electron 7 (#67). Renamed shell.openItem to shell.openPath (Electron 9 breaking change). Resolves #67.
dscalzi · May 22, 2020 · 8726638 · 8726638
1 parent b1abe07
commit 8726638
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 38 deletions.
diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
@@ -1233,34 +1233,26 @@ input:checked + .toggleSwitchSlider:before {
     height: 30px;
 }
 
-/* File input for file selection. */
-.settingsFileSelSel {
-    width: 0px;
-    height: 0px;
-    opacity: 0;
-}
-.settingsFileSelSel::-webkit-file-upload-button {
-    display: none;
-}
-
-/* Wrapper label to add a custom style to the file input. */
-.settingsFileSelLabel {
-    border-left: 0px;
+/* File selection button. */
+.settingsFileSelButton {
+    border: 0px;
     border-radius: 0px 3px 3px 0px;
     font-size: 12px;
     padding: 0px 5px;
     cursor: pointer;
-    display: flex;
-    align-items: center;
     background: rgba(126, 126, 126, 0.57);
     transition: 0.25s ease;
     white-space: nowrap;
+    outline: none;
 }
-.settingsFileSelLabel:hover,
-.settingsFileSelLabel:focus,
-.settingsFileSelSel:focus ~ #settingsJavaExecLabel {
+.settingsFileSelButton:hover,
+.settingsFileSelButton:focus {
     text-shadow: 0px 0px 20px white;
 }
+.settingsFileSelButton:active {
+    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
+    color: rgba(255, 255, 255, 0.75);
+}
 
 /* Description for the file selector. */
 .settingsFileSelDesc {

diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js
@@ -42,15 +42,34 @@ bindSettingsSelect()
 
 
 function bindFileSelectors(){
-    for(let ele of document.getElementsByClassName('settingsFileSelSel')){
-        if(ele.id === 'settingsJavaExecSel'){
-            ele.onchange = (e) => {
-                ele.previousElementSibling.value = ele.files[0].path
-                populateJavaExecDetails(ele.previousElementSibling.value)
+    for(let ele of document.getElementsByClassName('settingsFileSelButton')){
+
+        ele.onclick = async e => {
+            const isJavaExecSel = ele.id === 'settingsJavaExecSel'
+            const directoryDialog = ele.hasAttribute('dialogDirectory') && ele.getAttribute('dialogDirectory') == 'true'
+            const properties = directoryDialog ? ['openDirectory', 'createDirectory'] : ['openFile']
+
+            const options = {
+                properties
             }
-        } else {
-            ele.onchange = (e) => {
-                ele.previousElementSibling.value = ele.files[0].path
+
+            if(ele.hasAttribute('dialogTitle')) {
+                options.title = ele.getAttribute('dialogTitle')
+            }
+
+            if(isJavaExecSel && process.platform === 'win32') {
+                options.filters = [
+                    { name: 'Executables', extensions: ['exe'] },
+                    { name: 'All Files', extensions: ['*'] }
+                ]
+            }
+
+            const res = await remote.dialog.showOpenDialog(remote.getCurrentWindow(), options)
+            if(!res.canceled) {
+                ele.previousElementSibling.value = res.filePaths[0]
+                if(isJavaExecSel) {
+                    populateJavaExecDetails(ele.previousElementSibling.value)
+                }
             }
         }
     }
@@ -694,7 +713,7 @@ function bindDropinModFileSystemButton(){
     const fsBtn = document.getElementById('settingsDropinFileSystemButton')
     fsBtn.onclick = () => {
         DropinModUtil.validateDir(CACHE_SETTINGS_MODS_DIR)
-        shell.openItem(CACHE_SETTINGS_MODS_DIR)
+        shell.openPath(CACHE_SETTINGS_MODS_DIR)
     }
     fsBtn.ondragenter = e => {
         e.dataTransfer.dropEffect = 'move'
@@ -818,7 +837,7 @@ function bindShaderpackButton() {
     spBtn.onclick = () => {
         const p = path.join(CACHE_SETTINGS_INSTANCE_DIR, 'shaderpacks')
         DropinModUtil.validateDir(p)
-        shell.openItem(p)
+        shell.openPath(p)
     }
     spBtn.ondragenter = e => {
         e.dataTransfer.dropEffect = 'move'

diff --git a/app/settings.ejs b/app/settings.ejs
@@ -203,8 +203,7 @@
                             </svg>
                         </div>
                         <input class="settingsFileSelVal" id="settingsJavaExecVal" type="text" value="null" cValue="JavaExecutable" disabled>
-                        <input class="settingsFileSelSel" id="settingsJavaExecSel" type="file" <%= process.platform === 'win32' ? 'accept=.exe' : '' %>>
-                        <label class="settingsFileSelLabel" for="settingsJavaExecSel">Choose File</label>
+                        <button class="settingsFileSelButton" id="settingsJavaExecSel" dialogTitle="Select Java Executable" dialogDirectory="false">Choose File</button>
                     </div>
                 </div>
                 <div class="settingsFileSelDesc">The Java executable is validated before game launch. <strong>Requires Java 8 x64.</strong><br>The path should end with <strong>bin<%= process.platform === 'win32' ? '\\javaw.exe' : '/java' %></strong>.</div>
@@ -262,8 +261,7 @@
                             </svg>
                         </div>
                         <input class="settingsFileSelVal" type="text" value="null" cValue="DataDirectory" disabled>
-                        <input class="settingsFileSelSel" id="settingsDataDirSel" type="file" webkitdirectory>
-                        <label class="settingsFileSelLabel" for="settingsDataDirSel">Choose Folder</label>
+                        <button class="settingsFileSelButton" dialogTitle="Select Data Directory" dialogDirectory="true">Choose Folder</button>
                     </div>
                 </div>
                 <div class="settingsFileSelDesc">All game files and local Java installations will be stored in the data directory.<br>Screenshots and world saves are stored in the instance folder for the corresponding server configuration.</div>

diff --git a/index.js b/index.js
@@ -1,6 +1,5 @@
 // Requirements
-const {app, BrowserWindow, ipcMain} = require('electron')
-const Menu                          = require('electron').Menu
+const { app, BrowserWindow, ipcMain, Menu } = require('electron')
 const autoUpdater                   = require('electron-updater').autoUpdater
 const ejse                          = require('ejs-electron')
 const fs                            = require('fs')

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.2",
-    "electron": "^8.3.0",
+    "electron": "^9.0.0",
     "electron-builder": "^22.6.1",
     "eslint": "^7.0.0"
   },