handsontableEditor.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. import { KEY_CODES } from './../helpers/unicode';
  2. import { extend } from './../helpers/object';
  3. import { setCaretPosition } from './../helpers/dom/element';
  4. import { stopImmediatePropagation, isImmediatePropagationStopped } from './../helpers/dom/event';
  5. import TextEditor from './textEditor';
  6. var HandsontableEditor = TextEditor.prototype.extend();
  7. /**
  8. * @private
  9. * @editor HandsontableEditor
  10. * @class HandsontableEditor
  11. * @dependencies TextEditor
  12. */
  13. HandsontableEditor.prototype.createElements = function () {
  14. TextEditor.prototype.createElements.apply(this, arguments);
  15. var DIV = document.createElement('DIV');
  16. DIV.className = 'handsontableEditor';
  17. this.TEXTAREA_PARENT.appendChild(DIV);
  18. this.htContainer = DIV;
  19. this.assignHooks();
  20. };
  21. HandsontableEditor.prototype.prepare = function (td, row, col, prop, value, cellProperties) {
  22. TextEditor.prototype.prepare.apply(this, arguments);
  23. var parent = this;
  24. var options = {
  25. startRows: 0,
  26. startCols: 0,
  27. minRows: 0,
  28. minCols: 0,
  29. className: 'listbox',
  30. copyPaste: false,
  31. autoColumnSize: false,
  32. autoRowSize: false,
  33. readOnly: true,
  34. fillHandle: false,
  35. afterOnCellMouseDown: function afterOnCellMouseDown(_, coords) {
  36. var value = this.getSourceData(coords.row, coords.col);
  37. // if the value is undefined then it means we don't want to set the value
  38. if (value !== void 0) {
  39. parent.setValue(value);
  40. }
  41. parent.instance.destroyEditor();
  42. }
  43. };
  44. if (this.cellProperties.handsontable) {
  45. extend(options, cellProperties.handsontable);
  46. }
  47. this.htOptions = options;
  48. };
  49. var onBeforeKeyDown = function onBeforeKeyDown(event) {
  50. if (isImmediatePropagationStopped(event)) {
  51. return;
  52. }
  53. var editor = this.getActiveEditor();
  54. var innerHOT = editor.htEditor.getInstance();
  55. var rowToSelect;
  56. var selectedRow;
  57. if (event.keyCode == KEY_CODES.ARROW_DOWN) {
  58. if (!innerHOT.getSelected() && !innerHOT.flipped) {
  59. rowToSelect = 0;
  60. } else if (innerHOT.getSelected()) {
  61. if (innerHOT.flipped) {
  62. rowToSelect = innerHOT.getSelected()[0] + 1;
  63. } else if (!innerHOT.flipped) {
  64. selectedRow = innerHOT.getSelected()[0];
  65. var lastRow = innerHOT.countRows() - 1;
  66. rowToSelect = Math.min(lastRow, selectedRow + 1);
  67. }
  68. }
  69. } else if (event.keyCode == KEY_CODES.ARROW_UP) {
  70. if (!innerHOT.getSelected() && innerHOT.flipped) {
  71. rowToSelect = innerHOT.countRows() - 1;
  72. } else if (innerHOT.getSelected()) {
  73. if (innerHOT.flipped) {
  74. selectedRow = innerHOT.getSelected()[0];
  75. rowToSelect = Math.max(0, selectedRow - 1);
  76. } else {
  77. selectedRow = innerHOT.getSelected()[0];
  78. rowToSelect = selectedRow - 1;
  79. }
  80. }
  81. }
  82. if (rowToSelect !== void 0) {
  83. if (rowToSelect < 0 || innerHOT.flipped && rowToSelect > innerHOT.countRows() - 1) {
  84. innerHOT.deselectCell();
  85. } else {
  86. innerHOT.selectCell(rowToSelect, 0);
  87. }
  88. if (innerHOT.getData().length) {
  89. event.preventDefault();
  90. stopImmediatePropagation(event);
  91. editor.instance.listen();
  92. editor.TEXTAREA.focus();
  93. }
  94. }
  95. };
  96. HandsontableEditor.prototype.open = function () {
  97. this.instance.addHook('beforeKeyDown', onBeforeKeyDown);
  98. TextEditor.prototype.open.apply(this, arguments);
  99. if (this.htEditor) {
  100. this.htEditor.destroy();
  101. }
  102. this.htEditor = new Handsontable(this.htContainer, this.htOptions);
  103. if (this.cellProperties.strict) {
  104. this.htEditor.selectCell(0, 0);
  105. this.TEXTAREA.style.visibility = 'hidden';
  106. } else {
  107. this.htEditor.deselectCell();
  108. this.TEXTAREA.style.visibility = 'visible';
  109. }
  110. setCaretPosition(this.TEXTAREA, 0, this.TEXTAREA.value.length);
  111. };
  112. HandsontableEditor.prototype.close = function () {
  113. this.instance.removeHook('beforeKeyDown', onBeforeKeyDown);
  114. this.instance.listen();
  115. TextEditor.prototype.close.apply(this, arguments);
  116. };
  117. HandsontableEditor.prototype.focus = function () {
  118. this.instance.listen();
  119. TextEditor.prototype.focus.apply(this, arguments);
  120. };
  121. HandsontableEditor.prototype.beginEditing = function (initialValue) {
  122. var onBeginEditing = this.instance.getSettings().onBeginEditing;
  123. if (onBeginEditing && onBeginEditing() === false) {
  124. return;
  125. }
  126. TextEditor.prototype.beginEditing.apply(this, arguments);
  127. };
  128. HandsontableEditor.prototype.finishEditing = function (isCancelled, ctrlDown) {
  129. if (this.htEditor && this.htEditor.isListening()) {
  130. // if focus is still in the HOT editor
  131. this.instance.listen(); // return the focus to the parent HOT instance
  132. }
  133. if (this.htEditor && this.htEditor.getSelected()) {
  134. var value = this.htEditor.getInstance().getValue();
  135. if (value !== void 0) {
  136. // if the value is undefined then it means we don't want to set the value
  137. this.setValue(value);
  138. }
  139. }
  140. return TextEditor.prototype.finishEditing.apply(this, arguments);
  141. };
  142. HandsontableEditor.prototype.assignHooks = function () {
  143. var _this = this;
  144. this.instance.addHook('afterDestroy', function () {
  145. if (_this.htEditor) {
  146. _this.htEditor.destroy();
  147. }
  148. });
  149. };
  150. export default HandsontableEditor;