diff options
Diffstat (limited to 'addons/web/static/src/js/widgets/old')
| -rw-r--r-- | addons/web/static/src/js/widgets/old/dropdown_menu.js | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/addons/web/static/src/js/widgets/old/dropdown_menu.js b/addons/web/static/src/js/widgets/old/dropdown_menu.js new file mode 100644 index 00000000000..429fdd03067 --- /dev/null +++ b/addons/web/static/src/js/widgets/old/dropdown_menu.js @@ -0,0 +1,236 @@ +odoo.define('web.OldDropdownMenu', function (require) { +"use strict"; + +var core = require('web.core'); +var Widget = require('web.Widget'); + +var QWeb = core.qweb; + + + +var OldDropdownMenu = Widget.extend({ + template: 'web.OldDropdownMenu', + events: { + 'click .o_menu_item': '_onItemClick', + 'click .o_item_option': '_onOptionClick', + 'click span.o_trash_button': '_onTrashClick', + 'hidden.bs.dropdown': '_onBootstrapClose', + }, + + /** + * override + * + * @param {Widget} parent + * @param {Object} dropdownHeader object used to customize the dropdown menu. + * @param {String} dropdownHeader.title + * @param {String} dropdownHeader.icon + * @param {String} dropdownHeader.symbol + * @param {String} dropdownHeader.category descripbes the type of items + * @param {String} dropdownHeader.style the button style + * @param {Object[]} items list of menu items + * + * Menu items: + * + * * itemId: string; (optional) unique id associated with the item + * * description: string; label printed on screen + * * groupId: string; + * * isActive: boolean; (optional) determines if the item is considered active + * * isOpen: boolean; (optional) in case there are options the submenu presenting the options is opened or closed according to isOpen + * * isRemovable: boolean; (optional) can be removed from menu options: array of objects with 'optionId' and 'description' keys; (optional) + * * currentOptionId: string refers to an optionId that is activated if item is active (optional) + */ + init: function (parent, dropdownHeader, items) { + this._super(parent); + this.dropdownCategory = dropdownHeader.category; + this.dropdownTitle = dropdownHeader.title; + this.dropdownIcon = dropdownHeader.icon; + this.dropdownSymbol = dropdownHeader.symbol || false; + // this parameter fixes the menu style. By default, + // the style used is the one used in the search view + this.dropdownStyle = dropdownHeader.style || { + el: {class: 'btn-group o_dropdown', attrs: {}}, + mainButton: {class: 'o_dropdown_toggler_btn btn btn-secondary dropdown-toggle' + (this.dropdownSymbol ? ' o-no-caret' : '')}, + }; + this.items = items; + _.each(this.items, this._prepareItem.bind(this)); + }, + /** + * override + */ + start: function () { + this.$menu = this.$('.o_dropdown_menu'); + }, + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @param {string[]} activeItemIds + */ + updateItemsStatus: function (activeItemIds) { + _.each(this.items, function (item) { + if (!_.contains(activeItemIds, item.itemId)) { + item.isActive = false; + item.currentOptionId = false; + } else { + item.isActive = true; + item.currentOptionId = item.hasOptions ? + (item.currentOptionId || item.defaultOptionId) : + false; + } + }); + this._renderMenuItems(); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + * @param {string} itemId + */ + _removeItem: function (itemId) { + var item, itemIndex; + item = _.findWhere(this.items, {itemId: itemId}); + itemIndex = this.items.indexOf(item); + this.items.splice(itemIndex, 1); + this._renderMenuItems(); + var eventData = { + category: this.dropdownCategory, + itemId: itemId, + groupId: item.groupId, + }; + this.trigger_up('menu_item_deleted', eventData); + }, + /** + * @private + */ + _renderMenuItems: function () { + var newMenuItems = QWeb.render('OldDropdownMenu.MenuItems', {widget: this}); + this.$el.find('.o_menu_item, .dropdown-divider[data-removable="1"]').remove(); + this.$('.o_dropdown_menu').prepend($(newMenuItems)); + }, + /** + * this function computes some default values for some of the item keys + * according to values passed at initialization + * + * @private + * @param {Object} item + */ + _prepareItem: function (item) { + item.itemId = item.itemId || _.uniqueId('__item__'); + item.isOpen = item.isOpen || false; + item.isRemovable = item.isRemovable || false; + if (item.options && item.options.length !== 0) { + item.options = _.sortBy(item.options, 'groupId'); + item.hasOptions = true; + item.defaultOptionId = item.defaultOptionId || this.defaultOptionId; + item.currentOptionId = item.isActive && item.defaultOptionId ? item.defaultOptionId : false; + } + }, + /** + * @private + * @param {string} itemId + */ + _toggleMenuItem: function (itemId) { + var item = _.findWhere(this.items, {itemId: itemId}); + if (!item.hasOptions) { + item.isActive = !item.isActive; + var eventData = { + category: this.dropdownCategory, + itemId: itemId, + isActive: item.isActive, + groupId: item.groupId, + }; + this._renderMenuItems(); + this.trigger_up('menu_item_toggled', eventData); + } + if (item.hasOptions) { + item.isOpen = !item.isOpen; + this._renderMenuItems(); + } + }, + /** + * @private + * @param {string} itemId + * @param {string} optionId + */ + _toggleItemOption: function (itemId, optionId) { + var item = _.findWhere(this.items, {itemId: itemId}); + var initialState = item.isActive; + if (item.currentOptionId === optionId) { + item.isActive = false; + item.currentOptionId = false; + } else { + item.isActive = true; + item.currentOptionId = optionId; + } + var eventData = { + category: this.dropdownCategory, + itemId: itemId, + groupId: item.groupId, + isActive: item.isActive, + optionId: item.currentOptionId, + }; + this._renderMenuItems(); + if (item.isActive !== initialState) { + this.trigger_up('menu_item_toggled', eventData); + } else { + this.trigger_up('item_option_changed', eventData); + } + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * This method is called when Bootstrap trigger a 'close' event (for example + * when the user clicks outside the dropdown menu). + * + * @private + * @param {jQueryEvent} event + */ + _onBootstrapClose: function () { + _.each(this.items, function (item) { + item.isOpen = false; + }); + this._renderMenuItems(); + }, + /** + * @private + * @param {MouseEvent} event + */ + _onItemClick: function (event) { + event.preventDefault(); + event.stopPropagation(); + var itemId = $(event.currentTarget).data('id'); + this._toggleMenuItem(itemId); + }, + /** + * @private + * @param {MouseEvent} event + */ + _onOptionClick: function (event) { + event.preventDefault(); + event.stopPropagation(); + var optionId = $(event.currentTarget).data('option_id'); + var itemId = $(event.currentTarget).data('item_id'); + this._toggleItemOption(itemId, optionId); + }, + /** + * @private + * @param {MouseEvent} event + */ + _onTrashClick: function (event) { + event.stopPropagation(); + var itemId = $(event.currentTarget).data('id'); + this._removeItem(itemId); + }, +}); + +return OldDropdownMenu; + +}); |