Extract TopUsers component from comments.Index. (776df241) · Commits · extjs / jsduck

template/app/controller/Comments.js

+0 −34

Original line number	Diff line number	Diff line
		@@ -138,9 +138,6 @@ Ext.define('Docs.controller.Comments', {
		'commentindex': {
		settingChange: function() {
		this.fetchRecentComments();
		},
		usersTabChange: function(sortBy) {
		this.fetchUsers(sortBy);
		}
		},

		@@ -170,25 +167,10 @@ Ext.define('Docs.controller.Comments', {
		if (!this.recentComments) {
		this.fetchRecentComments();
		this.recentComments = true;
		this.fetchUsers("votes");
		}
		this.callParent([true]);
		},

		fetchUsers: function(sortBy) {
		this.request("jsonp", {
		url: '/users',
		method: 'GET',
		params: {
		sortBy: sortBy
		},
		success: function(users) {
		this.renderUsers(users);
		},
		scope: this
		});
		},

		fetchComments: function(id, callback, opts) {
		var startkey = Ext.JSON.encode(this.commentId(id)),
		endkey = Ext.JSON.encode(this.commentId(id).concat([{}])),
		@@ -651,22 +633,6 @@ Ext.define('Docs.controller.Comments', {
		});
		},

		renderUsers: function(users) {
		var tpl = new Ext.XTemplate(
		'<ul>',
		'<tpl for=".">',
		'<li>',
		'<span class="score">{score}</span>',
		'<img class="avatar" width="25" height="25" src="http://www.gravatar.com/avatar/{emailHash}',
		'?s=25&r=PG&d=http://www.sencha.com/img/avatar.png">',
		'<span class="username <tpl if="moderator">moderator</tpl>">{username}</span>',
		'</li>',
		'</tpl>',
		'</ul>'
		);
		tpl.overwrite(Ext.get("top-users"), users);
		},

		renderComments: function(rows, id, opts) {
		opts = opts \|\| {};

template/app/view/comments/Index.js

+6 −44

Original line number	Diff line number	Diff line
		@@ -5,7 +5,10 @@ Ext.define('Docs.view.comments.Index', {
		extend: 'Ext.panel.Panel',
		alias: 'widget.commentindex',
		mixins: ['Docs.view.Scrolling'],
		requires: ['Docs.Settings'],
		requires: [
		'Docs.Settings',
		'Docs.view.comments.TopUsers'
		],

		cls: 'comment-index',
		margin: '10 0 0 0',
		@@ -57,41 +60,9 @@ Ext.define('Docs.view.comments.Index', {
		},
		{
		region: "east",
		xtype: "topusers",
		width: 300,
		layout: "border",
		margin: '0 0 0 20',
		dockedItems: [
		{
		xtype: 'container',
		dock: 'top',
		height: 35,
		html: '<h1>Users</h1>'
		}
		],
		items: [
		{
		xtype: "tabpanel",
		cls: "users-tabpanel",
		plain: true,
		region: "north",
		height: 25,
		items: [
		{
		title: "Votes"
		},
		{
		title: "Comments"
		}
		]
		},
		{
		region: "center",
		xtype: 'container',
		id: 'top-users',
		cls: "iScroll",
		autoScroll: true
		}
		]
		margin: '0 0 0 20'
		}
		],

		@@ -164,15 +135,6 @@ Ext.define('Docs.view.comments.Index', {
		this.fireEvent("settingChange", "sortByScore", true);
		}
		}, this);

		this.down("tabpanel[cls=users-tabpanel]").on("tabchange", function(panel, newTab) {
		if (newTab.title === "Votes") {
		this.fireEvent("usersTabChange", "votes");
		}
		else {
		this.fireEvent("usersTabChange", "comments");
		}
		}, this);
		},

		saveSetting: function(name, enabled) {

template/app/view/comments/TopUsers.js

0 → 100644

+97 −0

Original line number	Diff line number	Diff line
		/**
		* View for showing users.
		* Either sorted by upvotes or comment count.
		*/
		Ext.define('Docs.view.comments.TopUsers', {
		alias: "widget.topusers",
		extend: 'Ext.panel.Panel',
		componentCls: "top-users",

		dockedItems: [
		{
		xtype: 'container',
		dock: 'top',
		height: 35,
		html: '<h1>Users</h1>'
		}
		],

		layout: "border",
		items: [
		{
		xtype: "tabpanel",
		plain: true,
		region: "north",
		height: 25,
		items: [
		{
		title: "Votes"
		},
		{
		title: "Comments"
		}
		]
		},
		{
		region: "center",
		xtype: 'container',
		cls: "iScroll users-list",
		autoScroll: true
		}
		],

		initComponent: function() {
		this.callParent(arguments);

		this.tabpanel = this.down("tabpanel");
		this.usersList = this.down("container[region=center]");

		this.tabpanel.on("tabchange", function(panel, newTab) {
		if (newTab.title === "Votes") {
		this.fetchUsers("votes");
		}
		else {
		this.fetchUsers("comments");
		}
		}, this);
		},

		afterRender: function() {
		this.callParent(arguments);
		this.fetchUsers("votes");
		},

		fetchUsers: function(sortBy) {
		this.request("jsonp", {
		url: '/users',
		method: 'GET',
		params: {
		sortBy: sortBy
		},
		success: function(users) {
		this.renderUsers(users);
		},
		scope: this
		});
		},

		request: function(type, config) {
		Docs.App.getController("Comments").request(type, config);
		},

		renderUsers: function(users) {
		var tpl = new Ext.XTemplate(
		'<ul>',
		'<tpl for=".">',
		'<li>',
		'<span class="score">{score}</span>',
		'<img class="avatar" width="25" height="25" src="http://www.gravatar.com/avatar/{emailHash}',
		'?s=25&r=PG&d=http://www.sencha.com/img/avatar.png">',
		'<span class="username <tpl if="moderator">moderator</tpl>">{username}</span>',
		'</li>',
		'</tpl>',
		'</ul>'
		);
		tpl.overwrite(this.usersList.getEl(), users);
		}
		});

template/resources/sass/_comments.scss

+1 −1

Original line number	Diff line number	Diff line
		@@ -302,7 +302,7 @@

		// Table with top-voted users

		#top-users {
		.top-users .x-panel-body .users-list {
		ul, li {
		margin: 0;
		padding: 0;