Skip to content
This repository was archived by the owner on Apr 4, 2023. It is now read-only.

Commit 88bc8f9

Browse files
pfefferlepfefferle
authored
Merge pull request #244 from florianbrinkmann/master
Some changes on feature to toggle additional facepiles
2 parents e9a676f + 07f82ea commit 88bc8f9

File tree

5 files changed

+98
-12
lines changed

5 files changed

+98
-12
lines changed

‎css/semantic-linkbacks.css‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@
1414
display: none;
1515
}
1616

17-
.mention-list .toggle-additional-facepiles {
17+
.mention-list.initialized .additional-facepile,
18+
.mention-list .additional-facepile-button-list-item {
19+
display: none;
20+
}
21+
22+
.mention-list.initialized .additional-facepile-button-list-item:not(.is-hidden) {
1823
display: inline-block;
1924
text-align: center;
2025
height: 64px;
@@ -24,6 +29,16 @@
2429
cursor: pointer;
2530
}
2631

32+
.mention-list.initialized .additional-facepile-button-list-item.is-hidden ~ .additional-facepile {
33+
display: inline-block;
34+
}
35+
36+
.mention-list .additional-facepile-button-list-item button {
37+
border: none;
38+
background-color: transparent;
39+
padding: 0;
40+
}
41+
2742
.mention-list li img {
2843
height: 64px;
2944
width: 64px;

‎includes/functions.php‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,9 +181,37 @@ function list_linkbacks( $args, $comments ) {
181181
$return = sprintf( '<%1$s class="%2$s">', $r['style'], join( ' ', $r['style-class'] ) );
182182
$fold_at = (int) get_option( 'semantic_linkbacks_facepiles_fold_limit', 8 );
183183

184+
$type_labels = [
185+
'reacji' => __( 'Reacjis', 'semantic-linkbacks' ),
186+
'like' => __( 'Likes', 'semantic-linkbacks' ),
187+
'favorite' => __( 'Favourites', 'semantic-linkbacks' ),
188+
'bookmark' => __( 'Bookmarks', 'semantic-linkbacks' ),
189+
'repost' => __( 'Reposts', 'semantic-linkbacks' ),
190+
'tag' => __( 'Tags', 'semantic-linkbacks' ),
191+
'listen' => __( 'Listening', 'semantic-linkbacks' ),
192+
'read' => __( 'Reading', 'semantic-linkbacks' ),
193+
'follow' => __( 'Following', 'semantic-linkbacks' ),
194+
'watch' => __( 'Watching', 'semantic-linkbacks' ),
195+
'rsvp-yes' => __( 'RSVPs', 'semantic-linkbacks' ),
196+
'invited' => __( 'Invited', 'semantic-linkbacks' ),
197+
'rsvp-maybe' => __( 'Maybe', 'semantic-linkbacks' ),
198+
'rsvp-no' => __( 'No', 'semantic-linkbacks' ),
199+
'rsvp-interested' => __( 'Interested', 'semantic-linkbacks' ),
200+
'mention' => __( 'Mentions', 'semantic-linkbacks' ),
201+
];
202+
184203
foreach ( $comments as $i => $comment ) {
185204
if ( $fold_at && $i === $fold_at ) {
186205
$classes[] = 'additional-facepile';
206+
207+
// Add show button.
208+
$return .= sprintf(
209+
'<li class="additional-facepile-button-list-item"><button class="show-additional-facepiles"><span aria-hidden="true">&hellip;</span><span class="screen-reader-text">%s</span></button></li>',
210+
sprintf( /* translators: s=Linback type */
211+
__( 'Show more %s', 'semantic-linkbacks' ),
212+
$type_labels[$r['type']]
213+
)
214+
);
187215
}
188216

189217
// If it's an emoji reaction, overlay the emoji.
@@ -227,7 +255,14 @@ function list_linkbacks( $args, $comments ) {
227255
}
228256

229257
if ( $fold_at && count( $comments ) > $fold_at ) {
230-
$return .= '<li class="toggle-additional-facepiles">&hellip;</li>';
258+
// Add hide button at end.
259+
$return .= sprintf(
260+
'<li class="additional-facepile-button-list-item is-hidden"><button class="hide-additional-facepiles"><span aria-hidden="true">&hellip;</span><span class="screen-reader-text">%s</span></button></li>',
261+
sprintf( /* translators: s=Linback type */
262+
__( 'Show fewer %s', 'semantic-linkbacks' ),
263+
$type_labels[$r['type']]
264+
)
265+
);
231266
}
232267

233268
$return .= sprintf( '</%1$s>', $r['style'] );

‎js/semantic-linkbacks.js‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,43 @@
1-
jQuery( document ).ready( function() {
2-
jQuery( '.additional-facepile' ).hide();
1+
document.addEventListener( 'DOMContentLoaded', function() {
2+
var showAdditionalFacepileButtons = document.querySelectorAll( '.show-additional-facepiles' ),
3+
mentionLists = document.querySelectorAll( '.mention-list' );
34

4-
jQuery( '.toggle-additional-facepiles' ).click( function() {
5-
jQuery( this ).parent( 'ul' ).find( '.additional-facepile' ).toggle();
6-
} );
7-
} );
5+
if ( showAdditionalFacepileButtons.length === 0 || mentionLists.length === 0 ) {
6+
return;
7+
}
8+
9+
// Add `initialized` class to mention-list container. When JS is disabled or not working, we want to show all items.
10+
for ( var i = 0; i < mentionLists.length; i++ ) {
11+
var mentionList = mentionLists[i];
12+
mentionList.classList.add( 'initialized' );
13+
}
14+
15+
// Loop the buttons to show additional facepiles.
16+
for ( var i = 0; i < showAdditionalFacepileButtons.length; i++ ) {
17+
var showAdditionalFacepileButton = showAdditionalFacepileButtons[i],
18+
hideAdditionalFacepileButton = showAdditionalFacepileButton.parentNode.parentNode.querySelector( '.hide-additional-facepiles' );
19+
20+
showAdditionalFacepileButton.addEventListener( 'click', function() {
21+
toggleListItemClasses( this );
22+
} );
23+
24+
hideAdditionalFacepileButton.addEventListener( 'click', function() {
25+
toggleListItemClasses( this );
26+
} );
27+
}
28+
29+
/**
30+
* Toggle the classes of the list items that contain the buttons.
31+
*
32+
* @param {HTMLElement} clickedButton
33+
*/
34+
var toggleListItemClasses = function( clickedButton ) {
35+
var buttonListItem = clickedButton.parentNode,
36+
otherButtonListItem = buttonListItem.classList.contains( 'is-hidden' )
37+
? buttonListItem.parentNode.querySelector( '.additional-facepile-button-list-item:not(.is-hidden)' )
38+
: buttonListItem.parentNode.querySelector( '.additional-facepile-button-list-item.is-hidden' );
39+
40+
buttonListItem.classList.toggle( 'is-hidden' );
41+
otherButtonListItem.classList.toggle( 'is-hidden' );
42+
}
43+
});

‎semantic-linkbacks.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ public static function enqueue_scripts() {
150150
wp_enqueue_style( 'semantic-linkbacks-css', plugin_dir_url( __FILE__ ) . 'css/semantic-linkbacks.css', array(), self::$version );
151151

152152
if ( is_singular() && 0 !== (int) get_option( 'semantic_linkbacks_facepiles_fold_limit', 8 ) ) {
153-
wp_enqueue_script( 'semantic-linkbacks', plugin_dir_url( __FILE__ ) . 'js/semantic-linkbacks.js', array( 'jquery' ), self::$version, true );
153+
wp_enqueue_script( 'semantic-linkbacks', plugin_dir_url( __FILE__ ) . 'js/semantic-linkbacks.js', array(), self::$version, true );
154154
}
155155
}
156156

‎tests/test-rendering.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ public function test_facepile_markup() {
4141
$this->assertStringMatchesFormat(
4242
'<ul class="mention-list linkback-mention"><li class="webmention even thread-even depth-1 linkback-mention-single u-like h-cite" id="comment-2">
4343
<span class="p-author h-card">
44-
<a class="u-url" title="Person 0 liked this Post on example.com." href="http://example.com/person0"><img alt=\'\' src=\'http://example.com/photo\' srcset=\'http://example.com/photo 2x\' class=\'avatar avatar-64 photo avatar-default u-photo avatar-semantic-linkbacks\' height=\'64\' width=\'64\' /> </a>
44+
<a class="u-url" title="Person 0 liked this Post on example.com." href="http://example.com/person0"><img alt=\'\' src=\'http://example.com/photo\' srcset=\'http://example.com/photo 2x\' class=\'avatar avatar-64 photo avatar-default u-photo avatar-semantic-linkbacks\' height=\'64\' width=\'64\' loading=\'lazy\'/> </a>
4545
<span class="hide-name p-name">Person 0</span>
4646
</span>
4747
<a class="u-url" href=""></a>
@@ -55,7 +55,7 @@ public function test_facepile_fold() {
5555
$person_0 = strpos( $html, '<a class="u-url" title="Person 0 liked this Post on example.com."' );
5656
$person_1 = strpos( $html, '<a class="u-url" title="Person 1 liked this Post on example.com."' );
5757
$person_2 = strpos( $html, 'additional-facepile' );
58-
$ellipsis = strpos( $html, '<li class="toggle-additional-facepiles">' );
58+
$ellipsis = strpos( $html, '<button class="show-additional-facepiles">' );
5959
$this->assertGreaterThan( 0, $person_0 );
6060
$this->assertGreaterThan( $person_0, $person_1 );
6161
$this->assertGreaterThan( $person_1, $person_2 );
@@ -96,7 +96,7 @@ public function test_reactions() {
9696
<h3>Reacjis</h3>
9797
<ul class="mention-list linkback-reacji"><li class="comment even thread-even depth-1 linkback-reacji-single h-cite" id="comment-%d">
9898
<span class="p-author h-card">
99-
<a class="u-url" title="Person 😢 on example.com." href="http://example.com/person"><img alt=\'\' src=\'http://example.com/photo\' srcset=\'http://example.com/photo 2x\' class=\'avatar avatar-64 photo avatar-default u-photo avatar-semantic-linkbacks\' height=\'64\' width=\'64\' /> <span class="emoji-overlay">😢</span></a>
99+
<a class="u-url" title="Person 😢 on example.com." href="http://example.com/person"><img alt=\'\' src=\'http://example.com/photo\' srcset=\'http://example.com/photo 2x\' class=\'avatar avatar-64 photo avatar-default u-photo avatar-semantic-linkbacks\' height=\'64\' width=\'64\' loading=\'lazy\'/> <span class="emoji-overlay">😢</span></a>
100100
<span class="hide-name p-name">Person</span>
101101
</span>
102102
<a class="u-url" href=""></a>

0 commit comments

Comments
 (0)