From ef0f264a9a385985afb67cb533cc720787b757fd Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 26 May 2014 13:22:16 +0200 Subject: [PATCH] editor: gutter comments - editing a comment --- .../canvas/comments/comment.html | 15 ++- .../canvas/comments/comments.js | 127 +++++++++++++----- .../canvas/comments/comments.less | 4 + .../documentCanvas/canvas/genericElement.js | 13 +- 4 files changed, 119 insertions(+), 40 deletions(-) diff --git a/src/editor/modules/documentCanvas/canvas/comments/comment.html b/src/editor/modules/documentCanvas/canvas/comments/comment.html index 3ba1cec..47af2ce 100644 --- a/src/editor/modules/documentCanvas/canvas/comments/comment.html +++ b/src/editor/modules/documentCanvas/canvas/comments/comment.html @@ -6,6 +6,17 @@
<%= content %> -
<%= gettext('remove') %>
- \ No newline at end of file +
+ +
+ + +
+
+
+
+ <%= gettext('edit') %> + <%= gettext('remove') %> +
+ diff --git a/src/editor/modules/documentCanvas/canvas/comments/comments.js b/src/editor/modules/documentCanvas/canvas/comments/comments.js index 790731f..41ed973 100644 --- a/src/editor/modules/documentCanvas/canvas/comments/comments.js +++ b/src/editor/modules/documentCanvas/canvas/comments/comments.js @@ -98,41 +98,8 @@ _.extend(View.prototype, { }) .forEach(function(commentNode) { - var metaData = commentNode.getMetadata(), - author, date, content; - - metaData.some(function(row) { - author = row.getValue(); - if(author) { - author = author.split(' ')[0]; - } - return true; - }, 'creator'); - - metaData.some(function(row) { - date = row.getValue(); - return true; - }, 'date'); - - content = commentNode.object.getText(); - - var commentView = $(_.template(commentTemplate)({ - author: author ||'?', - date: date || '?', - content: content || '?' - })); - - commentView.find('.remove-btn').on('click', function() { - commentNode.document.transaction(function() { - commentNode.detach(); - }, { - metadata: { - description: gettext('Remove comment') - } - }); - }); - - this.list.append(commentView); + var commentView = new CommentView(commentNode); + this.list.append(commentView.dom); this.textarea.attr('placeholder', gettext('Respond') + '...'); }.bind(this)); @@ -159,6 +126,96 @@ _.extend(View.prototype, { }); +var CommentView = function(commentNode) { + this.node = commentNode; + + var metaData = this.node.getMetadata(), + author, date; + + metaData.some(function(row) { + author = row.getValue(); + if(author) { + author = author.split(' ')[0]; + } + return true; + }, 'creator'); + + metaData.some(function(row) { + date = row.getValue(); + return true; + }, 'date'); + + this.dom = $(_.template(commentTemplate)({ + author: author ||'?', + date: date || '?', + content: this.node.object.getText() || '?' + })); + + this.contentElement = this.dom.find('.content'); + this.editElement = this.dom.find('.edit'); + + this.dom.find('.remove-btn').on('click', function() { + this.node.document.transaction(function() { + this.node.detach(); + }.bind(this), { + metadata: { + description: gettext('Remove comment') + } + }); + }.bind(this)); + + this.dom.find('.edit-start-btn').on('click', function() { + this.startEditing(); + }.bind(this)); + + this.dom.find('.edit-save-btn').on('click', function() { + this.saveEditing(); + }.bind(this)); + + this.dom.find('.edit-cancel-btn').on('click', function() { + this.cancelEditing(); + }.bind(this)); + + this.textarea = this.editElement.find('textarea'); + this.textarea.on('input', function() { + this.dom.find('.edit-save-btn').attr('disabled', this.textarea.val() === ''); + + if (this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) { + this.textarea.height(this.textarea.prop('scrollHeight')); + } + + + }.bind(this)); +}; + +$.extend(CommentView.prototype, { + startEditing: function() { + this.contentElement.hide(); + this.editElement.show(); + this.textarea.val(this.node.object.getText()); + if(this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) { + this.textarea.height(this.textarea.prop('scrollHeight')); + } + this.textarea.focus(); + }, + saveEditing: function() { + var newContent = this.editElement.find('textarea').val(); + this.node.document.transaction(function() { + this.node.object.setText(newContent); + }.bind(this), { + metadata: { + description: gettext('Edit comment') + } + }); + }, + cancelEditing: function() { + this.contentElement.show(); + this.editElement.find('textarea').val(''); + this.editElement.hide(); + }, +}); + + return View; }); \ No newline at end of file diff --git a/src/editor/modules/documentCanvas/canvas/comments/comments.less b/src/editor/modules/documentCanvas/canvas/comments/comments.less index 11b776b..7476123 100644 --- a/src/editor/modules/documentCanvas/canvas/comments/comments.less +++ b/src/editor/modules/documentCanvas/canvas/comments/comments.less @@ -26,6 +26,10 @@ .content { padding: 5px; } + + .edit { + display: none; + } } .newComment { diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js index e0fc84b..d3debb2 100644 --- a/src/editor/modules/documentCanvas/canvas/genericElement.js +++ b/src/editor/modules/documentCanvas/canvas/genericElement.js @@ -154,9 +154,12 @@ $.extend(generic, { } }, onNodeTextChange: function(event) { - var toSet = event.meta.node.getText(); - this.children().some(function(child) { - if(child.wlxmlNode.sameNode(event.meta.node)) { + var node = event.meta.node, + toSet = node.getText(), + handled; + + handled = this.children().some(function(child) { + if(child.wlxmlNode.sameNode(node)) { if(toSet === '') { toSet = utils.unicode.ZWS; } @@ -166,6 +169,10 @@ $.extend(generic, { return true; } }); + + if(!handled && node.parent() && node.parent().is('comment') && this.wlxmlNode.sameNode(node.parent().parent())) { + this.commentsView.render(); + } }, onStateChange: function(changes) { -- 2.20.1