More comments (110f84f2) · Commits · extjs / jsduck

template/app/Application.js

+3 −3

Original line number	Diff line number	Diff line
		@@ -45,8 +45,8 @@ Ext.define('Docs.Application', {
		Docs.initEventTracking();
		}

		setInterval(function(){
		Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		}, 1000);
		// setInterval(function(){
		// Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		// }, 1000);
		}
		});

template/app/controller/Comments.js

+53 −30

Original line number	Diff line number	Diff line
		@@ -74,6 +74,7 @@ Ext.define('Docs.controller.Comments', {
		[ '.toggleCommentGuide', 'click', this.toggleCommentGuide],
		[ '.postComment', 'click', this.postComment],
		[ '.updateComment', 'click', this.updateComment],
		[ '.cancelUpdateComment', 'click', this.cancelUpdateComment],
		[ '.deleteComment', 'click', this.promptDeleteComment],
		[ '.editComment', 'click', this.editComment],
		[ '.voteCommentUp', 'click', this.voteUp],
		@@ -152,9 +153,19 @@ Ext.define('Docs.controller.Comments', {
		comments = postButton.up('.comments'),
		id = comments.getAttribute('id'),
		target = Ext.JSON.encode(this.commentId(id)),
		textarea = comments.down('textarea').dom;
		textarea = comments.down('textarea').dom,
		comment = textarea.editor.getValue(),
		action = comments.down('.commentAction').getValue(),
		feedbacks = comments.select('[name=feedback]');

		var comment = textarea.editor.getValue();
		var feedbackRating = null;
		if (feedbacks) {
		feedbacks.each(function(feedback) {
		if (feedback.dom.checked) {
		feedbackRating = feedback.dom.value;
		}
		});
		}

		if (postButton.hasCls('disabled')) {
		return false;
		@@ -167,7 +178,9 @@ Ext.define('Docs.controller.Comments', {
		cors: true,
		params: {
		target: target,
		comment: comment
		comment: comment,
		rating: feedbackRating,
		action: action
		},
		callback: function(options, success, response) {
		if (response && response.responseText) {
		@@ -176,7 +189,11 @@ Ext.define('Docs.controller.Comments', {
		textarea.editor.setValue('');
		postButton.removeCls('disabled');
		this.toggleNewComment(null, el);
		if (data.action == 'comment') {
		this.fetchComments(id, this.appendNewComment, {id: data.id});
		} else {
		Ext.Msg.alert('Thank you', 'Thank you for your feedback.');
		}
		}
		},
		scope: this
		@@ -264,16 +281,22 @@ Ext.define('Docs.controller.Comments', {
		Ext.Ajax.request({
		url: this.addSid(Docs.baseUrl + '/' + Docs.commentsDb + '/' + commentId),
		method: 'GET',
		cors: true,
		callback: function(options, success, response) {
		var data = Ext.JSON.decode(response.responseText);
		if (data.success) {
		var editForm = Docs.view.Comments.editCommentTpl.overwrite(contentEl, Ext.merge(currentUser, {

		contentEl.dom.origContent = contentEl.dom.innerHTML;

		var commentData = Ext.merge(Ext.clone(currentUser), {
		content: data.content,
		update: true
		}), true);
		updateComment: true
		});

		var editForm = Docs.view.Comments.editCommentTpl.overwrite(contentEl, commentData, true);

		var textarea = editForm.down('textarea').dom;
		Docs.view.Comments.makeCodeMirror(textarea);
		Docs.view.Comments.makeCodeMirror(textarea, editForm);
		}
		},
		scope: this
		@@ -307,13 +330,24 @@ Ext.define('Docs.controller.Comments', {
		callback: function(options, success, response) {
		var data = Ext.JSON.decode(response.responseText);
		if (data.success) {
		comment.down('.content').update(data.content);
		var contentEl = comment.down('.content');
		contentEl.update(data.content);
		}
		},
		scope: this
		});
		},

		cancelUpdateComment: function(cmp, el) {
		var cancelButton = Ext.get(el),
		comment = cancelButton.up('.comment'),
		content = comment.down('.content');

		if (content && content.dom.origContent) {
		content.update(content.dom.origContent);
		}
		},

		voteUp: function(cmp, el) {
		this.vote('up', el);
		},
		@@ -389,6 +423,7 @@ Ext.define('Docs.controller.Comments', {
		commentsList.setStyle('display', 'block');
		} else {
		var id = commentsDiv.getAttribute('id');
		Docs.view.Comments.loadingTpl.append(commentsDiv);
		this.fetchComments(id, this.renderComments);
		}
		},
		@@ -425,12 +460,18 @@ Ext.define('Docs.controller.Comments', {

		opts = opts \|\| {};

		var comments = Ext.get(id);
		var comments = Ext.get(id),
		loadingEl = comments.down('.loading');
		var data = Ext.Array.map(rows, function(r) {
		r.value.id = r.id;
		r.value = Ext.merge(r.value, opts);
		return r.value;
		});

		if (loadingEl) {
		loadingEl.remove();
		}

		Docs.view.Comments.commentsTpl.append(comments, data);

		if (opts.hideCommentForm) {
		@@ -444,7 +485,7 @@ Ext.define('Docs.controller.Comments', {
		if (wrap) {
		var textareaEl = wrap.down('textarea');
		if (textareaEl) {
		Docs.view.Comments.makeCodeMirror(textareaEl.dom);
		Docs.view.Comments.makeCodeMirror(textareaEl.dom, wrap);
		}
		}
		} else {
		@@ -497,23 +538,6 @@ Ext.define('Docs.controller.Comments', {
		guideText.setStyle('display', (curDisplay == 'none') ? 'block' : 'none');
		},

		// toggleCodeEditor: function(e, el) {
		//
		// var but = Ext.get(el),
		// textarea = but.up('form').down('textarea').dom;
		//
		// if (but.hasCls('selected')) {
		// this.closeCodeEditor(but);
		// } else {
		// but.addCls('selected');
		// but.editor = CodeMirror.fromTextArea(textarea, {
		// enterMode: "keep",
		// mode: { name: 'markdown' },
		// indentUnit: 4
		// });
		// }
		// },

		closeCodeEditor: function(but) {
		but.removeCls('selected');
		if (but.editor) {
		@@ -535,6 +559,5 @@ Ext.define('Docs.controller.Comments', {
		});
		this.errorTip.show();
		}

		}
		});
		No newline at end of file

template/app/view/Comments.js

+66 −13

Original line number	Diff line number	Diff line
		@@ -25,6 +25,10 @@ Ext.define('Docs.view.Comments', {
		'</div>'
		];

		this.loadingTpl = Ext.create('Ext.Template',
		'<div class="loading">Loading...</div>'
		);

		this.classCommentsTpl = Ext.create('Ext.XTemplate',
		'<div id="m-comment">',
		'<h3 class="members-title">Comments</h3>',
		@@ -106,7 +110,10 @@ Ext.define('Docs.view.Comments', {
		' src="http://www.gravatar.com/avatar/{emailHash}?s=25&r=PG&d=http://www.sencha.com/img/avatar.png">',
		'<div class="author">Logged in as {userName}</div>',
		'<a href="#" class="toggleCommentGuide">Help</a>',
		'<input type="submit" class="{[values.update ? "update" : "post"]}Comment" value="{[values.update ? "Update" : "Post"]} comment" />',
		'<input type="submit" class="sub {[values.updateComment ? "update" : "post"]}Comment" value="{[values.updateComment ? "Update" : "Post"]} comment" />',
		'<tpl if="updateComment">',
		' or <a href="#" class="cancelUpdateComment">cancel</a>',
		'</tpl>',
		'</div>',
		'<div class="commentGuideTxt" style="display: none">',
		'<ul>',
		@@ -122,6 +129,7 @@ Ext.define('Docs.view.Comments', {
		"Here is a bold item\n",
		"Here is an _italic_ item\n",
		"Here is an `inline` code snippet\n",
		"Here is a [Link](#!/api)\n",
		"\n",
		" Indent with 4 spaces\n",
		" for a code snippet\n",
		@@ -138,6 +146,7 @@ Ext.define('Docs.view.Comments', {
		'Here is a <strong>bold</strong> item<br/>',
		'Here is an <em>italic</em> item<br/>',
		'Here is an <code>inline</code> code snippet<br/>',
		'Here is a <a href="#!/api">Link</a><br/>',
		'<pre>',
		"Indent with 4 spaces\n",
		"for a code snippet",
		@@ -151,26 +160,54 @@ Ext.define('Docs.view.Comments', {
		'<li>Second unordered list item</li>',
		'</ul>',
		'</div>',
		'<ul>',
		'<li>Links will only work if they start with <code>#!/</code> or http://www.sencha.com',
		'</ul>',
		'</div>'
		];

		this.loggedInCommentTpl = Ext.create('Ext.XTemplate',
		'<div class="new-comment{[values.hide ? "" : " open"]}">',
		// '<a href="#" class="name toggleComments"><span></span>Viewing 8 comments</a>',
		'<form class="newCommentForm">',
		'<span class="action">',
		'Action: ',
		'<select>',
		'<select class="commentAction">',
		'<option value="comment">Post a comment</option>',
		'<option value="question">Ask a question</option>',
		'<option value="problem">Report a problem</option>',
		'<option value="problem">Request a feature</option>',
		'<option value="feedback">Submit feedback</option>',
		'</select>',
		' on Ext.Base',
		'</span>',
		// '<a href="#" class="toggleCodeEditor" title="Toggle code editor">Code editor</a>',
		'<div class="note question" style="display: none;">Please do not post questions. Instead, use the <a href="http://www.sencha.com/forum" target="_blank">Sencha Forum</a>. Questions will be deleted without warning.</div>',
		'<div class="note problem" style="display: none;">',
		'<p>Please inform us of documentation problems:</p>',
		'<ul>',
		'<li>Typos</li>',
		'<li>Incorrect information</li>',
		'<li>Errors with examples</li>',
		'<li>Errors in the application</li>',
		'<li>Inappropriate comments</li>',
		'</ul>',
		'<p>Your feedback will <b>not appear</b> online and you are unlikely to receive a personal response. ',
		'However feedback is monitored closely by the Sencha Documentation team.</p>',
		'<p>For <b>SDK bugs</b>, please use the <a href="http://www.sencha.com/forum" target="_blank">Sencha Forum</a>.</p>',
		'</div>',
		'<div class="note feedback" style="display: none;">',
		'<p>Your feedback will <b>not appear</b> online and you are unlikely to receive a personal response. ',
		'However feedback is monitored closely by the Sencha Documentation team.</p>',
		'<div style="padding-bottom: 5px;">Quality of documentation:</div>',
		'<p>',
		'<label><input name="feedback" type="radio" value="4" /> Excellent</label>',
		'<label><input name="feedback" type="radio" value="3" /> Good</label>',
		'<label><input name="feedback" type="radio" value="2" /> Fair</label>',
		'<label><input name="feedback" type="radio" value="1" /> Poor</label>',
		'</p>',
		'<p>Comments or suggestions:</p>',
		'</div>',
		'<div class="postCommentWrap">',
		'<textarea></textarea>',
		commentMetaAndGuide.join(''),
		'</div>',
		'</form>',
		'</div>'
		);
		@@ -178,7 +215,6 @@ Ext.define('Docs.view.Comments', {
		this.editCommentTpl = Ext.create('Ext.XTemplate',
		'<form class="editCommentForm">',
		'<span class="action">Edit comment</span>',
		// '<a href="#" class="toggleCodeEditor" title="Toggle code editor">Code editor</a>',
		'<textarea>{content}</textarea>',
		commentMetaAndGuide.join(''),
		'</form>'
		@@ -343,24 +379,41 @@ Ext.define('Docs.view.Comments', {
		if (hideCommentForm) {
		} else if (Docs.App.getController('Auth').isLoggedIn()) {

		// currentUser.

		var wrap = this.loggedInCommentTpl.overwrite(newComment, currentUser, true),
		textarea = wrap.down('textarea').dom;

		this.makeCodeMirror(textarea);
		this.makeCodeMirror(textarea, wrap);
		} else {
		this.loggedOutCommentTpl.overwrite(newComment, {});
		}
		}, this);
		},

		makeCodeMirror: function(textarea) {
		makeCodeMirror: function(textarea, form) {
		textarea.editor = CodeMirror.fromTextArea(textarea, {
		enterMode: "keep",
		mode: 'markdown',
		indentUnit: 4
		});

		var action = (form && form.down('.commentAction'));
		if (action) {
		action.on('change', function(evt, el) {
		var val = Ext.get(el).getValue();
		form.select('.note').setStyle({display: 'none'});
		if (val == "question") {
		form.down('.note.question').setStyle({display: 'block'});
		form.down('.postCommentWrap').setStyle({display: 'none'});
		} else {
		form.down('.postCommentWrap').setStyle({display: 'block'});
		if (val == "problem") {
		form.down('.note.problem').setStyle({display: 'block'});
		} else if (val == "feedback") {
		form.down('.note.feedback').setStyle({display: 'block'});
		}
		}
		});
		}
		},

		showMember: function(cls, member) {

template/resources/sass/viewport.scss

+20 −14

Original line number	Diff line number	Diff line
		@@ -1319,6 +1319,9 @@ pre, code, kbd, samp, tt {

		// Comments

		#m-comment {
		.comments {
		@include member-expander; } }
		#commentindex {
		padding: 5px; }
		#recentcomments {
		@@ -1337,20 +1340,20 @@ pre, code, kbd, samp, tt {
		border-color: #e0e0e0;
		position: relative;

		padding: 0 0 10px 45px;
		padding: 0 0 10px 25px;
		.loading {
		font-weight: bold;
		background: url(../images/ajax-loader.gif) no-repeat 0 9px;
		padding: 8px 0 0 25px; }
		.name { padding: 10px 0 0 0px; display: block; font-weight: normal !important; }
		a.side {
		display: block;
		height: 30px;
		width: 28px;
		position: absolute;
		top: 8px;
		left: 8px;
		background: url(../images/comment.png) no-repeat 0 -29px; }
		&.open {
		min-height: 40px; }
		.new-comment {
		padding-left: 15px;
		.note {
		padding-bottom: 10px;
		label {
		margin-left: 20px;
		display: block; }}
		form.loginForm {
		position: relative;
		display: inline-block;
		@@ -1365,7 +1368,7 @@ pre, code, kbd, samp, tt {
		form.newCommentForm {
		display: none; }
		form.newCommentForm {
		margin: 10px 55px 10px 5px; }
		margin: 20px 55px 10px 5px; }
		form.editCommentForm {
		margin: 10px 55px 0px 0; }
		form.editCommentForm,
		@@ -1383,7 +1386,8 @@ pre, code, kbd, samp, tt {
		position: relative;
		margin-top: 8px;
		text-align: right;
		font-weight: bold; }
		.toggleCommentGuide {
		font-weight: bold; } }
		img {
		@include border-radius(2px);
		position: absolute; left: 0;
		@@ -1403,8 +1407,9 @@ pre, code, kbd, samp, tt {
		.CodeMirror .CodeMirror-scroll,
		textarea {
		min-height: 8em; }
		input {
		input.sub {
		@include green-button();
		font-weight: bold;
		width: 120px;
		margin-left: 20px;
		padding: 5px 8px;
		@@ -1471,13 +1476,13 @@ pre, code, kbd, samp, tt {
		color: #666; } }
		.com-meta {
		position: relative;
		font-weight: bold;
		text-size: 13px;
		img {
		@include border-radius(2px); }
		.author {
		position: absolute;
		left: 40px;
		font-weight: bold;
		top: 2px;
		font-size: 14px; }
		.time {
		@@ -1528,6 +1533,7 @@ pre, code, kbd, samp, tt {
		background-position: -22px -35px; } }
		.score {
		position: absolute;
		font-weight: bold;
		width: 20px;
		top: 15px;
		color: #aaa;