Refactor comment form stylesheets and HTML. (12dcdd76) · Commits · extjs / jsduck

template/app/view/comments/Expander.js

+6 −3

Original line number	Diff line number	Diff line
		@@ -24,10 +24,14 @@ Ext.define('Docs.view.comments.Expander', {
		/**
		* @cfg {Number} count
		*/
		/**
		* @cfg {String} newCommentTitle
		* A custom title for the new comment form.
		*/

		initComponent: function() {
		this.tpl = new Ext.XTemplate(
		'<div class="comments-div first-child" id="comments-{id}">',
		'<div class="comments-div first-child">',
		'<a href="#" class="side toggleComments"><span></span></a>',
		'<a href="#" class="name toggleComments">',
		'{[this.renderCount(values.count)]}',
		@@ -38,9 +42,7 @@ Ext.define('Docs.view.comments.Expander', {
		}
		);

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

		@@ -100,6 +102,7 @@ Ext.define('Docs.view.comments.Expander', {
		var target = [this.type, this.className, this.memberId];
		this.list = new Docs.view.comments.ListWithForm({
		target: target,
		newCommentTitle: this.newCommentTitle,
		renderTo: div
		});

template/app/view/comments/Form.js

+17 −48

Original line number	Diff line number	Diff line
		@@ -19,15 +19,21 @@ Ext.define('Docs.view.comments.Form', {
		* Setting this will start the form in editing-existing-comment mode.
		* Without this a form for adding new comment is created.
		*/
		/**
		* @cfg {String} title
		* The title text to show above form.
		*/

		initComponent: function() {
		this.updateComment = (this.content !== undefined);

		var innerTpl = [
		tpl: [
		'<form class="commentForm <tpl if="!updateComment">newComment</tpl>">',
		'<tpl if="title">',
		'<p>{title}</p>',
		'</tpl>',
		'<textarea>{content}</textarea>',
		'<div class="com-meta">',
		'<img class="avatar" width="25" height="25"',
		' src="http://www.gravatar.com/avatar/{user.emailHash}?s=25&r=PG&d=http://www.sencha.com/img/avatar.png">',
		'<div class="author">Logged in as {user.userName}</div>',
		'<div class="form-author">Logged in as {user.userName}</div>',
		'<tpl if="!updateComment">',
		'<label class="subscribe">',
		'Email updates? <input type="checkbox" class="subscriptionCheckbox" <tpl if="userSubscribed">checked="checked"</tpl> />',
		@@ -102,38 +108,14 @@ Ext.define('Docs.view.comments.Form', {
		'</ul>',
		'End a line with two spaces<br/>to create a line break<br/><br/>',
		'</div>',
		'</div>'
		];

		if (this.updateComment) {
		this.tpl = new Ext.XTemplate(
		'<form class="editCommentForm">',
		'<span class="action">Edit comment</span>',
		'<textarea>{content}</textarea>',
		innerTpl.join(''),
		'</form>'
		);
		}
		else {
		this.tpl = new Ext.XTemplate(
		'<div class="new-comment{[values.hide ? "" : " open"]}">',
		'<form class="newCommentForm">',
		'<div class="postCommentWrap">',
		'<tpl if="definedIn">',
		"<p><b>Be aware.</b> This comment will be posted to <b>{definedIn}</b> class, ",
		"from where this member is inherited from.</p>",
		'</tpl>',
		'<textarea></textarea>',
		innerTpl.join(''),
		'</div>',
		'</form>',
		'</div>'
		);
		}
		'</form>'
		],

		initComponent: function() {
		this.data = {
		//definedIn: this.updateComment ? undefined : this.extractDefinedIn(this.renderTo),
		updateComment: this.updateComment,
		title: this.title,
		updateComment: (this.content !== undefined),
		content: this.content,
		userSubscribed: this.userSubscribed,
		user: this.user
		@@ -157,19 +139,6 @@ Ext.define('Docs.view.comments.Form', {
		this.bindEvents();
		},

		// Given an HTML element, determines the member it's in and if the
		// member is inherited. If it's inherited, returns a string
		// with the classname. Otherwise just returns undefined.
		// The definedIn value is used inside template to print a notice
		// about posting a possible out-of-context comment.
		extractDefinedIn: function(el) {
		var member = Ext.get(el).up(".member");
		if (member && member.hasCls("inherited")) {
		return member.down(".defined-in").getHTML();
		}
		return undefined;
		},

		makeCodeMirror: function(textarea) {
		this.codeMirror = CodeMirror.fromTextArea(textarea, {
		mode: 'markdown',

template/app/view/comments/List.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -98,6 +98,7 @@ Ext.define('Docs.view.comments.List', {

		new Docs.view.comments.Form({
		renderTo: contentEl,
		title: '<b>Edit comment</b>',
		user: Docs.Auth.getUser(),
		content: content,
		listeners: {

template/app/view/comments/ListWithForm.js

+5 −0

Original line number	Diff line number	Diff line
		@@ -16,12 +16,17 @@ Ext.define('Docs.view.comments.ListWithForm', {
		* @cfg {String[]} target
		* The target of the comments (used for posting new comment).
		*/
		/**
		* @cfg {String} newCommentTitle
		* A custom title for the new comment form.
		*/

		initComponent: function() {
		this.items = [
		this.list = new Docs.view.comments.List({
		}),
		this.form = new Docs.view.comments.Form({
		title: this.newCommentTitle,
		user: Docs.Auth.getUser(),
		listeners: {
		submit: this.postComment,

template/app/view/comments/MemberWrap.js

+13 −0

Original line number	Diff line number	Diff line
		@@ -32,6 +32,7 @@ Ext.define('Docs.view.comments.MemberWrap', {
		count: count,
		className: this.getDefinedIn(),
		memberId: this.getMemberId(),
		newCommentTitle: this.getNewCommentTitle(),
		renderTo: expanderWrap
		});

		@@ -64,6 +65,18 @@ Ext.define('Docs.view.comments.MemberWrap', {
		}
		},

		getNewCommentTitle: function() {
		if (this.getDefinedIn() !== this.className) {
		return [
		"<b>Be aware.</b> This comment will be posted to <b>" + this.getDefinedIn() + "</b> class, ",
		"from where this member is inherited from."
		].join("");
		}
		else {
		return undefined;
		}
		},

		/**
		* Returns the class the wrapped member is defined in.
		* @return {String}