790731fc7a762ce9d8e5128509dd03af87231fce
[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 metaData = commentNode.getMetadata(),
102                     author, date, content;
103
104                 metaData.some(function(row) {
105                     author = row.getValue();
106                     if(author) {
107                         author = author.split(' ')[0];
108                     }
109                     return true;
110                 }, 'creator');
111                 
112                 metaData.some(function(row) {
113                     date = row.getValue();
114                     return true;
115                 }, 'date');
116
117                 content = commentNode.object.getText();
118
119                 var commentView = $(_.template(commentTemplate)({
120                     author: author ||'?',
121                     date: date || '?',
122                     content: content || '?'
123                 }));
124
125                 commentView.find('.remove-btn').on('click', function() {
126                     commentNode.document.transaction(function() {
127                         commentNode.detach();
128                     }, {
129                         metadata: {
130                             description: gettext('Remove comment')
131                         }
132                     });
133                 });
134
135                 this.list.append(commentView);
136                 this.textarea.attr('placeholder', gettext('Respond') + '...');
137             }.bind(this));
138         
139     },
140     onActivated: function() {
141         //if(this.list.find('.comment').length === 0) {
142             this.dom.find('.newComment').toggle(true);
143         //}
144        //this.dom.show();
145
146     },
147     onDeactivated: function() {
148       this.dom.find('.newComment').toggle(false);
149       this.addButton.hide();
150       this.cancelButton.hide();
151       //this.dom.hide();
152
153     },
154
155     getHeight: function() {
156         return this.dom.outerHeight();
157     }
158
159 });
160
161
162 return View;
163
164 });