123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- 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; }; }();
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- import { addClass } from './../../helpers/dom/element';
- /**
- * Comment editor for the Comments plugin.
- *
- * @class CommentEditor
- * @plugin Comments
- */
- var CommentEditor = function () {
- _createClass(CommentEditor, null, [{
- key: 'CLASS_EDITOR_CONTAINER',
- get: function get() {
- return 'htCommentsContainer';
- }
- }, {
- key: 'CLASS_EDITOR',
- get: function get() {
- return 'htComments';
- }
- }, {
- key: 'CLASS_INPUT',
- get: function get() {
- return 'htCommentTextArea';
- }
- }, {
- key: 'CLASS_CELL',
- get: function get() {
- return 'htCommentCell';
- }
- }]);
- function CommentEditor() {
- _classCallCheck(this, CommentEditor);
- this.editor = this.createEditor();
- this.editorStyle = this.editor.style;
- this.hidden = true;
- this.hide();
- }
- /**
- * Set position of the comments editor according to the provided x and y coordinates.
- *
- * @param {Number} x X position (in pixels).
- * @param {Number} y Y position (in pixels).
- */
- _createClass(CommentEditor, [{
- key: 'setPosition',
- value: function setPosition(x, y) {
- this.editorStyle.left = x + 'px';
- this.editorStyle.top = y + 'px';
- }
- /**
- * Set the editor size according to the provided arguments.
- *
- * @param {Number} width Width in pixels.
- * @param {Number} height Height in pixels.
- */
- }, {
- key: 'setSize',
- value: function setSize(width, height) {
- if (width && height) {
- var input = this.getInputElement();
- input.style.width = width + 'px';
- input.style.height = height + 'px';
- }
- }
- /**
- * Reset the editor size to its initial state.
- */
- }, {
- key: 'resetSize',
- value: function resetSize() {
- var input = this.getInputElement();
- input.style.width = '';
- input.style.height = '';
- }
- /**
- * Set the read-only state for the comments editor.
- *
- * @param {Boolean} state The new read only state.
- */
- }, {
- key: 'setReadOnlyState',
- value: function setReadOnlyState(state) {
- var input = this.getInputElement();
- input.readOnly = state;
- }
- /**
- * Show the comments editor.
- */
- }, {
- key: 'show',
- value: function show() {
- this.editorStyle.display = 'block';
- this.hidden = false;
- }
- /**
- * Hide the comments editor.
- */
- }, {
- key: 'hide',
- value: function hide() {
- this.editorStyle.display = 'none';
- this.hidden = true;
- }
- /**
- * Checks if the editor is visible.
- *
- * @returns {Boolean}
- */
- }, {
- key: 'isVisible',
- value: function isVisible() {
- return this.editorStyle.display === 'block';
- }
- /**
- * Set the comment value.
- *
- * @param {String} [value] The value to use.
- */
- }, {
- key: 'setValue',
- value: function setValue() {
- var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
- value = value || '';
- this.getInputElement().value = value;
- }
- /**
- * Get the comment value.
- *
- * @returns {String}
- */
- }, {
- key: 'getValue',
- value: function getValue() {
- return this.getInputElement().value;
- }
- /**
- * Checks if the comment input element is focused.
- *
- * @returns {Boolean}
- */
- }, {
- key: 'isFocused',
- value: function isFocused() {
- return document.activeElement === this.getInputElement();
- }
- /**
- * Focus the comments input element.
- */
- }, {
- key: 'focus',
- value: function focus() {
- this.getInputElement().focus();
- }
- /**
- * Create the `textarea` to be used as a comments editor.
- *
- * @returns {HTMLElement}
- */
- }, {
- key: 'createEditor',
- value: function createEditor() {
- var container = document.querySelector('.' + CommentEditor.CLASS_EDITOR_CONTAINER);
- var editor = void 0;
- var textArea = void 0;
- if (!container) {
- container = document.createElement('div');
- addClass(container, CommentEditor.CLASS_EDITOR_CONTAINER);
- document.body.appendChild(container);
- }
- editor = document.createElement('div');
- addClass(editor, CommentEditor.CLASS_EDITOR);
- textArea = document.createElement('textarea');
- addClass(textArea, CommentEditor.CLASS_INPUT);
- editor.appendChild(textArea);
- container.appendChild(editor);
- return editor;
- }
- /**
- * Get the input element.
- *
- * @returns {HTMLElement}
- */
- }, {
- key: 'getInputElement',
- value: function getInputElement() {
- return this.editor.querySelector('.' + CommentEditor.CLASS_INPUT);
- }
- /**
- * Destroy the comments editor.
- */
- }, {
- key: 'destroy',
- value: function destroy() {
- this.editor.parentNode.removeChild(this.editor);
- this.editor = null;
- this.editorStyle = null;
- }
- }]);
- return CommentEditor;
- }();
- export default CommentEditor;
|