[common] refactoring Comments view
This commit is contained in:
Maxim Kadushkin
parent
ae675ba38f
commit
537d84cbcc
|
|
@ -72,72 +72,8 @@ define([
|
||||||
return tpl;
|
return tpl;
|
||||||
}
|
}
|
||||||
|
|
||||||
Common.Views.Comments = Common.UI.BaseView.extend(_.extend({
|
|
||||||
el: '#left-panel-comments',
|
|
||||||
template: _.template(panelTemplate),
|
|
||||||
|
|
||||||
addCommentHeight: 45,
|
|
||||||
newCommentHeight: 110,
|
|
||||||
textBoxAutoSizeLocked: undefined, // disable autosize textbox
|
|
||||||
viewmode: false,
|
|
||||||
|
|
||||||
initialize: function (options) {
|
|
||||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
|
||||||
|
|
||||||
this.store = this.options.store;
|
|
||||||
},
|
|
||||||
render: function () {
|
|
||||||
var me = this;
|
|
||||||
|
|
||||||
if (!this.rendered) {
|
|
||||||
this.$el.html(this.template({
|
|
||||||
textAddCommentToDoc: me.textAddCommentToDoc,
|
|
||||||
textAddComment: me.textAddComment,
|
|
||||||
textCancel: me.textCancel,
|
|
||||||
textEnterCommentHint: me.textEnterCommentHint,
|
|
||||||
maxCommLength: Asc.c_oAscMaxCellOrCommentLength
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.buttonAddCommentToDoc = new Common.UI.Button({
|
|
||||||
el: $('.btn.new', this.$el),
|
|
||||||
enableToggle: false
|
|
||||||
});
|
|
||||||
this.buttonAdd = new Common.UI.Button({
|
|
||||||
action: 'add',
|
|
||||||
el: $('.btn.add', this.$el),
|
|
||||||
enableToggle: false
|
|
||||||
});
|
|
||||||
this.buttonCancel = new Common.UI.Button({
|
|
||||||
el: $('.btn.cancel', this.$el),
|
|
||||||
enableToggle: false
|
|
||||||
});
|
|
||||||
|
|
||||||
this.buttonAddCommentToDoc.on('click', _.bind(this.onClickShowBoxDocumentComment, this));
|
|
||||||
this.buttonAdd.on('click', _.bind(this.onClickAddDocumentComment, this));
|
|
||||||
this.buttonCancel.on('click', _.bind(this.onClickCancelDocumentComment, this));
|
|
||||||
|
|
||||||
this.txtComment = $('#comment-msg-new', this.el);
|
|
||||||
this.txtComment.keydown(function (event) {
|
|
||||||
if ((event.ctrlKey || event.metaKey) && !event.altKey && event.keyCode == Common.UI.Keys.RETURN) {
|
|
||||||
me.onClickAddDocumentComment();
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
} else if (event.keyCode === Common.UI.Keys.TAB) {
|
|
||||||
var $this, end, start;
|
|
||||||
start = this.selectionStart;
|
|
||||||
end = this.selectionEnd;
|
|
||||||
$this = $(this);
|
|
||||||
$this.val($this.val().substring(0, start) + '\t' + $this.val().substring(end));
|
|
||||||
this.selectionStart = this.selectionEnd = start + 1;
|
|
||||||
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
var CommentsPanelDataView = Common.UI.DataView.extend((function() {
|
var CommentsPanelDataView = Common.UI.DataView.extend((function() {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
||||||
options : {
|
options : {
|
||||||
handleSelect: false,
|
handleSelect: false,
|
||||||
scrollable: true,
|
scrollable: true,
|
||||||
|
|
@ -228,49 +164,18 @@ define([
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})());
|
})());
|
||||||
if (CommentsPanelDataView) {
|
|
||||||
if (this.commentsView) {
|
|
||||||
this.commentsView.onResetItems();
|
|
||||||
} else {
|
|
||||||
this.commentsView = new CommentsPanelDataView({
|
|
||||||
el: $('.messages-ct',me.el),
|
|
||||||
store: me.store,
|
|
||||||
itemTemplate: _.template(replaceWords(commentsTemplate, {
|
|
||||||
textAddReply: me.textAddReply,
|
|
||||||
textAdd: me.textAdd,
|
|
||||||
textCancel: me.textCancel,
|
|
||||||
textEdit: me.textEdit,
|
|
||||||
textReply: me.textReply,
|
|
||||||
textClose: me.textClose,
|
|
||||||
maxCommLength: Asc.c_oAscMaxCellOrCommentLength
|
|
||||||
}))
|
|
||||||
});
|
|
||||||
|
|
||||||
var addtooltip = function (dataview, view, record) {
|
Common.Views.Comments = Common.UI.BaseView.extend(_.extend({
|
||||||
if (view.tipsArray) {
|
el: '#left-panel-comments',
|
||||||
view.tipsArray.forEach(function(item){
|
template: _.template(panelTemplate),
|
||||||
item.remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var arr = [],
|
addCommentHeight: 45,
|
||||||
btns = $(view.el).find('.btn-resolve');
|
newCommentHeight: 110,
|
||||||
btns.tooltip({title: me.textResolve, placement: 'cursor'});
|
textBoxAutoSizeLocked: undefined, // disable autosize textbox
|
||||||
btns.each(function(idx, item){
|
viewmode: false,
|
||||||
arr.push($(item).data('bs.tooltip').tip());
|
|
||||||
});
|
|
||||||
btns = $(view.el).find('.btn-resolve-check');
|
|
||||||
btns.tooltip({title: me.textOpenAgain, placement: 'cursor'});
|
|
||||||
btns.each(function(idx, item){
|
|
||||||
arr.push($(item).data('bs.tooltip').tip());
|
|
||||||
});
|
|
||||||
view.tipsArray = arr;
|
|
||||||
};
|
|
||||||
this.commentsView.on('item:add', addtooltip);
|
|
||||||
this.commentsView.on('item:remove', addtooltip);
|
|
||||||
this.commentsView.on('item:change', addtooltip);
|
|
||||||
|
|
||||||
this.commentsView.on('item:click', function (picker, item, record, e) {
|
_commentsViewOnItemClick: function (picker, item, record, e) {
|
||||||
|
var me = this;
|
||||||
var btn, showEditBox, showReplyBox, commentId, replyId, hideAddReply;
|
var btn, showEditBox, showReplyBox, commentId, replyId, hideAddReply;
|
||||||
|
|
||||||
function readdresolves() {
|
function readdresolves() {
|
||||||
|
|
@ -381,8 +286,107 @@ define([
|
||||||
me.fireEvent('comment:show', [commentId, false]);
|
me.fireEvent('comment:show', [commentId, false]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function (options) {
|
||||||
|
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||||
|
|
||||||
|
this.store = this.options.store;
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function () {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
if (!this.rendered) {
|
||||||
|
this.$el.html(this.template({
|
||||||
|
textAddCommentToDoc: me.textAddCommentToDoc,
|
||||||
|
textAddComment: me.textAddComment,
|
||||||
|
textCancel: me.textCancel,
|
||||||
|
textEnterCommentHint: me.textEnterCommentHint,
|
||||||
|
maxCommLength: Asc.c_oAscMaxCellOrCommentLength
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.buttonAddCommentToDoc = new Common.UI.Button({
|
||||||
|
el: $('.btn.new', this.$el),
|
||||||
|
enableToggle: false
|
||||||
|
});
|
||||||
|
this.buttonAdd = new Common.UI.Button({
|
||||||
|
action: 'add',
|
||||||
|
el: $('.btn.add', this.$el),
|
||||||
|
enableToggle: false
|
||||||
|
});
|
||||||
|
this.buttonCancel = new Common.UI.Button({
|
||||||
|
el: $('.btn.cancel', this.$el),
|
||||||
|
enableToggle: false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.buttonAddCommentToDoc.on('click', _.bind(this.onClickShowBoxDocumentComment, this));
|
||||||
|
this.buttonAdd.on('click', _.bind(this.onClickAddDocumentComment, this));
|
||||||
|
this.buttonCancel.on('click', _.bind(this.onClickCancelDocumentComment, this));
|
||||||
|
|
||||||
|
this.txtComment = $('#comment-msg-new', this.el);
|
||||||
|
this.txtComment.keydown(function (event) {
|
||||||
|
if ((event.ctrlKey || event.metaKey) && !event.altKey && event.keyCode == Common.UI.Keys.RETURN) {
|
||||||
|
me.onClickAddDocumentComment();
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
} else if (event.keyCode === Common.UI.Keys.TAB) {
|
||||||
|
var $this, end, start;
|
||||||
|
start = this.selectionStart;
|
||||||
|
end = this.selectionEnd;
|
||||||
|
$this = $(this);
|
||||||
|
$this.val($this.val().substring(0, start) + '\t' + $this.val().substring(end));
|
||||||
|
this.selectionStart = this.selectionEnd = start + 1;
|
||||||
|
|
||||||
|
event.stopImmediatePropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.commentsView) {
|
||||||
|
this.commentsView.onResetItems();
|
||||||
|
} else {
|
||||||
|
this.commentsView = new CommentsPanelDataView({
|
||||||
|
el: $('.messages-ct',me.el),
|
||||||
|
store: me.store,
|
||||||
|
itemTemplate: _.template(replaceWords(commentsTemplate, {
|
||||||
|
textAddReply: me.textAddReply,
|
||||||
|
textAdd: me.textAdd,
|
||||||
|
textCancel: me.textCancel,
|
||||||
|
textEdit: me.textEdit,
|
||||||
|
textReply: me.textReply,
|
||||||
|
textClose: me.textClose,
|
||||||
|
maxCommLength: Asc.c_oAscMaxCellOrCommentLength
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
|
||||||
|
var addtooltip = function (dataview, view, record) {
|
||||||
|
if (view.tipsArray) {
|
||||||
|
view.tipsArray.forEach(function(item){
|
||||||
|
item.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var arr = [],
|
||||||
|
btns = $(view.el).find('.btn-resolve');
|
||||||
|
btns.tooltip({title: me.textResolve, placement: 'cursor'});
|
||||||
|
btns.each(function(idx, item){
|
||||||
|
arr.push($(item).data('bs.tooltip').tip());
|
||||||
|
});
|
||||||
|
btns = $(view.el).find('.btn-resolve-check');
|
||||||
|
btns.tooltip({title: me.textOpenAgain, placement: 'cursor'});
|
||||||
|
btns.each(function(idx, item){
|
||||||
|
arr.push($(item).data('bs.tooltip').tip());
|
||||||
|
});
|
||||||
|
view.tipsArray = arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.commentsView.on({
|
||||||
|
'item:add': addtooltip,
|
||||||
|
'item:remove': addtooltip,
|
||||||
|
'item:change': addtooltip,
|
||||||
|
'item:click': this._commentsViewOnItemClick.bind(this)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.rendered) this.setupLayout();
|
if (!this.rendered) this.setupLayout();
|
||||||
|
|
@ -482,7 +486,7 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
setupLayout: function () {
|
setupLayout: function () {
|
||||||
var me = this, parent = $(me.el);
|
var me = this, parent = me.$el;
|
||||||
|
|
||||||
var add = $('.new-comment-ct', me.el),
|
var add = $('.new-comment-ct', me.el),
|
||||||
to = $('.add-link-ct', me.el),
|
to = $('.add-link-ct', me.el),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue