handsontable-chosen-editor.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. /// chosen plugin
  2. import Handsontable from "handsontable-pro"
  3. import 'handsontable-pro/dist/handsontable.full.css'
  4. import zhCN from 'handsontable-pro/languages/zh-CN';
  5. (function(Handsontable) {
  6. "use strict";
  7. var ChosenEditor = Handsontable.editors.TextEditor.prototype.extend();
  8. ChosenEditor.prototype.prepare = function(row, col, prop, td, originalValue, cellProperties) {
  9. Handsontable.editors.TextEditor.prototype.prepare.apply(this, arguments);
  10. this.options = {};
  11. if (this.cellProperties.chosenOptions) {
  12. this.options = $.extend(this.options, cellProperties.chosenOptions);
  13. }
  14. cellProperties.chosenOptions = $.extend({}, cellProperties.chosenOptions);
  15. };
  16. ChosenEditor.prototype.createElements = function() {
  17. this.$body = $(document.body);
  18. this.TEXTAREA = document.createElement('select');
  19. //this.TEXTAREA.setAttribute('type', 'text');
  20. this.$textarea = $(this.TEXTAREA);
  21. Handsontable.dom.addClass(this.TEXTAREA, 'handsontableInput');
  22. this.textareaStyle = this.TEXTAREA.style;
  23. this.textareaStyle.width = 0;
  24. this.textareaStyle.height = 0;
  25. this.TEXTAREA_PARENT = document.createElement('DIV');
  26. Handsontable.dom.addClass(this.TEXTAREA_PARENT, 'handsontableInputHolder');
  27. this.textareaParentStyle = this.TEXTAREA_PARENT.style;
  28. this.textareaParentStyle.top = 0;
  29. this.textareaParentStyle.left = 0;
  30. this.textareaParentStyle.display = 'none';
  31. this.textareaParentStyle.width = "200px";
  32. this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
  33. this.instance.rootElement.appendChild(this.TEXTAREA_PARENT);
  34. var that = this;
  35. this.instance._registerTimeout(setTimeout(function() {
  36. that.refreshDimensions();
  37. }, 0));
  38. };
  39. var onChosenChanged = function() {
  40. var options = this.cellProperties.chosenOptions;
  41. if (!options.multiple) {
  42. this.close();
  43. this.finishEditing();
  44. }
  45. };
  46. var onChosenClosed = function() {
  47. var options = this.cellProperties.chosenOptions;
  48. if (!options.multiple) {
  49. this.close();
  50. this.finishEditing();
  51. } else {}
  52. };
  53. var onBeforeKeyDown = function(event) {
  54. var instance = this;
  55. var that = instance.getActiveEditor();
  56. var keyCodes = Handsontable.helper.KEY_CODES;
  57. var ctrlDown = (event.ctrlKey || event.metaKey) && !event.altKey; //catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)
  58. //Process only events that have been fired in the editor
  59. if (event.target.tagName !== "INPUT") {
  60. return;
  61. }
  62. if (event.keyCode === 17 || event.keyCode === 224 || event.keyCode === 91 || event.keyCode === 93) {
  63. //when CTRL or its equivalent is pressed and cell is edited, don't prepare selectable text in textarea
  64. event.stopImmediatePropagation();
  65. return;
  66. }
  67. var target = event.target;
  68. switch (event.keyCode) {
  69. case keyCodes.ARROW_RIGHT:
  70. if (Handsontable.dom.getCaretPosition(target) !== target.value.length) {
  71. event.stopImmediatePropagation();
  72. } else {
  73. that.$textarea.trigger("chosen:close");
  74. }
  75. break;
  76. case keyCodes.ARROW_LEFT:
  77. if (Handsontable.dom.getCaretPosition(target) !== 0) {
  78. event.stopImmediatePropagation();
  79. } else {
  80. that.$textarea.trigger("chosen:close");
  81. }
  82. break;
  83. case keyCodes.ENTER:
  84. if (that.cellProperties.chosenOptions.multiple) {
  85. event.stopImmediatePropagation();
  86. event.preventDefault();
  87. event.stopPropagation();
  88. }
  89. break;
  90. case keyCodes.A:
  91. case keyCodes.X:
  92. case keyCodes.C:
  93. case keyCodes.V:
  94. if (ctrlDown) {
  95. event.stopImmediatePropagation(); //CTRL+A, CTRL+C, CTRL+V, CTRL+X should only work locally when cell is edited (not in table context)
  96. }
  97. break;
  98. case keyCodes.BACKSPACE:
  99. var txt = $(that.TEXTAREA_PARENT).find("input").val();
  100. $(that.TEXTAREA_PARENT).find("input").val(txt.substr(0, txt.length - 1)).trigger("keyup.chosen");
  101. event.stopImmediatePropagation();
  102. break;
  103. case keyCodes.DELETE:
  104. case keyCodes.HOME:
  105. case keyCodes.END:
  106. event.stopImmediatePropagation(); //backspace, delete, home, end should only work locally when cell is edited (not in table context)
  107. break;
  108. }
  109. };
  110. ChosenEditor.prototype.open = function(keyboardEvent) {
  111. this.refreshDimensions();
  112. this.textareaParentStyle.display = 'block';
  113. this.instance.addHook('beforeKeyDown', onBeforeKeyDown);
  114. this.$textarea.css({
  115. height: $(this.TD).height() + 4,
  116. 'min-width': $(this.TD).outerWidth() - 4
  117. });
  118. //display the list
  119. this.$textarea.hide();
  120. //make sure that list positions matches cell position
  121. //this.$textarea.offset($(this.TD).offset());
  122. var options = $.extend({}, this.options, {
  123. width: "100%",
  124. search_contains: true
  125. });
  126. if (options.multiple) {
  127. this.$textarea.attr("multiple", true);
  128. } else {
  129. this.$textarea.attr("multiple", false);
  130. }
  131. this.$textarea.empty();
  132. this.$textarea.append("<option value=''></option>");
  133. var el = null;
  134. var originalValue = (this.originalValue + "").split(",");
  135. if (options.data && options.data.length) {
  136. for (var i = 0; i < options.data.length; i++) {
  137. // el = $("<option />");
  138. // el.attr("value", options.data[i].Code);
  139. // el.html(options.data[i].Name);
  140. // if (originalValue.indexOf(options.data[i].Code + "") > -1) {
  141. // el.attr("selected", true);
  142. // }
  143. // this.$textarea.append(el);
  144. if (options.data[i].content && options.data[i].content.length) {
  145. for (var k = 0; k < options.data[i].content.length; k++) {
  146. if (options.data[i].content[k] && options.data[i].content[k].length) {
  147. for (var j = 0; j < options.data[i].content[k].length; j++) {
  148. el = $("<option />");
  149. el.attr("value", options.data[i].content[k].content[j].Code);
  150. el.html(options.data[i].content[k].content[j].Name);
  151. if (originalValue.indexOf(options.data[i].content[k].content[j].Code + "") > -1) {
  152. el.attr("selected", true);
  153. }
  154. this.$textarea.append(el);
  155. }
  156. } else {
  157. el = $("<option />");
  158. el.attr("value", options.data[i].content[k].Code);
  159. el.html(options.data[i].content[k].Name);
  160. if (originalValue.indexOf(options.data[i].content[k].Code + "") > -1) {
  161. el.attr("selected", true);
  162. }
  163. this.$textarea.append(el);
  164. }
  165. }
  166. } else {
  167. el = $("<option />");
  168. el.attr("value", options.data[i].Code);
  169. el.html(options.data[i].Name);
  170. if (originalValue.indexOf(options.data[i].Code + "") > -1) {
  171. el.attr("selected", true);
  172. }
  173. this.$textarea.append(el);
  174. }
  175. }
  176. }
  177. if ($(this.TEXTAREA_PARENT).find(".chosen-container").length) {
  178. this.$textarea.chosen("destroy");
  179. }
  180. this.$textarea.chosen(options);
  181. var self = this;
  182. setTimeout(function() {
  183. self.$textarea.on('change', onChosenChanged.bind(self));
  184. self.$textarea.on('chosen:hiding_dropdown', onChosenClosed.bind(self));
  185. self.$textarea.trigger("chosen:open");
  186. $(self.TEXTAREA_PARENT).find("input").on("keydown", function(e) {
  187. if (e.keyCode === Handsontable.helper.KEY_CODES.ENTER /*|| e.keyCode === Handsontable.helper.KEY_CODES.BACKSPACE*/ ) {
  188. if ($(this).val()) {
  189. e.preventDefault();
  190. e.stopPropagation();
  191. } else {
  192. e.preventDefault();
  193. e.stopPropagation();
  194. self.close();
  195. self.finishEditing();
  196. }
  197. }
  198. if (e.keyCode === Handsontable.helper.KEY_CODES.BACKSPACE) {
  199. var txt = $(self.TEXTAREA_PARENT).find("input").val();
  200. $(self.TEXTAREA_PARENT).find("input").val(txt.substr(0, txt.length - 1)).trigger("keyup.chosen");
  201. e.preventDefault();
  202. e.stopPropagation();
  203. }
  204. if (e.keyCode === Handsontable.helper.KEY_CODES.ARROW_DOWN || e.keyCode === Handsontable.helper.KEY_CODES.ARROW_UP) {
  205. e.preventDefault();
  206. e.stopPropagation();
  207. }
  208. });
  209. setTimeout(function() {
  210. self.$textarea.trigger("chosen:activate").focus();
  211. if (keyboardEvent && keyboardEvent.keyCode && keyboardEvent.keyCode != 113) {
  212. var key = keyboardEvent.keyCode;
  213. var keyText = (String.fromCharCode((96 <= key && key <= 105) ? key - 48 : key)).toLowerCase();
  214. $(self.TEXTAREA_PARENT).find("input").val(keyText).trigger("keyup.chosen");
  215. self.$textarea.trigger("chosen:activate");
  216. }
  217. }, 1);
  218. }, 1);
  219. };
  220. ChosenEditor.prototype.init = function() {
  221. Handsontable.editors.TextEditor.prototype.init.apply(this, arguments);
  222. };
  223. ChosenEditor.prototype.close = function() {
  224. this.instance.listen();
  225. this.instance.removeHook('beforeKeyDown', onBeforeKeyDown);
  226. this.$textarea.off();
  227. this.$textarea.hide();
  228. Handsontable.editors.TextEditor.prototype.close.apply(this, arguments);
  229. };
  230. ChosenEditor.prototype.getValue = function() {
  231. if (!this.$textarea.val()) {
  232. return "";
  233. }
  234. if (typeof this.$textarea.val() === "object") {
  235. return this.$textarea.val().join(",");
  236. }
  237. return this.$textarea.val();
  238. };
  239. ChosenEditor.prototype.focus = function() {
  240. this.instance.listen();
  241. // DO NOT CALL THE BASE TEXTEDITOR FOCUS METHOD HERE, IT CAN MAKE THIS EDITOR BEHAVE POORLY AND HAS NO PURPOSE WITHIN THE CONTEXT OF THIS EDITOR
  242. //Handsontable.editors.TextEditor.prototype.focus.apply(this, arguments);
  243. };
  244. ChosenEditor.prototype.beginEditing = function(initialValue) {
  245. var onBeginEditing = this.instance.getSettings().onBeginEditing;
  246. if (onBeginEditing && onBeginEditing() === false) {
  247. return;
  248. }
  249. Handsontable.editors.TextEditor.prototype.beginEditing.apply(this, arguments);
  250. };
  251. ChosenEditor.prototype.finishEditing = function(isCancelled, ctrlDown) {
  252. this.instance.listen();
  253. return Handsontable.editors.TextEditor.prototype.finishEditing.apply(this, arguments);
  254. };
  255. Handsontable.editors.ChosenEditor = ChosenEditor;
  256. Handsontable.editors.registerEditor('chosen', ChosenEditor);
  257. })(Handsontable);