Implemented dynamic loading of preferences

Jackymancs4-Fork · Dec 13, 2017 · e1f7bff · e1f7bff
1 parent f599204
commit e1f7bff
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 69 deletions.
diff --git a/src/main.js b/src/main.js
@@ -14,6 +14,7 @@ let preferencesWindow = null
 let tray = null
 let appIsReady = false
 let installedBrowsers = []
+let wantToQuit = false
 
 const defaultConfig = { browsers: defaultBrowsers }
 const userConfig = {}
@@ -126,7 +127,12 @@ function createTrayIcon() {
     {
       label: 'Preferences',
       click: function() {
-        createPreferencesWindow()
+        togglePreferencesWindow(() => {
+          preferencesWindow.webContents.send(
+            'incomingBrowsers',
+            installedBrowsers
+          )
+        })
       }
     },
     {
@@ -140,6 +146,7 @@ function createTrayIcon() {
     {
       label: 'Quit',
       click: function() {
+        wantToQuit = true
         app.quit()
       }
     }
@@ -153,27 +160,37 @@ const sendUrlToRenderer = url => {
   pickerWindow.webContents.send('incomingURL', url)
 }
 
-/**
- * Create Preferences Window
- */
-function createPreferencesWindow() {
-  if (!preferencesWindow) {
-    preferencesWindow = new BrowserWindow({
-      width: 400,
-      height: installedBrowsers.length * 64 + 24,
-      icon: `${__dirname}/images/icon/icon.png`,
-      resizable: false
-    })
+function createPreferencesWindow(callback) {
+  preferencesWindow = new BrowserWindow({
+    width: 400,
+    height: 64 + 24,
+    icon: `${__dirname}/images/icon/icon.png`,
+    resizable: false,
+    show: false
+  })
+
+  // preferencesWindow.installedBrowsers = installedBrowsers
+  preferencesWindow.loadURL(`file://${__dirname}/preferences.html`)
+  // allow window to be opened again
+  preferencesWindow.on('close', e => {
+    if (wantToQuit == false) {
+      e.preventDefault()
+      preferencesWindow.hide()
+    }
+  })
 
-    preferencesWindow.installedBrowsers = installedBrowsers
+  if (callback) {
+    callback()
+  }
+}
 
-    // preferencesWindow.installedBrowsers = installedBrowsers
-    preferencesWindow.loadURL(`file://${__dirname}/preferences.html`)
-    // allow window to be opened again
-    preferencesWindow.on('close', () => (preferencesWindow = null))
+function togglePreferencesWindow(callback) {
+  if (!preferencesWindow) {
+    createPreferencesWindow(callback)
   } else {
     // Bring to front
     preferencesWindow.show()
+    callback()
   }
 }
 
@@ -194,6 +211,7 @@ app.on('ready', () => {
   app.setAsDefaultProtocolClient('http')
 
   loadConfig().then(() => {
+    createTrayIcon()
     createPickerWindow(() => {
       pickerWindow.once('ready-to-show', () => {
         if (global.URLToOpen) {
@@ -203,9 +221,11 @@ app.on('ready', () => {
         appIsReady = true
       })
     })
-    findInstalledBrowsers().then(installedBrowsers => {
+    createPreferencesWindow()
+    findInstalledBrowsers().then(data => {
+      installedBrowsers = data
       pickerWindow.webContents.send('incomingBrowsers', installedBrowsers)
-      createTrayIcon()
+      preferencesWindow.webContents.send('incomingBrowsers', installedBrowsers)
     })
   })
   //)

diff --git a/src/preferences.html b/src/preferences.html
@@ -9,12 +9,12 @@
 
 <body id="preferences">
 
-  <ul id="browserList"></ul>
+<ul id="browserList"><li>Loading..<li></ul>
 
 </body>
 
 <script>
-  require('./preferencesRenderer.js')
+require('./preferencesRenderer.js')
 </script>
 
-</html>
+</html>
diff --git a/src/preferencesRenderer.js b/src/preferencesRenderer.js
@@ -6,57 +6,80 @@ const currentWindow = electron.remote.getCurrentWindow()
 const toggleBrowser = (browserName, enabled) =>
   electron.ipcRenderer.send('toggle-browser', { browserName, enabled })
 
-currentWindow.installedBrowsers
-  .map(browser => {
-    // use alias as label if available, otherwise use name
-    if (!browser.alias) {
-      browser.alias = browser.name
-    }
-    return browser
-  })
-  .map(browser => {
-    const li = document.createElement('li')
-
-    const logo = document.createElement('img')
-    logo.classList.add('browserLogo')
-    logo.src = `images/browser-logos/${browser.name}.png`
-    li.appendChild(logo)
-
-    const name = document.createElement('span')
-    name.classList.add('browserName')
-    name.innerText = browser.alias
-    li.appendChild(name)
-
-    const checkboxWrapper = document.createElement('div')
-    checkboxWrapper.classList.add('pretty')
-    checkboxWrapper.classList.add('p-svg')
-
-    const checkbox = document.createElement('input')
-    checkbox.type = 'checkbox'
-    checkboxWrapper.appendChild(checkbox)
-
-    if (browser.enabled) {
-      checkbox.checked = true
-    }
-
-    checkbox.addEventListener('change', e => {
-      toggleBrowser(browser.name, e.target.checked)
-    })
-
-    const checkState = document.createElement('div')
-    checkState.classList.add('state')
-    checkState.classList.add('p-success')
-    checkState.innerHTML = `
+electron.ipcRenderer.on('incomingBrowsers', (event, message) => {
+  emptiesPreferences()
+  populatePreferences(message)
+})
+
+const emptiesPreferences = () => {
+  while (browserList.firstChild) {
+    browserList.removeChild(browserList.firstChild)
+  }
+}
+
+const populatePreferences = installedBrowsers => {
+  if (installedBrowsers.length > 0) {
+    currentWindow.setSize(400, installedBrowsers.length * 64 + 48)
+    installedBrowsers
+      .map(browser => {
+        // use alias as label if available, otherwise use name
+        if (!browser.alias) {
+          browser.alias = browser.name
+        }
+        return browser
+      })
+      .map(browser => {
+        const li = document.createElement('li')
+
+        const logo = document.createElement('img')
+        logo.classList.add('browserLogo')
+        logo.src = `images/browser-logos/${browser.name}.png`
+        li.appendChild(logo)
+
+        const name = document.createElement('span')
+        name.classList.add('browserName')
+        name.innerText = browser.alias
+        li.appendChild(name)
+
+        const checkboxWrapper = document.createElement('div')
+        checkboxWrapper.classList.add('pretty')
+        checkboxWrapper.classList.add('p-svg')
+
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkboxWrapper.appendChild(checkbox)
+
+        if (browser.enabled) {
+          checkbox.checked = true
+        }
+
+        checkbox.addEventListener('change', e => {
+          toggleBrowser(browser.name, e.target.checked)
+        })
+
+        const checkState = document.createElement('div')
+        checkState.classList.add('state')
+        checkState.classList.add('p-success')
+        checkState.innerHTML = `
     <svg class="svg svg-icon" viewBox="0 0 20 20">
       <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" style="stroke: white;fill:white;"></path>
     </svg>
     <label></label>`
-    // const checkLabel = document.createElement('label')
-    // checkState.appendChild(checkLabel)
+        // const checkLabel = document.createElement('label')
+        // checkState.appendChild(checkLabel)
+
+        checkboxWrapper.appendChild(checkState)
+
+        li.appendChild(checkboxWrapper)
 
-    checkboxWrapper.appendChild(checkState)
+        browserList.appendChild(li)
+      })
+  } else {
+    const listItem = document.createElement('li')
 
-    li.appendChild(checkboxWrapper)
+    listItem.innerText = 'Loading...'
 
-    browserList.appendChild(li)
-  })
+    browserList.appendChild(listItem)
+    currentWindow.setSize(400, 64 + 48)
+  }
+}