Extract comments.List class from comments.Index. (3704922f) · Commits · extjs / jsduck

template/app/controller/Comments.js

+7 −3

Original line number	Diff line number	Diff line
		@@ -29,6 +29,10 @@ Ext.define('Docs.controller.Comments', {
		{
		ref: 'index',
		selector: '#commentindex'
		},
		{
		ref: 'commentsList',
		selector: 'commentslist'
		}
		],

		@@ -135,7 +139,7 @@ Ext.define('Docs.controller.Comments', {
		}
		},

		'commentindex': {
		'commentslist': {
		settingChange: function() {
		this.fetchRecentComments();
		}
		@@ -286,14 +290,14 @@ Ext.define('Docs.controller.Comments', {
		sortByScore: settings.sortByScore ? 1 : undefined
		};

		this.getIndex().setMasked(true);
		this.getCommentsList().setMasked(true);

		this.request("jsonp", {
		url: '/comments_recent',
		method: 'GET',
		params: params,
		success: function(response) {
		this.getIndex().setMasked(false);
		this.getCommentsList().setMasked(false);

		this.renderComments(response, 'recentcomments', {
		hideCommentForm: true,

template/app/view/comments/Index.js

+3 −119

Original line number	Diff line number	Diff line
		/**
		* Container for recent comments listing.
		* Container for recent comments and top users.
		*/
		Ext.define('Docs.view.comments.Index', {
		extend: 'Ext.panel.Panel',
		alias: 'widget.commentindex',
		mixins: ['Docs.view.Scrolling'],
		requires: [
		'Docs.Settings',
		'Docs.view.comments.List',
		'Docs.view.comments.TopUsers'
		],

		@@ -17,46 +17,7 @@ Ext.define('Docs.view.comments.Index', {
		items: [
		{
		region: "center",
		layout: "border",
		id: 'comment-index-container',
		dockedItems: [
		{
		xtype: 'container',
		dock: 'top',
		height: 35,
		html: [
		'<h1 style="float:left;">Comments</h1>',
		'<p style="float:left; margin: 5px 0 0 25px">',
		'<label style="padding-right: 10px;"><input type="checkbox" name="hideRead" id="hideRead" /> Hide read</label>',
		'<label><input type="checkbox" name="hideCurrentUser" id="hideCurrentUser" /> Hide current User</label>',
		'</p>'
		].join(" ")
		}
		],
		items: [
		{
		xtype: 'tabpanel',
		cls: "comments-tabpanel",
		plain: true,
		region: "north",
		height: 25,
		items: [
		{
		title: "Recent"
		},
		{
		title: "Votes"
		}
		]
		},
		{
		region: "center",
		xtype: 'container',
		id: 'recentcomments',
		cls: "iScroll",
		autoScroll: true
		}
		]
		xtype: "commentslist"
		},
		{
		region: "east",
		@@ -66,83 +27,6 @@ Ext.define('Docs.view.comments.Index', {
		}
		],

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

		this.initCheckboxes();
		this.initTabs();

		this.setMasked(true);
		},

		/**
		* Masks or unmasks the container
		* @param {Boolean} masked True to show mask.
		*/
		setMasked: function(masked) {
		var container = Ext.get('comment-index-container');
		if (container) {
		container[masked ? "mask" : "unmask"]();
		}
		},

		// Initializes all checkboxes from settings.
		// Bind event handlers to fire changeSetting event when checked/unchecked.
		initCheckboxes: function() {
		var settings = Docs.Settings.get("comments");
		Ext.Array.forEach(['hideRead', 'hideCurrentUser'], function(id) {
		var cb = Ext.get(id);
		if (cb) {
		cb.dom.checked = settings[id];
		cb.on("change", function() {
		this.saveSetting(id, cb.dom.checked);
		/**
		* @event settingChange
		* Fired when one of the comments settings checkboxes is checked/unchecked.
		* @param {String} name The name of the setting
		* @param {Boolean} enabled True if setting is turned on, false when off.
		*/
		this.fireEvent("settingChange", id, cb.dom.checked);
		}, this);
		}
		}, this);

		// Hide the hideRead checkbox if user is not moderator
		this.setHideReadVisibility();
		var Auth = Docs.App.getController("Auth");
		Auth.on("available", this.setHideReadVisibility, this);
		Auth.on("loggedIn", this.setHideReadVisibility, this);
		Auth.on("loggedOut", this.setHideReadVisibility, this);
		},

		setHideReadVisibility: function() {
		var mod = Docs.App.getController("Auth").isModerator();
		Ext.get("hideRead").up("label").setStyle("display", mod ? "inline" : "none");
		},

		initTabs: function() {
		if (Docs.Settings.get("comments").sortByScore) {
		this.down("tabpanel[cls=comments-tabpanel]").setActiveTab(1);
		}

		this.down("tabpanel[cls=comments-tabpanel]").on("tabchange", function(panel, newTab) {
		if (newTab.title === "Recent") {
		this.saveSetting("sortByScore", false);
		this.fireEvent("settingChange", "sortByScore", false);
		}
		else {
		this.saveSetting("sortByScore", true);
		this.fireEvent("settingChange", "sortByScore", true);
		}
		}, this);
		},

		saveSetting: function(name, enabled) {
		var settings = Docs.Settings.get('comments');
		settings[name] = enabled;
		Docs.Settings.set('comments', settings);
		},

		/**
		* Returns tab config for comments page.
		* @return {Object}

template/app/view/comments/List.js

0 → 100644

+135 −0

Original line number	Diff line number	Diff line
		/**
		* Container for recent comments listing.
		*/
		Ext.define('Docs.view.comments.List', {
		extend: 'Ext.panel.Panel',
		alias: "widget.commentslist",
		requires: ['Docs.Settings'],
		componentCls: 'comment-index-container',

		dockedItems: [
		{
		xtype: 'container',
		dock: 'top',
		height: 35,
		html: [
		'<h1 style="float:left;">Comments</h1>',
		'<p style="float:left; margin: 5px 0 0 25px">',
		'<label style="padding-right: 10px;"><input type="checkbox" name="hideRead" id="hideRead" /> Hide read</label>',
		'<label><input type="checkbox" name="hideCurrentUser" id="hideCurrentUser" /> Hide current User</label>',
		'</p>'
		].join(" ")
		}
		],

		layout: "border",
		items: [
		{
		xtype: 'tabpanel',
		cls: "comments-tabpanel",
		plain: true,
		region: "north",
		height: 25,
		items: [
		{
		title: "Recent"
		},
		{
		title: "Votes"
		}
		]
		},
		{
		region: "center",
		xtype: 'container',
		id: 'recentcomments',
		cls: "iScroll",
		autoScroll: true
		}
		],

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

		this.initCheckboxes();
		this.initTabs();

		this.setMasked(true);
		},

		/**
		* Masks or unmasks the container
		* @param {Boolean} masked True to show mask.
		*/
		setMasked: function(masked) {
		var container = this.getEl();
		if (container) {
		container[masked ? "mask" : "unmask"]();
		}
		},

		// Initializes all checkboxes from settings.
		// Bind event handlers to fire changeSetting event when checked/unchecked.
		initCheckboxes: function() {
		var settings = Docs.Settings.get("comments");
		Ext.Array.forEach(['hideRead', 'hideCurrentUser'], function(id) {
		var cb = Ext.get(id);
		if (cb) {
		cb.dom.checked = settings[id];
		cb.on("change", function() {
		this.saveSetting(id, cb.dom.checked);
		/**
		* @event settingChange
		* Fired when one of the comments settings checkboxes is checked/unchecked.
		* @param {String} name The name of the setting
		* @param {Boolean} enabled True if setting is turned on, false when off.
		*/
		this.fireEvent("settingChange", id, cb.dom.checked);
		}, this);
		}
		}, this);

		// Hide the hideRead checkbox if user is not moderator
		this.setHideReadVisibility();
		var Auth = Docs.App.getController("Auth");
		Auth.on("available", this.setHideReadVisibility, this);
		Auth.on("loggedIn", this.setHideReadVisibility, this);
		Auth.on("loggedOut", this.setHideReadVisibility, this);
		},

		setHideReadVisibility: function() {
		var mod = Docs.App.getController("Auth").isModerator();
		Ext.get("hideRead").up("label").setStyle("display", mod ? "inline" : "none");
		},

		initTabs: function() {
		if (Docs.Settings.get("comments").sortByScore) {
		this.down("tabpanel[cls=comments-tabpanel]").setActiveTab(1);
		}

		this.down("tabpanel[cls=comments-tabpanel]").on("tabchange", function(panel, newTab) {
		if (newTab.title === "Recent") {
		this.saveSetting("sortByScore", false);
		this.fireEvent("settingChange", "sortByScore", false);
		}
		else {
		this.saveSetting("sortByScore", true);
		this.fireEvent("settingChange", "sortByScore", true);
		}
		}, this);
		},

		saveSetting: function(name, enabled) {
		var settings = Docs.Settings.get('comments');
		settings[name] = enabled;
		Docs.Settings.set('comments', settings);
		},

		/**
		* Returns tab config for comments page.
		* @return {Object}
		*/
		getTab: function() {
		return Docs.enableComments ? {cls: 'comments', href: '#!/comment', tooltip: 'Comments'} : false;
		}
		});

template/resources/sass/_comments.scss

+1 −1

Original line number	Diff line number	Diff line
		@@ -295,7 +295,7 @@
		li {
		list-style-type: none; } }

		#comment-index-container .x-mask {
		.comment-index-container .x-mask {
		opacity: 0.9;
		background: #fff url(../images/ajax-loader.gif) no-repeat center; }