Move Comments to compiled handlebars
Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
This commit is contained in:
parent
187953153a
commit
d281f2625d
|
@ -11,49 +11,6 @@
|
||||||
/* global Handlebars, escapeHTML */
|
/* global Handlebars, escapeHTML */
|
||||||
|
|
||||||
(function(OC, OCA) {
|
(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
|
* @memberof OCA.Comments
|
||||||
|
@ -93,22 +50,16 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
template: function(params) {
|
template: function(params) {
|
||||||
if (!this._template) {
|
|
||||||
this._template = Handlebars.compile(TEMPLATE);
|
|
||||||
}
|
|
||||||
var currentUser = OC.getCurrentUser();
|
var currentUser = OC.getCurrentUser();
|
||||||
return this._template(_.extend({
|
return OCA.Comments.Templates['view'](_.extend({
|
||||||
actorId: currentUser.uid,
|
actorId: currentUser.uid,
|
||||||
actorDisplayName: currentUser.displayName
|
actorDisplayName: currentUser.displayName
|
||||||
}, params));
|
}, params));
|
||||||
},
|
},
|
||||||
|
|
||||||
editCommentTemplate: function(params) {
|
editCommentTemplate: function(params) {
|
||||||
if (!this._editCommentTemplate) {
|
|
||||||
this._editCommentTemplate = Handlebars.compile(EDIT_COMMENT_TEMPLATE);
|
|
||||||
}
|
|
||||||
var currentUser = OC.getCurrentUser();
|
var currentUser = OC.getCurrentUser();
|
||||||
return this._editCommentTemplate(_.extend({
|
return OCA.Comments.Templates['edit_comment'](_.extend({
|
||||||
actorId: currentUser.uid,
|
actorId: currentUser.uid,
|
||||||
actorDisplayName: currentUser.displayName,
|
actorDisplayName: currentUser.displayName,
|
||||||
newMessagePlaceholder: t('comments', 'New comment …'),
|
newMessagePlaceholder: t('comments', 'New comment …'),
|
||||||
|
@ -119,10 +70,6 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
commentTemplate: function(params) {
|
commentTemplate: function(params) {
|
||||||
if (!this._commentTemplate) {
|
|
||||||
this._commentTemplate = Handlebars.compile(COMMENT_TEMPLATE);
|
|
||||||
}
|
|
||||||
|
|
||||||
params = _.extend({
|
params = _.extend({
|
||||||
editTooltip: t('comments', 'Edit comment'),
|
editTooltip: t('comments', 'Edit comment'),
|
||||||
isUserAuthor: OC.getCurrentUser().uid === params.actorId,
|
isUserAuthor: OC.getCurrentUser().uid === params.actorId,
|
||||||
|
@ -135,7 +82,7 @@
|
||||||
params.actorDisplayName = t('comments', '[Deleted user]');
|
params.actorDisplayName = t('comments', '[Deleted user]');
|
||||||
}
|
}
|
||||||
|
|
||||||
return this._commentTemplate(params);
|
return OCA.Comments.Templates['comment'](params);
|
||||||
},
|
},
|
||||||
|
|
||||||
getLabel: function() {
|
getLabel: function() {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
[
|
[
|
||||||
"app.js",
|
"app.js",
|
||||||
|
"templates.js",
|
||||||
"commentmodel.js",
|
"commentmodel.js",
|
||||||
"commentcollection.js",
|
"commentcollection.js",
|
||||||
"commentsummarymodel.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
|
# Files app
|
||||||
handlebars -n OCA.Files.Templates apps/files/js/templates -f apps/files/js/templates.js
|
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
|
if [[ $(git diff --name-only) ]]; then
|
||||||
echo "Please submit your compiled handlebars templates"
|
echo "Please submit your compiled handlebars templates"
|
||||||
echo
|
echo
|
||||||
|
|
|
@ -87,6 +87,7 @@ module.exports = function(config) {
|
||||||
srcFiles: [
|
srcFiles: [
|
||||||
// need to enforce loading order...
|
// need to enforce loading order...
|
||||||
'apps/comments/js/app.js',
|
'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/Caret.js/dist/jquery.caret.min.js',
|
||||||
'apps/comments/js/vendor/At.js/dist/js/jquery.atwho.min.js',
|
'apps/comments/js/vendor/At.js/dist/js/jquery.atwho.min.js',
|
||||||
'apps/comments/js/commentmodel.js',
|
'apps/comments/js/commentmodel.js',
|
||||||
|
|
Loading…
Reference in New Issue