unobtrusive javascript

Author: Matthias Pfefferle

css/semantic-linkbacks.css

@@ -13,6 +13,16 @@
 	display: none;
 }
 
+.mention-list .toggle-additional-facepiles {
+	display: inline-block;
+	text-align: center;
+	height: 64px;
+	width: 64px;
+	line-height: 1.5;
+	font-size: 32px;
+	cursor: pointer;
+}
+
 .mention-list li img {
 	height: 64px;
 	width: 64px;
@@ -31,5 +41,5 @@ li.emoji-reaction {
 }
 
 .reactions {
-    clear: both;
+	clear: both;
 }

includes/functions.php

@@ -135,15 +135,7 @@ function list_linkbacks( $args, $comments ) {
 
 	foreach ( $comments as $i => $comment ) {
 		if ( $fold_at && $i == $fold_at ) {
-			$return .= sprintf( '<li id="%2$s" class="single-mention mention-ellipsis">
-				<h3> &nbsp;
-				<a href="" onclick="document.getElementById(\'%1$s\').style.display = \'inline\';
-					document.getElementById(\'%2$s\').style.display = \'none\';
-					return false;">...</a>
-				</h3>
-				</li>
-				<span id="%1$s" style="display: none">',
-				$fold_id, $ellipsis_id );
+			$classes .= ' additional-facepile';
 		}
 
 		// If it's an emoji reaction, overlay the emoji.
@@ -179,7 +171,7 @@ function list_linkbacks( $args, $comments ) {
 	}
 
 	if ( $fold_at && count( $comments ) > $fold_at ) {
-		$return .= '</span>';
+		$return .= '<li class="toggle-additional-facepiles">&hellip;</li>';
 	}
 
 	$return .= sprintf( '</%1$s>', $r['style'] );

js/semantic-linkbacks.js

@@ -0,0 +1,7 @@
+jQuery( document ).ready( function() {
+  jQuery( '.additional-facepile' ).hide();
+
+  jQuery( '.toggle-additional-facepiles' ).click( function() {
+    jQuery( this ).parent( 'ul' ).find( '.additional-facepile' ).toggle();
+  } );
+} );

semantic-linkbacks.php

@@ -42,7 +42,7 @@ public static function init() {
 		require_once( dirname( __FILE__ ) . '/includes/class-linkbacks-mf2-handler.php' );
 		add_action( 'init', array( 'Linkbacks_MF2_Handler', 'init' ) );
 
-		add_action( 'wp_enqueue_scripts', array( 'Semantic_Linkbacks_Plugin', 'style_load' ) );
+		add_action( 'wp_enqueue_scripts', array( 'Semantic_Linkbacks_Plugin', 'enqueue_scripts' ) );
 
 		remove_filter( 'webmention_comment_data', array( 'Webmention_Receiver', 'default_title_filter' ), 21 );
 		remove_filter( 'webmention_comment_data', array( 'Webmention_Receiver', 'default_content_filter' ), 22 );
@@ -125,8 +125,14 @@ public static function discussion_settings() {
 		load_template( plugin_dir_path( __FILE__ ) . 'templates/discussion-settings.php' );
 	}
 
-
-	public static function style_load() {
+	/**
+	 * Add CSS and JavaScript
+	 */
+	public static function enqueue_scripts() {
 		wp_enqueue_style( 'semantic-linkbacks-css', plugin_dir_url( __FILE__ ) . 'css/semantic-linkbacks.css', array(), self::$version );
+
+		if ( is_singular() && 0 != get_option( 'semantic_linkbacks_facepiles_fold_limit', 8 ) ) {
+			wp_enqueue_script( 'semantic-linkbacks', plugin_dir_url( __FILE__ ) . 'js/semantic-linkbacks.js', array( 'jquery' ), self::$version, true );
+		}
 	}
 }