de6ee5ed2e5b32e39490a027d47a70446ce27c03f706eaa3783a450a05feb99f516df8caf7310b99c28066875bb5392b056048e19ff98d60f0f533b5dc4bd6 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. import {addClass} from './../../helpers/dom/element';
  2. /**
  3. * Comment editor for the Comments plugin.
  4. *
  5. * @class CommentEditor
  6. * @plugin Comments
  7. */
  8. class CommentEditor {
  9. static get CLASS_EDITOR_CONTAINER() {
  10. return 'htCommentsContainer';
  11. }
  12. static get CLASS_EDITOR() {
  13. return 'htComments';
  14. }
  15. static get CLASS_INPUT() {
  16. return 'htCommentTextArea';
  17. }
  18. static get CLASS_CELL() {
  19. return 'htCommentCell';
  20. }
  21. constructor() {
  22. this.editor = this.createEditor();
  23. this.editorStyle = this.editor.style;
  24. this.hidden = true;
  25. this.hide();
  26. }
  27. /**
  28. * Set position of the comments editor according to the provided x and y coordinates.
  29. *
  30. * @param {Number} x X position (in pixels).
  31. * @param {Number} y Y position (in pixels).
  32. */
  33. setPosition(x, y) {
  34. this.editorStyle.left = `${x}px`;
  35. this.editorStyle.top = `${y}px`;
  36. }
  37. /**
  38. * Set the editor size according to the provided arguments.
  39. *
  40. * @param {Number} width Width in pixels.
  41. * @param {Number} height Height in pixels.
  42. */
  43. setSize(width, height) {
  44. if (width && height) {
  45. const input = this.getInputElement();
  46. input.style.width = `${width}px`;
  47. input.style.height = `${height}px`;
  48. }
  49. }
  50. /**
  51. * Reset the editor size to its initial state.
  52. */
  53. resetSize() {
  54. const input = this.getInputElement();
  55. input.style.width = '';
  56. input.style.height = '';
  57. }
  58. /**
  59. * Set the read-only state for the comments editor.
  60. *
  61. * @param {Boolean} state The new read only state.
  62. */
  63. setReadOnlyState(state) {
  64. const input = this.getInputElement();
  65. input.readOnly = state;
  66. }
  67. /**
  68. * Show the comments editor.
  69. */
  70. show() {
  71. this.editorStyle.display = 'block';
  72. this.hidden = false;
  73. }
  74. /**
  75. * Hide the comments editor.
  76. */
  77. hide() {
  78. this.editorStyle.display = 'none';
  79. this.hidden = true;
  80. }
  81. /**
  82. * Checks if the editor is visible.
  83. *
  84. * @returns {Boolean}
  85. */
  86. isVisible() {
  87. return this.editorStyle.display === 'block';
  88. }
  89. /**
  90. * Set the comment value.
  91. *
  92. * @param {String} [value] The value to use.
  93. */
  94. setValue(value = '') {
  95. value = value || '';
  96. this.getInputElement().value = value;
  97. }
  98. /**
  99. * Get the comment value.
  100. *
  101. * @returns {String}
  102. */
  103. getValue() {
  104. return this.getInputElement().value;
  105. }
  106. /**
  107. * Checks if the comment input element is focused.
  108. *
  109. * @returns {Boolean}
  110. */
  111. isFocused() {
  112. return document.activeElement === this.getInputElement();
  113. }
  114. /**
  115. * Focus the comments input element.
  116. */
  117. focus() {
  118. this.getInputElement().focus();
  119. }
  120. /**
  121. * Create the `textarea` to be used as a comments editor.
  122. *
  123. * @returns {HTMLElement}
  124. */
  125. createEditor() {
  126. let container = document.querySelector(`.${CommentEditor.CLASS_EDITOR_CONTAINER}`);
  127. let editor;
  128. let textArea;
  129. if (!container) {
  130. container = document.createElement('div');
  131. addClass(container, CommentEditor.CLASS_EDITOR_CONTAINER);
  132. document.body.appendChild(container);
  133. }
  134. editor = document.createElement('div');
  135. addClass(editor, CommentEditor.CLASS_EDITOR);
  136. textArea = document.createElement('textarea');
  137. addClass(textArea, CommentEditor.CLASS_INPUT);
  138. editor.appendChild(textArea);
  139. container.appendChild(editor);
  140. return editor;
  141. }
  142. /**
  143. * Get the input element.
  144. *
  145. * @returns {HTMLElement}
  146. */
  147. getInputElement() {
  148. return this.editor.querySelector(`.${CommentEditor.CLASS_INPUT}`);
  149. }
  150. /**
  151. * Destroy the comments editor.
  152. */
  153. destroy() {
  154. this.editor.parentNode.removeChild(this.editor);
  155. this.editor = null;
  156. this.editorStyle = null;
  157. }
  158. }
  159. export default CommentEditor;