Move Comments to compiled handlebars

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
pull/11583/head
Roeland Jago Douma 6 years ago
parent 187953153a
commit d281f2625d
No known key found for this signature in database
GPG Key ID: F941078878347C0C

@ -11,49 +11,6 @@
/* global Handlebars, escapeHTML */
(function(OC, OCA) {
var TEMPLATE =
'<ul class="comments">' +
'</ul>' +
'<div class="emptycontent hidden"><div class="icon-comment"></div>' +
'<p>{{emptyResultLabel}}</p></div>' +
'<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
' name="show-more" id="show-more" />' +
'<div class="loading hidden" style="height: 50px"></div>';
var EDIT_COMMENT_TEMPLATE =
'<{{tag}} class="newCommentRow comment" data-id="{{id}}">' +
' <div class="authorRow">' +
' <div class="avatar currentUser" data-username="{{actorId}}"></div>' +
' <div class="author currentUser">{{actorDisplayName}}</div>' +
'{{#if isEditMode}}' +
' <div class="action-container">' +
' <a href="#" class="action cancel icon icon-close has-tooltip" title="{{cancelText}}"></a>' +
' </div>' +
'{{/if}}' +
' </div>' +
' <form class="newCommentForm">' +
' <div contentEditable="true" class="message" data-placeholder="{{newMessagePlaceholder}}">{{message}}</div>' +
' <input class="submit icon-confirm has-tooltip" type="submit" value="" title="{{submitText}}"/>' +
' <div class="submitLoading icon-loading-small hidden"></div>'+
' </form>' +
'</{{tag}}>';
var COMMENT_TEMPLATE =
'<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">' +
' <div class="authorRow">' +
' <div class="avatar{{#if isUserAuthor}} currentUser{{/if}}" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
' <div class="author{{#if isUserAuthor}} currentUser{{/if}}">{{actorDisplayName}}</div>' +
'{{#if isUserAuthor}}' +
' <a href="#" class="action more icon icon-more has-tooltip"></a>' +
' <div class="deleteLoading icon-loading-small hidden"></div>' +
'{{/if}}' +
' <div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
' </div>' +
' <div class="message">{{{formattedMessage}}}</div>' +
'{{#if isLong}}' +
' <div class="message-overlay"></div>' +
'{{/if}}' +
'</li>';
/**
* @memberof OCA.Comments
@ -93,22 +50,16 @@
},
template: function(params) {
if (!this._template) {
this._template = Handlebars.compile(TEMPLATE);
}
var currentUser = OC.getCurrentUser();
return this._template(_.extend({
return OCA.Comments.Templates['view'](_.extend({
actorId: currentUser.uid,
actorDisplayName: currentUser.displayName
}, params));
},
editCommentTemplate: function(params) {
if (!this._editCommentTemplate) {
this._editCommentTemplate = Handlebars.compile(EDIT_COMMENT_TEMPLATE);
}
var currentUser = OC.getCurrentUser();
return this._editCommentTemplate(_.extend({
return OCA.Comments.Templates['edit_comment'](_.extend({
actorId: currentUser.uid,
actorDisplayName: currentUser.displayName,
newMessagePlaceholder: t('comments', 'New comment …'),
@ -119,10 +70,6 @@
},
commentTemplate: function(params) {
if (!this._commentTemplate) {
this._commentTemplate = Handlebars.compile(COMMENT_TEMPLATE);
}
params = _.extend({
editTooltip: t('comments', 'Edit comment'),
isUserAuthor: OC.getCurrentUser().uid === params.actorId,
@ -135,7 +82,7 @@
params.actorDisplayName = t('comments', '[Deleted user]');
}
return this._commentTemplate(params);
return OCA.Comments.Templates['comment'](params);
},
getLabel: function() {

@ -1,5 +1,6 @@
[
"app.js",
"templates.js",
"commentmodel.js",
"commentcollection.js",
"commentsummarymodel.js",

@ -0,0 +1,87 @@
(function() {
var template = Handlebars.template, templates = OCA.Comments.Templates = OCA.Comments.Templates || {};
templates['comment'] = template({"1":function(container,depth0,helpers,partials,data) {
return " unread";
},"3":function(container,depth0,helpers,partials,data) {
return " collapsed";
},"5":function(container,depth0,helpers,partials,data) {
return " currentUser";
},"7":function(container,depth0,helpers,partials,data) {
var helper;
return "data-username=\""
+ container.escapeExpression(((helper = (helper = helpers.actorId || (depth0 != null ? depth0.actorId : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"actorId","hash":{},"data":data}) : helper)))
+ "\"";
},"9":function(container,depth0,helpers,partials,data) {
return " <a href=\"#\" class=\"action more icon icon-more has-tooltip\"></a>\n <div class=\"deleteLoading icon-loading-small hidden\"></div>\n";
},"11":function(container,depth0,helpers,partials,data) {
return " <div class=\"message-overlay\"></div>\n";
},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
return "<li class=\"comment"
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUnread : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isLong : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "\" data-id=\""
+ alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
+ "\">\n <div class=\"authorRow\">\n <div class=\"avatar"
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUserAuthor : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "\" "
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.actorId : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "> </div>\n <div class=\"author"
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUserAuthor : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "\">"
+ alias4(((helper = (helper = helpers.actorDisplayName || (depth0 != null ? depth0.actorDisplayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorDisplayName","hash":{},"data":data}) : helper)))
+ "</div>\n"
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUserAuthor : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ " <div class=\"date has-tooltip live-relative-timestamp\" data-timestamp=\""
+ alias4(((helper = (helper = helpers.timestamp || (depth0 != null ? depth0.timestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"timestamp","hash":{},"data":data}) : helper)))
+ "\" title=\""
+ alias4(((helper = (helper = helpers.altDate || (depth0 != null ? depth0.altDate : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"altDate","hash":{},"data":data}) : helper)))
+ "\">"
+ alias4(((helper = (helper = helpers.date || (depth0 != null ? depth0.date : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"date","hash":{},"data":data}) : helper)))
+ "</div>\n </div>\n <div class=\"message\">"
+ ((stack1 = ((helper = (helper = helpers.formattedMessage || (depth0 != null ? depth0.formattedMessage : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"formattedMessage","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+ "</div>\n"
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isLong : depth0),{"name":"if","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "</li>\n";
},"useData":true});
templates['edit_comment'] = template({"1":function(container,depth0,helpers,partials,data) {
var helper;
return " <div class=\"action-container\">\n <a href=\"#\" class=\"action cancel icon icon-close has-tooltip\" title=\""
+ container.escapeExpression(((helper = (helper = helpers.cancelText || (depth0 != null ? depth0.cancelText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"cancelText","hash":{},"data":data}) : helper)))
+ "\"></a>\n </div>\n";
},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
return "<"
+ alias4(((helper = (helper = helpers.tag || (depth0 != null ? depth0.tag : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"tag","hash":{},"data":data}) : helper)))
+ " class=\"newCommentRow comment\" data-id=\""
+ alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
+ "\">\n <div class=\"authorRow\">\n <div class=\"avatar currentUser\" data-username=\""
+ alias4(((helper = (helper = helpers.actorId || (depth0 != null ? depth0.actorId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorId","hash":{},"data":data}) : helper)))
+ "\"></div>\n <div class=\"author currentUser\">"
+ alias4(((helper = (helper = helpers.actorDisplayName || (depth0 != null ? depth0.actorDisplayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorDisplayName","hash":{},"data":data}) : helper)))
+ "</div>\n"
+ ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isEditMode : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ " </div>\n <form class=\"newCommentForm\">\n <div contentEditable=\"true\" class=\"message\" data-placeholder=\""
+ alias4(((helper = (helper = helpers.newMessagePlaceholder || (depth0 != null ? depth0.newMessagePlaceholder : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"newMessagePlaceholder","hash":{},"data":data}) : helper)))
+ "\">"
+ alias4(((helper = (helper = helpers.message || (depth0 != null ? depth0.message : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"message","hash":{},"data":data}) : helper)))
+ "</div>\n <input class=\"submit icon-confirm has-tooltip\" type=\"submit\" value=\"\" title=\""
+ alias4(((helper = (helper = helpers.submitText || (depth0 != null ? depth0.submitText : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"submitText","hash":{},"data":data}) : helper)))
+ "\"/>\n <div class=\"submitLoading icon-loading-small hidden\"></div>'+\n </form>\n'</"
+ alias4(((helper = (helper = helpers.tag || (depth0 != null ? depth0.tag : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"tag","hash":{},"data":data}) : helper)))
+ ">\n";
},"useData":true});
templates['view'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
return "<ul class=\"comments\">\n</ul>\n<div class=\"emptycontent hidden\"><div class=\"icon-comment\"></div>\n <p>"
+ alias4(((helper = (helper = helpers.emptyResultLabel || (depth0 != null ? depth0.emptyResultLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"emptyResultLabel","hash":{},"data":data}) : helper)))
+ "</p></div>\n<input type=\"button\" class=\"showMore hidden\" value=\""
+ alias4(((helper = (helper = helpers.moreLabel || (depth0 != null ? depth0.moreLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"moreLabel","hash":{},"data":data}) : helper)))
+ "\" name=\"show-more\" id=\"show-more\" />\n<div class=\"loading hidden\" style=\"height: 50px\"></div>'\n";
},"useData":true});
})();

@ -0,0 +1,15 @@
<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">
<div class="authorRow">
<div class="avatar{{#if isUserAuthor}} currentUser{{/if}}" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>
<div class="author{{#if isUserAuthor}} currentUser{{/if}}">{{actorDisplayName}}</div>
{{#if isUserAuthor}}
<a href="#" class="action more icon icon-more has-tooltip"></a>
<div class="deleteLoading icon-loading-small hidden"></div>
{{/if}}
<div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>
</div>
<div class="message">{{{formattedMessage}}}</div>
{{#if isLong}}
<div class="message-overlay"></div>
{{/if}}
</li>

@ -0,0 +1,16 @@
<{{tag}} class="newCommentRow comment" data-id="{{id}}">
<div class="authorRow">
<div class="avatar currentUser" data-username="{{actorId}}"></div>
<div class="author currentUser">{{actorDisplayName}}</div>
{{#if isEditMode}}
<div class="action-container">
<a href="#" class="action cancel icon icon-close has-tooltip" title="{{cancelText}}"></a>
</div>
{{/if}}
</div>
<form class="newCommentForm">
<div contentEditable="true" class="message" data-placeholder="{{newMessagePlaceholder}}">{{message}}</div>
<input class="submit icon-confirm has-tooltip" type="submit" value="" title="{{submitText}}"/>
<div class="submitLoading icon-loading-small hidden"></div>'+
</form>
'</{{tag}}>

@ -0,0 +1,6 @@
<ul class="comments">
</ul>
<div class="emptycontent hidden"><div class="icon-comment"></div>
<p>{{emptyResultLabel}}</p></div>
<input type="button" class="showMore hidden" value="{{moreLabel}}" name="show-more" id="show-more" />
<div class="loading hidden" style="height: 50px"></div>'

@ -13,6 +13,10 @@ handlebars -n OC.ContactsMenu.Templates core/js/contactsmenu -f core/js/contacts
# Files app
handlebars -n OCA.Files.Templates apps/files/js/templates -f apps/files/js/templates.js
# Comments app
handlebars -n OCA.Comments.Templates apps/comments/js/templates -f apps/comments/js/templates.js
if [[ $(git diff --name-only) ]]; then
echo "Please submit your compiled handlebars templates"
echo

@ -87,6 +87,7 @@ module.exports = function(config) {
srcFiles: [
// need to enforce loading order...
'apps/comments/js/app.js',
'apps/comments/js/templates.js',
'apps/comments/js/vendor/Caret.js/dist/jquery.caret.min.js',
'apps/comments/js/vendor/At.js/dist/js/jquery.atwho.min.js',
'apps/comments/js/commentmodel.js',

Loading…
Cancel
Save