first edit window 🎚

lib/touchbar-edit-view.js

@@ -0,0 +1,86 @@
+/** @babel */
+/** @jsx etch.dom */
+
+import {Disposable} from 'atom'
+import etch from 'etch'
+const {app, BrowserWindow, TouchBar} = require('remote')
+const {TouchBarLabel, TouchBarButton, TouchBarSpacer, TouchBarSlider} = TouchBar
+
+var touchBarItems = []
+
+
+export default class TimecopView {
+  constructor ({uri}) {
+    this.uri = uri
+    etch.initialize(this)
+    if (atom.packages.getActivePackages().length > 0) {
+      this.populateViews()
+    } else {
+      // Render on next tick so packages have been activated
+      setImmediate(() => { this.populateViews() })
+    }
+  }
+
+  update () {}
+
+  destroy () {
+    return etch.destroy(this)
+  }
+
+  render () {
+    return (
+      <div>
+        <div>
+          <div>
+              <b>Current objects in TouchBar:</b>
+              <ul ref="activeObjects"></ul>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  populateViews() {
+    if(BrowserWindow.getFocusedWindow()._touchBar !== null) {
+      touchBarItems = Object.values(BrowserWindow.getFocusedWindow()._touchBar.items)
+      console.log(touchBarItems)
+      touchBarItems.map((obj) => {
+        const li = document.createElement('div')
+
+        const a = document.createElement('a')
+        a.textContent = `${obj.type} ${obj.label}`
+        li.appendChild(a)
+
+        this.refs.activeObjects.appendChild(li)
+      })
+    }
+  }
+
+
+  serialize () {
+    return {
+      deserializer: this.constructor.name,
+      uri: this.getURI()
+    }
+  }
+
+  getURI () {
+    return this.uri
+  }
+
+  getTitle () {
+    return 'Touchbar Editor'
+  }
+
+  getIconName () {
+    return 'dashboard'
+  }
+
+  onDidChangeTitle () {
+    return new Disposable(function () {})
+  }
+
+  onDidChangeModified () {
+    return new Disposable(function () {})
+  }
+}

lib/touchbar.js

@@ -1,12 +1,14 @@
 'use babel';
 
-import TouchbarView from './touchbar-view';
+import TouchbarView from './touchbar-edit-view';
 import { CompositeDisposable } from 'atom';
 
 const {app, BrowserWindow, TouchBar} = require('remote')
 
 const {TouchBarLabel, TouchBarButton, TouchBarSpacer, TouchBarSlider} = TouchBar
 
+const EditViewURI = 'atom://touchbar-edit-view'
+
 
 
 let touchBarEnabled = false;
@@ -34,7 +36,7 @@ export default {
         },
         color: {
           type: 'color',
-          default: 'basalt'
+          default: 'darkgrey'
         }
       }
     },
@@ -51,18 +53,14 @@ export default {
         },
         color: {
           type: 'color',
-          default: 'basalt'
+          default: 'darkgrey'
         }
       }
     }
   },
 
   activate(state) {
-    this.touchbarView = new TouchbarView(state.touchbarViewState);
-    this.modalPanel = atom.workspace.addModalPanel({
-      item: this.touchbarView.getElement(),
-      visible: false
-    });
+    this.touchbarView = new TouchbarView(EditViewURI);
 
     // Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
     this.subscriptions = new CompositeDisposable();
@@ -92,7 +90,6 @@ export default {
     })
 
     atom.config.observe('touchbar.touchBarButtonTwo.color', (newValue) => {
-      console.log(newValue)
       buttonTwo.backgroundColor = newValue.toHexString()
     })
 
@@ -113,6 +110,11 @@ export default {
     this.subscriptions.add(atom.commands.add('atom-workspace', {
       'touchbar:toggle': () => this.toggle()
     }));
+
+    // Register command that opens the edit window
+    this.subscriptions.add(atom.commands.add('atom-workspace', {
+      'touchbar:edit': () => this.openEditWindow()
+    }));
   },
 
   deactivate() {
@@ -131,6 +133,11 @@ export default {
   toggle() {
     BrowserWindow.getFocusedWindow().setTouchBar(touchBarEnabled ? null : globalTouchBar)
     touchBarEnabled = !touchBarEnabled
+  },
+
+  openEditWindow() {
+    let tbev = new TouchbarView(EditViewURI)
+    atom.workspace.open(tbev)
   }
 
 };

menus/touchbar.json

@@ -17,6 +17,10 @@
             {
               "label": "Toggle",
               "command": "touchbar:toggle"
+            },
+            {
+              "label": "Edit",
+              "command": "touchbar:edit"
             }
           ]
         }

package.json

@@ -12,5 +12,7 @@
   "engines": {
     "atom": ">=1.0.0 <2.0.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "etch": "^0.12.4"
+  }
 }

yarn.lock

@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+etch@^0.12.4:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/etch/-/etch-0.12.4.tgz#6c8b9500eeeda22a1e0962f58f94e2cf9573ac92"