ui.menu_base.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795
  1. /**
  2. * DevExtreme (ui/context_menu/ui.menu_base.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. function _typeof(obj) {
  11. "@babel/helpers - typeof";
  12. return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) {
  13. return typeof obj
  14. } : function(obj) {
  15. return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj
  16. }, _typeof(obj)
  17. }
  18. var _renderer = require("../../core/renderer");
  19. var _renderer2 = _interopRequireDefault(_renderer);
  20. var _common = require("../../core/utils/common");
  21. var _type = require("../../core/utils/type");
  22. var _iterator = require("../../core/utils/iterator");
  23. var _extend = require("../../core/utils/extend");
  24. var _utils = require("../widget/utils.ink_ripple");
  25. var _ui = require("../hierarchical_collection/ui.hierarchical_collection_widget");
  26. var _ui2 = _interopRequireDefault(_ui);
  27. var _uiMenu_baseEdit = require("./ui.menu_base.edit.strategy");
  28. var _uiMenu_baseEdit2 = _interopRequireDefault(_uiMenu_baseEdit);
  29. var _devices = require("../../core/devices");
  30. var _devices2 = _interopRequireDefault(_devices);
  31. var _item = require("../collection/item");
  32. var _item2 = _interopRequireDefault(_item);
  33. function _interopRequireDefault(obj) {
  34. return obj && obj.__esModule ? obj : {
  35. "default": obj
  36. }
  37. }
  38. function _classCallCheck(instance, Constructor) {
  39. if (!(instance instanceof Constructor)) {
  40. throw new TypeError("Cannot call a class as a function")
  41. }
  42. }
  43. function _defineProperties(target, props) {
  44. for (var i = 0; i < props.length; i++) {
  45. var descriptor = props[i];
  46. descriptor.enumerable = descriptor.enumerable || false;
  47. descriptor.configurable = true;
  48. if ("value" in descriptor) {
  49. descriptor.writable = true
  50. }
  51. Object.defineProperty(target, descriptor.key, descriptor)
  52. }
  53. }
  54. function _createClass(Constructor, protoProps, staticProps) {
  55. if (protoProps) {
  56. _defineProperties(Constructor.prototype, protoProps)
  57. }
  58. if (staticProps) {
  59. _defineProperties(Constructor, staticProps)
  60. }
  61. Object.defineProperty(Constructor, "prototype", {
  62. writable: false
  63. });
  64. return Constructor
  65. }
  66. function _get() {
  67. if ("undefined" !== typeof Reflect && Reflect.get) {
  68. _get = Reflect.get.bind()
  69. } else {
  70. _get = function(target, property, receiver) {
  71. var base = _superPropBase(target, property);
  72. if (!base) {
  73. return
  74. }
  75. var desc = Object.getOwnPropertyDescriptor(base, property);
  76. if (desc.get) {
  77. return desc.get.call(arguments.length < 3 ? target : receiver)
  78. }
  79. return desc.value
  80. }
  81. }
  82. return _get.apply(this, arguments)
  83. }
  84. function _superPropBase(object, property) {
  85. while (!Object.prototype.hasOwnProperty.call(object, property)) {
  86. object = _getPrototypeOf(object);
  87. if (null === object) {
  88. break
  89. }
  90. }
  91. return object
  92. }
  93. function _inherits(subClass, superClass) {
  94. if ("function" !== typeof superClass && null !== superClass) {
  95. throw new TypeError("Super expression must either be null or a function")
  96. }
  97. subClass.prototype = Object.create(superClass && superClass.prototype, {
  98. constructor: {
  99. value: subClass,
  100. writable: true,
  101. configurable: true
  102. }
  103. });
  104. Object.defineProperty(subClass, "prototype", {
  105. writable: false
  106. });
  107. if (superClass) {
  108. _setPrototypeOf(subClass, superClass)
  109. }
  110. }
  111. function _setPrototypeOf(o, p) {
  112. _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
  113. o.__proto__ = p;
  114. return o
  115. };
  116. return _setPrototypeOf(o, p)
  117. }
  118. function _createSuper(Derived) {
  119. var hasNativeReflectConstruct = _isNativeReflectConstruct();
  120. return function() {
  121. var result, Super = _getPrototypeOf(Derived);
  122. if (hasNativeReflectConstruct) {
  123. var NewTarget = _getPrototypeOf(this).constructor;
  124. result = Reflect.construct(Super, arguments, NewTarget)
  125. } else {
  126. result = Super.apply(this, arguments)
  127. }
  128. return _possibleConstructorReturn(this, result)
  129. }
  130. }
  131. function _possibleConstructorReturn(self, call) {
  132. if (call && ("object" === _typeof(call) || "function" === typeof call)) {
  133. return call
  134. } else {
  135. if (void 0 !== call) {
  136. throw new TypeError("Derived constructors may only return object or undefined")
  137. }
  138. }
  139. return _assertThisInitialized(self)
  140. }
  141. function _assertThisInitialized(self) {
  142. if (void 0 === self) {
  143. throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
  144. }
  145. return self
  146. }
  147. function _isNativeReflectConstruct() {
  148. if ("undefined" === typeof Reflect || !Reflect.construct) {
  149. return false
  150. }
  151. if (Reflect.construct.sham) {
  152. return false
  153. }
  154. if ("function" === typeof Proxy) {
  155. return true
  156. }
  157. try {
  158. Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
  159. return true
  160. } catch (e) {
  161. return false
  162. }
  163. }
  164. function _getPrototypeOf(o) {
  165. _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(o) {
  166. return o.__proto__ || Object.getPrototypeOf(o)
  167. };
  168. return _getPrototypeOf(o)
  169. }
  170. var DX_MENU_CLASS = "dx-menu";
  171. var DX_MENU_NO_ICONS_CLASS = DX_MENU_CLASS + "-no-icons";
  172. var DX_MENU_BASE_CLASS = "dx-menu-base";
  173. var ITEM_CLASS = DX_MENU_CLASS + "-item";
  174. var DX_ITEM_CONTENT_CLASS = ITEM_CLASS + "-content";
  175. var DX_MENU_SELECTED_ITEM_CLASS = ITEM_CLASS + "-selected";
  176. var DX_MENU_ITEM_WRAPPER_CLASS = ITEM_CLASS + "-wrapper";
  177. var DX_MENU_ITEMS_CONTAINER_CLASS = DX_MENU_CLASS + "-items-container";
  178. var DX_MENU_ITEM_EXPANDED_CLASS = ITEM_CLASS + "-expanded";
  179. var DX_MENU_SEPARATOR_CLASS = DX_MENU_CLASS + "-separator";
  180. var DX_MENU_ITEM_LAST_GROUP_ITEM = DX_MENU_CLASS + "-last-group-item";
  181. var DX_ITEM_HAS_TEXT = ITEM_CLASS + "-has-text";
  182. var DX_ITEM_HAS_ICON = ITEM_CLASS + "-has-icon";
  183. var DX_ITEM_HAS_SUBMENU = ITEM_CLASS + "-has-submenu";
  184. var DX_MENU_ITEM_POPOUT_CLASS = ITEM_CLASS + "-popout";
  185. var DX_MENU_ITEM_POPOUT_CONTAINER_CLASS = DX_MENU_ITEM_POPOUT_CLASS + "-container";
  186. var DX_MENU_ITEM_CAPTION_CLASS = ITEM_CLASS + "-text";
  187. var SINGLE_SELECTION_MODE = "single";
  188. var DEFAULT_DELAY = {
  189. show: 50,
  190. hide: 300
  191. };
  192. var MenuBase = function(_HierarchicalCollecti) {
  193. _inherits(MenuBase, _HierarchicalCollecti);
  194. var _super = _createSuper(MenuBase);
  195. function MenuBase() {
  196. _classCallCheck(this, MenuBase);
  197. return _super.apply(this, arguments)
  198. }
  199. _createClass(MenuBase, [{
  200. key: "_getDefaultOptions",
  201. value: function() {
  202. return (0, _extend.extend)(_get(_getPrototypeOf(MenuBase.prototype), "_getDefaultOptions", this).call(this), {
  203. items: [],
  204. cssClass: "",
  205. activeStateEnabled: true,
  206. showSubmenuMode: {
  207. name: "onHover",
  208. delay: {
  209. show: 50,
  210. hide: 300
  211. }
  212. },
  213. animation: {
  214. show: {
  215. type: "fade",
  216. from: 0,
  217. to: 1,
  218. duration: 100
  219. },
  220. hide: {
  221. type: "fade",
  222. from: 1,
  223. to: 0,
  224. duration: 100
  225. }
  226. },
  227. selectByClick: false,
  228. focusOnSelectedItem: false,
  229. keyExpr: null,
  230. _itemAttributes: {
  231. role: "menuitem"
  232. },
  233. useInkRipple: false
  234. })
  235. }
  236. }, {
  237. key: "_itemDataKey",
  238. value: function() {
  239. return "dxMenuItemDataKey"
  240. }
  241. }, {
  242. key: "_itemClass",
  243. value: function() {
  244. return ITEM_CLASS
  245. }
  246. }, {
  247. key: "_setAriaSelected",
  248. value: function() {}
  249. }, {
  250. key: "_selectedItemClass",
  251. value: function() {
  252. return DX_MENU_SELECTED_ITEM_CLASS
  253. }
  254. }, {
  255. key: "_widgetClass",
  256. value: function() {
  257. return DX_MENU_BASE_CLASS
  258. }
  259. }, {
  260. key: "_focusTarget",
  261. value: function() {
  262. return this._itemContainer()
  263. }
  264. }, {
  265. key: "_clean",
  266. value: function() {
  267. this.option("focusedElement", null);
  268. _get(_getPrototypeOf(MenuBase.prototype), "_clean", this).call(this)
  269. }
  270. }, {
  271. key: "_supportedKeys",
  272. value: function() {
  273. var _this = this;
  274. var selectItem = function() {
  275. var $item = (0, _renderer2.default)(_this.option("focusedElement"));
  276. if (!$item.length || !_this._isSelectionEnabled()) {
  277. return
  278. }
  279. _this.selectItem($item[0])
  280. };
  281. return (0, _extend.extend)(_get(_getPrototypeOf(MenuBase.prototype), "_supportedKeys", this).call(this), {
  282. space: selectItem,
  283. pageUp: _common.noop,
  284. pageDown: _common.noop
  285. })
  286. }
  287. }, {
  288. key: "_isSelectionEnabled",
  289. value: function() {
  290. return this.option("selectionMode") === SINGLE_SELECTION_MODE
  291. }
  292. }, {
  293. key: "_init",
  294. value: function() {
  295. this._activeStateUnit = ".".concat(ITEM_CLASS);
  296. _get(_getPrototypeOf(MenuBase.prototype), "_init", this).call(this);
  297. this._renderSelectedItem();
  298. this._initActions()
  299. }
  300. }, {
  301. key: "_getTextContainer",
  302. value: function(itemData) {
  303. var itemText = itemData.text;
  304. var $itemContainer = (0, _renderer2.default)("<span>").addClass(DX_MENU_ITEM_CAPTION_CLASS);
  305. var itemContent = (0, _type.isPlainObject)(itemData) ? itemText : String(itemData);
  306. return itemText && $itemContainer.text(itemContent)
  307. }
  308. }, {
  309. key: "_getPopoutContainer",
  310. value: function(itemData) {
  311. var items = itemData.items;
  312. var $popOutContainer;
  313. if (items && items.length) {
  314. var $popOutImage = (0, _renderer2.default)("<div>").addClass(DX_MENU_ITEM_POPOUT_CLASS);
  315. $popOutContainer = (0, _renderer2.default)("<span>").addClass(DX_MENU_ITEM_POPOUT_CONTAINER_CLASS).append($popOutImage)
  316. }
  317. return $popOutContainer
  318. }
  319. }, {
  320. key: "_getDataAdapterOptions",
  321. value: function() {
  322. return {
  323. rootValue: 0,
  324. multipleSelection: false,
  325. recursiveSelection: false,
  326. recursiveExpansion: false,
  327. searchValue: ""
  328. }
  329. }
  330. }, {
  331. key: "_selectByItem",
  332. value: function(selectedItem) {
  333. if (!selectedItem) {
  334. return
  335. }
  336. var nodeToSelect = this._dataAdapter.getNodeByItem(selectedItem);
  337. this._dataAdapter.toggleSelection(nodeToSelect.internalFields.key, true)
  338. }
  339. }, {
  340. key: "_renderSelectedItem",
  341. value: function() {
  342. var selectedKeys = this._dataAdapter.getSelectedNodesKeys();
  343. var selectedKey = selectedKeys.length && selectedKeys[0];
  344. var selectedItem = this.option("selectedItem");
  345. if (!selectedKey) {
  346. this._selectByItem(selectedItem);
  347. return
  348. }
  349. var node = this._dataAdapter.getNodeByKey(selectedKey);
  350. if (false === node.selectable) {
  351. return
  352. }
  353. if (!selectedItem) {
  354. this.option("selectedItem", node.internalFields.item);
  355. return
  356. }
  357. if (selectedItem !== node.internalFields.item) {
  358. this._dataAdapter.toggleSelection(selectedKey, false);
  359. this._selectByItem(selectedItem)
  360. }
  361. }
  362. }, {
  363. key: "_initActions",
  364. value: function() {}
  365. }, {
  366. key: "_initMarkup",
  367. value: function() {
  368. _get(_getPrototypeOf(MenuBase.prototype), "_initMarkup", this).call(this);
  369. this._addCustomCssClass(this.$element());
  370. this.option("useInkRipple") && this._renderInkRipple()
  371. }
  372. }, {
  373. key: "_renderInkRipple",
  374. value: function() {
  375. this._inkRipple = (0, _utils.render)()
  376. }
  377. }, {
  378. key: "_toggleActiveState",
  379. value: function($element, value, e) {
  380. _get(_getPrototypeOf(MenuBase.prototype), "_toggleActiveState", this).apply(this, arguments);
  381. if (!this._inkRipple) {
  382. return
  383. }
  384. var config = {
  385. element: $element,
  386. event: e
  387. };
  388. if (value) {
  389. this._inkRipple.showWave(config)
  390. } else {
  391. this._inkRipple.hideWave(config)
  392. }
  393. }
  394. }, {
  395. key: "_getShowSubmenuMode",
  396. value: function() {
  397. var defaultValue = "onClick";
  398. var optionValue = this.option("showSubmenuMode");
  399. optionValue = (0, _type.isObject)(optionValue) ? optionValue.name : optionValue;
  400. return this._isDesktopDevice() ? optionValue : defaultValue
  401. }
  402. }, {
  403. key: "_initSelectedItems",
  404. value: function() {}
  405. }, {
  406. key: "_isDesktopDevice",
  407. value: function() {
  408. return "desktop" === _devices2.default.real().deviceType
  409. }
  410. }, {
  411. key: "_initEditStrategy",
  412. value: function() {
  413. var Strategy = _uiMenu_baseEdit2.default;
  414. this._editStrategy = new Strategy(this)
  415. }
  416. }, {
  417. key: "_addCustomCssClass",
  418. value: function($element) {
  419. $element.addClass(this.option("cssClass"))
  420. }
  421. }, {
  422. key: "_itemWrapperSelector",
  423. value: function() {
  424. return ".".concat(DX_MENU_ITEM_WRAPPER_CLASS)
  425. }
  426. }, {
  427. key: "_hoverStartHandler",
  428. value: function(e) {
  429. var $itemElement = this._getItemElementByEventArgs(e);
  430. if (!$itemElement || this._isItemDisabled($itemElement)) {
  431. return
  432. }
  433. e.stopPropagation();
  434. if ("onHover" === this._getShowSubmenuMode()) {
  435. clearTimeout(this._showSubmenusTimeout);
  436. this._showSubmenusTimeout = setTimeout(this._showSubmenu.bind(this, $itemElement), this._getSubmenuDelay("show"))
  437. }
  438. }
  439. }, {
  440. key: "_getAvailableItems",
  441. value: function($itemElements) {
  442. return _get(_getPrototypeOf(MenuBase.prototype), "_getAvailableItems", this).call(this, $itemElements).filter(function() {
  443. return "hidden" !== (0, _renderer2.default)(this).css("visibility")
  444. })
  445. }
  446. }, {
  447. key: "_isItemDisabled",
  448. value: function($item) {
  449. return this._disabledGetter($item.data(this._itemDataKey()))
  450. }
  451. }, {
  452. key: "_showSubmenu",
  453. value: function($itemElement) {
  454. this._addExpandedClass($itemElement)
  455. }
  456. }, {
  457. key: "_addExpandedClass",
  458. value: function(itemElement) {
  459. (0, _renderer2.default)(itemElement).addClass(DX_MENU_ITEM_EXPANDED_CLASS)
  460. }
  461. }, {
  462. key: "_getSubmenuDelay",
  463. value: function(action) {
  464. var _this$option = this.option("showSubmenuMode"),
  465. delay = _this$option.delay;
  466. if (!(0, _type.isDefined)(delay)) {
  467. return DEFAULT_DELAY[action]
  468. }
  469. return (0, _type.isObject)(delay) ? delay[action] : delay
  470. }
  471. }, {
  472. key: "_getItemElementByEventArgs",
  473. value: function(eventArgs) {
  474. var $target = (0, _renderer2.default)(eventArgs.target);
  475. if ($target.hasClass(this._itemClass()) || $target.get(0) === eventArgs.currentTarget) {
  476. return $target
  477. }
  478. while (!$target.hasClass(this._itemClass())) {
  479. $target = $target.parent();
  480. if ($target.hasClass("dx-submenu")) {
  481. return null
  482. }
  483. }
  484. return $target
  485. }
  486. }, {
  487. key: "_hoverEndHandler",
  488. value: function() {
  489. clearTimeout(this._showSubmenusTimeout)
  490. }
  491. }, {
  492. key: "_hasSubmenu",
  493. value: function(node) {
  494. return node.internalFields.childrenKeys.length
  495. }
  496. }, {
  497. key: "_renderContentImpl",
  498. value: function() {
  499. this._renderItems(this._dataAdapter.getRootNodes())
  500. }
  501. }, {
  502. key: "_renderItems",
  503. value: function(nodes, submenuContainer) {
  504. var _this2 = this;
  505. if (nodes.length) {
  506. this.hasIcons = false;
  507. var $nodeContainer = this._renderContainer(this.$element(), submenuContainer);
  508. var firstVisibleIndex = -1;
  509. var nextGroupFirstIndex = -1;
  510. (0, _iterator.each)(nodes, function(index, node) {
  511. var isVisibleNode = false !== node.visible;
  512. if (isVisibleNode && firstVisibleIndex < 0) {
  513. firstVisibleIndex = index
  514. }
  515. var isBeginGroup = firstVisibleIndex < index && (node.beginGroup || index === nextGroupFirstIndex);
  516. if (isBeginGroup) {
  517. nextGroupFirstIndex = isVisibleNode ? index : index + 1
  518. }
  519. if (index === nextGroupFirstIndex && firstVisibleIndex < index) {
  520. _this2._renderSeparator($nodeContainer)
  521. }
  522. _this2._renderItem(index, node, $nodeContainer)
  523. });
  524. if (!this.hasIcons) {
  525. $nodeContainer.addClass(DX_MENU_NO_ICONS_CLASS)
  526. }
  527. }
  528. }
  529. }, {
  530. key: "_renderContainer",
  531. value: function($wrapper) {
  532. return (0, _renderer2.default)("<ul>").appendTo($wrapper).addClass(DX_MENU_ITEMS_CONTAINER_CLASS)
  533. }
  534. }, {
  535. key: "_createDOMElement",
  536. value: function($nodeContainer) {
  537. var $node = (0, _renderer2.default)("<li>").appendTo($nodeContainer).addClass(DX_MENU_ITEM_WRAPPER_CLASS);
  538. return $node
  539. }
  540. }, {
  541. key: "_renderItem",
  542. value: function(index, node, $nodeContainer, $nodeElement) {
  543. var items = this.option("items");
  544. if (false === node.internalFields.item.visible) {
  545. return
  546. }
  547. var $node = $nodeElement || this._createDOMElement($nodeContainer);
  548. if (items[index + 1] && items[index + 1].beginGroup) {
  549. $node.addClass(DX_MENU_ITEM_LAST_GROUP_ITEM)
  550. }
  551. var $itemFrame = _get(_getPrototypeOf(MenuBase.prototype), "_renderItem", this).call(this, index, node.internalFields.item, $node);
  552. if (node.internalFields.item === this.option("selectedItem")) {
  553. $itemFrame.addClass(DX_MENU_SELECTED_ITEM_CLASS)
  554. }
  555. $itemFrame.attr("tabIndex", -1);
  556. if (this._hasSubmenu(node)) {
  557. this.setAria("haspopup", "true", $itemFrame)
  558. }
  559. }
  560. }, {
  561. key: "_renderItemFrame",
  562. value: function(index, itemData, $itemContainer) {
  563. var $itemFrame = $itemContainer.children(".".concat(ITEM_CLASS));
  564. return $itemFrame.length ? $itemFrame : _get(_getPrototypeOf(MenuBase.prototype), "_renderItemFrame", this).apply(this, arguments)
  565. }
  566. }, {
  567. key: "_refreshItem",
  568. value: function($item, item) {
  569. var node = this._dataAdapter.getNodeByItem(item);
  570. var index = $item.data(this._itemIndexKey());
  571. var $nodeContainer = $item.closest("ul");
  572. var $nodeElement = $item.closest("li");
  573. this._renderItem(index, node, $nodeContainer, $nodeElement)
  574. }
  575. }, {
  576. key: "_addContentClasses",
  577. value: function(itemData, $itemFrame) {
  578. var hasText = itemData.text ? !!itemData.text.length : false;
  579. var hasIcon = !!itemData.icon;
  580. var hasSubmenu = itemData.items ? !!itemData.items.length : false;
  581. $itemFrame.toggleClass(DX_ITEM_HAS_TEXT, hasText);
  582. $itemFrame.toggleClass(DX_ITEM_HAS_ICON, hasIcon);
  583. if (!this.hasIcons) {
  584. this.hasIcons = hasIcon
  585. }
  586. $itemFrame.toggleClass(DX_ITEM_HAS_SUBMENU, hasSubmenu)
  587. }
  588. }, {
  589. key: "_getItemContent",
  590. value: function($itemFrame) {
  591. var $itemContent = _get(_getPrototypeOf(MenuBase.prototype), "_getItemContent", this).call(this, $itemFrame);
  592. if (!$itemContent.length) {
  593. $itemContent = $itemFrame.children(".".concat(DX_ITEM_CONTENT_CLASS))
  594. }
  595. return $itemContent
  596. }
  597. }, {
  598. key: "_postprocessRenderItem",
  599. value: function(args) {
  600. var $itemElement = (0, _renderer2.default)(args.itemElement);
  601. var selectedIndex = this._dataAdapter.getSelectedNodesKeys();
  602. if (!selectedIndex.length || !this._selectedGetter(args.itemData) || !this._isItemSelectable(args.itemData)) {
  603. this._setAriaSelected($itemElement, "false");
  604. return
  605. }
  606. var node = this._dataAdapter.getNodeByItem(args.itemData);
  607. if (node.internalFields.key === selectedIndex[0]) {
  608. $itemElement.addClass(this._selectedItemClass());
  609. this._setAriaSelected($itemElement, "true")
  610. } else {
  611. this._setAriaSelected($itemElement, "false")
  612. }
  613. }
  614. }, {
  615. key: "_isItemSelectable",
  616. value: function(item) {
  617. return false !== item.selectable
  618. }
  619. }, {
  620. key: "_renderSeparator",
  621. value: function($itemsContainer) {
  622. (0, _renderer2.default)("<li>").appendTo($itemsContainer).addClass(DX_MENU_SEPARATOR_CLASS)
  623. }
  624. }, {
  625. key: "_itemClickHandler",
  626. value: function(e) {
  627. if (e._skipHandling) {
  628. return
  629. }
  630. var itemClickActionHandler = this._createAction(this._updateSubmenuVisibilityOnClick.bind(this));
  631. this._itemDXEventHandler(e, "onItemClick", {}, {
  632. afterExecute: itemClickActionHandler.bind(this)
  633. });
  634. e._skipHandling = true
  635. }
  636. }, {
  637. key: "_updateSubmenuVisibilityOnClick",
  638. value: function(actionArgs) {
  639. this._updateSelectedItemOnClick(actionArgs);
  640. if ("onClick" === this._getShowSubmenuMode()) {
  641. this._addExpandedClass(actionArgs.args[0].itemElement)
  642. }
  643. }
  644. }, {
  645. key: "_updateSelectedItemOnClick",
  646. value: function(actionArgs) {
  647. var args = actionArgs.args ? actionArgs.args[0] : actionArgs;
  648. if (!this._isItemSelectionAllowed(args.itemData)) {
  649. return
  650. }
  651. var selectedItemKey = this._dataAdapter.getSelectedNodesKeys();
  652. var selectedNode = selectedItemKey.length && this._dataAdapter.getNodeByKey(selectedItemKey[0]);
  653. if (selectedNode) {
  654. this._toggleItemSelection(selectedNode, false)
  655. }
  656. if (!selectedNode || selectedNode.internalFields.item !== args.itemData) {
  657. this.selectItem(args.itemData)
  658. } else {
  659. this._fireSelectionChangeEvent(null, this.option("selectedItem"));
  660. this._setOptionSilent("selectedItem", null)
  661. }
  662. }
  663. }, {
  664. key: "_isItemSelectionAllowed",
  665. value: function(item) {
  666. var isSelectionByClickEnabled = this._isSelectionEnabled() && this.option("selectByClick");
  667. return !this._isContainerEmpty() && isSelectionByClickEnabled && this._isItemSelectable(item) && !this._itemsGetter(item)
  668. }
  669. }, {
  670. key: "_isContainerEmpty",
  671. value: function() {
  672. return this._itemContainer().is(":empty")
  673. }
  674. }, {
  675. key: "_syncSelectionOptions",
  676. value: function() {
  677. return (0, _common.asyncNoop)()
  678. }
  679. }, {
  680. key: "_optionChanged",
  681. value: function(args) {
  682. switch (args.name) {
  683. case "showSubmenuMode":
  684. break;
  685. case "selectedItem":
  686. var node = this._dataAdapter.getNodeByItem(args.value);
  687. var selectedKey = this._dataAdapter.getSelectedNodesKeys()[0];
  688. if (node && node.internalFields.key !== selectedKey) {
  689. if (false === node.selectable) {
  690. break
  691. }
  692. if (selectedKey) {
  693. this._toggleItemSelection(this._dataAdapter.getNodeByKey(selectedKey), false)
  694. }
  695. this._toggleItemSelection(node, true);
  696. this._updateSelectedItems()
  697. }
  698. break;
  699. case "cssClass":
  700. case "position":
  701. case "selectByClick":
  702. case "animation":
  703. case "useInkRipple":
  704. this._invalidate();
  705. break;
  706. default:
  707. _get(_getPrototypeOf(MenuBase.prototype), "_optionChanged", this).call(this, args)
  708. }
  709. }
  710. }, {
  711. key: "_toggleItemSelection",
  712. value: function(node, value) {
  713. var itemElement = this._getElementByItem(node.internalFields.item);
  714. itemElement && (0, _renderer2.default)(itemElement).toggleClass(DX_MENU_SELECTED_ITEM_CLASS);
  715. this._dataAdapter.toggleSelection(node.internalFields.key, value)
  716. }
  717. }, {
  718. key: "_getElementByItem",
  719. value: function(itemData) {
  720. var _this3 = this;
  721. var result;
  722. (0, _iterator.each)(this._itemElements(), function(_, itemElement) {
  723. if ((0, _renderer2.default)(itemElement).data(_this3._itemDataKey()) !== itemData) {
  724. return true
  725. }
  726. result = itemElement;
  727. return false
  728. });
  729. return result
  730. }
  731. }, {
  732. key: "_updateSelectedItems",
  733. value: function(oldSelection, newSelection) {
  734. if (oldSelection || newSelection) {
  735. this._fireSelectionChangeEvent(newSelection, oldSelection)
  736. }
  737. }
  738. }, {
  739. key: "_fireSelectionChangeEvent",
  740. value: function(addedSelection, removedSelection) {
  741. this._createActionByOption("onSelectionChanged", {
  742. excludeValidators: ["disabled", "readOnly"]
  743. })({
  744. addedItems: [addedSelection],
  745. removedItems: [removedSelection]
  746. })
  747. }
  748. }, {
  749. key: "selectItem",
  750. value: function(itemElement) {
  751. var itemData = itemElement.nodeType ? this._getItemData(itemElement) : itemElement;
  752. var selectedKey = this._dataAdapter.getSelectedNodesKeys()[0];
  753. var selectedItem = this.option("selectedItem");
  754. var node = this._dataAdapter.getNodeByItem(itemData);
  755. if (node.internalFields.key !== selectedKey) {
  756. if (selectedKey) {
  757. this._toggleItemSelection(this._dataAdapter.getNodeByKey(selectedKey), false)
  758. }
  759. this._toggleItemSelection(node, true);
  760. this._updateSelectedItems(selectedItem, itemData);
  761. this._setOptionSilent("selectedItem", itemData)
  762. }
  763. }
  764. }, {
  765. key: "unselectItem",
  766. value: function(itemElement) {
  767. var itemData = itemElement.nodeType ? this._getItemData(itemElement) : itemElement;
  768. var node = this._dataAdapter.getNodeByItem(itemData);
  769. var selectedItem = this.option("selectedItem");
  770. if (node.internalFields.selected) {
  771. this._toggleItemSelection(node, false);
  772. this._updateSelectedItems(selectedItem, null);
  773. this._setOptionSilent("selectedItem", null)
  774. }
  775. }
  776. }]);
  777. return MenuBase
  778. }(_ui2.default);
  779. MenuBase.ItemClass = _item2.default;
  780. module.exports = MenuBase;