a6a316eb4e59bb50aeae6a5d1f72786331eb22c47c69f099173fd5c806583d9215bd78fe07e7030a82e0b719ba252e3ac81916130803ec6cc7812136f4a65d 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. import {
  2. addClass,
  3. empty,
  4. fastInnerHTML,
  5. getComputedStyle,
  6. getCssTransform,
  7. getScrollableElement,
  8. offset,
  9. outerHeight,
  10. outerWidth,
  11. resetCssTransform,
  12. } from './../helpers/dom/element';
  13. import {stopImmediatePropagation} from './../helpers/dom/event';
  14. import {KEY_CODES} from './../helpers/unicode';
  15. import BaseEditor, {EditorState} from './_baseEditor';
  16. const SelectEditor = BaseEditor.prototype.extend();
  17. /**
  18. * @private
  19. * @editor SelectEditor
  20. * @class SelectEditor
  21. */
  22. SelectEditor.prototype.init = function() {
  23. this.select = document.createElement('SELECT');
  24. addClass(this.select, 'htSelectEditor');
  25. this.select.style.display = 'none';
  26. this.instance.rootElement.appendChild(this.select);
  27. this.registerHooks();
  28. };
  29. SelectEditor.prototype.registerHooks = function() {
  30. this.instance.addHook('afterScrollHorizontally', () => this.refreshDimensions());
  31. this.instance.addHook('afterScrollVertically', () => this.refreshDimensions());
  32. this.instance.addHook('afterColumnResize', () => this.refreshDimensions());
  33. this.instance.addHook('afterRowResize', () => this.refreshDimensions());
  34. };
  35. SelectEditor.prototype.prepare = function() {
  36. BaseEditor.prototype.prepare.apply(this, arguments);
  37. var selectOptions = this.cellProperties.selectOptions;
  38. var options;
  39. if (typeof selectOptions == 'function') {
  40. options = this.prepareOptions(selectOptions(this.row, this.col, this.prop));
  41. } else {
  42. options = this.prepareOptions(selectOptions);
  43. }
  44. empty(this.select);
  45. for (var option in options) {
  46. if (Object.prototype.hasOwnProperty.call(options, option)) {
  47. var optionElement = document.createElement('OPTION');
  48. optionElement.value = option;
  49. fastInnerHTML(optionElement, options[option]);
  50. this.select.appendChild(optionElement);
  51. }
  52. }
  53. };
  54. SelectEditor.prototype.prepareOptions = function(optionsToPrepare) {
  55. var preparedOptions = {};
  56. if (Array.isArray(optionsToPrepare)) {
  57. for (var i = 0, len = optionsToPrepare.length; i < len; i++) {
  58. preparedOptions[optionsToPrepare[i]] = optionsToPrepare[i];
  59. }
  60. } else if (typeof optionsToPrepare == 'object') {
  61. preparedOptions = optionsToPrepare;
  62. }
  63. return preparedOptions;
  64. };
  65. SelectEditor.prototype.getValue = function() {
  66. return this.select.value;
  67. };
  68. SelectEditor.prototype.setValue = function(value) {
  69. this.select.value = value;
  70. };
  71. var onBeforeKeyDown = function(event) {
  72. var instance = this;
  73. var editor = instance.getActiveEditor();
  74. switch (event.keyCode) {
  75. case KEY_CODES.ARROW_UP:
  76. var previousOptionIndex = editor.select.selectedIndex - 1;
  77. if (previousOptionIndex >= 0) {
  78. editor.select[previousOptionIndex].selected = true;
  79. }
  80. stopImmediatePropagation(event);
  81. event.preventDefault();
  82. break;
  83. case KEY_CODES.ARROW_DOWN:
  84. var nextOptionIndex = editor.select.selectedIndex + 1;
  85. if (nextOptionIndex <= editor.select.length - 1) {
  86. editor.select[nextOptionIndex].selected = true;
  87. }
  88. stopImmediatePropagation(event);
  89. event.preventDefault();
  90. break;
  91. default:
  92. break;
  93. }
  94. };
  95. SelectEditor.prototype.open = function() {
  96. this._opened = true;
  97. this.refreshDimensions();
  98. this.select.style.display = '';
  99. this.instance.addHook('beforeKeyDown', onBeforeKeyDown);
  100. };
  101. SelectEditor.prototype.close = function() {
  102. this._opened = false;
  103. this.select.style.display = 'none';
  104. this.instance.removeHook('beforeKeyDown', onBeforeKeyDown);
  105. };
  106. SelectEditor.prototype.focus = function() {
  107. this.select.focus();
  108. };
  109. SelectEditor.prototype.refreshValue = function() {
  110. let sourceData = this.instance.getSourceDataAtCell(this.row, this.prop);
  111. this.originalValue = sourceData;
  112. this.setValue(sourceData);
  113. this.refreshDimensions();
  114. };
  115. SelectEditor.prototype.refreshDimensions = function() {
  116. if (this.state !== EditorState.EDITING) {
  117. return;
  118. }
  119. this.TD = this.getEditedCell();
  120. // TD is outside of the viewport.
  121. if (!this.TD) {
  122. this.close();
  123. return;
  124. }
  125. var
  126. width = outerWidth(this.TD) + 1,
  127. height = outerHeight(this.TD) + 1,
  128. currentOffset = offset(this.TD),
  129. containerOffset = offset(this.instance.rootElement),
  130. scrollableContainer = getScrollableElement(this.TD),
  131. editTop = currentOffset.top - containerOffset.top - 1 - (scrollableContainer.scrollTop || 0),
  132. editLeft = currentOffset.left - containerOffset.left - 1 - (scrollableContainer.scrollLeft || 0),
  133. editorSection = this.checkEditorSection(),
  134. cssTransformOffset;
  135. const settings = this.instance.getSettings();
  136. let rowHeadersCount = settings.rowHeaders ? 1 : 0;
  137. let colHeadersCount = settings.colHeaders ? 1 : 0;
  138. switch (editorSection) {
  139. case 'top':
  140. cssTransformOffset = getCssTransform(this.instance.view.wt.wtOverlays.topOverlay.clone.wtTable.holder.parentNode);
  141. break;
  142. case 'left':
  143. cssTransformOffset = getCssTransform(this.instance.view.wt.wtOverlays.leftOverlay.clone.wtTable.holder.parentNode);
  144. break;
  145. case 'top-left-corner':
  146. cssTransformOffset = getCssTransform(this.instance.view.wt.wtOverlays.topLeftCornerOverlay.clone.wtTable.holder.parentNode);
  147. break;
  148. case 'bottom-left-corner':
  149. cssTransformOffset = getCssTransform(this.instance.view.wt.wtOverlays.bottomLeftCornerOverlay.clone.wtTable.holder.parentNode);
  150. break;
  151. case 'bottom':
  152. cssTransformOffset = getCssTransform(this.instance.view.wt.wtOverlays.bottomOverlay.clone.wtTable.holder.parentNode);
  153. break;
  154. default:
  155. break;
  156. }
  157. if (this.instance.getSelected()[0] === 0) {
  158. editTop += 1;
  159. }
  160. if (this.instance.getSelected()[1] === 0) {
  161. editLeft += 1;
  162. }
  163. var selectStyle = this.select.style;
  164. if (cssTransformOffset && cssTransformOffset != -1) {
  165. selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
  166. } else {
  167. resetCssTransform(this.select);
  168. }
  169. const cellComputedStyle = getComputedStyle(this.TD);
  170. if (parseInt(cellComputedStyle.borderTopWidth, 10) > 0) {
  171. height -= 1;
  172. }
  173. if (parseInt(cellComputedStyle.borderLeftWidth, 10) > 0) {
  174. width -= 1;
  175. }
  176. selectStyle.height = `${height}px`;
  177. selectStyle.minWidth = `${width}px`;
  178. selectStyle.top = `${editTop}px`;
  179. selectStyle.left = `${editLeft}px`;
  180. selectStyle.margin = '0px';
  181. };
  182. SelectEditor.prototype.getEditedCell = function() {
  183. var editorSection = this.checkEditorSection(),
  184. editedCell;
  185. switch (editorSection) {
  186. case 'top':
  187. editedCell = this.instance.view.wt.wtOverlays.topOverlay.clone.wtTable.getCell({
  188. row: this.row,
  189. col: this.col
  190. });
  191. this.select.style.zIndex = 101;
  192. break;
  193. case 'corner':
  194. editedCell = this.instance.view.wt.wtOverlays.topLeftCornerOverlay.clone.wtTable.getCell({
  195. row: this.row,
  196. col: this.col
  197. });
  198. this.select.style.zIndex = 103;
  199. break;
  200. case 'left':
  201. editedCell = this.instance.view.wt.wtOverlays.leftOverlay.clone.wtTable.getCell({
  202. row: this.row,
  203. col: this.col
  204. });
  205. this.select.style.zIndex = 102;
  206. break;
  207. default:
  208. editedCell = this.instance.getCell(this.row, this.col);
  209. this.select.style.zIndex = '';
  210. break;
  211. }
  212. return editedCell != -1 && editedCell != -2 ? editedCell : void 0;
  213. };
  214. export default SelectEditor;