tobias/friendica
1
0
Fork 0
Code Pull requests Activity

Merge pull request #12877 from xundeenergie/like-buttons-improvement

Browse source 
[frio] Like buttons improvement
This commit is contained in:
Hypolite Petovan 2023-03-15 10:22:23 -04:00 committed by GitHub
commit 705e86f8c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 205 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App/Page.php
View file

@ -253,6 +253,11 @@ class Page implements ArrayAccess
'$touch_icon' => $touch_icon,
'$block_public' => intval($config->get('system', 'block_public')),
'$stylesheets' => $this->stylesheets,
'$likeError' => $l10n->t('Like not successfull'),
'$dislikeError' => $l10n->t('Dislike not successfull'),
'$announceError' => $l10n->t('Sharing not successfull'),
'$srvError' => $l10n->t('Backend error'),
'$netError' => $l10n->t('Network error'),
]) . $this->page['htmlhead'];
}

22
view/lang/C/messages.po
View file

@ -673,7 +673,27 @@ msgid ""
"notifications."
msgstr ""
#: src/App/Page.php:320
#: src/App/Page.php:256
msgid "Like not successfull"
msgstr ""
#: src/App/Page.php:257
msgid "Dislike not successfull"
msgstr ""
#: src/App/Page.php:258
msgid "Sharing not successfull"
msgstr ""
#: src/App/Page.php:259
msgid "Backend error"
msgstr ""
#: src/App/Page.php:260
msgid "Network error"
msgstr ""
#: src/App/Page.php:325
msgid "toggle mobile"
msgstr ""

93
view/theme/frio/js/theme.js
View file

@ -764,12 +764,95 @@ 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 = un ? 'un' + verb : verb;
var thumbsClass = '';
switch (verb) {
case 'like':
thumbsClass = 'fa-thumbs-up';
break;
case 'dislike':
thumbsClass = 'fa-thumbs-down';
break;
case 'announce':
thumbsClass = 'fa-retweet';
}
$("#" + verb + "-" + ident).toggleClass("active");
doActivityItem(ident, verb, un);
if (verb.indexOf('announce') === 0 ) {
// Share-Button(s)
// remove share-symbol, to replace it by rotator
$('button[id^=shareMenuOptions-' + ident.toString() + '] i:first-child').removeClass('fa-share');
$('button[id^=announce-' + ident.toString() + '] i:first-child').removeClass('fa-retweet');
// avoid multiple rotators on like/share-button if klicked multiple times.
if ($('img[id^=waitfor-' + verb + '-' + ident.toString() + ']').length == 0) {
// append rotator to the shareMenu-button for small media
$('<img>')
.attr({id: 'waitfor-' + verb + '-' + ident.toString(), src: 'images/rotator.gif'})
.addClass('fa')
.appendTo($('button[id^=shareMenuOptions-' + ident.toString() + '] i:first-child' ));
}
}
$('button[id^=' + verb + '-' + ident.toString() + '] i:first-child').removeClass(thumbsClass);
// if verb is announce, then one rotator is added above to the shareMedia-dropdown button
if ($('button:not(button.dropdown-toggle) img#waitfor-' + verb + '-' + ident.toString()).length == 0) {
$('<img>')
.attr({id: 'waitfor-' + verb + '-' + ident.toString(), src: 'images/rotator.gif'})
.addClass('fa')
.appendTo($('button[id^=' + verb + '-' + ident.toString() + '] i:first-child'));
}
$.post('item/' + ident.toString() + '/activity/' + _verb)
.success(function(data){
$('img[id^=waitfor-' + verb + '-' + ident.toString() + ']').remove();
if (data.status == 'ok') {
if (data.verb == 'un' + verb) {
// like/dislike buttons
$('button[id^=' + verb + '-' + ident.toString() + ']' )
.removeClass('active')
.attr('onclick', 'doActivityItemAction(' + ident +', "' + verb + '",false )');
// link in share-menu
$('a[id^=' + verb + '-' + ident.toString() + ']' )
.removeClass('active')
.attr('href', 'javascript:doActivityItemAction(' + ident +', "' + verb + '",false )');
$('a[id^=' + verb + '-' + ident.toString() + '] i:first-child' ).addClass('fa-retweet').removeClass('fa-ban');
} else {
// like/dislike buttons
$('button[id^=' + verb + '-' + ident.toString() + ']' )
.addClass('active')
.attr('onclick', 'doActivityItemAction(' + ident + ', "' + verb + '", true )');
// link in share-menu
$('a[id^=' + verb + '-' + ident.toString() + ']' )
.addClass('active')
.attr('href', 'javascript:doActivityItemAction(' + ident + ', "' + verb + '", true )');
$('a[id^=' + verb + '-' + ident.toString() + '] i:first-child' ).removeClass('fa-retweet').addClass('fa-ban');
}
$('button[id^=' + verb + '-' + ident.toString() + '] i:first-child').addClass(thumbsClass).show();
if (verb.indexOf('announce') === 0 ) {
// ShareMenuButton
$('button[id^=shareMenuOptions-' + ident.toString() + '] i:first-child').addClass('fa-share');
if (data.verb == 'un' + verb) {
$('button[id^=shareMenuOptions-' + ident.toString() + ']').removeClass('active');
} else {
$('button[id^=shareMenuOptions-' + ident.toString() + ']').addClass('active');
}
}
} else {
/* server-response was not ok. Database-problems or some changes in
* data?
* reset all buttons
*/
$('img[id^=waitfor-' + verb + '-' + ident.toString() + ']').remove();
$('button[id^=shareMenuOptions-' + ident.toString() + '] i:first-child').addClass('fa-share');
$('button[id^=' + verb + '-' + ident.toString() + '] i:first-child').addClass(thumbsClass);
$('a[id^=' + verb + '-' + ident.toString() + '] i:first-child').addClass(thumbsClass);
$.jGrowl(aActErr[verb] + '<br>(' + aErrType['srvErr'] + ')', {sticky: false, theme: 'info', life: 5000});
}
})
.error(function(data){
// Server could not be reached successfully
$('img[id^=waitfor-' + verb + '-' + ident.toString() + ']').remove();
$('button[id^=shareMenuOptions-' + ident.toString() + '] i:first-child').addClass('fa-share');
$('button[id^=' + verb + '-' + ident.toString() + '] i:first-child').addClass(thumbsClass);
$('a[id^=' + verb + '-' + ident.toString() + '] i:first-child').addClass(thumbsClass);
$.jGrowl(aActErr[verb] + '<br>(' + aErrType['netErr'] + ')', {sticky: false, theme: 'info', life: 5000});
});
}
// Decodes a hexadecimally encoded binary string

