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         if(/[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/g.test(date)) {
 146             date = date.split(':');
 147             date.pop();
 148             date = date.join(':');
 149         }
 150         return true;
 151     }, 'date');
 152
 153     this.dom = $(_.template(commentTemplate)({
 154         author: author ||'?',
 155         date: date || '?',
 156         content: this.node.object.getText() || '?'
 157     }));
 158
 159     this.contentElement = this.dom.find('.content');
 160     this.editElement = this.dom.find('.edit');
 161
 162     this.dom.find('.remove-btn').on('click', function() {
 163         this.node.document.transaction(function() {
 164             this.node.detach();
 165         }.bind(this), {
 166             metadata: {
 167                 description: gettext('Remove comment')
 168             }
 169         });
 170     }.bind(this));
 171
 172     this.dom.find('.edit-start-btn').on('click', function() {
 173         this.startEditing();
 174     }.bind(this));
 175
 176     this.dom.find('.edit-save-btn').on('click', function() {
 177         this.saveEditing();
 178     }.bind(this));
 179
 180     this.dom.find('.edit-cancel-btn').on('click', function() {
 181         this.cancelEditing();
 182     }.bind(this));
 183
 184     this.textarea = this.editElement.find('textarea');
 185     this.textarea.on('input', function() {
 186         this.dom.find('.edit-save-btn').attr('disabled', this.textarea.val() === '');
 187
 188         if (this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) {
 189             this.textarea.height(this.textarea.prop('scrollHeight'));
 190         }
 191
 192
 193     }.bind(this));
 194 };
 195
 196 $.extend(CommentView.prototype, {
 197     startEditing: function() {
 198         this.contentElement.hide();
 199         this.editElement.show();
 200         this.textarea.val(this.node.object.getText());
 201         if(this.textarea.prop('scrollHeight') > this.textarea.prop('clientHeight')) {
 202             this.textarea.height(this.textarea.prop('scrollHeight'));
 203         }
 204         this.textarea.focus();
 205     },
 206     saveEditing: function() {
 207         var newContent = this.editElement.find('textarea').val();
 208         this.node.document.transaction(function() {
 209             this.node.object.setText(newContent);
 210         }.bind(this), {
 211             metadata: {
 212                 description: gettext('Edit comment')
 213             }
 214         });
 215     },
 216     cancelEditing: function() {
 217         this.contentElement.show();
 218         this.editElement.find('textarea').val('');
 219         this.editElement.hide();
 220     },
 221 });
 222
 223
 224 return View;
 225
 226 });