From d7dbc632f8dba9b9f4f3e5c8dbf54bd69e8e67ab Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Thu, 14 Feb 2019 22:24:34 -0500
Subject: [PATCH] Improved comment hiding interaction

- Remove global window.showMore and window.showFewer
- Improve global showHideComments function
- Remove frio-specific showHideComments function
---
 src/App.php                                   |  2 --
 src/Object/Post.php                           |  7 ++++---
 view/js/main.js                               | 12 ++++++-----
 view/templates/head.tpl                       |  3 ---
 view/templates/wall_thread.tpl                |  9 +++++++--
 view/theme/frio/js/theme.js                   | 13 ------------
 view/theme/frio/templates/head.tpl            |  5 -----
 view/theme/frio/templates/wall_thread.tpl     | 13 +++++++-----
 view/theme/quattro/templates/wall_thread.tpl  | 20 +++++++------------
 view/theme/smoothly/templates/wall_thread.tpl | 10 +++++++---
 view/theme/vier/templates/wall_thread.tpl     | 13 ++++++------
 11 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/src/App.php b/src/App.php
index 8068a1530b..b9e22dd1b5 100644
--- a/src/App.php
+++ b/src/App.php
@@ -663,8 +663,6 @@ class App
 			'$local_user'      => local_user(),
 			'$generator'       => 'Friendica' . ' ' . FRIENDICA_VERSION,
 			'$delitem'         => Core\L10n::t('Delete this item?'),
-			'$showmore'        => Core\L10n::t('show more'),
-			'$showfewer'       => Core\L10n::t('show fewer'),
 			'$update_interval' => $interval,
 			'$shortcut_icon'   => $shortcut_icon,
 			'$touch_icon'      => $touch_icon,
diff --git a/src/Object/Post.php b/src/Object/Post.php
index 9fa9fcb507..05ffeb52b2 100644
--- a/src/Object/Post.php
+++ b/src/Object/Post.php
@@ -415,6 +415,7 @@ class Post extends BaseObject
 			'dislike'         => $responses['dislike']['output'],
 			'responses'       => $responses,
 			'switchcomment'   => L10n::t('Comment'),
+			'reply_label'     => L10n::t('Reply to %s', $name_e),
 			'comment'         => $comment,
 			'previewing'      => $conv->isPreview() ? ' preview ' : '',
 			'wait'            => L10n::t('Please wait'),
@@ -449,13 +450,13 @@ class Post extends BaseObject
 			foreach ($children as $child) {
 				$result['children'][] = $child->getTemplateData($conv_responses, $thread_level + 1);
 			}
