diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2014-04-14 14:10:20 +0200 |
---|---|---|
committer | Petr Vobornik <pvoborni@redhat.com> | 2014-06-10 10:23:25 +0200 |
commit | c7af2458091ba95eccc26f4468234413e8b016b9 (patch) | |
tree | 4ced522bf92ac2c38a9726a0c441c713d63068cb /install/ui/src/freeipa/widgets/DropdownWidget.js | |
parent | fc0926ba91f57cb5cd182f2edf50f24d4cfd7432 (diff) | |
download | freeipa-c7af2458091ba95eccc26f4468234413e8b016b9.tar.gz freeipa-c7af2458091ba95eccc26f4468234413e8b016b9.tar.xz freeipa-c7af2458091ba95eccc26f4468234413e8b016b9.zip |
webui: add action dropdown
Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
Diffstat (limited to 'install/ui/src/freeipa/widgets/DropdownWidget.js')
-rw-r--r-- | install/ui/src/freeipa/widgets/DropdownWidget.js | 84 |
1 files changed, 74 insertions, 10 deletions
diff --git a/install/ui/src/freeipa/widgets/DropdownWidget.js b/install/ui/src/freeipa/widgets/DropdownWidget.js index e45ea8945..181cfc5cf 100644 --- a/install/ui/src/freeipa/widgets/DropdownWidget.js +++ b/install/ui/src/freeipa/widgets/DropdownWidget.js @@ -77,6 +77,21 @@ define(['dojo/_base/declare', toggle_text: '', /** + * Icon displayed after toggle text + * @property {String} + */ + toggle_icon: null, + + /** + * Toggle classes + * + * e.g.: `btn btn-default` + * + * @property {String} + */ + toggle_class: '', + + /** * Toggle button content. Replaces toggle button text if set. Can be * use for more complex toggle buttons. * @property {HTMLElement|HTMLElement[]} @@ -96,6 +111,19 @@ define(['dojo/_base/declare', */ dom_node: null, + /** + * Container for items + * @protected + * @property {HTMLElement} + */ + ul_node: null, + + /** + * Menu is right aligned + * @type {Boolean} + */ + right_aligned: false, + render: function() { if (this.dom_node) { construct.empty(this.dom_node); @@ -108,7 +136,8 @@ define(['dojo/_base/declare', } this._render_toggle(this.dom_node); - this._render_items(this.items, this.dom_node); + this._render_list(this.dom_node); + this._render_items(this.items); return this.dom_node; }, @@ -120,6 +149,7 @@ define(['dojo/_base/declare', 'data-toggle': 'dropdown', href: '#' }); + if (this.toggle_class) dom_class.add(this.toggle_node, this.toggle_class); this._update_toggle(); if (container) { @@ -140,6 +170,11 @@ define(['dojo/_base/declare', } } else { prop.set(this.toggle_node, 'textContent', this.toggle_text); + if (this.toggle_icon) { + var icon = construct.create('i', { + 'class': this.toggle_icon + }, this.toggle_node); + } } }, @@ -153,30 +188,54 @@ define(['dojo/_base/declare', this._update_toggle(); }, - _render_items: function(items, container) { - var ul = construct.create('ul', { - 'class': 'dropdown-menu' - }); + _itemsSetter: function(value) { + this._clear_items(); + this.items = value; + this._render_items(this.items, this.dom_node); + }, - array.forEach(items, function(item) { - this._render_item(item, ul); - }, this); + _clear_items: function() { + this.items = []; + if (this.ul_node) { + construct.empty(this.ul_node); + } + }, + _render_list: function(container) { + + var ul = this.ul_node = construct.create('ul', { + 'class': 'dropdown-menu' + }); + if (this.right_aligned) { + dom_class.add(ul, 'dropdown-menu-right'); + } if (container) { construct.place(ul, container); } return ul; }, + _render_items: function(items, container) { + + var ul = this.ul_node; + array.forEach(items, function(item) { + this._render_item(item, ul); + }, this); + }, + _render_item: function(item, container) { var li = construct.create('li', { - 'data-name': item.name || '' + 'data-name': item.name || '', + role: 'presentation' }); var a = construct.create('a', { 'href': '#' + item.name || '' - }, li); + }); + if (item['class'] !== 'divider') { + construct.place(a, li); + } if (item.icon) { construct.create('i', { @@ -191,6 +250,11 @@ define(['dojo/_base/declare', dom_class.add(li, item['class']); } + if (item.disabled) { + dom_class.add(li, 'disabled'); + attr.set(a, 'tabIndex', -1); + } + if (item.items && item.items.length > 0) { dom_class.add(li, 'dropdown-submenu'); this._render_items(item.items, li); |