New RepliesExpander component. (93dbe590) · Commits · extjs / jsduck

template/app/view/comments/Expander.js

+3 −15

Original line number	Diff line number	Diff line
		@@ -16,10 +16,6 @@ Ext.define('Docs.view.comments.Expander', {
		* @cfg {String[]} target
		* The target specification array `[type, cls, member]`.
		*/
		/**
		* @cfg {String[]} parentId
		* ID of the parent comment, if any.
		*/
		/**
		* @cfg {Number} count
		*/
		@@ -103,21 +99,13 @@ Ext.define('Docs.view.comments.Expander', {
		loadComments: function() {
		this.list = new Docs.view.comments.ListWithForm({
		target: this.target,
		parentId: this.parentId,
		newCommentTitle: this.newCommentTitle,
		renderTo: this.getEl()
		});

		if (this.parentId) {
		Docs.Comments.loadReplies(this.parentId, function(comments) {
		this.list.load(comments);
		}, this);
		}
		else {
		Docs.Comments.load(this.target, function(comments) {
		this.list.load(comments);
		}, this);
		}
		},

		/**

template/app/view/comments/List.js

+2 −3

Original line number	Diff line number	Diff line
		@@ -11,7 +11,7 @@ Ext.define('Docs.view.comments.List', {
		'Docs.view.comments.Template',
		'Docs.view.comments.Form',
		'Docs.view.comments.TagEditor',
		'Docs.view.comments.Expander',
		'Docs.view.comments.RepliesExpander',
		'Docs.model.Comment',
		'Docs.Tip'
		],
		@@ -53,11 +53,10 @@ Ext.define('Docs.view.comments.List', {
		}

		Ext.Array.forEach(comments, function(comment) {
		new Docs.view.comments.Expander({
		new Docs.view.comments.RepliesExpander({
		count: comment.get("replyCount"),
		target: comment.get("target"),
		parentId: comment.get("id"),
		newCommentTitle: "<b>Reply to comment</b>",
		renderTo: this.getNode(comment)
		});
		}, this);

template/app/view/comments/ListWithForm.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -12,6 +12,7 @@ Ext.define('Docs.view.comments.ListWithForm', {
		'Docs.Comments',
		'Docs.Auth'
		],
		componentCls: "comments-list-with-form",

		/**
		* @cfg {String[]} target

template/app/view/comments/RepliesExpander.js

0 → 100644

+128 −0

Original line number	Diff line number	Diff line
		/**
		* The comment replies expander, showing the number of replies.
		*/
		Ext.define('Docs.view.comments.RepliesExpander', {
		alias: "widget.commentsRepliesExpander",
		extend: 'Ext.Component',
		requires: [
		'Docs.Comments'
		],
		uses: [
		'Docs.view.comments.ListWithForm'
		],
		componentCls: "comments-replies-expander",

		/**
		* @cfg {String[]} target
		* The target specification array `[type, cls, member]`.
		*/
		/**
		* @cfg {String[]} parentId
		* ID of the parent comment, if any.
		*/
		/**
		* @cfg {Number} count
		*/

		initComponent: function() {
		this.tpl = new Ext.XTemplate(
		'<a href="#" class="replies-button {[this.getCountCls(values.count)]}">',
		'{[this.renderCount(values.count)]}',
		'</a>',
		{
		renderCount: this.renderCount,
		getCountCls: this.getCountCls
		}
		);

		this.data = {
		count: this.count
		};

		this.callParent(arguments);
		},

		renderCount: function(count) {
		if (count === 1) {
		return '1 reply...';
		}
		else if (count > 1) {
		return count + ' replies...';
		}
		else {
		return 'Write reply...';
		}
		},

		getCountCls: function(count) {
		return (count > 0) ? 'with-replies' : '';
		},

		afterRender: function() {
		this.callParent(arguments);
		this.getEl().down(".replies-button").on("click", this.toggle, this, {
		preventDefault: true
		});
		},

		toggle: function() {
		this.expanded ? this.collapse() : this.expand();
		},

		/**
		* Expands the comments list.
		*/
		expand: function() {
		this.expanded = true;
		this.getEl().down('.replies-button').update("Hide replies.");

		if (this.list) {
		this.list.show();
		}
		else {
		this.loadComments();
		}
		},

		/**
		* Collapses the comments list, leaving just count.
		*/
		collapse: function() {
		this.expanded = false;
		this.refreshRepliesButton();

		if (this.list) {
		this.list.hide();
		}
		},

		refreshRepliesButton: function() {
		var btn = this.getEl().down('.replies-button');
		btn.update(this.renderCount(this.count));
		btn.removeCls("with-replies");
		btn.addCls(this.getCountCls(this.count));
		},

		loadComments: function() {
		this.list = new Docs.view.comments.ListWithForm({
		target: this.target,
		parentId: this.parentId,
		newCommentTitle: "<b>Reply to comment</b>",
		renderTo: this.getEl()
		});

		Docs.Comments.loadReplies(this.parentId, function(comments) {
		this.list.load(comments);
		}, this);
		},

		/**
		* Updates the comment count.
		* @param {Number} count
		*/
		setCount: function(count) {
		this.count = count;
		this.refreshRepliesButton();
		}

		});

template/resources/sass/_comments.scss

+26 −5

Original line number	Diff line number	Diff line
		@@ -164,11 +164,13 @@ form.commentForm {
		padding-top: 10px;
		padding-left: 2px;
		&:hover {
		.com-meta .top-right {
		.command,
		.vote {
		// Use child > selector to ensure the hover also
		// happens for the list of comment replies.
		> .com-meta > .top-right > .command,
		> .com-meta > .top-right > .vote,
		> .comments-replies-expander > .replies-button {
		@include transition(opacity, 0.2s, linear);
		@include opacity(1); } } }
		@include opacity(1); } }
		.target {
		color: #666;
		font-size: 90%;
		@@ -285,8 +287,27 @@ form.commentForm {
		font-size: 16px; } } }
		.content {
		min-height: 65px;
		padding: 0 0 15px 40px;
		padding: 0 0 30px 40px;
		border-bottom: 1px solid #eee; }
		.comments-replies-expander {
		.replies-button {
		position: relative;
		top: -20px;
		height: 0;
		display: block;
		padding-left: 40px;
		font-weight: bold;
		@include opacity(0);
		@include transition(opacity, 0.2s, linear);
		color: $moderator-color-light;
		&.with-replies {
		@include opacity(1); }
		&:hover {
		color: $moderator-color; } }
		.comments-list-with-form {
		padding-left: 1em;
		border-left: 1em solid #EBF3FE; } }

		.deleted-comment {
		text-align: center;
		background: #ffd76e;