From: Jakobus Schürz <jakobus.schuerz@schuerz.at>
Date: Thu, 9 Mar 2023 13:55:43 +0000 (+0100)
Subject: improve like/share buttons
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=f8fc9c1e8ba93b4b66184e11e5dfd846f8b18e26;p=friendica.git

improve like/share buttons

change the button only if it could send its request successfully to the server.

fixes:
* disrupting a video on liking or sharing
* timeline jumps around somewhere else, when you like or share a
  posting/comment, and you can not find back.
---

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 60aa88ba58..1d5295f68b 100644
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -764,12 +764,52 @@ function htmlToText(htmlString) {
  * @param {boolean} un    Whether to perform an activity removal instead of creation
  */
 function doActivityItemAction(ident, verb, un) {
-	if (verb.indexOf("attend") === 0) {
-		$(".item-" + ident + " .button-event:not(#" + verb + "-" + ident + ")").removeClass("active");
-	}
-	$("#" + verb + "-" + ident).toggleClass("active");
+  console.log(ident, verb, un);
+	_verb = un ? 'un' + verb : verb;
+	$('#like-rotator-' + ident.toString()).show();
+	$.post('item/' + ident.toString() + '/activity/' + _verb)
+	.success(
+		function(data){
+      console.log("data.status: " + data.status);
+      if (data.status == "ok") {
+        console.log("connection: " + data.status);
+        $('#like-rotator-' + ident.toString()).hide();
+        if (verb.indexOf("announce") === 0 ) {
+          console.log("announce")
+          if (data.verb == "un" + verb) {
+            $("button[id^=shareMenuOptions-" + ident.toString() + "]" ).removeClass("active");
+            $("button[id^=shareMenuOptions-" + ident.toString() + "]" ).attr("onclick", "doActivityItemAction(" + ident +", '" + verb + "', " + false + ")").change();
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).removeClass("active");
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).attr("onclick", "doActivityItemAction(" + ident +", '" + verb + "', " + false + ")").change();
+          } else {
+            $("button[id^=shareMenuOptions-" + ident.toString() + "]" ).addClass("active");
+            $("button[id^=shareMenuOptions-" + ident.toString() + "]" ).attr("onclick", "doActivityItemAction(" + ident +", '" + verb + "', " + true + ")").change();
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).addClass("active");
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).attr("onclick", "doActivityItemAction(" + ident +", '" + verb + "', " + true + ")").change();
+          }
+        } else {
+          console.log("likes")
+          if (data.verb == "un" + verb) {
+            console.log(data.state);
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).removeClass("active");
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).attr("onclick", "doActivityItemAction(" + ident +", '" + verb + "', " + false + ")").change();
+          } else {
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).addClass("active");
+            $("button[id^=" + verb + "-" + ident.toString() + "]" ).attr("onclick", "doActivityItemAction(" + ident +", '" + verb + "', " + true + ")").change();
+          }
+          $("button[id^=" + verb + "-" + ident.toString() + "]" ).button('refresh');
+        }
+      } else {
+        $.jGrowl("No connection to host for like or share", {sticky: false, theme: 'info', life: 5000});
+        console.err("No connection to host");
+      }
+	})
+  .error(
+    function(data){
+      $.jGrowl("Network not reachable", {sticky: false, theme: 'info', life: 5000});
+      console.log("POST unsuccessfull " + data.toString());
+    });
 
-	doActivityItem(ident, verb, un);
 }
 
 // Decodes a hexadecimally encoded binary string
diff --git a/view/theme/frio/templates/like_noshare.tpl b/view/theme/frio/templates/like_noshare.tpl
index df335c32e9..83e7b4a988 100644
--- a/view/theme/frio/templates/like_noshare.tpl
+++ b/view/theme/frio/templates/like_noshare.tpl
@@ -3,8 +3,7 @@
 	<button type="button"
 	        class="btn-link button-likes{{if $responses.like.self}} active" aria-pressed="true{{/if}}" id="like-{{$id}}"
 	        title="{{$like_title}}"
-	        onclick="doActivityItemAction({{$id}}, 'like'{{if $responses.like.self}}, true{{/if}});"
-	        data-toggle="button">
+	        onclick="doActivityItemAction({{$id}}, 'like'{{if $responses.like.self}}, true{{/if}});">
 		<i class="fa fa-thumbs-up" aria-hidden="true"></i>&nbsp;{{$like}}
 	</button>
 	{{if !$hide_dislike}}
@@ -13,8 +12,8 @@
 	        class="btn-link button-likes{{if $responses.dislike.self}} active" aria-pressed="true{{/if}}"
 	        id="dislike-{{$id}}"
 	        title="{{$dislike_title}}"