9
view/theme/frio/templates/js_strings.tpl
View file

@ -10,4 +10,13 @@ They are loaded into the html <head> so that js functions can use them *}}
'blockAuthor' : "{{$blockAuthor|escape:'javascript' nofilter}}",
'ignoreAuthor' : "{{$ignoreAuthor|escape:'javascript' nofilter}}",
};
var aActErr = {
'like' : "{{$likeError}}",
'dislike' : "{{$dislikeError}}",
'announce' : "{{$announceError}}",
};
var aErrType = {
'srvErr' : "{{$srvError}}",
'netErr' : "{{$netError}}",
};
</script>

8
view/theme/frio/templates/like_noshare.tpl
View file

@ -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,9 +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;" />
</div>

18
view/theme/frio/templates/wall_thread.tpl
View file

@ -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}}
@ -325,7 +325,6 @@ as the value of $top_child_total (this is done at the end of this file)
{{/if}}
{{* Put additional actions in a dropdown menu *}}
{{if $item.menu && ($item.edpost || $item.tagger || $item.filer || $item.pin || $item.star || $item.follow_thread || $item.ignore || ($item.drop && $item.drop.dropping) || $item.browsershare)}}
<span role="presentation" class="separator"></span>
<span class="more-links btn-group{{if $item.thread_level > 1}} dropup{{/if}}">
<button type="button" class="btn-link dropdown-toggle" data-toggle="dropdown" id="dropdownMenuOptions-{{$item.id}}" aria-haspopup="true" aria-expanded="false" title="{{$item.menu}}"><i class="fa fa-ellipsis-h" aria-hidden="true"></i>&nbsp;{{$item.menu}}</button>
@ -410,12 +409,7 @@ as the value of $top_child_total (this is done at the end of this file)
</li>
{{/if}}
</ul>
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
</span>
{{else}}
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
{{/if}}
</span>
<span class="wall-item-actions-right hidden-xs">
@ -441,10 +435,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}}
@ -491,7 +485,6 @@ as the value of $top_child_total (this is done at the end of this file)
{{/if}}
{{* Put additional actions in a dropdown menu *}}
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
{{* Event attendance buttons *}}
{{if $item.isevent}}
@ -569,7 +562,6 @@ as the value of $top_child_total (this is done at the end of this file)
</li>
{{/if}}
</ul>
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
</div>
{{/if}}
<span class="pull-right checkbox">