Attempt refactor expand/collapse inside Expander. (f5e65586) · Commits · extjs / jsduck

template/app/controller/Comments.js

+6 −1

Original line number	Diff line number	Diff line
		@@ -117,7 +117,6 @@ Ext.define('Docs.controller.Comments', {
		afterrender: function(cmp) {
		// Map comment interactions to methods
		Ext.Array.each([
		[ '.toggleComments', 'click', this.toggleComments],
		[ '.toggleMemberComments', 'click', this.showMemberComments],
		[ '.toggleNewComment', 'click', this.toggleNewComment],
		[ '.toggleCommentGuide', 'click', this.toggleCommentGuide],
		@@ -144,6 +143,12 @@ Ext.define('Docs.controller.Comments', {
		}
		},

		'commentsExpander': {
		fetchComments: function(id) {
		this.fetchComments(id, this.renderComments);
		}
		},

		'commentsList': {
		hideReadChange: function() {
		this.fetchRecentComments();

template/app/view/comments/Expander.js

+72 −22

Original line number	Diff line number	Diff line
		@@ -2,6 +2,7 @@
		* The comments expander, showing the number of comments.
		*/
		Ext.define('Docs.view.comments.Expander', {
		alias: "widget.commentsExpander",
		extend: 'Ext.Component',

		/**
		@@ -20,27 +21,86 @@ Ext.define('Docs.view.comments.Expander', {
		* @cfg {Number} count
		*/

		/**
		* @event fetchComments
		* Fired when new comments need to be loaded.
		* @param {String} id ID of the comments expander div.
		*/

		initComponent: function() {
		this.tpl = new Ext.XTemplate(
		'<div class="comments-div first-child" id="comments-{id}">',
		'<a href="#" class="side toggleComments"><span></span></a>',
		'<a href="#" class="name toggleComments">',
		'<tpl if="loading">',
		'<div class="loading">Loading...</div>',
		'<tpl else>',
		'<tpl if="count > 0">',
		'View {[values.count == 1 ? "1 comment" : values.count + " comments"]}',
		'<tpl else>',
		'No comments. Click to add',
		'</tpl>',
		'</tpl>',
		'{[this.renderCount(values.count)]}',
		'</a>',
		'</div>'
		'</div>',
		{
		renderCount: this.renderCount
		}
		);

		this.data = this.prepareData();
		this.loadingTpl = new Ext.XTemplate('<div class="loading">Loading...</div>');

		var cls = this.type + '-' + this.className.replace(/\./g, '-');
		this.data = {
		id: this.memberId ? cls+"-"+this.memberId : cls,
		count: this.count
		};

		this.callParent(arguments);
		},

		renderCount: function(count) {
		if (count === 1) {
		return 'View 1 comment.';
		}
		else if (count > 1) {
		return 'View ' + count + ' comments.';
		}
		else {
		return 'No comments. Click to add.';
		}
		},

		afterRender: function() {
		this.callParent(arguments);
		this.getEl().on("click", this.toggle, this, {
		preventDefault: true,
		delegate: ".toggleComments"
		});
		},

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

		expand: function() {
		this.expanded = true;
		var div = this.getEl().down(".comments-div");
		div.addCls('open');
		div.down('.name').setStyle("display", "none");

		var list = div.down('.comment-list');
		if (list) {
		list.setStyle('display', 'block');
		}
		else {
		this.loadingTpl.append(div);
		this.fireEvent("fetchComments", div.getAttribute('id'));
		}
		},

		collapse: function() {
		this.expanded = false;
		var div = this.getEl().down(".comments-div");
		div.removeCls('open');
		div.down('.name').setStyle("display", "block");

		var list = div.down('.comment-list');
		if (list) {
		list.setStyle('display', 'none');
		}
		},

		/**
		@@ -48,17 +108,7 @@ Ext.define('Docs.view.comments.Expander', {
		* @param {Number} count
		*/
		setCount: function(count) {
		this.count = count;
		this.update(this.prepareData());
		},

		prepareData: function() {
		var cls = this.type + '-' + this.className.replace(/\./g, '-');

		return {
		id: this.memberId ? cls+"-"+this.memberId : cls,
		count: this.count
		};
		this.getEl().down(".name").update(this.renderCount(count));
		}

		});