component.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. /**
  2. * @license
  3. * Copyright 2018 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import { __extends } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { closest } from '@material/dom/ponyfill';
  26. import { MDCList } from '@material/list/component';
  27. import { numbers as listConstants } from '@material/list/constants';
  28. import { MDCListFoundation } from '@material/list/foundation';
  29. import { MDCMenuSurface } from '@material/menu-surface/component';
  30. import { MDCMenuSurfaceFoundation } from '@material/menu-surface/foundation';
  31. import { cssClasses, strings } from './constants';
  32. import { MDCMenuFoundation } from './foundation';
  33. /** MDC Menu */
  34. var MDCMenu = /** @class */ (function (_super) {
  35. __extends(MDCMenu, _super);
  36. function MDCMenu() {
  37. return _super !== null && _super.apply(this, arguments) || this;
  38. }
  39. MDCMenu.attachTo = function (root) {
  40. return new MDCMenu(root);
  41. };
  42. MDCMenu.prototype.initialize = function (menuSurfaceFactory, listFactory) {
  43. if (menuSurfaceFactory === void 0) { menuSurfaceFactory = function (el) { return new MDCMenuSurface(el); }; }
  44. if (listFactory === void 0) { listFactory = function (el) { return new MDCList(el); }; }
  45. this.menuSurfaceFactory = menuSurfaceFactory;
  46. this.listFactory = listFactory;
  47. };
  48. MDCMenu.prototype.initialSyncWithDOM = function () {
  49. var _this = this;
  50. this.menuSurface = this.menuSurfaceFactory(this.root);
  51. var list = this.root.querySelector(strings.LIST_SELECTOR);
  52. if (list) {
  53. this.list = this.listFactory(list);
  54. this.list.wrapFocus = true;
  55. }
  56. else {
  57. this.list = null;
  58. }
  59. this.handleKeydown = function (evt) {
  60. _this.foundation.handleKeydown(evt);
  61. };
  62. this.handleItemAction = function (evt) {
  63. _this.foundation.handleItemAction(_this.items[evt.detail.index]);
  64. };
  65. this.handleMenuSurfaceOpened = function () {
  66. _this.foundation.handleMenuSurfaceOpened();
  67. };
  68. this.menuSurface.listen(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
  69. this.listen('keydown', this.handleKeydown);
  70. this.listen(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
  71. };
  72. MDCMenu.prototype.destroy = function () {
  73. if (this.list) {
  74. this.list.destroy();
  75. }
  76. this.menuSurface.destroy();
  77. this.menuSurface.unlisten(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened);
  78. this.unlisten('keydown', this.handleKeydown);
  79. this.unlisten(MDCListFoundation.strings.ACTION_EVENT, this.handleItemAction);
  80. _super.prototype.destroy.call(this);
  81. };
  82. Object.defineProperty(MDCMenu.prototype, "open", {
  83. get: function () {
  84. return this.menuSurface.isOpen();
  85. },
  86. set: function (value) {
  87. if (value) {
  88. this.menuSurface.open();
  89. }
  90. else {
  91. this.menuSurface.close();
  92. }
  93. },
  94. enumerable: false,
  95. configurable: true
  96. });
  97. Object.defineProperty(MDCMenu.prototype, "wrapFocus", {
  98. get: function () {
  99. return this.list ? this.list.wrapFocus : false;
  100. },
  101. set: function (value) {
  102. if (this.list) {
  103. this.list.wrapFocus = value;
  104. }
  105. },
  106. enumerable: false,
  107. configurable: true
  108. });
  109. Object.defineProperty(MDCMenu.prototype, "hasTypeahead", {
  110. /**
  111. * Sets whether the menu has typeahead functionality.
  112. * @param value Whether typeahead is enabled.
  113. */
  114. set: function (value) {
  115. if (this.list) {
  116. this.list.hasTypeahead = value;
  117. }
  118. },
  119. enumerable: false,
  120. configurable: true
  121. });
  122. Object.defineProperty(MDCMenu.prototype, "typeaheadInProgress", {
  123. /**
  124. * @return Whether typeahead logic is currently matching some user prefix.
  125. */
  126. get: function () {
  127. return this.list ? this.list.typeaheadInProgress : false;
  128. },
  129. enumerable: false,
  130. configurable: true
  131. });
  132. /**
  133. * Given the next desired character from the user, adds it to the typeahead
  134. * buffer. Then, attempts to find the next option matching the buffer. Wraps
  135. * around if at the end of options.
  136. *
  137. * @param nextChar The next character to add to the prefix buffer.
  138. * @param startingIndex The index from which to start matching. Only relevant
  139. * when starting a new match sequence. To start a new match sequence,
  140. * clear the buffer using `clearTypeaheadBuffer`, or wait for the buffer
  141. * to clear after a set interval defined in list foundation. Defaults to
  142. * the currently focused index.
  143. * @return The index of the matched item, or -1 if no match.
  144. */
  145. MDCMenu.prototype.typeaheadMatchItem = function (nextChar, startingIndex) {
  146. if (this.list) {
  147. return this.list.typeaheadMatchItem(nextChar, startingIndex);
  148. }
  149. return -1;
  150. };
  151. /**
  152. * Layout the underlying list element in the case of any dynamic updates
  153. * to its structure.
  154. */
  155. MDCMenu.prototype.layout = function () {
  156. if (this.list) {
  157. this.list.layout();
  158. }
  159. };
  160. Object.defineProperty(MDCMenu.prototype, "items", {
  161. /**
  162. * Return the items within the menu. Note that this only contains the set of
  163. * elements within the items container that are proper list items, and not
  164. * supplemental / presentational DOM elements.
  165. */
  166. get: function () {
  167. return this.list ? this.list.listElements : [];
  168. },
  169. enumerable: false,
  170. configurable: true
  171. });
  172. Object.defineProperty(MDCMenu.prototype, "singleSelection", {
  173. /**
  174. * Turns on/off the underlying list's single selection mode. Used mainly
  175. * by select menu.
  176. *
  177. * @param singleSelection Whether to enable single selection mode.
  178. */
  179. set: function (singleSelection) {
  180. if (this.list) {
  181. this.list.singleSelection = singleSelection;
  182. }
  183. },
  184. enumerable: false,
  185. configurable: true
  186. });
  187. Object.defineProperty(MDCMenu.prototype, "selectedIndex", {
  188. /**
  189. * Retrieves the selected index. Only applicable to select menus.
  190. * @return The selected index, which is a number for single selection and
  191. * radio lists, and an array of numbers for checkbox lists.
  192. */
  193. get: function () {
  194. return this.list ? this.list.selectedIndex : listConstants.UNSET_INDEX;
  195. },
  196. /**
  197. * Sets the selected index of the list. Only applicable to select menus.
  198. * @param index The selected index, which is a number for single selection and
  199. * radio lists, and an array of numbers for checkbox lists.
  200. */
  201. set: function (index) {
  202. if (this.list) {
  203. this.list.selectedIndex = index;
  204. }
  205. },
  206. enumerable: false,
  207. configurable: true
  208. });
  209. Object.defineProperty(MDCMenu.prototype, "quickOpen", {
  210. set: function (quickOpen) {
  211. this.menuSurface.quickOpen = quickOpen;
  212. },
  213. enumerable: false,
  214. configurable: true
  215. });
  216. /**
  217. * Sets default focus state where the menu should focus every time when menu
  218. * is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by
  219. * default.
  220. * @param focusState Default focus state.
  221. */
  222. MDCMenu.prototype.setDefaultFocusState = function (focusState) {
  223. this.foundation.setDefaultFocusState(focusState);
  224. };
  225. /**
  226. * @param corner Default anchor corner alignment of top-left menu corner.
  227. */
  228. MDCMenu.prototype.setAnchorCorner = function (corner) {
  229. this.menuSurface.setAnchorCorner(corner);
  230. };
  231. MDCMenu.prototype.setAnchorMargin = function (margin) {
  232. this.menuSurface.setAnchorMargin(margin);
  233. };
  234. /**
  235. * Sets the list item as the selected row at the specified index.
  236. * @param index Index of list item within menu.
  237. */
  238. MDCMenu.prototype.setSelectedIndex = function (index) {
  239. this.foundation.setSelectedIndex(index);
  240. };
  241. /**
  242. * Sets the enabled state to isEnabled for the menu item at the given index.
  243. * @param index Index of the menu item
  244. * @param isEnabled The desired enabled state of the menu item.
  245. */
  246. MDCMenu.prototype.setEnabled = function (index, isEnabled) {
  247. this.foundation.setEnabled(index, isEnabled);
  248. };
  249. /**
  250. * @return The item within the menu at the index specified.
  251. */
  252. MDCMenu.prototype.getOptionByIndex = function (index) {
  253. var items = this.items;
  254. if (index < items.length) {
  255. return this.items[index];
  256. }
  257. else {
  258. return null;
  259. }
  260. };
  261. /**
  262. * @param index A menu item's index.
  263. * @return The primary text within the menu at the index specified.
  264. */
  265. MDCMenu.prototype.getPrimaryTextAtIndex = function (index) {
  266. var item = this.getOptionByIndex(index);
  267. if (item && this.list) {
  268. return this.list.getPrimaryText(item) || '';
  269. }
  270. return '';
  271. };
  272. MDCMenu.prototype.setFixedPosition = function (isFixed) {
  273. this.menuSurface.setFixedPosition(isFixed);
  274. };
  275. MDCMenu.prototype.setIsHoisted = function (isHoisted) {
  276. this.menuSurface.setIsHoisted(isHoisted);
  277. };
  278. MDCMenu.prototype.setAbsolutePosition = function (x, y) {
  279. this.menuSurface.setAbsolutePosition(x, y);
  280. };
  281. /**
  282. * Sets the element that the menu-surface is anchored to.
  283. */
  284. MDCMenu.prototype.setAnchorElement = function (element) {
  285. this.menuSurface.anchorElement = element;
  286. };
  287. MDCMenu.prototype.getDefaultFoundation = function () {
  288. var _this = this;
  289. // DO NOT INLINE this variable. For backward compatibility, foundations take
  290. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  291. // methods, we need a separate, strongly typed adapter variable.
  292. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  293. var adapter = {
  294. addClassToElementAtIndex: function (index, className) {
  295. var list = _this.items;
  296. list[index].classList.add(className);
  297. },
  298. removeClassFromElementAtIndex: function (index, className) {
  299. var list = _this.items;
  300. list[index].classList.remove(className);
  301. },
  302. addAttributeToElementAtIndex: function (index, attr, value) {
  303. var list = _this.items;
  304. _this.safeSetAttribute(list[index], attr, value);
  305. },
  306. removeAttributeFromElementAtIndex: function (index, attr) {
  307. var list = _this.items;
  308. list[index].removeAttribute(attr);
  309. },
  310. getAttributeFromElementAtIndex: function (index, attr) {
  311. var list = _this.items;
  312. return list[index].getAttribute(attr);
  313. },
  314. elementContainsClass: function (element, className) {
  315. return element.classList.contains(className);
  316. },
  317. closeSurface: function (skipRestoreFocus) {
  318. _this.menuSurface.close(skipRestoreFocus);
  319. },
  320. getElementIndex: function (element) { return _this.items.indexOf(element); },
  321. notifySelected: function (evtData) {
  322. _this.emit(strings.SELECTED_EVENT, {
  323. index: evtData.index,
  324. item: _this.items[evtData.index],
  325. });
  326. },
  327. getMenuItemCount: function () { return _this.items.length; },
  328. focusItemAtIndex: function (index) {
  329. _this.items[index].focus();
  330. },
  331. focusListRoot: function () {
  332. _this.root.querySelector(strings.LIST_SELECTOR).focus();
  333. },
  334. isSelectableItemAtIndex: function (index) {
  335. return !!closest(_this.items[index], "." + cssClasses.MENU_SELECTION_GROUP);
  336. },
  337. getSelectedSiblingOfItemAtIndex: function (index) {
  338. var selectionGroupEl = closest(_this.items[index], "." + cssClasses.MENU_SELECTION_GROUP);
  339. var selectedItemEl = selectionGroupEl.querySelector("." + cssClasses.MENU_SELECTED_LIST_ITEM);
  340. return selectedItemEl ? _this.items.indexOf(selectedItemEl) : -1;
  341. },
  342. };
  343. // tslint:enable:object-literal-sort-keys
  344. return new MDCMenuFoundation(adapter);
  345. };
  346. return MDCMenu;
  347. }(MDCComponent));
  348. export { MDCMenu };
  349. //# sourceMappingURL=component.js.map