Simple editor for adding new tags to comments. (ae680552) · Commits · extjs / jsduck

template/app/model/Comment.js

+19 −0

Original line number	Diff line number	Diff line
		@@ -116,6 +116,25 @@ Ext.define('Docs.model.Comment', {
		});
		},

		/**
		* Adds tag to comment.
		* @param {String} tagname
		*/
		addTag: function(tagname) {
		this.request({
		url: '/comments/' + this.get("id") + '/add_tag',
		method: 'POST',
		params: {
		tagname: tagname
		},
		success: function() {
		this.get("tags").push(tagname);
		this.commit();
		},
		scope: this
		});
		},

		/**
		* Removes tag from comment.
		* @param {String} tagname

+4 −1

Original line number	Diff line number	Diff line
		@@ -10,6 +10,7 @@ Ext.define('Docs.view.comments.List', {
		'Docs.Comments',
		'Docs.view.comments.Template',
		'Docs.view.comments.Form',
		'Docs.view.comments.TagEditor',
		'Docs.model.Comment',
		'Docs.Tip'
		],
		@@ -133,7 +134,9 @@ Ext.define('Docs.view.comments.List', {
		},

		addTag: function(el, comment) {
		// TODO...
		var editor = new Docs.view.comments.TagEditor();
		editor.on("select", comment.addTag, comment);
		editor.popup(el);
		},

		removeTag: function(el, comment) {

0 → 100644

+49 −0

Original line number	Diff line number	Diff line
		/**
		* Editor for adding tags.
		*/
		Ext.define("Docs.view.comments.TagEditor", {
		extend: "Ext.container.Container",
		floating: true,
		hidden: true,
		style: "padding-top: 10px;",

		initComponent: function() {
		this.items = [
		{
		xtype: 'textfield',
		enableKeyEvents: true,
		listeners: {
		blur: this.destroy,
		keyup: this.onKeyUp,
		scope: this
		}
		}
		];

		this.callParent(arguments);
		},

		popup: function(el) {
		this.show();
		this.alignTo(el, 'bl', [-12, -2]);
		this.down("textfield").focus(true, 100);
		},

		onKeyUp: function(field, ev) {
		if (ev.keyCode === Ext.EventObject.ENTER) {
		var value = Ext.String.trim(field.getValue());
		if (value) {
		/**
		* @event select
		* Fired when a tagname entered to the field and ENTER pressed.
		* @param {String} tagname
		*/
		this.fireEvent("select", value);
		}
		this.destroy();
		}
		else if (ev.keyCode === Ext.EventObject.ESC) {
		this.destroy();
		}
		}
		});
		No newline at end of file

+5 −5

Original line number	Diff line number	Diff line
		@@ -52,20 +52,20 @@ Ext.define('Docs.view.comments.Template', {

		'<div class="top-right">',
		'<tpl for="tags">',
		'<span href="#" class="tag">',
		'<span href="#" class="command tag">',
		'<b>{.}</b>',
		'<tpl if="this.isMod()"><a href="#" class="remove-tag" title="Delete tag">–</a></tpl>',
		'</span>',
		'</tpl>',
		'<tpl if="this.isMod()">',
		'<a href="#" class="add-tag" title="Add new tag">+</a>',
		'<a href="#" class="command add-tag" title="Add new tag">+</a>',
		'</tpl>',
		'<tpl if="this.isMod()">',
		'<a href="#" class="readComment <tpl if="read">read</tpl>">Read</a>',
		'<a href="#" class="command readComment <tpl if="read">read</tpl>">Read</a>',
		'</tpl>',
		'<tpl if="this.isMod() \|\| this.isAuthor(values.author)">',
		'<a href="#" class="editComment">Edit</a>',
		'<a href="#" class="deleteComment">Delete</a>',
		'<a href="#" class="command editComment">Edit</a>',
		'<a href="#" class="command deleteComment">Delete</a>',
		'</tpl>',
		'<span class="time" title="{[this.date(values.createdAt)]}">{[this.dateStr(values.createdAt)]}</span>',
		'</div>',

+3 −6

Original line number	Diff line number	Diff line
		@@ -164,10 +164,7 @@ form.commentForm {
		padding-left: 2px;
		&:hover {
		.com-meta .top-right {
		.readComment,
		.readComment.read,
		.editComment,
		.deleteComment,
		.command,
		.vote {
		@include transition(opacity, 0.2s, linear);
		@include opacity(1); } } }
		@@ -192,7 +189,8 @@ form.commentForm {
		position: absolute;
		right: 20px;
		top: 0;
		span, a {
		.command,
		.time {
		display: inline-block;
		margin-left: 10px; }
		.tag {
		@@ -203,7 +201,6 @@ form.commentForm {
		background: $docs-text-color;
		position: relative;
		a {
		margin: 0;
		color: $docs-text-color;
		position: absolute;
		top: -5px;