41ed9735ec588a27dc56fc8c5a18503ca3572beb
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / comments / comments.js
1 define(function(require) {
2     
3 'use strict';
4 /* globals Node, gettext */
5
6
7 var $ = require('libs/jquery'),
8     _ = require('libs/underscore'),
9     datetime = require('fnpjs/datetime'),
10     commentsTemplate = require('libs/text!./comments.html'),
11     commentTemplate = require('libs/text!./comment.html');
12
13
14 var View = function(node, user) {
15     this.node = node;
16     this.user = user;
17     this.dom = $(_.template(commentsTemplate)());
18     this.list = this.dom.find('.list');
19     this.textarea = this.dom.find('textarea');
20     this.addButton = this.dom.find('button.btnAdd');
21     this.cancelButton = this.dom.find('button.btnCancel');
22
23     this.textarea.on('input', function() {
24         this.addButton.attr('disabled', this.textarea.val() === '');
25
26         if (this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) {
27             this.textarea.height(this.textarea.prop('scrollHeight'));
28         }
29
30
31     }.bind(this));
32     this.addButton.hide();
33     this.cancelButton.hide();
34     this.textarea.on('focus', function() {
35         this.addButton.show();
36         this.cancelButton.show();
37     }.bind(this));
38
39     this.addButton.on('click', function() {
40         if(!this.node) {
41             return;
42         }
43
44         this.node.document.transaction(function() {
45             var commentNode = this.node.document.createDocumentNode({tagName: 'aside', attrs: {'class': 'comment'}}),
46                 metadata = commentNode.getMetadata(),
47                 creator;
48
49             if(this.user) {
50                 creator = this.user.name;
51                 if(this.user.email) {
52                     creator += ' (' + this.user.email + ')';
53                 }
54             } else {
55                 creator = 'anonymous';
56             }
57
58             metadata.add({key: 'creator', value: creator});
59             metadata.add({key: 'date', value: datetime.currentStrfmt()});
60             commentNode.append({text: this.textarea.val()});
61
62             this.node.append(commentNode);
63         }.bind(this), {
64             metadata: {
65                 description: gettext('Add comment')
66             },
67             success: function() {
68                 this.textarea.val('');
69             }.bind(this)
70         });
71
72     }.bind(this));
73
74     this.cancelButton.on('click', function() {
75         this.addButton.hide();
76         this.cancelButton.hide();
77         this.textarea.val('');
78     }.bind(this));
79
80     this.render();
81     this.onDeactivated();
82
83 };
84
85 _.extend(View.prototype, {
86     render: function() {
87         this.list.empty();
88
89         // while(this.node.getTagName() === 'span' && this.node.parent()) {
90         //     this.node = this.node.parent();
91         // }
92         this.textarea.attr('placeholder', gettext('Comment'));
93
94         this.node.contents()
95             .filter(function(child) {
96                 return child.nodeType === Node.ELEMENT_NODE && child.getTagName() === 'aside' && child.getClass() === 'comment';
97                 //return child.is({tag: 'aside', klass: 'comment'});
98
99             })
100             .forEach(function(commentNode) {
101                 var commentView = new CommentView(commentNode);
102                 this.list.append(commentView.dom);
103                 this.textarea.attr('placeholder', gettext('Respond') + '...');
104             }.bind(this));
105         
106     },
107     onActivated: function() {
108         //if(this.list.find('.comment').length === 0) {
109             this.dom.find('.newComment').toggle(true);
110         //}
111        //this.dom.show();
112
113     },
114     onDeactivated: function() {
115       this.dom.find('.newComment').toggle(false);
116       this.addButton.hide();
117       this.cancelButton.hide();
118       //this.dom.hide();
119
120     },
121
122     getHeight: function() {
123         return this.dom.outerHeight();
124     }
125
126 });
127
128
129 var CommentView = function(commentNode) {
130     this.node = commentNode;
131
132     var metaData = this.node.getMetadata(),
133         author, date;
134
135     metaData.some(function(row) {
136         author = row.getValue();
137         if(author) {
138             author = author.split(' ')[0];
139         }
140         return true;
141     }, 'creator');
142     
143     metaData.some(function(row) {
144         date = row.getValue();
145         return true;
146     }, 'date');
147
148     this.dom = $(_.template(commentTemplate)({
149         author: author ||'?',
150         date: date || '?',
151         content: this.node.object.getText() || '?'
152     }));
153
154     this.contentElement = this.dom.find('.content');
155     this.editElement = this.dom.find('.edit');
156
157     this.dom.find('.remove-btn').on('click', function() {
158         this.node.document.transaction(function() {
159             this.node.detach();
160         }.bind(this), {
161             metadata: {
162                 description: gettext('Remove comment')
163             }
164         });
165     }.bind(this));
166
167     this.dom.find('.edit-start-btn').on('click', function() {
168         this.startEditing();
169     }.bind(this));
170
171     this.dom.find('.edit-save-btn').on('click', function() {
172         this.saveEditing();
173     }.bind(this));
174
175     this.dom.find('.edit-cancel-btn').on('click', function() {
176         this.cancelEditing();
177     }.bind(this));
178
179     this.textarea = this.editElement.find('textarea');
180     this.textarea.on('input', function() {
181         this.dom.find('.edit-save-btn').attr('disabled', this.textarea.val() === '');
182
183         if (this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) {
184             this.textarea.height(this.textarea.prop('scrollHeight'));
185         }
186
187
188     }.bind(this));
189 };
190
191 $.extend(CommentView.prototype, {
192     startEditing: function() {
193         this.contentElement.hide();
194         this.editElement.show();
195         this.textarea.val(this.node.object.getText());
196         if(this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) {
197             this.textarea.height(this.textarea.prop('scrollHeight'));
198         }
199         this.textarea.focus();
200     },
201     saveEditing: function() {
202         var newContent = this.editElement.find('textarea').val();
203         this.node.document.transaction(function() {
204             this.node.object.setText(newContent);
205         }.bind(this), {
206             metadata: {
207                 description: gettext('Edit comment')
208             }
209         });
210     },
211     cancelEditing: function() {
212         this.contentElement.show();
213         this.editElement.find('textarea').val('');
214         this.editElement.hide();
215     },
216 });
217
218
219 return View;
220
221 });