Extract comments.Template class from comments.List. (0afee496) · Commits · extjs / jsduck

template/app/view/comments/List.js

+3 −108

Original line number	Diff line number	Diff line
		@@ -7,7 +7,8 @@ Ext.define('Docs.view.comments.List', {
		requires: [
		'Docs.Auth',
		'Docs.Syntax',
		'Docs.Comments'
		'Docs.Comments',
		'Docs.view.comments.Template'
		],

		itemSelector: "div.comment",
		@@ -31,42 +32,7 @@ Ext.define('Docs.view.comments.List', {
		]
		});

		this.tpl = [
		'<div class="comment-list">',
		'<tpl for=".">',
		'<div class="comment" id="{id}">',
		'<div class="com-meta">',
		'{[Docs.Comments.avatar(values.emailHash)]}',
		'<div class="author<tpl if="moderator"> moderator" title="Sencha Engineer</tpl>">',
		'{author}',
		'<tpl if="showCls">',
		'<span class="target"> on {[this.target(values.target)]}</span>',
		'</tpl>',
		'</div>',
		'<tpl if="this.isMod()">',
		'<a href="#" class="readComment <tpl if="read">read</tpl>">Read</a>',
		'</tpl>',
		'<tpl if="this.isMod() \|\| this.isAuthor(values.author)">',
		'<a href="#" class="editComment">Edit</a><a href="#" class="deleteComment">Delete</a>',
		'</tpl>',
		'<div class="time" title="{[this.date(values.createdAt)]}">{[this.dateStr(values.createdAt)]}</div>',
		'<div class="vote">',
		'<a href="#" class="voteCommentUp{[values.upVote ? " selected" : ""]}" ',
		'title="Vote Up"> </a>',
		'<span class="score">{score}</span>',
		'<a href="#" class="voteCommentDown{[values.downVote ? " selected" : ""]}" ',
		'title="Vote Down"> </a>',
		'</div>',
		'</div>',
		'<div class="content">{contentHtml}</div>',
		'</div>',
		'</tpl>',
		'<div class="new-comment-wrap"></div>',
		'</div>',
		'{[this.recentCommentsPager(values)]}',
		// to use all methods of this class inside the template
		this
		];
		this.tpl = Docs.view.comments.Template;

		this.callParent(arguments);

		@@ -89,77 +55,6 @@ Ext.define('Docs.view.comments.List', {

		syntaxHighlight: function() {
		Docs.Syntax.highlight(this.getEl());
		},

		dateStr: function(date) {
		try {
		var now = Math.ceil(Number(new Date()) / 1000);
		var comment = Math.ceil(Number(new Date(date)) / 1000);
		var diff = now - comment;

		if (diff < 60) {
		return 'just now';
		}
		else if (diff < 60*60) {
		var str = String(Math.round(diff / (60)));
		return str + (str == "1" ? ' minute' : ' minutes') + ' ago';
		}
		else if (diff < 606024) {
		var str = String(Math.round(diff / (60*60)));
		return str + (str == "1" ? ' hour' : ' hours') + ' ago';
		}
		else if (diff < 606024*31) {
		var str = String(Math.round(diff / (60 * 60 * 24)));
		return str + (str == "1" ? ' day' : ' days') + ' ago';
		}
		else {
		return Ext.Date.format(new Date(date), 'jS M \'y');
		}
		} catch(e) {
		return '';
		}
		},

		date: function(date) {
		try {
		return Ext.Date.format(new Date(date), 'jS F Y g:ia');
		} catch(e) {
		return '';
		}
		},

		isMod: function() {
		return Docs.Auth.isModerator();
		},

		isAuthor: function(author) {
		return Docs.Auth.getUser().userName == author;
		},

		target: function(target) {
		var url = target[1],
		title = target[1],
		urlPrefix = '#!/api/';

		if (target[0] == 'video') {
		title = 'Video ' + title;
		urlPrefix = '#!/video/';
		}
		else if (target[0] == 'guide') {
		title = 'Guide ' + title;
		urlPrefix = '#!/guide/';
		}
		else if (target[2] != '') {
		url += '-' + target[2];
		if (target[0] == "class") {
		title += '#' + target[2].replace(/^.*-/, "");
		}
		else {
		title += ' ' + target[2];
		}
		}

		return '<a href="' + urlPrefix + url + '">' + title + '</a>';
		}

		});

template/app/view/comments/Template.js

0 → 100644

+121 −0

Original line number	Diff line number	Diff line
		/**
		* The template for rendering comments.
		*/
		Ext.define('Docs.view.comments.Template', {
		extend: 'Ext.XTemplate',
		singleton: true,
		requires: [
		'Docs.Auth',
		'Docs.Comments'
		],

		constructor: function() {
		this.callParent([
		'<div class="comment-list">',
		'<tpl for=".">',
		'<div class="comment" id="{id}">',
		'<div class="com-meta">',
		'{[Docs.Comments.avatar(values.emailHash)]}',
		'<div class="author<tpl if="moderator"> moderator" title="Sencha Engineer</tpl>">',
		'{author}',
		'<tpl if="showCls">',
		'<span class="target"> on {[this.target(values.target)]}</span>',
		'</tpl>',
		'</div>',
		'<tpl if="this.isMod()">',
		'<a href="#" class="readComment <tpl if="read">read</tpl>">Read</a>',
		'</tpl>',
		'<tpl if="this.isMod() \|\| this.isAuthor(values.author)">',
		'<a href="#" class="editComment">Edit</a><a href="#" class="deleteComment">Delete</a>',
		'</tpl>',
		'<div class="time" title="{[this.date(values.createdAt)]}">{[this.dateStr(values.createdAt)]}</div>',
		'<div class="vote">',
		'<a href="#" class="voteCommentUp{[values.upVote ? " selected" : ""]}" ',
		'title="Vote Up"> </a>',
		'<span class="score">{score}</span>',
		'<a href="#" class="voteCommentDown{[values.downVote ? " selected" : ""]}" ',
		'title="Vote Down"> </a>',
		'</div>',
		'</div>',
		'<div class="content">{contentHtml}</div>',
		'</div>',
		'</tpl>',
		'<div class="new-comment-wrap"></div>',
		'</div>',
		// to use all methods of this class inside the template
		this
		]);
		},

		dateStr: function(date) {
		try {
		var now = Math.ceil(Number(new Date()) / 1000);
		var comment = Math.ceil(Number(new Date(date)) / 1000);
		var diff = now - comment;

		if (diff < 60) {
		return 'just now';
		}
		else if (diff < 60*60) {
		var str = String(Math.round(diff / (60)));
		return str + (str == "1" ? ' minute' : ' minutes') + ' ago';
		}
		else if (diff < 606024) {
		var str = String(Math.round(diff / (60*60)));
		return str + (str == "1" ? ' hour' : ' hours') + ' ago';
		}
		else if (diff < 606024*31) {
		var str = String(Math.round(diff / (60 * 60 * 24)));
		return str + (str == "1" ? ' day' : ' days') + ' ago';
		}
		else {
		return Ext.Date.format(new Date(date), 'jS M \'y');
		}
		} catch(e) {
		return '';
		}
		},

		date: function(date) {
		try {
		return Ext.Date.format(new Date(date), 'jS F Y g:ia');
		} catch(e) {
		return '';
		}
		},

		isMod: function() {
		return Docs.Auth.isModerator();
		},

		isAuthor: function(author) {
		return Docs.Auth.getUser().userName == author;
		},

		target: function(target) {
		var url = target[1],
		title = target[1],
		urlPrefix = '#!/api/';

		if (target[0] == 'video') {
		title = 'Video ' + title;
		urlPrefix = '#!/video/';
		}
		else if (target[0] == 'guide') {
		title = 'Guide ' + title;
		urlPrefix = '#!/guide/';
		}
		else if (target[2] != '') {
		url += '-' + target[2];
		if (target[0] == "class") {
		title += '#' + target[2].replace(/^.*-/, "");
		}
		else {
		title += ' ' + target[2];
		}
		}

		return '<a href="' + urlPrefix + url + '">' + title + '</a>';
		}

		});