commentEditor.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  2. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  3. import { addClass } from './../../helpers/dom/element';
  4. /**
  5. * Comment editor for the Comments plugin.
  6. *
  7. * @class CommentEditor
  8. * @plugin Comments
  9. */
  10. var CommentEditor = function () {
  11. _createClass(CommentEditor, null, [{
  12. key: 'CLASS_EDITOR_CONTAINER',
  13. get: function get() {
  14. return 'htCommentsContainer';
  15. }
  16. }, {
  17. key: 'CLASS_EDITOR',
  18. get: function get() {
  19. return 'htComments';
  20. }
  21. }, {
  22. key: 'CLASS_INPUT',
  23. get: function get() {
  24. return 'htCommentTextArea';
  25. }
  26. }, {
  27. key: 'CLASS_CELL',
  28. get: function get() {
  29. return 'htCommentCell';
  30. }
  31. }]);
  32. function CommentEditor() {
  33. _classCallCheck(this, CommentEditor);
  34. this.editor = this.createEditor();
  35. this.editorStyle = this.editor.style;
  36. this.hidden = true;
  37. this.hide();
  38. }
  39. /**
  40. * Set position of the comments editor according to the provided x and y coordinates.
  41. *
  42. * @param {Number} x X position (in pixels).
  43. * @param {Number} y Y position (in pixels).
  44. */
  45. _createClass(CommentEditor, [{
  46. key: 'setPosition',
  47. value: function setPosition(x, y) {
  48. this.editorStyle.left = x + 'px';
  49. this.editorStyle.top = y + 'px';
  50. }
  51. /**
  52. * Set the editor size according to the provided arguments.
  53. *
  54. * @param {Number} width Width in pixels.
  55. * @param {Number} height Height in pixels.
  56. */
  57. }, {
  58. key: 'setSize',
  59. value: function setSize(width, height) {
  60. if (width && height) {
  61. var input = this.getInputElement();
  62. input.style.width = width + 'px';
  63. input.style.height = height + 'px';
  64. }
  65. }
  66. /**
  67. * Reset the editor size to its initial state.
  68. */
  69. }, {
  70. key: 'resetSize',
  71. value: function resetSize() {
  72. var input = this.getInputElement();
  73. input.style.width = '';
  74. input.style.height = '';
  75. }
  76. /**
  77. * Set the read-only state for the comments editor.
  78. *
  79. * @param {Boolean} state The new read only state.
  80. */
  81. }, {
  82. key: 'setReadOnlyState',
  83. value: function setReadOnlyState(state) {
  84. var input = this.getInputElement();
  85. input.readOnly = state;
  86. }
  87. /**
  88. * Show the comments editor.
  89. */
  90. }, {
  91. key: 'show',
  92. value: function show() {
  93. this.editorStyle.display = 'block';
  94. this.hidden = false;
  95. }
  96. /**
  97. * Hide the comments editor.
  98. */
  99. }, {
  100. key: 'hide',
  101. value: function hide() {
  102. this.editorStyle.display = 'none';
  103. this.hidden = true;
  104. }
  105. /**
  106. * Checks if the editor is visible.
  107. *
  108. * @returns {Boolean}
  109. */
  110. }, {
  111. key: 'isVisible',
  112. value: function isVisible() {
  113. return this.editorStyle.display === 'block';
  114. }
  115. /**
  116. * Set the comment value.
  117. *
  118. * @param {String} [value] The value to use.
  119. */
  120. }, {
  121. key: 'setValue',
  122. value: function setValue() {
  123. var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  124. value = value || '';
  125. this.getInputElement().value = value;
  126. }
  127. /**
  128. * Get the comment value.
  129. *
  130. * @returns {String}
  131. */
  132. }, {
  133. key: 'getValue',
  134. value: function getValue() {
  135. return this.getInputElement().value;
  136. }
  137. /**
  138. * Checks if the comment input element is focused.
  139. *
  140. * @returns {Boolean}
  141. */
  142. }, {
  143. key: 'isFocused',
  144. value: function isFocused() {
  145. return document.activeElement === this.getInputElement();
  146. }
  147. /**
  148. * Focus the comments input element.
  149. */
  150. }, {
  151. key: 'focus',
  152. value: function focus() {
  153. this.getInputElement().focus();
  154. }
  155. /**
  156. * Create the `textarea` to be used as a comments editor.
  157. *
  158. * @returns {HTMLElement}
  159. */
  160. }, {
  161. key: 'createEditor',
  162. value: function createEditor() {
  163. var container = document.querySelector('.' + CommentEditor.CLASS_EDITOR_CONTAINER);
  164. var editor = void 0;
  165. var textArea = void 0;
  166. if (!container) {
  167. container = document.createElement('div');
  168. addClass(container, CommentEditor.CLASS_EDITOR_CONTAINER);
  169. document.body.appendChild(container);
  170. }
  171. editor = document.createElement('div');
  172. addClass(editor, CommentEditor.CLASS_EDITOR);
  173. textArea = document.createElement('textarea');
  174. addClass(textArea, CommentEditor.CLASS_INPUT);
  175. editor.appendChild(textArea);
  176. container.appendChild(editor);
  177. return editor;
  178. }
  179. /**
  180. * Get the input element.
  181. *
  182. * @returns {HTMLElement}
  183. */
  184. }, {
  185. key: 'getInputElement',
  186. value: function getInputElement() {
  187. return this.editor.querySelector('.' + CommentEditor.CLASS_INPUT);
  188. }
  189. /**
  190. * Destroy the comments editor.
  191. */
  192. }, {
  193. key: 'destroy',
  194. value: function destroy() {
  195. this.editor.parentNode.removeChild(this.editor);
  196. this.editor = null;
  197. this.editorStyle = null;
  198. }
  199. }]);
  200. return CommentEditor;
  201. }();
  202. export default CommentEditor;