Show comment counts in guides/videos index page. (bd45dd0b) · Commits · extjs / jsduck

template/app/view/ThumbList.js

+45 −14

Original line number	Diff line number	Diff line
		@@ -4,6 +4,9 @@
		Ext.define('Docs.view.ThumbList', {
		extend: 'Ext.view.View',
		alias: 'widget.thumblist',
		requires: [
		'Docs.CommentCounts'
		],

		cls: 'thumb-list',
		itemSelector: 'dl',
		@@ -14,6 +17,13 @@ Ext.define('Docs.view.ThumbList', {
		*/
		urlField: 'url',

		/**
		* @cfg
		* The type to use for retrieving comment counts.
		* Should be either "guide" or "video".
		*/
		commentType: "",

		/**
		* @cfg {String[]} itemTpl
		* The template to use for rendering a single item.
		@@ -73,22 +83,43 @@ Ext.define('Docs.view.ThumbList', {
		this.itemTpl = undefined;
		this.data = undefined;

		this.on({
		'afterrender': function(cmp) {
		cmp.el.addListener('mouseover', function(evt, el) {
		this.commentCountTpl = Ext.create('Ext.Template',
		'<span class="toggleMemberComments">{0}</span>'
		);

		// Listen to viewready because the whole HTML is not yet
		// rendered when afterrender fires - and initComments relies
		// on the view being rendered fully.
		this.on("viewready", function() {
		this.initHover();
		Docs.CommentCounts.afterLoaded(this.initComments, this);
		}, this);

		this.callParent(arguments);
		},

		initHover: function() {
		this.getEl().on('mouseover', function(event, el) {
		Ext.get(el).addCls('over');
		}, this, {
		delegate: 'dd'
		});
		cmp.el.addListener('mouseout', function(evt, el) {

		this.getEl().on('mouseout', function(event, el) {
		Ext.get(el).removeCls('over');
		}, this, {
		delegate: 'dd'
		});
		}
		});
		},

		this.callParent(arguments);
		initComments: function() {
		this.getEl().select("dd").each(function(dd) {
		var name = dd.getAttributeNS("ext", this.urlField).replace(/^.*\//, "");
		var count = Docs.CommentCounts.get(this.commentType, name);
		if (count) {
		this.commentCountTpl.append(dd.down("p"), [count]);
		}
		}, this);
		},

		// Given groups data with subgroups like this:

template/app/view/guides/Index.js

+2 −3

Original line number	Diff line number	Diff line
		@@ -4,9 +4,7 @@
		Ext.define('Docs.view.guides.Index', {
		extend: 'Ext.container.Container',
		alias: 'widget.guideindex',
		requires: [
		'Docs.view.ThumbList'
		],
		requires: ['Docs.view.ThumbList'],
		mixins: ['Docs.view.Scrolling'],

		cls: 'iScroll',
		@@ -17,6 +15,7 @@ Ext.define('Docs.view.guides.Index', {
		this.items = [
		{ xtype: 'container', html: '<h1 class="eg">Guides</h1>' },
		Ext.create('Docs.view.ThumbList', {
		type: "guide",
		itemTpl: [
		'<dd ext:url="#!/guide/{name}"><div class="thumb"><img src="guides/{name}/icon.png"/></div>',
		'<div><h4>{title}</h4><p>{description}</p></div>',

template/app/view/videos/Index.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -17,6 +17,7 @@ Ext.define('Docs.view.videos.Index', {
		this.items = [
		{ xtype: 'container', html: '<h1 class="eg">Videos</h1>' },
		Ext.create('Docs.view.ThumbList', {
		type: "video",
		itemTpl: [
		'<dd ext:url="#!/video/{name}"><div class="thumb"><img src="{thumb}"/></div>',
		'<div><h4>{title}',