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 });