ui.toolbar.strategy.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * DevExtreme (ui/toolbar/ui.toolbar.strategy.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 noop = require("../../core/utils/common").noop;
  12. var each = require("../../core/utils/iterator").each;
  13. var errors = require("../../core/errors");
  14. var compileGetter = require("../../core/utils/data").compileGetter;
  15. var Class = require("../../core/class");
  16. var Button = require("../button");
  17. var abstract = Class.abstract;
  18. var TOOLBAR_MENU_CONTAINER_CLASS = "dx-toolbar-menu-container";
  19. var TOOLBAR_MENU_BUTTON_CLASS = "dx-toolbar-menu-button";
  20. var ToolbarStrategy = Class.inherit({
  21. ctor: function(toolbar) {
  22. this._toolbar = toolbar
  23. },
  24. render: function() {
  25. this._renderMenuButton();
  26. this._renderWidget()
  27. },
  28. _widgetOptions: function() {
  29. var itemClickAction = this._toolbar._createActionByOption("onItemClick");
  30. return {
  31. itemTemplate: this._getMenuItemTemplate.bind(this),
  32. onItemClick: function(e) {
  33. this._toggleMenu(false, true);
  34. itemClickAction(e)
  35. }.bind(this)
  36. }
  37. },
  38. _getMenuItemTemplate: function() {
  39. return this._toolbar._getTemplateByOption("menuItemTemplate")
  40. },
  41. _renderWidget: function() {
  42. var $menu = $("<div>").appendTo(this._menuContainer());
  43. this._menu = this._toolbar._createComponent($menu, this._menuWidgetClass(), this._widgetOptions());
  44. this.renderMenuItems()
  45. },
  46. _menuContainer: abstract,
  47. _menuWidgetClass: abstract,
  48. _hasVisibleMenuItems: function(items) {
  49. var menuItems = items || this._toolbar.option("items");
  50. var result = false;
  51. var optionGetter = compileGetter("visible");
  52. var overflowGetter = compileGetter("locateInMenu");
  53. var menuLocation = false;
  54. each(menuItems, function(index, item) {
  55. var itemVisible = optionGetter(item, {
  56. functionsAsIs: true
  57. });
  58. var itemOverflow = overflowGetter(item, {
  59. functionsAsIs: true
  60. });
  61. if ("menu" === item.location) {
  62. menuLocation = true
  63. }
  64. if (false !== itemVisible && ("auto" === itemOverflow || "always" === itemOverflow || "menu" === item.location)) {
  65. result = true
  66. }
  67. });
  68. if (menuLocation) {
  69. errors.log("W0001", "dxToolbar - 'location' item field", "menu", "16.1", "Use 'locateInMenu' item field instead.")
  70. }
  71. return result
  72. },
  73. _getMenuItems: function() {
  74. return this._toolbar._getMenuItems()
  75. },
  76. _updateMenuVisibility: noop,
  77. _renderMenuButton: function() {
  78. var buttonOptions = this._menuButtonOptions();
  79. this._renderMenuButtonContainer();
  80. this._$button = $("<div>").appendTo(this._$menuButtonContainer).addClass(TOOLBAR_MENU_BUTTON_CLASS);
  81. this._toolbar._createComponent(this._$button, Button, buttonOptions)
  82. },
  83. _menuButtonOptions: function() {
  84. return {
  85. onClick: this._menuButtonClickHandler.bind(this)
  86. }
  87. },
  88. _menuButtonClickHandler: function() {
  89. this._toggleMenu(!this._menuShown, true)
  90. },
  91. _renderMenuButtonContainer: function() {
  92. var $afterSection = this._toolbar._$afterSection;
  93. this._$menuButtonContainer = $("<div>").appendTo($afterSection).addClass(this._toolbar._buttonClass()).addClass(TOOLBAR_MENU_CONTAINER_CLASS)
  94. },
  95. renderMenuItems: function() {
  96. this._menu && this._menu.option("items", this._getMenuItems())
  97. },
  98. toggleMenuVisibility: function(visible, animate) {
  99. this._menu && this._toggleMenu(visible, animate)
  100. },
  101. _toggleMenu: function(visible) {
  102. this._menuShown = visible
  103. },
  104. getMenuWidget: function() {
  105. return this._menu
  106. },
  107. widgetOption: function(name, value) {
  108. this._menu && this._menu.option(name, value)
  109. },
  110. handleToolbarVisibilityChange: noop
  111. });
  112. module.exports = ToolbarStrategy;