+
 			// Collapse
 			if (($nb_children > 2) || ($thread_level > 1)) {
 				$result['children'][0]['comment_firstcollapsed'] = true;
 				$result['children'][0]['num_comments'] = L10n::tt('%d comment', '%d comments', $total_children);
-				$result['children'][0]['hidden_comments_num'] = $total_children;
-				$result['children'][0]['hidden_comments_text'] = L10n::tt('comment', 'comments', $total_children);
-				$result['children'][0]['hide_text'] = L10n::t('show more');
+				$result['children'][0]['show_text'] = L10n::t('Show more');
+				$result['children'][0]['hide_text'] = L10n::t('Show fewer');
 				if ($thread_level > 1) {
 					$result['children'][$nb_children - 1]['comment_lastcollapsed'] = true;
 				} else {
diff --git a/view/js/main.js b/view/js/main.js
index f81d7a4235..c3d9cbed5c 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -656,12 +656,14 @@ function preview_comment(id) {
 }
 
 function showHideComments(id) {
-	if ($("#collapsed-comments-" + id).is(":visible")) {
-		$("#collapsed-comments-" + id).hide();
-		$("#hide-comments-" + id).html(window.showMore);
+	if ($('#collapsed-comments-' + id).is(':visible')) {
+		$('#collapsed-comments-' + id).slideUp();
+		$('#hide-comments-' + id).hide();
+		$('#hide-comments-total-' + id).show();
 	} else {
-		$("#collapsed-comments-" + id).show();
-		$("#hide-comments-" + id).html(window.showFewer);
+		$('#collapsed-comments-' + id).slideDown();
+		$('#hide-comments-' + id).show();
+		$('#hide-comments-total-' + id).hide();
 	}
 }
 
diff --git a/view/templates/head.tpl b/view/templates/head.tpl
index fa0088b8b6..6f7ddffb27 100644
--- a/view/templates/head.tpl
+++ b/view/templates/head.tpl
@@ -146,9 +146,6 @@
 		$(obj).val("");
 	}
 
-	window.showMore = "{{$showmore}}";
-	window.showFewer = "{{$showfewer}}";
-
 	function showHideCommentBox(id) {
 		if ($("#comment-edit-form-" + id).is(":visible")) {
 			$("#comment-edit-form-" + id).hide();
diff --git a/view/templates/wall_thread.tpl b/view/templates/wall_thread.tpl
index b3ed2af026..01cd7559f1 100644
--- a/view/templates/wall_thread.tpl
+++ b/view/templates/wall_thread.tpl
@@ -1,7 +1,12 @@
 
 {{if $item.comment_firstcollapsed}}
-	<div class="hide-comments-outer">
-	<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">{{$item.num_comments}}</span> <span id="hide-comments-{{$item.id}}" class="hide-comments fakelink" onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
+	<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+		<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+			{{$item.num_comments}} - {{$item.show_text}}
+		</span>
+		<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+			{{$item.num_comments}} - {{$item.hide_text}}
+		</span>
 	</div>
 	<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}
diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 0965f3a3e8..83623bf342 100644
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -388,19 +388,6 @@ function showHide(theID) {
 	}
 }
 
-function showHideComments(id) {
-	if( $('#collapsed-comments-' + id).is(':visible')) {
-		$('#collapsed-comments-' + id).slideUp();
-		$('#hide-comments-' + id).html(window.showMore);
-		$('#hide-comments-total-' + id).show();
-	}
-	else {
-		$('#collapsed-comments-' + id).slideDown();
-		$('#hide-comments-' + id).html(window.showFewer);
-		$('#hide-comments-total-' + id).hide();
-	}
-}
-
 // Show & hide event map in the network stream by button click.
 function showHideEventMap(elm) {
 	// Get the id of the map element - it should be provided through
diff --git a/view/theme/frio/templates/head.tpl b/view/theme/frio/templates/head.tpl
index e1805f744f..b3c632b3d1 100644
--- a/view/theme/frio/templates/head.tpl
+++ b/view/theme/frio/templates/head.tpl
@@ -87,11 +87,6 @@
 {{/if}}
 <script type="text/javascript" src="view/theme/frio/js/textedit.js"></script>
 
-<script type="text/javascript">
-	window.showMore = "{{$showmore}}";
-	window.showFewer = "{{$showfewer}}";
-</script>
-
 {{* Include the strings which are needed for some js functions (e.g. translation)
 They are loaded into the html <head> so that js functions can use them *}}
 {{include file="js_strings.tpl"}}
diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl
index c149b58a51..068f98136a 100644
--- a/view/theme/frio/templates/wall_thread.tpl
+++ b/view/theme/frio/templates/wall_thread.tpl
@@ -41,12 +41,15 @@ as the value of $top_child_total (this is done at the end of this file)
 	{{if $item.thread_level<3}}
 		<div class="hide-comments-outer-wrapper">
 			<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
-				<span id="hide-comments-total-{{$item.id}}"
-					class="hide-comments-total">{{$item.num_comments}}</span>
-				<span id="hide-comments-{{$item.id}}"
-					class="hide-comments">{{$item.hide_text}}</span>
+				<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+					<i class="fa fa-plus-square" aria-hidden="true"></i>
+					{{$item.num_comments}} - {{$item.show_text}}
+				</span>
+				<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+					<i class="fa fa-minus-square" aria-hidden="true"></i>
+					{{$item.num_comments}} - {{$item.hide_text}}
+				</span>
 			</div>
-			<hr />
 		</div>
 		<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 	{{else}}
diff --git a/view/theme/quattro/templates/wall_thread.tpl b/view/theme/quattro/templates/wall_thread.tpl
index 1d2295278b..a80aabf4b4 100644
--- a/view/theme/quattro/templates/wall_thread.tpl
+++ b/view/theme/quattro/templates/wall_thread.tpl
@@ -1,19 +1,13 @@
 {{if $mode == display}}
 {{else}}
 {{if $item.comment_firstcollapsed}}
-	<div class="hide-comments-outer">
-		<span id="hide-comments-total-{{$item.id}}"
-			class="hide-comments-total">{{$item.num_comments}}</span>
-			<span id="hide-comments-{{$item.id}}"
-				class="hide-comments fakelink"
-				onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
-			{{if $item.thread_level==3}} -
-			<span id="hide-thread-{{$item}}-id"
-				class="fakelink"
-				onclick="showThread({{$item.id}});">expand</span> /
-			<span id="hide-thread-{{$item}}-id"
-				class="fakelink"
-				onclick="hideThread({{$item.id}});">collapse</span> thread{{/if}}
+	<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+		<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+			{{$item.num_comments}} - {{$item.show_text}}
+		</span>
+		<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+			{{$item.num_comments}} - {{$item.hide_text}}
+		</span>
 	</div>
 	<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}
diff --git a/view/theme/smoothly/templates/wall_thread.tpl b/view/theme/smoothly/templates/wall_thread.tpl
index a7e0f20109..08ff557670 100644
--- a/view/theme/smoothly/templates/wall_thread.tpl
+++ b/view/theme/smoothly/templates/wall_thread.tpl
@@ -1,8 +1,12 @@
 
 {{if $item.comment_firstcollapsed}}
-	<div class="hide-comments-outer">
-		<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">{{$item.num_comments}}</span>
-		<span id="hide-comments-{{$item.id}}" class="hide-comments fakelink" onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
+	<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+		<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+			{{$item.num_comments}} - {{$item.show_text}}
+		</span>
+		<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+			{{$item.num_comments}} - {{$item.hide_text}}
+		</span>
 	</div>
 	<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}
diff --git a/view/theme/vier/templates/wall_thread.tpl b/view/theme/vier/templates/wall_thread.tpl
index 21ebcea38f..37e01f75a4 100644
--- a/view/theme/vier/templates/wall_thread.tpl
+++ b/view/theme/vier/templates/wall_thread.tpl
@@ -2,12 +2,13 @@
 {{else}}
 {{if $item.comment_firstcollapsed}}
 	{{if $item.thread_level<3}}
-		<div class="hide-comments-outer">
-			<span id="hide-comments-total-{{$item.id}}"
-				class="hide-comments-total">{{$item.num_comments}}</span>
-			<span id="hide-comments-{{$item.id}}"
-				class="hide-comments fakelink"
-				onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
+		<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
+			<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
+				{{$item.num_comments}} - {{$item.show_text}}
+			</span>
+			<span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
+				{{$item.num_comments}} - {{$item.hide_text}}
+			</span>
 		</div>
 		<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 	{{else}}