Merge pull request #2134 from erikhakansson/AdvancedContextMenu

Advanced context menu

docs/creating-a-package.md

@@ -225,6 +225,30 @@ elements until reaching the top of the DOM tree.
 In the example above, the `Add file` item will only appear when the focused item
 or one of its parents has the `tree-view` class applied to it.
 
+You can also add separators and submenus to your context menus.
+To add a submenu, pass in a `context-menu` object instead of a command:
+
+```coffeescript
+'context-menu':
+  '.tree-view':
+    'Files':
+      'Add file': 'tree-view:add-file'
+  '.workspace':
+    'Inspect Element': 'core:inspect'
+```
+
+To add a separator, use a `'-': '-'` structure:
+
+```coffeescript
+'context-menu':
+  '.tree-view':
+    'Add file': 'tree-view:add-file'
+    '-': '-'
+    'Remove file': 'tree-view:remove-file'
+  '.workspace':
+    'Inspect Element': 'core:inspect'
+```
+
 ## Snippets
 
 An extension can supply language snippets in the _snippets_ directory which

spec/context-menu-manager-spec.coffee

@@ -15,7 +15,15 @@ describe "ContextMenuManager", ->
           'label': 'command'
 
       expect(contextMenu.definitions['.selector'][0].label).toEqual 'label'
-      expect(contextMenu.definitions['.selector'][0].command).toEqual 'command'
+      expect(contextMenu.definitions['.selector'][0].commandOrSubmenu).toEqual 'command'
+
+    it "loads submenus", ->
+      contextMenu.add 'file-path',
+        '.selector':
+          'parent':
+            'child-1': 'child-1:trigger'
+            'child-2': 'child-1:trigger'
+          'parent-2': 'parent-2:trigger'
 
     describe 'dev mode', ->
       it 'loads',  ->
@@ -25,7 +33,7 @@ describe "ContextMenuManager", ->
         , devMode: true
 
         expect(contextMenu.devModeDefinitions['.selector'][0].label).toEqual 'label'
-        expect(contextMenu.devModeDefinitions['.selector'][0].command).toEqual 'command'
+        expect(contextMenu.devModeDefinitions['.selector'][0].commandOrSubmenu).toEqual 'command'
 
   describe "building a menu template", ->
     beforeEach ->

src/browser/context-menu.coffee

@@ -19,4 +19,6 @@ class ContextMenu
         do (item) =>
           item.click = =>
             global.atomApplication.sendCommandToWindow(item.command, @atomWindow, item.commandOptions)
+      else if item.submenu
+        @createClickHandlers(item.submenu)
       item

src/context-menu-manager.coffee

@@ -33,8 +33,20 @@ class ContextMenuManager
   # Returns nothing.
   add: (name, object, {devMode}={}) ->
     for selector, items of object
-      for label, command of items
-        @addBySelector(selector, {label, command}, {devMode})
+      for label, commandOrSubmenu of items
+        if typeof commandOrSubmenu is 'object'
+          submenu = [];
+          for submenuLabel, command of commandOrSubmenu
+            if submenuLabel is command is '-'
+              submenu.push({type: 'separator'});
+            else 
+              submenu.push({label: submenuLabel, command: command})
+          @addBySelector(selector, {label: label, submenu: submenu}, {devMode})
+        else
+          if label is commandOrSubmenu is '-'
+            @addBySelector(selector, {type: 'separator'}, {devMode})
+          else
+            @addBySelector(selector, {label: label, command: commandOrSubmenu}, {devMode})
 
   # Registers a command to be displayed when the relevant item is right
   # clicked.