src/editor/modules/documentCanvas/canvas/comments/comments.js

   1 define(function(require) {
   2
   3 'use strict';
   4 /* globals 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 makeAutoResizable = function(textarea) {
  15     textarea.on('input', function() {
  16         resize(textarea);
  17     });
  18 };
  19
  20 var resize = function(textarea) {
  21     if(textarea.prop('scrollHeight') > textarea.prop('clientHeight')) {
  22         textarea.height(textarea.prop('scrollHeight'));
  23     }
  24 };
  25
  26
  27 var CommentsView = function(node, user) {
  28     this.node = node;
  29     this.user = user;
  30     this.dom = $(_.template(commentsTemplate)());
  31     this.list = this.dom.find('.list');
  32     this.textarea = this.dom.find('textarea');
  33     this.addButton = this.dom.find('button.btnAdd');
  34     this.cancelButton = this.dom.find('button.btnCancel');
  35
  36     this.textarea.on('input', function() {
  37         this.addButton.attr('disabled', this.textarea.val() === '');
  38     }.bind(this));
  39     makeAutoResizable(this.textarea);
  40
  41     this.addButton.hide();
  42     this.cancelButton.hide();
  43     this.textarea.on('focus', function() {
  44         this.addButton.show();
  45         this.cancelButton.show();
  46     }.bind(this));
  47
  48     this.addButton.on('click', function() {
  49         if(!this.node) {
  50             return;
  51         }
  52
  53         this.node.document.transaction(function() {
  54             var commentNode = this.node.document.createDocumentNode({tagName: 'aside', attrs: {'class': 'comment'}}),
  55                 metadata = commentNode.getMetadata(),
  56                 creator;
  57
  58             if(this.user) {
  59                 creator = this.user.name;
  60                 if(this.user.email) {
  61                     creator += ' (' + this.user.email + ')';
  62                 }
  63             } else {
  64                 creator = 'anonymous';
  65             }
  66
  67             metadata.add({key: 'creator', value: creator});
  68             metadata.add({key: 'date', value: datetime.currentStrfmt()});
  69             commentNode.append({text: this.textarea.val()});
  70
  71             this.node.append(commentNode);
  72         }.bind(this), {
  73             metadata: {
  74                 description: gettext('Add comment')
  75             },
  76             success: function() {
  77                 this.textarea.val('');
  78             }.bind(this)
  79         });
  80
  81     }.bind(this));
  82
  83     this.cancelButton.on('click', function() {
  84         this.addButton.hide();
  85         this.cancelButton.hide();
  86         this.textarea.val('');
  87     }.bind(this));
  88
  89     this.render();
  90     this.onDeactivated();
  91
  92 };
  93
  94 _.extend(CommentsView.prototype, {
  95     render: function() {
  96         this.list.empty();
  97         this.textarea.attr('placeholder', gettext('Comment'));
  98
  99         this.node.contents()
 100             .filter(function(child) {
 101                 return child.is({tag: 'aside', klass: 'comment'});
 102             })
 103             .forEach(function(commentNode) {
 104                 var commentView = new CommentView(commentNode);
 105                 this.list.append(commentView.dom);
 106                 this.textarea.attr('placeholder', gettext('Respond') + '...');
 107             }.bind(this));
 108     },
 109     onActivated: function() {
 110             this.dom.find('.newComment').toggle(true);
 111     },
 112     onDeactivated: function() {
 113       this.dom.find('.newComment').toggle(false);
 114       this.addButton.hide();
 115       this.cancelButton.hide();
 116     },
 117 });
 118
 119
 120 var CommentView = function(commentNode) {
 121     this.node = commentNode;
 122
 123     var metaData = this.node.getMetadata(),
 124         author, date;
 125
 126     metaData.some(function(row) {
 127         author = row.getValue();
 128         if(author) {
 129             author = author.split(' ')[0];
 130         }
 131         return true;
 132     }, 'creator');
 133
 134     metaData.some(function(row) {
 135         date = row.getValue();
 136         if(/[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/g.test(date)) {
 137             date = date.split(':');
 138             date.pop();
 139             date = date.join(':');
 140         }
 141         return true;
 142     }, 'date');
 143
 144     this.dom = $(_.template(commentTemplate)({
 145         author: author ||'?',
 146         date: date || '?',
 147         content: this.node.object.getText() || '?'
 148     }));
 149
 150     this.contentElement = this.dom.find('.content');
 151     this.editElement = this.dom.find('.edit');
 152     this.deleteDialogElement = this.dom.find('.deleteDialog');
 153
 154     this.dom.find('.remove-btn').on('click', function() {
 155         this.deleteDialogElement.show();
 156     }.bind(this));
 157
 158     this.dom.find('.deleteDialog-confirm').on('click', function() {
 159         this.node.document.transaction(function() {
 160             this.node.detach();
 161         }.bind(this), {
 162             metadata: {
 163                 description: gettext('Remove comment')
 164             }
 165         });
 166     }.bind(this));
 167
 168     this.dom.find('.deleteDialog-cancel').on('click', function() {
 169         this.deleteDialogElement.hide();
 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     }.bind(this));
 188     makeAutoResizable(this.textarea);
 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         resize(this.textarea);
 197         this.textarea.focus();
 198     },
 199     saveEditing: function() {
 200         var newContent = this.editElement.find('textarea').val();
 201         this.node.document.transaction(function() {
 202             this.node.object.setText(newContent);
 203         }.bind(this), {
 204             metadata: {
 205                 description: gettext('Edit comment')
 206             }
 207         });
 208     },
 209     cancelEditing: function() {
 210         this.contentElement.show();
 211         this.editElement.find('textarea').val('');
 212         this.editElement.hide();
 213     },
 214 });
 215
 216
 217 return CommentsView;
 218
 219 });