New comment form inside ListWithForm component. (4cdeebc7) · Commits · extjs / jsduck

template/app/view/comments/Expander.js

+6 −8

Original line number	Diff line number	Diff line
		@@ -6,7 +6,7 @@ Ext.define('Docs.view.comments.Expander', {
		extend: 'Ext.Component',
		requires: [
		'Docs.Comments',
		'Docs.view.comments.List'
		'Docs.view.comments.ListWithForm'
		],

		/**
		@@ -77,9 +77,8 @@ Ext.define('Docs.view.comments.Expander', {
		div.addCls('open');
		div.down('.name').setStyle("display", "none");

		var list = div.down('.comment-list');
		if (list) {
		list.setStyle('display', 'block');
		if (this.list) {
		this.list.show();
		}
		else {
		this.loadComments(div);
		@@ -92,14 +91,13 @@ Ext.define('Docs.view.comments.Expander', {
		div.removeCls('open');
		div.down('.name').setStyle("display", "block");

		var list = div.down('.comment-list');
		if (list) {
		list.setStyle('display', 'none');
		if (this.list) {
		this.list.hide();
		}
		},

		loadComments: function(div) {
		this.list = new Docs.view.comments.List({
		this.list = new Docs.view.comments.ListWithForm({
		renderTo: div
		});

template/app/view/comments/Form.js

+12 −27

Original line number	Diff line number	Diff line
		@@ -2,14 +2,9 @@
		* The form for adding and editing comments.
		*/
		Ext.define('Docs.view.comments.Form', {
		mixins: {
		observable: 'Ext.util.Observable'
		},
		extend: 'Ext.Component',
		alias: "widget.commentsForm",

		/**
		* @cfg {Ext.dom.Element/HTMLElement} renderTo
		* Element where to render the form.
		*/
		/**
		* @cfg {Object} user
		* Object describing currently logged in user.
		@@ -25,16 +20,9 @@ Ext.define('Docs.view.comments.Form', {
		* Without this a form for adding new comment is created.
		*/

		/**
		* Creates a new comment form inside the configured #renderTo element.
		* @param {Object} cfg
		*/
		constructor: function(cfg) {
		Ext.apply(this, cfg);
		initComponent: function() {
		this.updateComment = (this.content !== undefined);

		this.mixins.observable.constructor.call(this, {listeners: cfg.listeners});

		var innerTpl = [
		'<div class="com-meta">',
		'<img class="avatar" width="25" height="25"',
		@@ -143,20 +131,21 @@ Ext.define('Docs.view.comments.Form', {
		);
		}

		this.render();
		},

		render: function() {
		var wrap = this.tpl.overwrite(this.getEl(), {
		definedIn: this.updateComment ? undefined : this.extractDefinedIn(this.renderTo),
		this.data = {
		//definedIn: this.updateComment ? undefined : this.extractDefinedIn(this.renderTo),
		updateComment: this.updateComment,
		content: this.content,
		userSubscribed: this.userSubscribed,
		user: this.user
		}, true);
		};

		this.callParent(arguments);
		},

		this.makeCodeMirror(wrap.down('textarea').dom);
		afterRender: function() {
		this.callParent(arguments);

		this.makeCodeMirror(this.getEl().down('textarea').dom);
		this.bindEvents();
		},

		@@ -219,10 +208,6 @@ Ext.define('Docs.view.comments.Form', {
		var curDisplay = guideText.getStyle('display');

		guideText.setStyle('display', (curDisplay === 'none') ? 'block' : 'none');
		},

		getEl: function() {
		return Ext.get(this.renderTo);
		}

		});

template/app/view/comments/List.js

+5 −1

Original line number	Diff line number	Diff line
		@@ -92,8 +92,12 @@ Ext.define('Docs.view.comments.List', {
		// starts an editor on the comment
		edit: function(el, comment) {
		comment.loadContent(function(content) {
		// empty the content of comment.
		var contentEl = Ext.get(el).up(".comment").down(".content");
		contentEl.update("");

		new Docs.view.comments.Form({
		renderTo: Ext.get(el).up(".comment").down(".content"),
		renderTo: contentEl,
		user: Docs.Auth.getUser(),
		content: content,
		listeners: {

template/app/view/comments/ListWithForm.js

0 → 100644

+37 −0

Original line number	Diff line number	Diff line
		/**
		* Container for listing of all the comments.
		* Sorted by date or votes.
		*/
		Ext.define('Docs.view.comments.ListWithForm', {
		extend: 'Ext.container.Container',
		alias: "widget.commentsListWithForm",
		requires: [
		'Docs.view.comments.List',
		'Docs.view.comments.Form',
		'Docs.Auth'
		],

		initComponent: function() {
		this.items = [
		{
		xtype: 'commentsList'
		},
		{
		xtype: 'commentsForm',
		user: Docs.Auth.getUser()
		}
		];

		this.callParent(arguments);
		},

		/**
		* Loads array of comments into the view.
		* @param {Object[]} comments
		* @param {Boolean} append True to append the comments to existing ones.
		*/
		load: function(comments, append) {
		this.down("commentsList").load(comments, append);
		}

		});

template/resources/sass/_comments.scss

+1 −5

Original line number	Diff line number	Diff line
		@@ -66,8 +66,6 @@ $moderator-color-light: #94b773;
		&.open {
		min-height: 40px; } }

		.comment-list {
		color: #444;
		.new-comment {
		.note {
		padding-bottom: 10px;
		@@ -183,9 +181,7 @@ $moderator-color-light: #94b773;
		padding-left: 5px; }
		ul {
		margin-top: 5px; } } }
		&.open {
		form.newCommentForm {
		display: block; } } }

		.comment {
		padding-top: 10px;
		padding-left: 2px;