JavaScript Integration Example: Displaying a Warning With a Low Timer

Add some text when the timer is low.

In this example integration, we'll add some text to the timer when the timer is low. This will involve some PHP, a bit of JavaScript, and will show you how to use some of the hooks that are built into Comment Edit Core.

First, we'll use a Comment Edit Core hook called sce_scripts_loaded.

cec-add-timer-low-text.php

<?php
/**
 * Plugin Name:       Comment Edit Core - Add Timer Low Text
 * Plugin URI:        https://github.com/DLXPlugins/cep-add-timer-low-text/
 * Description:       Add a timer low text to the comment edit core timer section.
 * Version:           1.0.0
 * Requires at least: 5.9
 * Requires PHP:      7.2
 * Author:            DLX Plugins
 * Author URI:        https://dlxplugins.com
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       cep-add-timer-low-text
 *
 * @package CEPAddTimerLowText
 */

namespace DLXPlugins\CEPAddTimerLowText;

// Hook into Comment Edit Core and output our scripts.
add_action( 'sce_scripts_loaded', __NAMESPACE__ . '\enqueue_scripts' );

/**
 * Enqueue our scripts.
 */
function enqueue_scripts() {
	wp_enqueue_script(
		'cec-add-timer-low-text',
		plugins_url( 'cec-add-timer-low-text.js', __FILE__ ),
		array( 'wp-hooks', 'simple-comment-editing' ), /* Need `wp-hooks` to use `addFilter` */
		'1.0.0',
		true
	);
}

You'll note that dependency scripts wp-hooks and simple-comment-editing are set as dependencies for the script file we'll be loading in next.

In the JavaScript, we'll use the wp-hooks package to hook into the filter sce.comment.timer.text.

cec-add-timer-low-text.js

/**
 * Set up the timer low text by hooking into the event system.
 */

// Import the addFilter function.
const { addFilter } = wp.hooks;

// Set the low timer text.
const sceLowTimerText = 'Low Timer';

/**
 * Hook into document.load.
 */
document.addEventListener( 'DOMContentLoaded', () => {

	/**
	 * JSFilter: sce.comment.timer.text
	 *
	 * Filter triggered before a timer is returned
	 *
	 * @since 1.4.0
	 *
	 * @param  string comment text
	 * @param  string minute text,
	 * @param  string second text,
	 * @param  int    number of minutes left
	 * @param  int    seconds left
	 */
	addFilter( 'sce.comment.timer.text', 'sce-add-timer-low-text', ( text, minuteText, secondText, numMinutesLeft, numSecondsLeft ) => {

		if ( numMinutesLeft === 0 && numSecondsLeft <= 30 ) {
			text += ' (' + sceLowTimerText + ')';
		}
		return text;
	}, 11 );
} );

The JavaScript function addFilter hooks into Comment Edit Core's filter for modifying the timer text.

Now, when the timer is less than thirty seconds, a warning will show the user that the timer is low.

The full code for this example is on GitHub.