selectEditor.js 7.6 KB

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