Dragging comments to the top level. (0f38bbbf) · Commits · extjs / jsduck

template/app/model/Comment.js

+3 −4

Original line number	Diff line number	Diff line
		@@ -120,7 +120,8 @@ Ext.define('Docs.model.Comment', {

		/**
		* Sets new parent for the comment.
		* @param {Docs.model.Comment} parent
		* @param {Docs.model.Comment} parent The parent comment
		* (pass undefined to remove the parent from comment).
		* @param {Function} callback
		* @param {Object} scope
		*/
		@@ -128,9 +129,7 @@ Ext.define('Docs.model.Comment', {
		this.request({
		url: '/comments/' + this.get("id") + '/set_parent',
		method: 'POST',
		params: {
		parentId: parent.get("id")
		},
		params: parent ? {parentId: parent.get("id")} : undefined,
		success: callback,
		scope: scope
		});

+11 −1

Original line number	Diff line number	Diff line
		@@ -5,7 +5,8 @@ Ext.define('Docs.view.comments.Expander', {
		alias: "widget.commentsExpander",
		extend: 'Ext.Component',
		requires: [
		'Docs.Comments'
		'Docs.Comments',
		'Docs.view.comments.TopLevelDropZone'
		],
		uses: [
		'Docs.view.comments.ListWithForm'
		@@ -56,11 +57,20 @@ Ext.define('Docs.view.comments.Expander', {

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

		this.getEl().select(".toggleComments").each(function(el) {
		el.on("click", this.toggle, this, {
		preventDefault: true
		});
		}, this);

		new Docs.view.comments.TopLevelDropZone(this.getEl().down(".side.toggleComments"), {
		onValidDrop: Ext.Function.bind(this.setParent, this)
		});
		},

		setParent: function(comment, parent) {
		comment.setParent(parent, this.reload, this);
		},

		toggle: function() {

0 → 100644

+56 −0

Original line number	Diff line number	Diff line
		/**
		* DropZone for dragging comments to the topmost level (removing the
		* parent completely).
		*/
		Ext.define("Docs.view.comments.TopLevelDropZone", {
		extend: 'Ext.dd.DropZone',

		getTargetFromEvent: function(e) {
		return e.getTarget("a.side.toggleComments", 10);
		},

		onNodeEnter: function(target, dd, e, data) {
		if (this.isValidDropTarget(data)) {
		Ext.fly(target).addCls('drop-target-hover');
		}
		},

		onNodeOut: function(target, dd, e, data) {
		Ext.fly(target).removeCls('drop-target-hover');
		},

		onNodeOver: function(target, dd, e, data) {
		if (this.isValidDropTarget(data)) {
		// Return the built-in dropAllowed CSS class.
		return this.dropAllowed;
		}
		else {
		return false;
		}
		},

		// only comments with a parent can be moved to the top level.
		// others are on the top level already
		isValidDropTarget: function(data) {
		return !!data.comment.get("parentId");
		},

		onNodeDrop: function(target, dd, e, data) {
		if (this.isValidDropTarget(data)) {
		this.onValidDrop(data.comment, undefined);
		return true;
		}
		return false;
		},

		/**
		* Called when comment was successfully dropped in the topmost
		* level target.
		* @template
		* @param {Docs.model.Comment} comment The comment that was dragged.
		* @param {Docs.model.Comment} parent Always undefined.
		* (This parameter is present to provide compatible API with the other
		* DropZone class).
		*/
		onValidDrop: Ext.emptyFn
		});

+9 −2

Original line number	Diff line number	Diff line
		@@ -26,10 +26,16 @@ $comment-date-color: #999;
		font-size: 11px; }


		@mixin comments-expander-drop-target {
		&.open > a.side.toggleComments.drop-target-hover {
		background: $moderator-color-light; } }


		// Large comments expander (Class/Guide/Video)
		#center-container .comments-large-expander {
		.comments-expander {
		@include member-expander; }
		@include member-expander;
		@include comments-expander-drop-target; }
		// Header icon in large comments expander
		h3.icon-comment {
		padding: 0 0 5px 25px;
		@@ -45,6 +51,7 @@ $comment-date-color: #999;
		border-color: #e0e0e0;
		position: relative;
		padding: 0 0 10px 25px;
		@include comments-expander-drop-target;
		&.open {
		min-height: 40px; }
		.loading {
		@@ -164,7 +171,7 @@ form.commentForm {
		padding-top: 10px;
		padding-left: 2px;
		&.drop-target-hover {
		background-color: $moderator-color-light; }
		background: $moderator-color-light; }
		&:hover {
		// Use child > selector to ensure the hover also
		// happens for the list of comment replies.