Improved comment hiding interaction

- Remove global window.showMore and window.showFewer
- Improve global showHideComments function
- Remove frio-specific showHideComments function
This commit is contained in:
Hypolite Petovan 2019-02-14 22:24:34 -05:00
parent 642f9409a7
commit d7dbc632f8
11 changed files with 47 additions and 60 deletions

View file

@ -663,8 +663,6 @@ class App
'$local_user' => local_user(), '$local_user' => local_user(),
'$generator' => 'Friendica' . ' ' . FRIENDICA_VERSION, '$generator' => 'Friendica' . ' ' . FRIENDICA_VERSION,
'$delitem' => Core\L10n::t('Delete this item?'), '$delitem' => Core\L10n::t('Delete this item?'),
'$showmore' => Core\L10n::t('show more'),
'$showfewer' => Core\L10n::t('show fewer'),
'$update_interval' => $interval, '$update_interval' => $interval,
'$shortcut_icon' => $shortcut_icon, '$shortcut_icon' => $shortcut_icon,
'$touch_icon' => $touch_icon, '$touch_icon' => $touch_icon,

View file

@ -415,6 +415,7 @@ class Post extends BaseObject
'dislike' => $responses['dislike']['output'], 'dislike' => $responses['dislike']['output'],
'responses' => $responses, 'responses' => $responses,
'switchcomment' => L10n::t('Comment'), 'switchcomment' => L10n::t('Comment'),
'reply_label' => L10n::t('Reply to %s', $name_e),
'comment' => $comment, 'comment' => $comment,
'previewing' => $conv->isPreview() ? ' preview ' : '', 'previewing' => $conv->isPreview() ? ' preview ' : '',
'wait' => L10n::t('Please wait'), 'wait' => L10n::t('Please wait'),
@ -449,13 +450,13 @@ class Post extends BaseObject
foreach ($children as $child) { foreach ($children as $child) {
$result['children'][] = $child->getTemplateData($conv_responses, $thread_level + 1); $result['children'][] = $child->getTemplateData($conv_responses, $thread_level + 1);
} }
// Collapse // Collapse
if (($nb_children > 2) || ($thread_level > 1)) { if (($nb_children > 2) || ($thread_level > 1)) {
$result['children'][0]['comment_firstcollapsed'] = true; $result['children'][0]['comment_firstcollapsed'] = true;
$result['children'][0]['num_comments'] = L10n::tt('%d comment', '%d comments', $total_children); $result['children'][0]['num_comments'] = L10n::tt('%d comment', '%d comments', $total_children);
$result['children'][0]['hidden_comments_num'] = $total_children; $result['children'][0]['show_text'] = L10n::t('Show more');
$result['children'][0]['hidden_comments_text'] = L10n::tt('comment', 'comments', $total_children); $result['children'][0]['hide_text'] = L10n::t('Show fewer');
$result['children'][0]['hide_text'] = L10n::t('show more');
if ($thread_level > 1) { if ($thread_level > 1) {
$result['children'][$nb_children - 1]['comment_lastcollapsed'] = true; $result['children'][$nb_children - 1]['comment_lastcollapsed'] = true;
} else { } else {

View file

@ -656,12 +656,14 @@ function preview_comment(id) {
} }
function showHideComments(id) { function showHideComments(id) {
if ($("#collapsed-comments-" + id).is(":visible")) { if ($('#collapsed-comments-' + id).is(':visible')) {
$("#collapsed-comments-" + id).hide(); $('#collapsed-comments-' + id).slideUp();
$("#hide-comments-" + id).html(window.showMore); $('#hide-comments-' + id).hide();
$('#hide-comments-total-' + id).show();
} else { } else {
$("#collapsed-comments-" + id).show(); $('#collapsed-comments-' + id).slideDown();
$("#hide-comments-" + id).html(window.showFewer); $('#hide-comments-' + id).show();
$('#hide-comments-total-' + id).hide();
} }
} }

View file

@ -146,9 +146,6 @@
$(obj).val(""); $(obj).val("");
} }
window.showMore = "{{$showmore}}";
window.showFewer = "{{$showfewer}}";
function showHideCommentBox(id) { function showHideCommentBox(id) {
if ($("#comment-edit-form-" + id).is(":visible")) { if ($("#comment-edit-form-" + id).is(":visible")) {
$("#comment-edit-form-" + id).hide(); $("#comment-edit-form-" + id).hide();

View file

@ -1,7 +1,12 @@
{{if $item.comment_firstcollapsed}} {{if $item.comment_firstcollapsed}}
<div class="hide-comments-outer"> <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 fakelink" onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span> <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>
<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;"> <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
{{/if}} {{/if}}

View file

@ -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. // Show & hide event map in the network stream by button click.
function showHideEventMap(elm) { function showHideEventMap(elm) {
// Get the id of the map element - it should be provided through // Get the id of the map element - it should be provided through

View file

@ -87,11 +87,6 @@
{{/if}} {{/if}}
<script type="text/javascript" src="view/theme/frio/js/textedit.js"></script> <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) {{* 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 *}} They are loaded into the html <head> so that js functions can use them *}}
{{include file="js_strings.tpl"}} {{include file="js_strings.tpl"}}

View file

@ -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}} {{if $item.thread_level<3}}
<div class="hide-comments-outer-wrapper"> <div class="hide-comments-outer-wrapper">
<div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});"> <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
<span id="hide-comments-total-{{$item.id}}" <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
class="hide-comments-total">{{$item.num_comments}}</span> <i class="fa fa-plus-square" aria-hidden="true"></i>
<span id="hide-comments-{{$item.id}}" {{$item.num_comments}} - {{$item.show_text}}
class="hide-comments">{{$item.hide_text}}</span> </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> </div>
<hr />
</div> </div>
<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;"> <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
{{else}} {{else}}

