autocompleteRenderer.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import { addClass, hasClass, empty } from './../helpers/dom/element';
  2. import EventManager from './../eventManager';
  3. import { CellCoords } from './../3rdparty/walkontable/src';
  4. import { getRenderer } from './index';
  5. var clonableWRAPPER = document.createElement('DIV');
  6. clonableWRAPPER.className = 'htAutocompleteWrapper';
  7. var clonableARROW = document.createElement('DIV');
  8. clonableARROW.className = 'htAutocompleteArrow';
  9. // workaround for https://github.com/handsontable/handsontable/issues/1946
  10. // this is faster than innerHTML. See: https://github.com/handsontable/handsontable/wiki/JavaScript-&-DOM-performance-tips
  11. clonableARROW.appendChild(document.createTextNode(String.fromCharCode(9660)));
  12. var wrapTdContentWithWrapper = function wrapTdContentWithWrapper(TD, WRAPPER) {
  13. WRAPPER.innerHTML = TD.innerHTML;
  14. empty(TD);
  15. TD.appendChild(WRAPPER);
  16. };
  17. /**
  18. * Autocomplete renderer
  19. *
  20. * @private
  21. * @renderer AutocompleteRenderer
  22. * @param {Object} instance Handsontable instance
  23. * @param {Element} TD Table cell where to render
  24. * @param {Number} row
  25. * @param {Number} col
  26. * @param {String|Number} prop Row object property name
  27. * @param value Value to render (remember to escape unsafe HTML before inserting to DOM!)
  28. * @param {Object} cellProperties Cell properites (shared by cell renderer and editor)
  29. */
  30. function autocompleteRenderer(instance, TD, row, col, prop, value, cellProperties) {
  31. var WRAPPER = clonableWRAPPER.cloneNode(true); // this is faster than createElement
  32. var ARROW = clonableARROW.cloneNode(true); // this is faster than createElement
  33. if (cellProperties.allowHtml) {
  34. getRenderer('html').apply(this, arguments);
  35. } else {
  36. getRenderer('text').apply(this, arguments);
  37. }
  38. TD.appendChild(ARROW);
  39. addClass(TD, 'htAutocomplete');
  40. if (!TD.firstChild) {
  41. // http://jsperf.com/empty-node-if-needed
  42. // otherwise empty fields appear borderless in demo/renderers.html (IE)
  43. TD.appendChild(document.createTextNode(String.fromCharCode(160))); // workaround for https://github.com/handsontable/handsontable/issues/1946
  44. // this is faster than innerHTML. See: https://github.com/handsontable/handsontable/wiki/JavaScript-&-DOM-performance-tips
  45. }
  46. if (!instance.acArrowListener) {
  47. var eventManager = new EventManager(instance);
  48. // not very elegant but easy and fast
  49. instance.acArrowListener = function (event) {
  50. if (hasClass(event.target, 'htAutocompleteArrow')) {
  51. instance.view.wt.getSetting('onCellDblClick', null, new CellCoords(row, col), TD);
  52. }
  53. };
  54. eventManager.addEventListener(instance.rootElement, 'mousedown', instance.acArrowListener);
  55. // We need to unbind the listener after the table has been destroyed
  56. instance.addHookOnce('afterDestroy', function () {
  57. eventManager.destroy();
  58. });
  59. }
  60. }
  61. export default autocompleteRenderer;