2016-01-27 20:28:55 +03:00
|
|
|
/*
|
|
|
|
* Copyright (c) 2016
|
|
|
|
*
|
|
|
|
* This file is licensed under the Affero General Public License version 3
|
|
|
|
* or later.
|
|
|
|
*
|
|
|
|
* See the COPYING-README file.
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
2016-02-01 18:37:33 +03:00
|
|
|
(function(OC, OCA) {
|
2016-01-27 20:28:55 +03:00
|
|
|
var TEMPLATE =
|
2016-02-01 18:37:33 +03:00
|
|
|
'<div class="newCommentRow comment">' +
|
|
|
|
' <div class="authorRow">' +
|
|
|
|
' {{#if avatarEnabled}}' +
|
|
|
|
' <div class="avatar" data-username="{{userId}}"></div>' +
|
|
|
|
' {{/if}}' +
|
|
|
|
' <div class="author">{{userDisplayName}}</div>' +
|
|
|
|
' </div>' +
|
|
|
|
' <form class="newCommentForm">' +
|
|
|
|
' <textarea class="message" placeholder="{{newMessagePlaceholder}}"></textarea>' +
|
|
|
|
' <input class="submit" type="submit" value="{{submitText}}" />' +
|
|
|
|
' </form>' +
|
|
|
|
' <ul class="comments">' +
|
|
|
|
' </ul>' +
|
2016-01-27 20:28:55 +03:00
|
|
|
'</div>' +
|
|
|
|
'<div class="empty hidden">{{emptyResultLabel}}</div>' +
|
|
|
|
'<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
|
|
|
|
' name="show-more" id="show-more" />' +
|
|
|
|
'<div class="loading hidden" style="height: 50px"></div>';
|
|
|
|
|
|
|
|
var COMMENT_TEMPLATE =
|
2016-02-01 18:37:33 +03:00
|
|
|
'<li class="comment">' +
|
|
|
|
' <div class="authorRow">' +
|
|
|
|
' {{#if avatarEnabled}}' +
|
|
|
|
' <div class="avatar" data-username="{{actorId}}"> </div>' +
|
|
|
|
' {{/if}}' +
|
|
|
|
' <div class="author">{{actorDisplayName}}</div>' +
|
|
|
|
' <div class="date has-tooltip" title="{{altDate}}">{{date}}</div>' +
|
|
|
|
' </div>' +
|
|
|
|
' <div class="message">{{message}}</div>' +
|
2016-01-27 20:28:55 +03:00
|
|
|
'</li>';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @memberof OCA.Comments
|
|
|
|
*/
|
|
|
|
var CommentsTabView = OCA.Files.DetailTabView.extend(
|
|
|
|
/** @lends OCA.Comments.CommentsTabView.prototype */ {
|
|
|
|
id: 'commentsTabView',
|
|
|
|
className: 'tab commentsTabView',
|
|
|
|
|
|
|
|
events: {
|
2016-01-28 16:24:12 +03:00
|
|
|
'submit .newCommentForm': '_onSubmitComment',
|
|
|
|
'click .showMore': '_onClickShowMore'
|
2016-01-27 20:28:55 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
OCA.Files.DetailTabView.prototype.initialize.apply(this, arguments);
|
|
|
|
this.collection = new OCA.Comments.CommentsCollection();
|
|
|
|
this.collection.on('request', this._onRequest, this);
|
|
|
|
this.collection.on('sync', this._onEndRequest, this);
|
|
|
|
this.collection.on('add', this._onAddModel, this);
|
2016-02-01 18:37:33 +03:00
|
|
|
|
|
|
|
this._avatarsEnabled = !!OC.config.enable_avatars;
|
|
|
|
|
2016-01-27 20:28:55 +03:00
|
|
|
// TODO: error handling
|
|
|
|
_.bindAll(this, '_onSubmitComment');
|
|
|
|
},
|
|
|
|
|
|
|
|
template: function(params) {
|
|
|
|
if (!this._template) {
|
|
|
|
this._template = Handlebars.compile(TEMPLATE);
|
|
|
|
}
|
2016-02-01 18:37:33 +03:00
|
|
|
var currentUser = OC.getCurrentUser();
|
2016-01-27 20:28:55 +03:00
|
|
|
return this._template(_.extend({
|
2016-02-01 18:37:33 +03:00
|
|
|
avatarEnabled: this._avatarsEnabled,
|
|
|
|
userId: currentUser.uid,
|
|
|
|
userDisplayName: currentUser.displayName,
|
|
|
|
newMessagePlaceholder: t('comments', 'Type in a new comment...'),
|
|
|
|
submitText: t('comments', 'Post')
|
2016-01-27 20:28:55 +03:00
|
|
|
}, params));
|
|
|
|
},
|
|
|
|
|
|
|
|
commentTemplate: function(params) {
|
|
|
|
if (!this._commentTemplate) {
|
|
|
|
this._commentTemplate = Handlebars.compile(COMMENT_TEMPLATE);
|
|
|
|
}
|
2016-02-01 18:37:33 +03:00
|
|
|
return this._commentTemplate(_.extend({
|
|
|
|
avatarEnabled: this._avatarsEnabled
|
|
|
|
}, params));
|
2016-01-27 20:28:55 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getLabel: function() {
|
|
|
|
return t('comments', 'Comments');
|
|
|
|
},
|
|
|
|
|
|
|
|
setFileInfo: function(fileInfo) {
|
|
|
|
if (fileInfo) {
|
|
|
|
this.render();
|
|
|
|
this.collection.setObjectId(fileInfo.id);
|
|
|
|
// reset to first page
|
|
|
|
this.collection.reset([], {silent: true});
|
|
|
|
this.nextPage();
|
|
|
|
} else {
|
|
|
|
this.render();
|
|
|
|
this.collection.reset();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.$el.html(this.template({
|
|
|
|
emptyResultLabel: t('comments', 'No other comments available'),
|
|
|
|
moreLabel: t('comments', 'More comments...')
|
|
|
|
}));
|
|
|
|
this.$el.find('.has-tooltip').tooltip();
|
|
|
|
this.$container = this.$el.find('ul.comments');
|
2016-02-01 18:37:33 +03:00
|
|
|
this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 28);
|
2016-01-27 20:28:55 +03:00
|
|
|
this.delegateEvents();
|
|
|
|
},
|
|
|
|
|
|
|
|
_formatItem: function(commentModel) {
|
2016-01-28 13:47:23 +03:00
|
|
|
var timestamp = new Date(commentModel.get('creationDateTime')).getTime();
|
|
|
|
var data = _.extend({
|
|
|
|
date: OC.Util.relativeModifiedDate(timestamp),
|
|
|
|
altDate: OC.Util.formatDate(timestamp)
|
|
|
|
}, commentModel.attributes);
|
2016-01-27 20:28:55 +03:00
|
|
|
// TODO: format
|
2016-01-28 13:47:23 +03:00
|
|
|
return data;
|
2016-01-27 20:28:55 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_toggleLoading: function(state) {
|
|
|
|
this._loading = state;
|
|
|
|
this.$el.find('.loading').toggleClass('hidden', !state);
|
|
|
|
},
|
|
|
|
|
|
|
|
_onRequest: function() {
|
|
|
|
this._toggleLoading(true);
|
|
|
|
this.$el.find('.showMore').addClass('hidden');
|
|
|
|
},
|
|
|
|
|
|
|
|
_onEndRequest: function() {
|
|
|
|
this._toggleLoading(false);
|
|
|
|
this.$el.find('.empty').toggleClass('hidden', !!this.collection.length);
|
|
|
|
this.$el.find('.showMore').toggleClass('hidden', !this.collection.hasMoreResults());
|
|
|
|
},
|
|
|
|
|
|
|
|
_onAddModel: function(model, collection, options) {
|
|
|
|
var $el = $(this.commentTemplate(this._formatItem(model)));
|
|
|
|
if (!_.isUndefined(options.at) && collection.length > 1) {
|
|
|
|
this.$container.find('li').eq(options.at).before($el);
|
|
|
|
} else {
|
|
|
|
this.$container.append($el);
|
|
|
|
}
|
2016-02-01 18:37:33 +03:00
|
|
|
|
|
|
|
this._postRenderItem($el);
|
|
|
|
},
|
|
|
|
|
|
|
|
_postRenderItem: function($el) {
|
2016-01-28 13:47:23 +03:00
|
|
|
$el.find('.has-tooltip').tooltip();
|
2016-02-01 18:37:33 +03:00
|
|
|
if(this._avatarsEnabled) {
|
|
|
|
$el.find('.avatar').each(function() {
|
|
|
|
var $this = $(this);
|
|
|
|
$this.avatar($this.attr('data-username'), 28);
|
|
|
|
});
|
|
|
|
}
|
2016-01-27 20:28:55 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
nextPage: function() {
|
|
|
|
if (this._loading || !this.collection.hasMoreResults()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.collection.fetchNext();
|
|
|
|
},
|
|
|
|
|
2016-01-28 16:24:12 +03:00
|
|
|
_onClickShowMore: function(ev) {
|
2016-01-27 20:28:55 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
this.nextPage();
|
|
|
|
},
|
|
|
|
|
|
|
|
_onSubmitComment: function(e) {
|
2016-02-01 18:37:33 +03:00
|
|
|
var currentUser = OC.getCurrentUser();
|
2016-01-27 20:28:55 +03:00
|
|
|
var $textArea = $(e.target).find('textarea');
|
|
|
|
e.preventDefault();
|
|
|
|
this.collection.create({
|
2016-02-01 18:37:33 +03:00
|
|
|
actorId: currentUser.uid,
|
|
|
|
actorDisplayName: currentUser.displayName,
|
2016-01-27 20:28:55 +03:00
|
|
|
actorType: 'users',
|
|
|
|
verb: 'comment',
|
2016-01-28 13:47:23 +03:00
|
|
|
message: $textArea.val(),
|
|
|
|
creationDateTime: (new Date()).getTime()
|
2016-01-27 20:28:55 +03:00
|
|
|
}, {at: 0});
|
|
|
|
|
|
|
|
// TODO: spinner/disable field?
|
|
|
|
$textArea.val('');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
OCA.Comments.CommentsTabView = CommentsTabView;
|
2016-02-01 18:37:33 +03:00
|
|
|
})(OC, OCA);
|
2016-01-27 20:28:55 +03:00
|
|
|
|