View file

@ -1,19 +1,13 @@
{{if $mode == display}} {{if $mode == display}}
{{else}} {{else}}
{{if $item.comment_firstcollapsed}} {{if $item.comment_firstcollapsed}}
<div class="hide-comments-outer"> <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
<span id="hide-comments-total-{{$item.id}}" <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
class="hide-comments-total">{{$item.num_comments}}</span> {{$item.num_comments}} - {{$item.show_text}}
<span id="hide-comments-{{$item.id}}" </span>
class="hide-comments fakelink" <span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span> {{$item.num_comments}} - {{$item.hide_text}}
{{if $item.thread_level==3}} - </span>
<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> </div>
<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;"> <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
{{/if}} {{/if}}

View file

@ -1,8 +1,12 @@
{{if $item.comment_firstcollapsed}} {{if $item.comment_firstcollapsed}}
<div class="hide-comments-outer"> <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-total-{{$item.id}}" class="hide-comments-total">
<span id="hide-comments-{{$item.id}}" class="hide-comments fakelink" onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span> {{$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>
<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;"> <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
{{/if}} {{/if}}

View file

@ -2,12 +2,13 @@
{{else}} {{else}}
{{if $item.comment_firstcollapsed}} {{if $item.comment_firstcollapsed}}
{{if $item.thread_level<3}} {{if $item.thread_level<3}}
<div class="hide-comments-outer"> <div class="hide-comments-outer fakelink" onclick="showHideComments({{$item.id}});">
<span id="hide-comments-total-{{$item.id}}" <span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">
class="hide-comments-total">{{$item.num_comments}}</span> {{$item.num_comments}} - {{$item.show_text}}
<span id="hide-comments-{{$item.id}}" </span>
class="hide-comments fakelink" <span id="hide-comments-{{$item.id}}" class="hide-comments" style="display: none">
onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span> {{$item.num_comments}} - {{$item.hide_text}}
</span>
</div> </div>
<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;"> <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
{{else}} {{else}}