Merge pull request #3357 from Hypolite/issue/fix-frio-comment-box

Fix Issues with frio comment box

js/acl.js

@@ -65,7 +65,7 @@ ACL.prototype.add_mention = function(id) {
 	if (this.element.val().indexOf( searchText) >= 0 ) {
 		return;
 	}
-	this.element.val(searchText + this.element.val());
+	this.element.val(searchText + this.element.val()).trigger('change');
 }
 
 ACL.prototype.on_submit = function(){

js/autocomplete.js

@@ -166,7 +166,7 @@ function listNewLineAutocomplete(id) {
 	if (word != null) {
 		var textBefore = text.value.substring(0, caretPos);
 		var textAfter  = text.value.substring(caretPos, text.length);
-		$('#' + id).val(textBefore + '\r\n[*] ' + textAfter);
+		$('#' + id).val(textBefore + '\r\n[*] ' + textAfter).trigger('change');
 		setCaretPosition(text, caretPos + 5);
 		return true;
 	}

js/main.js

@@ -101,6 +101,7 @@
 			var start = textarea.selectionStart;
 			var end = textarea.selectionEnd;
 			textarea.value = textarea.value.substring(0, start) + bbcode + textarea.value.substring(end, textarea.value.length);
+			$(textarea).trigger('change');
 		});
 
 

view/theme/frio/js/textedit.js

@@ -30,6 +30,8 @@ function insertFormatting(BBcode,id) {
 		}
 	}
 
+	$(textarea).trigger('change');
+
 	return true;
 }
 

view/theme/frio/js/theme.js

@@ -275,7 +275,38 @@ $(document).ready(function(){
 
 	});
 
+	/*
+	 * This event handler hides all comment UI when the user clicks anywhere on the page
+	 * It ensures that we aren't closing the current comment box
+	 *
+	 * We are making an exception for buttons because of a race condition with the
+	 * comment opening button that results in an already closed comment UI.
+	 */
+	$(document).on('click', function(event) {
+		if (event.target.type === 'button') {
+			return true;
+		}
 
+		var $dontclosethis = $(event.target).closest('.wall-item-comment-wrapper').find('.comment-edit-form');
+		$('.wall-item-comment-wrapper .comment-edit-submit-wrapper:visible').each(function() {
+			var $parent = $(this).parent('.comment-edit-form');
+			var itemId = $parent.data('itemId');
+
+			if ($dontclosethis[0] != $parent[0]) {
+				var textarea = $parent.find('textarea').get(0)
+
+				commentCloseUI(textarea, itemId);
+			}
+		});
+	});
+
+	/*
+	 * This event listeners ensures that the textarea size is updated event if the
+	 * value is changed externally (textcomplete, insertFormatting, fbrowser...)
+	 */
+	$(document).on('change', 'textarea', function(event) {
+		autosize.update(event.target);
+	});
 });
 
 function openClose(theID) {

view/theme/frio/templates/comment_item.tpl

@@ -4,7 +4,7 @@
 {{else}}
 <div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}" style="display: block;">
 {{/if}}
-	<form class="comment-edit-form" style="display: block;" id="comment-edit-form-{{$id}}" action="item" method="post" onsubmit="post_comment({{$id}}); return false;">
+	<form class="comment-edit-form" style="display: block;" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="item" method="post" onsubmit="post_comment({{$id}}); return false;">
 		<input type="hidden" name="type" value="{{$type}}" />
 		<input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
 		<input type="hidden" name="parent" value="{{$parent}}" />
@@ -14,7 +14,7 @@
 		<input type="hidden" name="post_id_random" value="{{$rand_num}}" />
 
 		<div class="bb form-group">
-			<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" onFocus="commentOpenUI(this,{{$id}});" onBlur="commentCloseUI(this,{{$id}});"></textarea>
+			<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" onFocus="commentOpenUI(this,{{$id}});"></textarea>
 		</div>
 		{{if $qcomment}}
 			<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">