support submenu

demos/default/index.js

@@ -43,6 +43,19 @@ window.toolbar = new ToolbarView({
         onClick: () => console.log('click dropdown-item-2nd'),
       }, {
         type: 'dropdown-divider',
+      }, {
+        type: 'dropdown-submenu',
+        button: {
+          text: 'A submenu',
+        },
+        menu: {
+          items: [{
+            text: 'Submenu item 1',
+            onClick: () => console.log('click submenu item 1'),
+          }],
+        },
+      }, {
+        type: 'dropdown-divider',
       }, {
         type: 'dropdown-radio-group',
         id: 'dropdown-radio-group-1st',

js/dropdown-submenu.jade

@@ -0,0 +1,7 @@
+include ./menu-button-mixin.jade
+include ./menu-mixin.jade
+
+li.dropdown-submenu(role='presentation', class=classes, id=id)
+  +menuButtonMixin(button)
+  +menuMixin(id, menu)
+

js/dropdown-submenu.js

@@ -0,0 +1,63 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import dropdownSubmenuTemplate from './dropdown-submenu.jade';
+import './dropdown-submenu.less';
+
+export function renderDropdownSubmenu(dropdownSubmenu, renderItem) {
+  const { button = {}, menu = {} } = dropdownSubmenu;
+  const events = {};
+  const options = _.defaults({
+    button: _.defaults({
+      tabindex: dropdownSubmenu.tabindex,
+      attributes: _.defaults({
+        'data-toggle': 'dropdown',
+        'aria-haspopup': 'true',
+        'aria-expanded': 'false',
+      }, button.attributes),
+      classes: _.union(button.classes, ['dropdown-toggle']),
+    }, button, {
+      id: _.uniqueId('dropdown-submenu-button-'),
+      text: '',
+      iconLeft: null,
+      iconRight: ['glyphicon', 'glyphicon-triangle-right'],
+    }),
+    menu: _.defaults({
+      items: _.map(menu.items, (item, index) => ({
+        html: renderItem(_.defaults({
+          tabindex: index === 0 ? 0 : -1,
+        }, item, {
+          type: 'dropdown-item',
+        }), events),
+      })),
+    }, menu, {
+      classes: [],
+      id: _.uniqueId('menu-'),
+    }),
+  }, dropdownSubmenu);
+
+  const html = dropdownSubmenuTemplate(options);
+
+  events[`click #${options.button.id}`] = function (e) {
+    const $menu = this.$(`#${options.menu.id}`);
+    const hideMenu = () => {
+      $menu.hide();
+      $(document).off('click', hideMenu);
+    };
+    const showMenu = () => {
+      $menu.show();
+      $(document).on('click', hideMenu);
+    };
+
+    if ($menu.is(':visible')) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return { html, events };
+}
+

js/dropdown-submenu.less

@@ -0,0 +1,12 @@
+.toolbar {
+  .dropdown-submenu {
+    position: relative;
+
+    > .dropdown-menu {
+      position: absolute;
+      left: 100%;
+      top: 0;
+    }
+  }
+}
+

js/dropdown.jade

@@ -1,7 +1,6 @@
 include ./button-mixin.jade
+include ./menu-mixin.jade
 
 .dropdown(class=classes, id=id)
   +buttonMixin(button)
-  ul.dropdown-menu(role='menu', aria-labeledby=button.id, class=classes, id=id)
-    each item in menu.items
-      != item.html
+  +menuMixin(button.id, menu)

js/index.js

@@ -6,6 +6,7 @@ import { renderDropdownItem } from './dropdown-item.js';
 import { renderDropdownHeader } from './dropdown-header.js';
 import { renderDropdownDivider } from './dropdown-divider.js';
 import { renderDropdownRadioGroup } from './dropdown-radio-group.js';
+import { renderDropdownSubmenu } from './dropdown-submenu.js';
 
 register('toolbar', renderToolbar);
 register('button', renderButton);
@@ -14,6 +15,7 @@ register('dropdown-item', renderDropdownItem);
 register('dropdown-header', renderDropdownHeader);
 register('dropdown-divider', renderDropdownDivider);
 register('dropdown-radio-group', renderDropdownRadioGroup);
+register('dropdown-submenu', renderDropdownSubmenu);
 
 export { register } from './item-register.js';
 export { ToolbarView } from './toolbar-view.js';

js/menu-button-mixin.jade

@@ -0,0 +1,8 @@
+mixin menuButtonMixin(options)
+  a(role='menuitem', class=options.classes, id=options.id)
+    if options.iconLeft
+      span.icon-left(class=options.iconLeft)
+    span.text=options.text
+    if options.iconRight
+      span.icon-right(class=options.iconRight)
+

js/menu-mixin.jade

@@ -0,0 +1,5 @@
+mixin menuMixin(labeledby, options)
+  ul.dropdown-menu(role='menu', aria-labeledby=labeledby, class=options.classes, id=options.id)
+    each item in options.items
+      != item.html
+