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