contextMenu.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
  2. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  3. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  5. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  6. import BasePlugin from './../_base';
  7. import Hooks from './../../pluginHooks';
  8. import { arrayEach } from './../../helpers/array';
  9. import CommandExecutor from './commandExecutor';
  10. import EventManager from './../../eventManager';
  11. import ItemsFactory from './itemsFactory';
  12. import Menu from './menu';
  13. import { registerPlugin } from './../../plugins';
  14. import { stopPropagation, pageX, pageY } from './../../helpers/dom/event';
  15. import { getWindowScrollLeft, getWindowScrollTop, hasClass } from './../../helpers/dom/element';
  16. import { ROW_ABOVE, ROW_BELOW, COLUMN_LEFT, COLUMN_RIGHT, REMOVE_ROW, REMOVE_COLUMN, UNDO, REDO, READ_ONLY, ALIGNMENT, SEPARATOR } from './predefinedItems';
  17. Hooks.getSingleton().register('afterContextMenuDefaultOptions');
  18. Hooks.getSingleton().register('afterContextMenuShow');
  19. Hooks.getSingleton().register('afterContextMenuHide');
  20. Hooks.getSingleton().register('afterContextMenuExecute');
  21. /**
  22. * @description
  23. * This plugin creates the Handsontable Context Menu. It allows to create a new row or
  24. * column at any place in the grid among [other features](http://docs.handsontable.com/demo-context-menu.html).
  25. * Possible values:
  26. * * `true` (to enable default options),
  27. * * `false` (to disable completely)
  28. *
  29. * or array of any available strings:
  30. * * `["row_above", "row_below", "col_left", "col_right",
  31. * "remove_row", "remove_col", "---------", "undo", "redo"]`.
  32. *
  33. * See [the context menu demo](http://docs.handsontable.com/demo-context-menu.html) for examples.
  34. *
  35. * @example
  36. * ```js
  37. * ...
  38. * // as a boolean
  39. * contextMenu: true
  40. * ...
  41. * // as a array
  42. * contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo']
  43. * ...
  44. * ```
  45. *
  46. * @plugin ContextMenu
  47. */
  48. var ContextMenu = function (_BasePlugin) {
  49. _inherits(ContextMenu, _BasePlugin);
  50. _createClass(ContextMenu, null, [{
  51. key: 'DEFAULT_ITEMS',
  52. /**
  53. * Default menu items order when `contextMenu` is enabled by `true`.
  54. *
  55. * @returns {Array}
  56. */
  57. get: function get() {
  58. return [ROW_ABOVE, ROW_BELOW, SEPARATOR, COLUMN_LEFT, COLUMN_RIGHT, SEPARATOR, REMOVE_ROW, REMOVE_COLUMN, SEPARATOR, UNDO, REDO, SEPARATOR, READ_ONLY, SEPARATOR, ALIGNMENT];
  59. }
  60. }]);
  61. function ContextMenu(hotInstance) {
  62. _classCallCheck(this, ContextMenu);
  63. /**
  64. * Instance of {@link EventManager}.
  65. *
  66. * @type {EventManager}
  67. */
  68. var _this = _possibleConstructorReturn(this, (ContextMenu.__proto__ || Object.getPrototypeOf(ContextMenu)).call(this, hotInstance));
  69. _this.eventManager = new EventManager(_this);
  70. /**
  71. * Instance of {@link CommandExecutor}.
  72. *
  73. * @type {CommandExecutor}
  74. */
  75. _this.commandExecutor = new CommandExecutor(_this.hot);
  76. /**
  77. * Instance of {@link ItemsFactory}.
  78. *
  79. * @type {ItemsFactory}
  80. */
  81. _this.itemsFactory = null;
  82. /**
  83. * Instance of {@link Menu}.
  84. *
  85. * @type {Menu}
  86. */
  87. _this.menu = null;
  88. return _this;
  89. }
  90. /**
  91. * Check if the plugin is enabled in the Handsontable settings.
  92. *
  93. * @returns {Boolean}
  94. */
  95. _createClass(ContextMenu, [{
  96. key: 'isEnabled',
  97. value: function isEnabled() {
  98. return this.hot.getSettings().contextMenu;
  99. }
  100. /**
  101. * Enable plugin for this Handsontable instance.
  102. */
  103. }, {
  104. key: 'enablePlugin',
  105. value: function enablePlugin() {
  106. var _this2 = this;
  107. if (this.enabled) {
  108. return;
  109. }
  110. this.itemsFactory = new ItemsFactory(this.hot, ContextMenu.DEFAULT_ITEMS);
  111. var settings = this.hot.getSettings().contextMenu;
  112. var predefinedItems = {
  113. items: this.itemsFactory.getItems(settings)
  114. };
  115. this.registerEvents();
  116. if (typeof settings.callback === 'function') {
  117. this.commandExecutor.setCommonCallback(settings.callback);
  118. }
  119. _get(ContextMenu.prototype.__proto__ || Object.getPrototypeOf(ContextMenu.prototype), 'enablePlugin', this).call(this);
  120. this.callOnPluginsReady(function () {
  121. _this2.hot.runHooks('afterContextMenuDefaultOptions', predefinedItems);
  122. _this2.itemsFactory.setPredefinedItems(predefinedItems.items);
  123. var menuItems = _this2.itemsFactory.getItems(settings);
  124. _this2.menu = new Menu(_this2.hot, {
  125. className: 'htContextMenu',
  126. keepInViewport: true
  127. });
  128. _this2.hot.runHooks('beforeContextMenuSetItems', menuItems);
  129. _this2.menu.setMenuItems(menuItems);
  130. _this2.menu.addLocalHook('afterOpen', function () {
  131. return _this2.onMenuAfterOpen();
  132. });
  133. _this2.menu.addLocalHook('afterClose', function () {
  134. return _this2.onMenuAfterClose();
  135. });
  136. _this2.menu.addLocalHook('executeCommand', function () {
  137. for (var _len = arguments.length, params = Array(_len), _key = 0; _key < _len; _key++) {
  138. params[_key] = arguments[_key];
  139. }
  140. return _this2.executeCommand.apply(_this2, params);
  141. });
  142. // Register all commands. Predefined and added by user or by plugins
  143. arrayEach(menuItems, function (command) {
  144. return _this2.commandExecutor.registerCommand(command.key, command);
  145. });
  146. });
  147. }
  148. /**
  149. * Updates the plugin to use the latest options you have specified.
  150. */
  151. }, {
  152. key: 'updatePlugin',
  153. value: function updatePlugin() {
  154. this.disablePlugin();
  155. this.enablePlugin();
  156. _get(ContextMenu.prototype.__proto__ || Object.getPrototypeOf(ContextMenu.prototype), 'updatePlugin', this).call(this);
  157. }
  158. /**
  159. * Disable plugin for this Handsontable instance.
  160. */
  161. }, {
  162. key: 'disablePlugin',
  163. value: function disablePlugin() {
  164. this.close();
  165. if (this.menu) {
  166. this.menu.destroy();
  167. this.menu = null;
  168. }
  169. _get(ContextMenu.prototype.__proto__ || Object.getPrototypeOf(ContextMenu.prototype), 'disablePlugin', this).call(this);
  170. }
  171. /**
  172. * Register dom listeners.
  173. *
  174. * @private
  175. */
  176. }, {
  177. key: 'registerEvents',
  178. value: function registerEvents() {
  179. var _this3 = this;
  180. this.eventManager.addEventListener(this.hot.rootElement, 'contextmenu', function (event) {
  181. return _this3.onContextMenu(event);
  182. });
  183. }
  184. /**
  185. * Open menu and re-position it based on dom event object.
  186. *
  187. * @param {Event} event The event object.
  188. */
  189. }, {
  190. key: 'open',
  191. value: function open(event) {
  192. if (!this.menu) {
  193. return;
  194. }
  195. this.menu.open();
  196. this.menu.setPosition({
  197. top: parseInt(pageY(event), 10) - getWindowScrollTop(),
  198. left: parseInt(pageX(event), 10) - getWindowScrollLeft()
  199. });
  200. // ContextMenu is not detected HotTableEnv correctly because is injected outside hot-table
  201. this.menu.hotMenu.isHotTableEnv = this.hot.isHotTableEnv;
  202. // Handsontable.eventManager.isHotTableEnv = this.hot.isHotTableEnv;
  203. }
  204. /**
  205. * Close menu.
  206. */
  207. }, {
  208. key: 'close',
  209. value: function close() {
  210. if (!this.menu) {
  211. return;
  212. }
  213. this.menu.close();
  214. }
  215. /**
  216. * Execute context menu command.
  217. *
  218. * You can execute all predefined commands:
  219. * * `'row_above'` - Insert row above
  220. * * `'row_below'` - Insert row below
  221. * * `'col_left'` - Insert column on the left
  222. * * `'col_right'` - Insert column on the right
  223. * * `'clear_column'` - Clear selected column
  224. * * `'remove_row'` - Remove row
  225. * * `'remove_col'` - Remove column
  226. * * `'undo'` - Undo last action
  227. * * `'redo'` - Redo last action
  228. * * `'make_read_only'` - Make cell read only
  229. * * `'alignment:left'` - Alignment to the left
  230. * * `'alignment:top'` - Alignment to the top
  231. * * `'alignment:right'` - Alignment to the right
  232. * * `'alignment:bottom'` - Alignment to the bottom
  233. * * `'alignment:middle'` - Alignment to the middle
  234. * * `'alignment:center'` - Alignment to the center (justify)
  235. *
  236. * Or you can execute command registered in settings where `key` is your command name.
  237. *
  238. * @param {String} commandName
  239. * @param {*} params
  240. */
  241. }, {
  242. key: 'executeCommand',
  243. value: function executeCommand() {
  244. for (var _len2 = arguments.length, params = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  245. params[_key2] = arguments[_key2];
  246. }
  247. this.commandExecutor.execute.apply(this.commandExecutor, params);
  248. }
  249. /**
  250. * On context menu listener.
  251. *
  252. * @private
  253. * @param {Event} event
  254. */
  255. }, {
  256. key: 'onContextMenu',
  257. value: function onContextMenu(event) {
  258. var settings = this.hot.getSettings();
  259. var showRowHeaders = settings.rowHeaders;
  260. var showColHeaders = settings.colHeaders;
  261. function isValidElement(element) {
  262. return element.nodeName === 'TD' || element.parentNode.nodeName === 'TD';
  263. }
  264. // if event is from hot-table we must get web component element not element inside him
  265. var element = event.realTarget;
  266. this.close();
  267. if (hasClass(element, 'handsontableInput')) {
  268. return;
  269. }
  270. event.preventDefault();
  271. stopPropagation(event);
  272. if (!(showRowHeaders || showColHeaders)) {
  273. if (!isValidElement(element) && !(hasClass(element, 'current') && hasClass(element, 'wtBorder'))) {
  274. return;
  275. }
  276. }
  277. this.open(event);
  278. }
  279. /**
  280. * On menu after open listener.
  281. *
  282. * @private
  283. */
  284. }, {
  285. key: 'onMenuAfterOpen',
  286. value: function onMenuAfterOpen() {
  287. this.hot.runHooks('afterContextMenuShow', this);
  288. }
  289. /**
  290. * On menu after close listener.
  291. *
  292. * @private
  293. */
  294. }, {
  295. key: 'onMenuAfterClose',
  296. value: function onMenuAfterClose() {
  297. this.hot.listen();
  298. this.hot.runHooks('afterContextMenuHide', this);
  299. }
  300. /**
  301. * Destroy instance.
  302. */
  303. }, {
  304. key: 'destroy',
  305. value: function destroy() {
  306. this.close();
  307. if (this.menu) {
  308. this.menu.destroy();
  309. }
  310. _get(ContextMenu.prototype.__proto__ || Object.getPrototypeOf(ContextMenu.prototype), 'destroy', this).call(this);
  311. }
  312. }]);
  313. return ContextMenu;
  314. }(BasePlugin);
  315. ContextMenu.SEPARATOR = {
  316. name: SEPARATOR
  317. };
  318. registerPlugin('contextMenu', ContextMenu);
  319. export default ContextMenu;