rewrite comment form handling

Zotlabs/Lib/ThreadItem.php

@@ -758,9 +758,9 @@ class ThreadItem {
 			'$sourceapp' => \App::$sourcename,
 			'$observer' => get_observer_hash(),
 			'$anoncomments' => (($conv->get_mode() === 'channel' && perm_is_allowed($conv->get_profile_owner(),'','post_comments')) ? true : false),
-			'$anonname' => [ 'anonname', t('Your full name (required)'),'','','','onBlur="commentCloseUI(this,\'' . $this->get_id() . '\')"' ],
+			'$anonname' => [ 'anonname', t('Your full name (required)') ],
-			'$anonmail' => [ 'anonmail', t('Your email address (required)'),'','','','onBlur="commentCloseUI(this,\'' . $this->get_id() . '\')"' ],
+			'$anonmail' => [ 'anonmail', t('Your email address (required)') ],
-			'$anonurl'  => [ 'anonurl',  t('Your website URL (optional)'),'','','','onBlur="commentCloseUI(this,\'' . $this->get_id() . '\')"' ]
+			'$anonurl'  => [ 'anonurl',  t('Your website URL (optional)') ]
 		));
 
 		return $comment_box;

view/css/conversation.css

@@ -183,24 +183,19 @@ a.wall-item-name-link {
 
 /* comment_item */
 
-.comment-edit-text-empty,
+
-.comment-edit-text-full {
+.comment-edit-text {
 	padding: 0.5rem;
 	width: 100%;
 	display: inherit;
-}
-
-.comment-edit-text-empty {
-	height: 2rem;
 	line-height: 1;
-	overflow: hidden;
+	height: 2rem;
 	resize: none;
 }
 
-.comment-edit-text-full {
+.comment-edit-text.expanded {
-	height: 7rem;
 	line-height: 1.25;
-	overflow: auto;
+	height: 7rem;
 	resize: vertical;
 }
 

view/js/main.js

@@ -1,6 +1,55 @@
 
 function confirmDelete() { return confirm(aStr.delitem); }
 
+function handle_comment_form(e) {
+	e.stopPropagation();
+
+	//handle eventual expanded forms
+	var expanded = $('.comment-edit-text.expanded');
+	var i = 0;
+
+	if(expanded.length) {
+		expanded.each(function() {
+			var ex_form = $(expanded[i].form);
+			var ex_fields = ex_form.find(':input[type=text], textarea');
+			var ex_fields_empty = true;
+
+			ex_fields.each(function() {
+				if($(this).val() != '')
+					ex_fields_empty = false;
+			});
+			if(ex_fields_empty) {
+				ex_form.find('.comment-edit-text').removeClass('expanded').attr('placeholder', aStr.comment);
+				ex_form.find(':not(.comment-edit-text)').hide();
+			}
+			i++
+		});
+	}
+
+	// handle clicked form
+	var form = $(this);
+	var fields = form.find(':input[type=text], textarea');
+	var fields_empty = true;
+
+	if(form.find('.comment-edit-text').length) {
+		form.find('.comment-edit-text').addClass('expanded').removeAttr('placeholder');
+		form.find(':not(:visible)').show();
+	}
+
+	// handle click outside of form (close empty forms)
+	$(document).on('click', function(e) {
+		fields.each(function() {
+			if($(this).val() != '')
+				fields_empty = false;
+		});
+		if(fields_empty) {
+			form.find('.comment-edit-text').removeClass('expanded').attr('placeholder', aStr.comment);
+			form.find(':not(.comment-edit-text)').hide();
+		}
+	});
+}
+
+/*
 function commentOpenUI(obj, id) {
 	$(document).unbind( "click.commentOpen", handler );
 
@@ -44,8 +93,7 @@ function commentCloseUI(obj, id) {
 function commentOpen(obj, id) {
 	if(obj.value == aStr.comment) {
 		obj.value = '';
-		$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
+		$("#comment-edit-text-" + id).addClass("expanded");
-		$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
 		$("#mod-cmnt-wrap-" + id).show();
 		$("#comment-tools-" + id).show();
 		$("#comment-edit-anon-" + id).show();
@@ -53,12 +101,11 @@ function commentOpen(obj, id) {
 	}
 	return false;
 }
-
+*/
 function commentClose(obj, id) {
 	if(obj.value === '') {
 		obj.value = aStr.comment;
-		$("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
+		$("#comment-edit-text-" + id).removeClass("expanded");
-		$("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
 		$("#mod-cmnt-wrap-" + id).hide();
 		$("#comment-tools-" + id).hide();
 		$("#comment-edit-anon-" + id).hide();
@@ -67,6 +114,7 @@ function commentClose(obj, id) {
 	return false;
 }
 
+
 function showHideCommentBox(id) {
 	if( $('#comment-edit-form-' + id).is(':visible')) {
 		$('#comment-edit-form-' + id).hide();
@@ -79,8 +127,7 @@ function commentInsert(obj, id) {
 	var tmpStr = $("#comment-edit-text-" + id).val();
 	if(tmpStr == '$comment') {
 		tmpStr = '';
-		$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
+		$("#comment-edit-text-" + id).addClass("expanded");
-		$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
 		openMenu("comment-tools-" + id);
 	}
 	var ins = $(obj).html();
@@ -101,8 +148,7 @@ function insertbbcomment(comment, BBcode, id) {
 	var tmpStr = $("#comment-edit-text-" + id).val();
 	if(tmpStr == comment) {
 		tmpStr = "";
-		$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
+		$("#comment-edit-text-" + id).addClass("expanded");
-		$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
 		openMenu("comment-tools-" + id);
 		$("#comment-edit-text-" + id).val(tmpStr);
 	}
@@ -160,8 +206,7 @@ function insertCommentURL(comment, id) {
 			var tmpStr = $("#comment-edit-text-" + id).val();
 			if(tmpStr == comment) {
 				tmpStr = "";
-				$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
+				$("#comment-edit-text-" + id).addClass("expanded");
-				$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
 				openMenu("comment-tools-" + id);
 				$("#comment-edit-text-" + id).val(tmpStr);
 			}
@@ -183,8 +228,7 @@ function qCommentInsert(obj, id) {
 	var tmpStr = $("#comment-edit-text-" + id).val();
 	if(tmpStr == aStr.comment) {
 		tmpStr = '';
-		$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
+		$("#comment-edit-text-" + id).addClass("expanded");
-		$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
 		openMenu("comment-edit-submit-wrapper-" + id);
 	}
 	var ins = $(obj).val();
@@ -728,7 +772,7 @@ function collapseHeight() {
 function liveUpdate() {
 	if(typeof profile_uid === 'undefined') profile_uid = false; /* Should probably be unified with channelId defined in head.tpl */
 	if((src === null) || (stopped) || (! profile_uid)) { $('.like-rotator').spin(false); return; }
-	if(($('.comment-edit-text-full').length) || (in_progress)) {
+	if(($('.comment-edit-text.expanded').length) || (in_progress)) {
 		if(livetime) {
 			clearTimeout(livetime);
 		}
@@ -1312,9 +1356,10 @@ Array.prototype.remove = function(item) {
 	return this.push.apply(this, rest);
 };
 
-
 $(document).ready(function() {
 
+	$(document).on('click focus', '.comment-edit-form', handle_comment_form);
+
 	jQuery.timeago.settings.strings = {
 		prefixAgo     : aStr['t01'],
 		prefixFromNow : aStr['t02'],

view/theme/redbasic/css/style.css

@@ -1073,16 +1073,11 @@ img.mail-conv-sender-photo {
 }
 
 
-.comment-edit-text-empty,
+.comment-edit-text {
-.comment-edit-text-full {
 	border: 1px solid #ccc;
 	border-radius: $radius;
 }
 
-.comment-edit-text-empty {
-	color: gray;
-}
-
 .divgrow-showmore {
 	display: block;
 	border-top: 1px dashed #ccc;

view/tpl/comment_item.tpl

@@ -18,7 +18,7 @@
 					{{$anon_extras}}
 				</div>
 				{{/if}}
-				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpenUI(this,{{$id}});" onBlur="commentCloseUI(this,{{$id}});" ondragenter="linkdropper(event);" ondragleave="linkdropexit(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >{{$comment}}</textarea>
+				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text comment-edit-text-empty" placeholder="{{$comment}}" name="body" ondragenter="linkdropper(event);" ondragleave="linkdropexit(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" ></textarea>
 				{{if $qcomment}}
 					<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});" >
 					<option value=""></option>