Merge pull request #58 from atom/wl-dock

Docks!

lib/keybinding-resolver-view.js

@@ -3,7 +3,7 @@
 
 import fs from 'fs-plus'
 import etch from 'etch'
-import {Disposable, CompositeDisposable} from 'atom'
+import {CompositeDisposable} from 'atom'
 import path from 'path'
 
 export default class KeyBindingResolverView {
@@ -13,35 +13,68 @@ export default class KeyBindingResolverView {
     this.unusedKeyBindings = []
     this.unmatchedKeyBindings = []
     this.partiallyMatchedBindings = []
+    this.attached = false
+    this.disposables = new CompositeDisposable()
+    this.keybindingDisposables = new CompositeDisposable()
+
+    this.disposables.add(atom.workspace.getBottomDock().observeActivePaneItem(item => {
+      if (item === this) {
+        this.attach()
+      } else {
+        this.detach()
+      }
+    }))
+
+    this.disposables.add(atom.workspace.getBottomDock().observeVisible(visible => {
+      if (visible) {
+        if (atom.workspace.getBottomDock().getActivePaneItem() === this) this.attach()
+      } else {
+        this.detach()
+      }
+    }))
+
     etch.initialize(this)
   }
 
+  getTitle () {
+    return 'Key Binding Resolver'
+  }
+
+  getIconName () {
+    return 'keyboard'
+  }
+
+  getDefaultLocation () {
+    return 'bottom'
+  }
+
+  getAllowedLocations () {
+    // TODO: Support left and right possibly
+    return ['bottom']
+  }
+
+  getURI () {
+    return 'atom://keybinding-resolver'
+  }
+
   serialize () {
-    return this.panel ? {attached: this.panel.isVisible()} : {attached: false}
+    return {
+      deserializer: 'keybinding-resolver/KeyBindingResolverView'
+    }
   }
 
   destroy () {
+    this.disposables.dispose()
     this.detach()
     return etch.destroy(this)
   }
 
-  toggle () {
-    if (this.panel && this.panel.isVisible()) {
-      this.detach()
-    } else {
-      this.attach()
-    }
-  }
-
   attach () {
-    this.disposables = new CompositeDisposable()
-    this.panel = atom.workspace.addBottomPanel({item: this})
-    this.disposables.add(new Disposable(() => {
-      this.panel.destroy()
-      this.panel = null
-    }))
+    if (this.attached) return
 
-    this.disposables.add(atom.keymaps.onDidMatchBinding(({keystrokes, binding, keyboardEventTarget, eventType}) => {
+    this.attached = true
+    this.keybindingDisposables = new CompositeDisposable()
+    this.keybindingDisposables.add(atom.keymaps.onDidMatchBinding(({keystrokes, binding, keyboardEventTarget, eventType}) => {
       if (eventType === 'keyup' && binding == null) {
         return
       }
@@ -57,11 +90,11 @@ export default class KeyBindingResolverView {
       this.update({usedKeyBinding: binding, unusedKeyBindings, unmatchedKeyBindings, keystrokes})
     }))
 
-    this.disposables.add(atom.keymaps.onDidPartiallyMatchBindings(({keystrokes, partiallyMatchedBindings}) => {
+    this.keybindingDisposables.add(atom.keymaps.onDidPartiallyMatchBindings(({keystrokes, partiallyMatchedBindings}) => {
       this.update({keystrokes, partiallyMatchedBindings})
     }))
 
-    this.disposables.add(atom.keymaps.onDidFailToMatchBinding(({keystrokes, keyboardEventTarget, eventType}) => {
+    this.keybindingDisposables.add(atom.keymaps.onDidFailToMatchBinding(({keystrokes, keyboardEventTarget, eventType}) => {
       if (eventType === 'keyup') {
         return
       }
@@ -76,9 +109,11 @@ export default class KeyBindingResolverView {
   }
 
   detach () {
-    if (this.disposables) {
-      this.disposables.dispose()
-    }
+    if (!this.attached) return
+
+    this.attached = false
+    this.keybindingDisposables.dispose()
+    this.keybindingDisposables = null
   }
 
   update (props) {
@@ -93,24 +128,21 @@ export default class KeyBindingResolverView {
   render () {
     return (
       <div className='key-binding-resolver'>
-        <div className='panel-heading padded'>
-          <span>Key Binding Resolver: </span>
-          {this.renderKeystrokes()}
-        </div>
-        <div className='panel-body padded'>{this.renderKeyBindings()}</div>
+        <div className='panel-heading'>{this.renderKeystrokes()}</div>
+        <div className='panel-body'>{this.renderKeyBindings()}</div>
       </div>
     )
   }
 
   renderKeystrokes () {
     if (this.keystrokes) {
       if (this.partiallyMatchedBindings.length > 0) {
-        return <span className='keystroke'>{this.keystrokes} (partial)</span>
+        return <span className='keystroke highlight-info'>{this.keystrokes} (partial)</span>
       } else {
-        return <span className='keystroke'>{this.keystrokes}</span>
+        return <span className='keystroke highlight-info'>{this.keystrokes}</span>
       }
     } else {
-      return <span>Press any key: </span>
+      return <span>Press any key</span>
     }
   }
 

lib/main.js

@@ -2,39 +2,32 @@ const {CompositeDisposable} = require('atom')
 
 const KeyBindingResolverView = require('./keybinding-resolver-view')
 
+const KEYBINDING_RESOLVER_URI = 'atom://keybinding-resolver'
+
 module.exports = {
-  keybindingResolverView: null,
+  activate () {
+    this.subscriptions = new CompositeDisposable()
 
-  activate (state = {}) {
-    this.disposables = new CompositeDisposable()
+    this.subscriptions.add(atom.workspace.addOpener(uri => {
+      if (uri === KEYBINDING_RESOLVER_URI) {
+        return new KeyBindingResolverView()
+      }
+    }))
 
-    const {attached} = state
-    if (attached) this.getKeybindingResolverView().toggle()
-    this.disposables.add(atom.commands.add('atom-workspace', {
-      'key-binding-resolver:toggle': () => this.getKeybindingResolverView().toggle(),
-      'core:cancel': () => this.getKeybindingResolverView().detach(),
-      'core:close': () => this.getKeybindingResolverView().detach()
+    this.subscriptions.add(atom.commands.add('atom-workspace', {
+      'key-binding-resolver:toggle': () => this.toggle()
     }))
   },
 
-  getKeybindingResolverView () {
-    if (this.keybindingResolverView == null) {
-      this.keybindingResolverView = new KeyBindingResolverView()
-    }
-    return this.keybindingResolverView
+  deactivate () {
+    this.subscriptions.dispose()
   },
 
-  deactivate () {
-    this.disposables.dispose()
-    if (this.keybindingResolverView != null) {
-      return this.keybindingResolverView.destroy()
-    }
+  toggle () {
+    atom.workspace.toggle(KEYBINDING_RESOLVER_URI)
   },
 
-  serialize () {
-    if (this.keybindingResolverView != null) {
-      return this.keybindingResolverView.serialize()
-    }
-    return undefined
+  deserializeKeyBindingResolverView (serialized) {
+    return new KeyBindingResolverView()
   }
 }

package.json

@@ -6,7 +6,10 @@
   "license": "MIT",
   "repository": "https://github.com/atom/keybinding-resolver",
   "engines": {
-    "atom": ">0.79.0"
+    "atom": ">=1.17.0"
+  },
+  "deserializers": {
+    "keybinding-resolver/KeyBindingResolverView": "deserializeKeyBindingResolverView"
   },
   "dependencies": {
     "etch": "0.9.0",