From 5b53d5f7101e090a317e7cc494d379be1775269d Mon Sep 17 00:00:00 2001 From: Wei Wei Date: Tue, 23 Aug 2016 18:39:19 +0800 Subject: [PATCH] support dropdown-header and dropdown-divider --- demos/default/index.js | 5 +++++ js/dropdown-divider.jade | 1 + js/dropdown-divider.js | 6 ++++++ js/dropdown-header.jade | 1 + js/dropdown-header.js | 9 +++++++++ js/dropdown-item.jade | 8 ++++++++ js/{menu-item.js => dropdown-item.js} | 12 ++++++------ js/dropdown.jade | 3 +-- js/dropdown.js | 2 +- js/index.js | 8 ++++++-- js/menu-item.jade | 7 ------- 11 files changed, 44 insertions(+), 18 deletions(-) create mode 100644 js/dropdown-divider.jade create mode 100644 js/dropdown-divider.js create mode 100644 js/dropdown-header.jade create mode 100644 js/dropdown-header.js create mode 100644 js/dropdown-item.jade rename js/{menu-item.js => dropdown-item.js} (52%) delete mode 100644 js/menu-item.jade diff --git a/demos/default/index.js b/demos/default/index.js index e0158a4..b043fc5 100644 --- a/demos/default/index.js +++ b/demos/default/index.js @@ -33,6 +33,11 @@ const toolbar = new ToolbarView({ text: 'The 1st MenuItem', id: 'menu-item-1st', onClick: () => console.log('click menu-item-1st'), + }, { + type: 'dropdown-divider', + }, { + type: 'dropdown-header', + text: 'Hello world!', }, { text: 'The 2nd MenuItem', id: 'menu-item-2nd', diff --git a/js/dropdown-divider.jade b/js/dropdown-divider.jade new file mode 100644 index 0000000..9f454a9 --- /dev/null +++ b/js/dropdown-divider.jade @@ -0,0 +1 @@ +li.divider(role='separator') diff --git a/js/dropdown-divider.js b/js/dropdown-divider.js new file mode 100644 index 0000000..6812597 --- /dev/null +++ b/js/dropdown-divider.js @@ -0,0 +1,6 @@ +import dropdownDividerTemplate from './dropdown-divider.jade'; + +export function renderDropdownDivider() { + return { html: dropdownDividerTemplate() }; +} + diff --git a/js/dropdown-header.jade b/js/dropdown-header.jade new file mode 100644 index 0000000..828469e --- /dev/null +++ b/js/dropdown-header.jade @@ -0,0 +1 @@ +li.dropdown-header(role='presentation')=text diff --git a/js/dropdown-header.js b/js/dropdown-header.js new file mode 100644 index 0000000..bb09657 --- /dev/null +++ b/js/dropdown-header.js @@ -0,0 +1,9 @@ +import _ from 'underscore'; +import dropdownHeaderTemplate from './dropdown-header.jade'; + +export function renderDropdownHeader(dropdownHeader) { + return { + html: dropdownHeaderTemplate(_.defaults(dropdownHeader, { text: '' })), + }; +} + diff --git a/js/dropdown-item.jade b/js/dropdown-item.jade new file mode 100644 index 0000000..af7864f --- /dev/null +++ b/js/dropdown-item.jade @@ -0,0 +1,8 @@ +li(role='presentation') + a.dropdown-item(class=classes, id=id, role='menuitem') + if iconLeft + span.icon-left.glyphicon(class=iconLeft) + span.text=text + if iconRight + span.icon-right.glyphicon(class=iconRight) + diff --git a/js/menu-item.js b/js/dropdown-item.js similarity index 52% rename from js/menu-item.js rename to js/dropdown-item.js index d4b4e53..bfe2b8e 100644 --- a/js/menu-item.js +++ b/js/dropdown-item.js @@ -1,23 +1,23 @@ import _ from 'underscore'; -import menuItemTemplate from './menu-item.jade'; +import dropdownItemTemplate from './dropdown-item.jade'; -export function renderMenuItem(menuItem) { +export function renderDropdownItem(dropdownItem) { const options = _.extend({ classes: [], - id: _.uniqueId('menu-item-'), + id: _.uniqueId('dropdown-item-'), text: '', iconLeft: null, iconRight: null, tabindex: -1, onClick: null, - }, menuItem); - const html = menuItemTemplate(options); + }, dropdownItem); + const html = dropdownItemTemplate(options); const events = {}; const { id, onClick } = options; if (_.isFunction(onClick)) { - events[`click .menu-item#${id}`] = onClick; + events[`click .dropdown-item#${id}`] = onClick; } return { html, events }; diff --git a/js/dropdown.jade b/js/dropdown.jade index 3653a96..d484fd1 100644 --- a/js/dropdown.jade +++ b/js/dropdown.jade @@ -4,5 +4,4 @@ include ./button-mixin.jade +buttonMixin(button) ul.dropdown-menu(role='menu', aria-labeledby=button.id, class=classes, id=id) each item in menu.items - li(role='presentation') - != item.html + != item.html diff --git a/js/dropdown.js b/js/dropdown.js index 7a62801..1a691b5 100644 --- a/js/dropdown.js +++ b/js/dropdown.js @@ -29,7 +29,7 @@ export function renderDropdown(dropdown, renderItem) { items: _.map(menu.items, (item, index) => ({ html: renderItem(_.defaults({ tabindex: index === 0 ? 0 : -1, - }, item, { type: 'menu-item' }), events), + }, item, { type: 'dropdown-item' }), events), })), }, menu, { classes: [], diff --git a/js/index.js b/js/index.js index 00b4477..6930c83 100644 --- a/js/index.js +++ b/js/index.js @@ -2,12 +2,16 @@ import { register } from './item-register.js'; import { renderToolbar } from './toolbar.js'; import { renderButton } from './button.js'; import { renderDropdown } from './dropdown.js'; -import { renderMenuItem } from './menu-item.js'; +import { renderDropdownItem } from './dropdown-item.js'; +import { renderDropdownHeader } from './dropdown-header.js'; +import { renderDropdownDivider } from './dropdown-divider.js'; register('toolbar', renderToolbar); register('button', renderButton); register('dropdown', renderDropdown); -register('menu-item', renderMenuItem); +register('dropdown-item', renderDropdownItem); +register('dropdown-header', renderDropdownHeader); +register('dropdown-divider', renderDropdownDivider); export { register } from './item-register.js'; export { ToolbarView } from './toolbar-view.js'; diff --git a/js/menu-item.jade b/js/menu-item.jade deleted file mode 100644 index 6e2c768..0000000 --- a/js/menu-item.jade +++ /dev/null @@ -1,7 +0,0 @@ -a.menu-item(class=classes, id=id, role='menuitem') - if iconLeft - span.icon-left.glyphicon(class=iconLeft) - span.text=text - if iconRight - span.icon-right.glyphicon(class=iconRight) -