basic edit option 🎉

lib/touchbar-edit-view.js

@@ -22,16 +22,79 @@ export default class TouchBarEditView {
     return etch.destroy(this)
   }
 
+  labelChanged(newLabel, obj) {
+    let oldConfig = JSON.parse(atom.config.get('touchbar.buttons'))
+    let newElementIndex = 0
+    Object.values(oldConfig).map((e, i) => {
+      if(e.name == obj.name) {
+        newElementIndex = i
+      }
+    })
+    let newElement = obj
+    newElement.label = newLabel
+    oldConfig[newElementIndex] = newElement
+    atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
+  }
+
+  commandChanged(newCommand, obj) {
+      let oldConfig = JSON.parse(atom.config.get('touchbar.buttons'))
+      let newElementIndex = 0
+      Object.values(oldConfig).map((e, i) => {
+        if(e.name == obj.name) {
+          newElementIndex = i
+        }
+      })
+      let newElement = obj
+      newElement.command = newCommand
+      oldConfig[newElementIndex] = newElement
+      atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
+  }
+
+  typeChanged(newType, obj) {
+      let oldConfig = JSON.parse(atom.config.get('touchbar.buttons'))
+      let newElementIndex = 0
+      Object.values(oldConfig).map((e, i) => {
+        if(e.name == obj.name) {
+          newElementIndex = i
+        }
+      })
+      let newElement = obj
+      newElement.type = newType
+      oldConfig[newElementIndex] = newElement
+      atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
+  }
+
+  colorChanged(newColor, obj) {
+      let oldConfig = JSON.parse(atom.config.get('touchbar.buttons'))
+      let newElementIndex = 0
+      Object.values(oldConfig).map((e, i) => {
+        if(e.name == obj.name) {
+          newElementIndex = i
+        }
+      })
+      let newElement = obj
+      newElement.color = newColor
+      oldConfig[newElementIndex] = newElement
+      atom.config.set('touchbar.buttons', JSON.stringify(oldConfig))
+  }
+
   render() {
-    if (BrowserWindow.getFocusedWindow()._touchBar) {
+    if (JSON.parse(atom.config.get('touchbar.buttons'))) {
       return (
         <div>
           <b>Current objects in TouchBar:</b>
           {
-            Object.values(atom.getCurrentWindow()._touchBar.items).map((obj) => {
+            Object.values(JSON.parse(atom.config.get('touchbar.buttons'))).map((obj) => {
               return <TouchBarItem
+                name = {obj.name}
                 type = {obj.type}
                 label = {obj.label}
+                command = {obj.command}
+                color = {obj.color}
+                onLabelChanged = {(newLabel) => this.labelChanged(newLabel, obj)}
+                onCommandChanged = {(newCommand) => this.commandChanged(newCommand, obj)}
+                onTypeChanged = {(newType) => this.typeChanged(newType, obj)}
+                onColorChanged = {(newColor) => this.colorChanged(newColor, obj)}
               />
             })
           }

lib/touchbar-item.js

@@ -4,6 +4,37 @@
 import {Disposable} from 'atom'
 import etch from 'etch'
 
+const types = [
+  {
+    value: "button",
+    label: "Button"
+  },
+  {
+    value: "label",
+    label: "Label"
+  },
+  {
+    value: "spacer",
+    label: "Spacer"
+  },
+  {
+    value: "color-picker",
+    label: "Color Picker"
+  },
+  {
+    value: "emoji",
+    label: "Emoji Scrubber"
+  },
+  {
+    value: "group",
+    label: "Group"
+  },
+  {
+    value: "popover",
+    label: "Popover"
+  }
+]
+
 export default class TouchBarItem {
   constructor(props) {
     this.props = props
@@ -15,11 +46,40 @@ export default class TouchBarItem {
     return etch.update(this)
   }
 
+
+  onLabelChanged() {
+    this.props.onLabelChanged(document.getElementById(`${this.props.name}input_label`).value)
+  }
+
+  onTypeChanged() {
+    console.log("Changing type of" +  this.props.name);
+    this.props.onTypeChanged(document.getElementById(`${this.props.name}_select_type`).value)
+  }
+
+  onCommandChanged() {
+    this.props.onCommandChanged(document.getElementById(`${this.props.name}input_command`).value)
+  }
+
+  onColorChanged() {
+    this.props.onColorChanged(document.getElementById(`${this.props.name}input_color`).value)
+  }
+
   render() {
-    console.log(this.props)
     return (
-      <div>
-        <b>{ (this.props.type ? this.props.type : "No type") }</b> : <i>{ (this.props.label ? this.props.label : "No label") }</i>
+      <div class="native-key-bindings">
+        <select id={`${this.props.name}_select_type`} onchange={() => this.onTypeChanged()}>
+          {types.map((e) => {
+            if(this.props.type === e.value) {
+              return <option value={e.value} selected>{e.label}</option>
+            } else {
+              return <option value={e.value}>{e.label}</option>
+            }
+          })}
+        </select>
+        <input type="text" id={`${this.props.name}input_label`} value={ (this.props.label ? this.props.label : "No label") } onKeyUp={this.onLabelChanged}></input>
+        <input type="text" id={`${this.props.name}input_command`} value={ (this.props.command ? this.props.command : "No comand") } onKeyUp={this.onCommandChanged}></input>
+        <input type="text" id={`${this.props.name}input_color`} value={ (this.props.color ? this.props.color : "No color") } onKeyUp={this.onColorChanged}></input>
+
         <br></br>
       </div>
     )

lib/touchbar.js

@@ -38,7 +38,7 @@ export default {
       title: 'Elements',
       description: 'Configure your toutchbar elements here',
       type: 'string',
-      default: '[{ "name": "my-new-label", "type": "label", "label": "my 🔥 label", "color": "#FF9300" }, { "name": "spacer", "type": "spacer", "size": "small" }, { "name": "comment-button", "type": "button", "label": "//", "command": "editor:toggle-line-comments", "color": "#5712d6" }, { "name": "beautify-button", "type": "button", "label": "💅", "command": "atom-beautify:beautify-editor", "color": "#83FF8F" }, { "name": "color-picker", "type": "color-picker" }, { "type": "popover", "label": "😄", "elements": [{ "name": "emoji-scrubber", "type": "scrubber", "label": "😄", "items": "emojis" } ] }, { "name": "toggle-command-palette", "type": "button", "label": "🎨", "command": "command-palette:toggle" }]'
+      default: '[{ "name": "my-new-label", "type": "label", "label": "my 🔥 label", "color": "#FF9300" }, { "name": "spacer", "type": "spacer", "size": "small" }, { "name": "comment-button", "type": "button", "label": "//", "command": "editor:toggle-line-comments", "color": "#5712d6" }, { "name": "beautify-button", "type": "button", "label": "💅", "command": "atom-beautify:beautify-editor", "color": "#83FF8F" }, { "name": "color-picker", "type": "color-picker" }, { "type": "popover", "label": "😄", "elements": [{ "name": "emoji-scrubber", "type": "scrubber", "label": "😄", "items": "emojis" } ] }, { "name": "toggle-command-palette", "type": "button", "label": "🎨", "command": "command-palette:toggle" }, {"name":"edit-touchbar","type":"button","label":"Edit Touchbar","command":"touchbar:edit","color":"#83FF8F"}, {"name":"toggle-github","type":"button","label":"GitHub","color":"#0033cc","command":"github:toggle-github-tab"}]'
     }
   },
 
@@ -64,9 +64,9 @@ export default {
     })
 
     // Register command that opens the edit window
-    // this.subscriptions.add(atom.commands.add('atom-workspace', {
-    //   'touchbar:edit': () => this.openEditWindow()
-    // }));
+    this.subscriptions.add(atom.commands.add('atom-workspace', {
+      'touchbar:edit': () => this.openEditWindow()
+    }));
   },
 
   deactivate() {

menus/touchbar.json

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