-	        onclick="doActivityItemAction({{$id}}, 'dislike'{{if $responses.dislike.self}}, true{{/if}});"
-	        data-toggle="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i>&nbsp;{{$dislike}}
+	        onclick="doActivityItemAction({{$id}}, 'dislike'{{if $responses.dislike.self}}, true{{/if}});">
+                <i class="fa fa-thumbs-down" aria-hidden="true"></i>&nbsp;{{$dislike}}
 	</button>
 	{{/if}}
 	<img id="like-rotator-{{$id}}" class="like-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl
index e4f87f940e..7e77e50527 100644
--- a/view/theme/frio/templates/wall_thread.tpl
+++ b/view/theme/frio/templates/wall_thread.tpl
@@ -285,13 +285,13 @@ as the value of $top_child_total (this is done at the end of this file)
 			{{* Buttons for like and dislike *}}
 			{{if $item.vote}}
 				{{if $item.vote.like}}
-				<button type="button" class="btn-link button-likes{{if $item.responses.like.self}} active" aria-pressed="true{{/if}}" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="doActivityItemAction({{$item.id}}, 'like'{{if $item.responses.like.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i>&nbsp;{{$item.vote.like.1}}</button>
+				<button type="button" class="btn-link button-likes{{if $item.responses.like.self}} active" aria-pressed="true{{/if}}" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="doActivityItemAction({{$item.id}}, 'like'{{if $item.responses.like.self}}, true{{/if}});" ><i class="fa fa-thumbs-up" aria-hidden="true"></i>&nbsp;{{$item.vote.like.1}}</button>
 				{{/if}}
 				{{if $item.vote.like AND $item.vote.dislike}}
 				<span role="presentation" class="separator"></span>
 				{{/if}}
 				{{if $item.vote.dislike}}
-				<button type="button" class="btn-link button-likes{{if $item.responses.dislike.self}} active" aria-pressed="true{{/if}}" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="doActivityItemAction({{$item.id}}, 'dislike'{{if $item.responses.dislike.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i>&nbsp;{{$item.vote.dislike.1}}</button>
+				<button type="button" class="btn-link button-likes{{if $item.responses.dislike.self}} active" aria-pressed="true{{/if}}" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="doActivityItemAction({{$item.id}}, 'dislike'{{if $item.responses.dislike.self}}, true{{/if}});" ><i class="fa fa-thumbs-down" aria-hidden="true"></i>&nbsp;{{$item.vote.dislike.1}}</button>
 				{{/if}}
 
 				{{if ($item.vote.like OR $item.vote.dislike) AND $item.comment_html}}
@@ -316,7 +316,7 @@ as the value of $top_child_total (this is done at the end of this file)
 					{{/if}}
 				{{/if}}
 				{{if $item.vote.announce}}
-				<button type="button" class="btn-link button-announces{{if $item.responses.announce.self}} active" aria-pressed="true{{/if}}" id="announce-{{$item.id}}" title="{{$item.vote.announce.0}}" onclick="doActivityItemAction({{$item.id}}, 'announce'{{if $item.responses.announce.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-retweet" aria-hidden="true"></i>&nbsp;{{$item.vote.announce.1}}</button>
+				<button type="button" class="btn-link button-announces{{if $item.responses.announce.self}} active" aria-pressed="true{{/if}}" id="announce-{{$item.id}}" title="{{$item.vote.announce.0}}" onclick="doActivityItemAction({{$item.id}}, 'announce'{{if $item.responses.announce.self}}, true{{/if}});" ><i class="fa fa-retweet" aria-hidden="true"></i>&nbsp;{{$item.vote.announce.1}}</button>
 				<span role="presentation" class="separator"></span>
 				{{/if}}
 				{{if $item.vote.share}}
@@ -441,10 +441,10 @@ as the value of $top_child_total (this is done at the end of this file)
 					{{* Buttons for like and dislike *}}
 					{{if $item.vote}}
 						{{if $item.vote.like}}
-							<button type="button" class="btn button-likes{{if $item.responses.like.self}} active" aria-pressed="true{{/if}}" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="doActivityItemAction({{$item.id}}, 'like'{{if $item.responses.like.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
+							<button type="button" class="btn button-likes{{if $item.responses.like.self}} active" aria-pressed="true{{/if}}" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="doActivityItemAction({{$item.id}}, 'like'{{if $item.responses.like.self}}, true{{/if}});" ><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
 						{{/if}}
 						{{if $item.vote.dislike}}
-							<button type="button" class="btn button-likes{{if $item.responses.dislike.self}} active" aria-pressed="true{{/if}}" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="doActivityItemAction({{$item.id}}, 'dislike'{{if $item.responses.dislike.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></button>
+							<button type="button" class="btn button-likes{{if $item.responses.dislike.self}} active" aria-pressed="true{{/if}}" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="doActivityItemAction({{$item.id}}, 'dislike'{{if $item.responses.dislike.self}}, true{{/if}});" ><i class="fa fa-thumbs-down" aria-hidden="true"></i></button>
 						{{/if}}
 					{{/if}}