ui.toolbar.menu.js 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /**
  2. * DevExtreme (ui/toolbar/ui.toolbar.menu.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var $ = require("../../core/renderer");
  11. var registerComponent = require("../../core/component_registrator");
  12. var each = require("../../core/utils/iterator").each;
  13. var List = require("../list/ui.list.base");
  14. var TOOLBAR_MENU_ACTION_CLASS = "dx-toolbar-menu-action";
  15. var TOOLBAR_HIDDEN_BUTTON_CLASS = "dx-toolbar-hidden-button";
  16. var TOOLBAR_MENU_SECTION_CLASS = "dx-toolbar-menu-section";
  17. var TOOLBAR_MENU_LAST_SECTION_CLASS = "dx-toolbar-menu-last-section";
  18. var ToolbarMenu = List.inherit({
  19. _activeStateUnit: "." + TOOLBAR_MENU_ACTION_CLASS,
  20. _initMarkup: function() {
  21. this._renderSections();
  22. this.callBase()
  23. },
  24. _getSections: function() {
  25. return this._itemContainer().children()
  26. },
  27. _itemElements: function() {
  28. return this._getSections().children(this._itemSelector())
  29. },
  30. _renderSections: function() {
  31. var that = this;
  32. var $container = this._itemContainer();
  33. each(["before", "center", "after", "menu"], function() {
  34. var sectionName = "_$" + this + "Section";
  35. var $section = that[sectionName];
  36. if (!$section) {
  37. that[sectionName] = $section = $("<div>").addClass(TOOLBAR_MENU_SECTION_CLASS)
  38. }
  39. $section.appendTo($container)
  40. })
  41. },
  42. _renderItems: function() {
  43. this.callBase.apply(this, arguments);
  44. this._updateSections()
  45. },
  46. _updateSections: function() {
  47. var $sections = this.$element().find("." + TOOLBAR_MENU_SECTION_CLASS);
  48. $sections.removeClass(TOOLBAR_MENU_LAST_SECTION_CLASS);
  49. $sections.not(":empty").eq(-1).addClass(TOOLBAR_MENU_LAST_SECTION_CLASS)
  50. },
  51. _renderItem: function(index, item, itemContainer, $after) {
  52. var location = item.location || "menu";
  53. var $container = this["_$" + location + "Section"];
  54. var itemElement = this.callBase(index, item, $container, $after);
  55. if (this._getItemTemplateName({
  56. itemData: item
  57. })) {
  58. itemElement.addClass("dx-toolbar-menu-custom")
  59. }
  60. if ("menu" === location || "dxButton" === item.widget || item.isAction) {
  61. itemElement.addClass(TOOLBAR_MENU_ACTION_CLASS)
  62. }
  63. if ("dxButton" === item.widget) {
  64. itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_CLASS)
  65. }
  66. itemElement.addClass(item.cssClass);
  67. return itemElement
  68. },
  69. _getItemTemplateName: function(args) {
  70. var template = this.callBase(args);
  71. var data = args.itemData;
  72. var menuTemplate = data && data.menuItemTemplate;
  73. return menuTemplate || template
  74. },
  75. _itemClickHandler: function(e, args, config) {
  76. if ($(e.target).closest("." + TOOLBAR_MENU_ACTION_CLASS).length) {
  77. this.callBase(e, args, config)
  78. }
  79. },
  80. _clean: function() {
  81. this._getSections().empty();
  82. this.callBase()
  83. }
  84. });
  85. registerComponent("dxToolbarMenu", ToolbarMenu);
  86. module.exports = ToolbarMenu;