selectEditor.js 7.9 KB

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