Move Comments to compiled handlebars
Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
This commit is contained in:
Roeland Jago Douma
parent
187953153a
commit
d281f2625d
|
|
@ -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…
Reference in New Issue