editor: gutter comments - editing a comment

diff --git a/src/editor/modules/documentCanvas/canvas/comments/comment.html b/src/editor/modules/documentCanvas/canvas/comments/comment.html
index 3ba1cec..47af2ce 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/comments/comment.html
+++ b/src/editor/modules/documentCanvas/canvas/comments/comment.html
@@ -6,6 +6,17 @@
     <div style="clear: both"></div>
     <div class="content">
         <%= content %>
     <div style="clear: both"></div>
     <div class="content">
         <%= content %>

-        <div class="toolbox"><a href="#" class="remove-btn"><%= gettext('remove') %></a></div>

     </div>
     </div>

-</div>
\ No newline at end of file
+    <div class="edit">
+        <textarea rows="1"></textarea>
+        <div>
+            <button class="btn btn-info btn-mini edit-save-btn" disabled><%= gettext('Save') %></button>
+            <button class="btn btn-mini edit-cancel-btn"><%= gettext('Cancel') %></button>
+            <div style="clear:both;"></div>
+        </div>
+    </div>
+    <div class="toolbox">
+        <a href="#" class="edit-start-btn"><%= gettext('edit') %></a>
+        <a href="#" class="remove-btn"><%= gettext('remove') %></a>
+    </div>
+</div>

diff --git a/src/editor/modules/documentCanvas/canvas/comments/comments.js b/src/editor/modules/documentCanvas/canvas/comments/comments.js
index 790731f..41ed973 100644 (file)
--- 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) {
 
             })
             .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));
         
                 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
 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 (file)
--- 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;
         }
         .content {
             padding: 5px;
         }

+
+        .edit {
+            display: none;
+        }

     }
 
     .newComment {
     }
 
     .newComment {

diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js
index e0fc84b..d3debb2 100644 (file)
--- 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) {
         }
     },
     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;
                 }
                 if(toSet === '') {
                     toSet = utils.unicode.ZWS;
                 }


@@ -166,6 +169,10 @@ $.extend(generic, {
                 return true;
             }
         });
                 return true;
             }
         });

+
+        if(!handled && node.parent() && node.parent().is('comment') && this.wlxmlNode.sameNode(node.parent().parent())) {
+            this.commentsView.render();
+        }

     },
 
     onStateChange: function(changes) {
     },
 
     onStateChange: function(changes) {