Merge pull request #26 from will-stone/sortable

Sortable

Author: will-stone

package.json

@@ -16,7 +16,10 @@
   "bugs": {
     "url": "https://github.com/will-stone/browserosaurus/issues"
   },
-  "keywords": ["Electron", "Browser chooser"],
+  "keywords": [
+    "Electron",
+    "Browser chooser"
+  ],
   "author": "Will Stone",
   "license": "MIT",
   "devDependencies": {
@@ -41,25 +44,35 @@
     "mousetrap": "^1.6.1",
     "opn": "^5.1.0",
     "pretty-checkbox": "^3.0.3",
+    "sortablejs": "^1.7.0",
     "xml2json": "^0.11.0"
   },
   "config": {
     "forge": {
       "make_targets": {
-        "darwin": ["dmg"]
+        "darwin": [
+          "dmg"
+        ]
       },
       "electronPackagerConfig": {
         "packageManager": "yarn",
         "icon": "src/images/icon/icon.icns",
-        "ignore": ["docs"],
+        "ignore": [
+          "docs"
+        ],
         "protocols": [
           {
             "name": "HTTP link",
-            "schemes": ["http", "https"]
+            "schemes": [
+              "http",
+              "https"
+            ]
           },
           {
             "name": "File",
-            "schemes": ["file"]
+            "schemes": [
+              "file"
+            ]
           }
         ]
       }

src/main.js

@@ -29,7 +29,7 @@ const store = new Store({ defaults: defaultConfig })
  */
 function loadConfig() {
   return new Promise(fulfill => {
-    userConfig['browsers'] = store.get('browsers')
+    userConfig.browsers = store.get('browsers')
 
     let userBrowserFound
 
@@ -87,11 +87,11 @@ function findInstalledBrowsers() {
         profile,
         'plist.array.dict.array[1].dict[*].string[0]'
       )
-      installedBrowsers = installedApps
-        .map(appName => {
-          for (let i = 0; i < userConfig.browsers.length; i++) {
-            const browser = userConfig.browsers[i]
-            if (browser.name === appName) {
+      installedBrowsers = userConfig.browsers
+        .map(browser => {
+          for (let i = 0; i < installedApps.length; i++) {
+            //const browser = installedApps[i]
+            if (browser.name === installedApps[i]) {
               return browser
             }
           }
@@ -240,6 +240,19 @@ function togglePreferencesWindow(callback) {
   }
 }
 
+/**
+ * Array Move
+ *
+ * Utility function to move an array item to a specific spot in the array.
+ * @param {Array} array
+ * @param {Number} fromIndex
+ * @param {Number} toIndex
+ */
+function arrayMove(array, fromIndex, toIndex) {
+  array.splice(toIndex, 0, array.splice(fromIndex, 1)[0])
+  return array
+}
+
 /**
  * Toggle browser event
  *
@@ -252,12 +265,34 @@ ipcMain.on('toggle-browser', (event, { browserName, enabled }) => {
   const browserIndex = userConfig.browsers.findIndex(
     browser => browser.name === browserName
   )
-
   userConfig.browsers[browserIndex].enabled = enabled
-
   store.set('browsers', userConfig.browsers)
+  pickerWindow.webContents.send('incomingBrowsers', installedBrowsers)
+})
 
+/**
+ * Sort browser event
+ *
+ * Listens for the sort-browser event, triggered from the preferences renderer
+ * when a browser is dragged to a new position.
+ * @param {Number} oldIndex index of browser being moved from.
+ * @param {Number} newIndex index of place browser is being moved to.
+ */
+ipcMain.on('sort-browser', (event, { oldIndex, newIndex }) => {
+  const from = installedBrowsers[oldIndex].name
+  const to = installedBrowsers[newIndex].name
+
+  const fromIndex = userConfig.browsers.findIndex(
+    browser => browser.name === from
+  )
+  const toIndex = userConfig.browsers.findIndex(browser => browser.name === to)
+
+  userConfig.browsers = arrayMove(userConfig.browsers, fromIndex, toIndex)
+  installedBrowsers = arrayMove(installedBrowsers, oldIndex, newIndex)
+
+  store.set('browsers', userConfig.browsers)
   pickerWindow.webContents.send('incomingBrowsers', installedBrowsers)
+  preferencesWindow.webContents.send('incomingBrowsers', installedBrowsers)
 })
 
 /**
@@ -281,8 +316,7 @@ app.on('ready', () => {
       })
     })
     createPreferencesWindow()
-    findInstalledBrowsers().then(data => {
-      installedBrowsers = data
+    findInstalledBrowsers().then(installedBrowsers => {
       pickerWindow.webContents.send('incomingBrowsers', installedBrowsers)
       preferencesWindow.webContents.send('incomingBrowsers', installedBrowsers)
     })

src/main.scss

@@ -28,6 +28,29 @@ body {
 #browserList {
   margin: 0;
   padding: 0;
+  user-select: none;
+
+  .handle {
+    display: inline-block;
+    overflow: hidden;
+    width: 16px;
+    height: 20px;
+    margin-top: -0.7em;
+    margin-right: 0.3em;
+    padding: 3px 4px;
+    content: '....';
+    cursor: move;
+    vertical-align: middle;
+    letter-spacing: 2px;
+    color: #aaaaaa;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 5px;
+
+    &:after {
+      content: '.. .. .. ..';
+    }
+  }
 
    > li {
     position: relative;
@@ -66,6 +89,14 @@ body {
 
 #preferences {
   color: #111111;
+
+  #browserList > li {
+    cursor: default;
+
+    &.sortable-ghost {
+      opacity: 0;
+    }
+  }
 }
 
 #picker {

src/preferences.html

@@ -9,12 +9,15 @@
 
 <body id="preferences">
 
-<ul id="browserList"><li>Loading..<li></ul>
+  <ul id="browserList">
+    <li>Loading&hellip;
+      <li>
+  </ul>
 
 </body>
 
 <script>
-require('./preferencesRenderer.js')
+  require('./preferencesRenderer.js')
 </script>
 
-</html>
+</html>

src/preferencesRenderer.js

@@ -1,3 +1,4 @@
+const Sortable = require('sortablejs')
 const electron = require('electron')
 const browserList = document.getElementById('browserList')
 
@@ -14,6 +15,18 @@ function toggleBrowser(browserName, enabled) {
   electron.ipcRenderer.send('toggle-browser', { browserName, enabled })
 }
 
+/**
+ * Sort browser
+ *
+ * Sends the sort-browser event to main.js. This allows browsers to be
+ * reordered.
+ * @param {Number} oldIndex index of browser being moved from.
+ * @param {*} newIndex index of place browser is being moved to.
+ */
+function sortBrowser(oldIndex, newIndex) {
+  electron.ipcRenderer.send('sort-browser', { oldIndex, newIndex })
+}
+
 /**
  * Incoming browsers event
  *
@@ -54,6 +67,11 @@ function populatePreferences(installedBrowsers) {
       })
       .map(browser => {
         const li = document.createElement('li')
+        li.classList.add('browserItem')
+
+        const handle = document.createElement('span')
+        handle.classList.add('handle')
+        li.appendChild(handle)
 
         const logo = document.createElement('img')
         logo.classList.add('browserLogo')
@@ -97,6 +115,12 @@ function populatePreferences(installedBrowsers) {
 
         browserList.appendChild(li)
       })
+
+    Sortable.create(browserList, {
+      draggable: '.browserItem',
+      handle: '.handle',
+      onEnd: e => sortBrowser(e.oldIndex, e.newIndex)
+    })
   } else {
     const listItem = document.createElement('li')
 

yarn.lock

@@ -5319,6 +5319,10 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.7.0.tgz#80a2b2370abd568e1cec8c271131ef30a904fa28"
+
 source-map-support@^0.4.15:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"