Extract Expander and MemberWrap classes. (bc72d325) · Commits · extjs / jsduck

template/app/view/Comments.js

+5 −65

Original line number	Diff line number	Diff line
		@@ -212,84 +212,24 @@ Ext.define('Docs.view.Comments', {
		* Renders the comment containers for the currently active class
		*/
		renderClassCommentContainers: function(cls) {
		// Add comment button to class toolbar
		this.getClassToolbar().showCommentCount();

		// Insert class level comment container under class intro docs
		this.classCommentsTpl.insertFirst(Ext.query('.members')[0], {
		num: 0,
		id: 'class-' + cls.name.replace(/\./g, '-')
		});

		// Add a comment container to each class member
		Ext.Array.each(Ext.query('.member .long'), function(memberDoc) {
		var id = Ext.get(memberDoc).up('.member').getAttribute('id');
		this.commentsMetaTpl.append(memberDoc, {
		num: 0,
		id: 'class-' + cls.name.replace(/\./g, '-') + '-' + id.replace(/\./g, '-')
		});
		}, this);
		this.getClassOverview().renderCommentContainers();
		},

		/**
		* Updates the comment meta information (i.e. number of comments) on a class page
		*/
		updateClassCommentMeta: function(cls) {
		var clsMeta = Docs.commentMeta['class'][cls];

		if (clsMeta && clsMeta['']) {

		// Update toolbar icon
		this.getClassToolbar().setCommentCount(clsMeta['']);

		// Update class level comments meta
		this.numCommentsTpl.overwrite(Ext.get(Ext.query('.comments-section a.name')[0]), {
		num: clsMeta['']
		});
		} else {
		// Update toolbar icon
		this.getClassToolbar().setCommentCount(0);

		// Update class level comments meta
		this.numCommentsTpl.overwrite(Ext.get(Ext.query('.comments-section a.name')[0]), {
		num: 0
		});
		}

		// Update class member comments meta
		Ext.Array.each(Ext.query('.member'), function(memberDom) {
		var memberEl = Ext.get(memberDom),
		memberId = memberEl.getAttribute('id'),
		memberCls = memberEl.down('.meta .defined-in').getAttribute('rel'),
		commentsWrap = memberEl.down('.comments-div a.name'),
		memberTitle = memberEl.down('.title'),
		numComments = Docs.commentMeta['class'][memberCls] && Docs.commentMeta['class'][memberCls][memberId],
		memberTitleComments = memberTitle.down('.toggleMemberComments');

		if (numComments) {
		this.numCommentsTpl.overwrite(commentsWrap, {
		num: numComments
		});

		if (memberTitleComments) {
		memberTitleComments.update(String(numComments));
		} else {
		this.memberCommentsTpl.append(memberTitle, [numComments]);
		}
		} else {
		if (memberTitleComments) memberTitleComments.remove();
		}

		}, this);
		this.getClassOverview().updateCommentMeta(Docs.commentMeta);

		this.updateClassIndex();

		Ext.Array.each(Ext.ComponentQuery.query('hovermenu'), function(m) {
		m.fireEvent('refresh', this);
		});
		},

		getClassToolbar: function() {
		return Ext.ComponentQuery.query('classoverview toolbar')[0];
		getClassOverview: function() {
		return Ext.ComponentQuery.query('classoverview')[0];
		},

		updateGuideCommentMeta: function(guide) {

template/app/view/cls/Overview.js

+40 −0

Original line number	Diff line number	Diff line
		@@ -8,6 +8,8 @@ Ext.define('Docs.view.cls.Overview', {
		requires: [
		'Docs.view.cls.Toolbar',
		'Docs.view.examples.Inline',
		'Docs.view.comments.Expander',
		'Docs.view.comments.MemberWrap',
		'Docs.Syntax',
		'Docs.Settings'
		],
		@@ -106,6 +108,44 @@ Ext.define('Docs.view.cls.Overview', {
		this.fireEvent('afterload');
		},

		renderCommentContainers: function() {
		// Add comment button to toolbar
		this.toolbar.showCommentCount();

		// Insert class level comment container under class intro docs
		this.clsExpander = new Docs.view.comments.Expander({
		num: 0,
		className: this.docClass.name,
		renderTo: Ext.DomHelper.append(Ext.query('.doc-contents')[0], "<div></div>")
		});

		// Add a comment container to each class member
		this.memberWrappers = Ext.Array.map(Ext.query('.member'), function(memberDoc) {
		return new Docs.view.comments.MemberWrap({
		num: 0,
		className: this.docClass.name,
		el: memberDoc
		});
		}, this);
		},

		updateCommentMeta: function(metaData) {
		var clsMeta = metaData['class'][this.docClass.name];

		var clsCommentsCount = (clsMeta && clsMeta['']) ? clsMeta[''] : 0;
		// Update toolbar icon
		this.toolbar.setCommentCount(clsCommentsCount);
		// Update class level comments meta
		this.clsExpander.setCount(clsCommentsCount);

		// Update class member comments meta
		Ext.Array.forEach(this.memberWrappers, function(wrapper) {
		var cls = metaData['class'][wrapper.getDefinedIn()];
		var count = cls && cls[wrapper.getMemberId()];
		wrapper.setCount(count);
		});
		},

		/**
		* Filters members by search string and inheritance.
		* @param {String} search

template/app/view/comments/Expander.js

0 → 100644

+68 −0

Original line number	Diff line number	Diff line
		/**
		* The comments expander, showing the number of comments.
		*/
		Ext.define('Docs.view.comments.Expander', {
		extend: 'Ext.Component',

		/**
		* @cfg {String} className
		*/
		/**
		* @cfg {String} memberId
		*/
		/**
		* @cfg {Number} count
		*/

		initComponent: function() {
		this.tpl = new Ext.XTemplate(
		'<tpl if="isClass">',
		'<div class="comments-section">',
		'<h3 class="members-title icon-comment">Comments</h3>',
		'</tpl>',

		'<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>',
		'</a>',
		'</div>',

		'<tpl if="isClass">',
		'</div>',
		'</tpl>'
		);

		this.data = this.prepareData();

		this.callParent(arguments);
		},

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

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

		return {
		id: this.memberId ? cls+"-"+this.memberId : cls,
		count: this.count,
		isClass: !this.memberId
		};
		}

		});

template/app/view/comments/MemberWrap.js

0 → 100644

+77 −0

Original line number	Diff line number	Diff line
		/**
		* Wraps the element of class member documentation, rendering the
		* comments data inside it.
		*/
		Ext.define('Docs.view.comments.MemberWrap', {
		tpl: Ext.create("Ext.XTemplate", '<span class="toggleMemberComments">{0}</span>'),

		/**
		* @cfg {Ext.Element/HTMLElement} el
		* The member element to wrap.
		*/

		/**
		* @cfg {String} className
		* The name of the current class.
		*/

		/**
		* @cfg {Number} count
		* The comment count of the member.
		*/

		constructor: function(cfg) {
		Ext.apply(this, cfg);
		this.el = Ext.get(cfg.el);

		// The expander needs to reside inside some element.
		var expanderWrap = Ext.DomHelper.append(this.el.down('.long'), "<div></div>");

		this.expander = new Docs.view.comments.Expander({
		num: this.num,
		className: this.className,
		memberId: this.getMemberId(),
		renderTo: expanderWrap
		});
		},

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

		var titleEl = this.el.down(".title");
		var titleComments = titleEl.down('.toggleMemberComments');

		if (count > 0) {
		if (titleComments) {
		titleComments.update(""+count);
		}
		else {
		this.tpl.append(titleEl, [count]);
		}
		}
		else if (titleComments) {
		titleComments.remove();
		}
		},

		/**
		* Returns the class the wrapped member is defined in.
		* @return {String}
		*/
		getDefinedIn: function() {
		return this.el.down('.meta .defined-in').getAttribute('rel');
		},

		/**
		* Returns the ID of the wrapped member.
		* @return {String}
		*/
		getMemberId: function() {
		return this.el.getAttribute('id');
		}

		});