Hide comment form inputs until clicked

This commit is contained in:
Tetrakern 2023-02-16 22:31:31 +01:00
parent ba1c2fd3d2
commit 6777a24762
6 changed files with 26 additions and 5 deletions

View File

@ -729,3 +729,4 @@ define( 'CONSTANT_NAME', value );
| FICTIONEER_SHOW_OAUTH_HASHES | boolean | Whether to show OAuth ID hashes in user profiles (admin only). Default `false`.
| FICTIONEER_DISALLOWED_KEY_NOTICE | boolean | Whether to show feedback for rejected comment content. Default `true`.
| FICTIONEER_FILTER_STORY_CHAPTERS | boolean | Whether to filter selectable chapters by assigned story. Default `true`.
| FICTIONEER_COLLAPSE_COMMENT_FORM | boolean | Whether hide comment form inputs until the textarea is clicked. Default `true`.

View File

@ -134,6 +134,11 @@ if ( ! defined( 'FICTIONEER_FILTER_STORY_CHAPTERS' ) ) {
define( 'FICTIONEER_FILTER_STORY_CHAPTERS', true );
}
// Boolean: Only show the full comment form after clicking into it
if ( ! defined( 'FICTIONEER_COLLAPSE_COMMENT_FORM' ) ) {
define( 'FICTIONEER_COLLAPSE_COMMENT_FORM', true );
}
// =============================================================================
// GLOBAL
// =============================================================================

View File

@ -64,6 +64,7 @@ if ( ! function_exists( 'fictioneer_change_comment_fields' ) ) {
$name_placeholder = $required ? __( 'Name *', 'fictioneer' ) : __( 'Name', 'fictioneer' );
$email_placeholder = $required ? __( 'Email (Gravatar) *', 'fictioneer' ) : __( 'Email (optional, Gravatar)', 'fictioneer' );
$privacy_policy_link = get_option( 'wp_page_for_privacy_policy' ) ? esc_url( get_privacy_policy_url() ) : false;
$hidden = FICTIONEER_COLLAPSE_COMMENT_FORM ? 'hidden' : '';
// Rebuild author field
$fields['author'] = '<div class="comment-form-author"><input type="text" id="author" name="author" data-lpignore="true" value="' . esc_attr( $commenter['comment_author'] ) . '"' . $required_attribute . ' maxlength="245" placeholder="' . $name_placeholder . '"></div>';
@ -101,7 +102,7 @@ if ( ! function_exists( 'fictioneer_change_comment_fields' ) ) {
* around the author and email fields.
*/
$fields['author'] = '<div class="fictioneer-respond__form-bottom"><div class="fictioneer-respond__form-identity">' . $fields['author'];
$fields['author'] = '<div class="fictioneer-respond__form-bottom ' . $hidden . '"><div class="fictioneer-respond__form-identity">' . $fields['author'];
$fields['email'] = $fields['email'] . '</div>';
return $fields;
@ -142,6 +143,7 @@ if ( ! function_exists( 'fictioneer_change_submit_field' ) ) {
// Setup
$close_bottom_container = is_user_logged_in() ? '' : '</div>';
$is_ajax = get_option( 'fictioneer_enable_ajax_comment_form' ) || get_option( 'fictioneer_enable_ajax_comments' );
$hidden = FICTIONEER_COLLAPSE_COMMENT_FORM ? 'hidden' : '';
/**
* Build the submit button with the comment_form arguments. Markup:
@ -195,7 +197,7 @@ if ( ! function_exists( 'fictioneer_change_submit_field' ) ) {
*/
return sprintf(
$close_bottom_container . '<div class="form-submit fictioneer-respond__form-actions"><div>' . $private_toggle . $notification_toggle . '%1$s %2$s</div>%3$s</div><div class="fictioneer-respond__notices">' . $private_notice . '</div>',
$close_bottom_container . '<div class="form-submit fictioneer-respond__form-actions ' . $hidden . '"><div>' . $private_toggle . $notification_toggle . '%1$s %2$s</div>%3$s</div><div class="fictioneer-respond__notices">' . $private_notice . '</div>',
$submit_button,
get_comment_id_fields( get_the_ID() ),
preg_replace( '/<a/', '<a class="button _secondary"', get_cancel_comment_reply_link( 'Cancel' ) )
@ -233,6 +235,7 @@ function fictioneer_comment_form_args( $defaults = [], $post_id = null ) {
$oauth_links = fictioneer_get_oauth_links( false, '', 'comments', $post_id );
$profile_link = get_edit_profile_url();
$profile_page = intval( get_option( 'fictioneer_user_profile_page', -1 ) );
$onclick = FICTIONEER_COLLAPSE_COMMENT_FORM ? 'onclick="fcn_revealCommentFormInputs(this)"' : '';
if ( $profile_page && $profile_page > 0 ) {
$profile_link = get_permalink( $profile_page );
@ -252,7 +255,7 @@ function fictioneer_comment_form_args( $defaults = [], $post_id = null ) {
fictioneer_get_logout_url( get_permalink( $post_id ) )
)
);
$comment_field = '<div class="comment-form-comment fictioneer-respond__form-comment"><textarea id="comment" class="adaptive-textarea" name="comment" maxlength="65525" required></textarea>'. $toolbar . '</div>';
$comment_field = '<div class="comment-form-comment fictioneer-respond__form-comment"><textarea id="comment" class="adaptive-textarea" name="comment" maxlength="65525" ' . $onclick . ' required></textarea>'. $toolbar . '</div>';
// Prepare arguments
$args = array(

View File

@ -163,7 +163,6 @@ if ( ! function_exists( 'fictioneer_comments_ajax_form_skeleton' ) ) {
<div id="ajax-comment-form-target" class="comments-skeleton">
<div class="comments-skeleton__login"><div class="shape"></div></div>
<div class="shape comments-skeleton__response"></div>
<div class="comments-skeleton__actions"><div class="shape"></div></div>
</div>
<?php // <--- End HTML
}

2
js/comments.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -259,6 +259,19 @@ function fcn_flagComment(source) {
// THEME COMMENTS RESPONSE
// =============================================================================
/**
* Reveal comment form inputs.
*
* @since 5.0.21
*/
function fcn_revealCommentFormInputs(area) {
area.closest('form').querySelectorAll('.fictioneer-respond__form-actions, .fictioneer-respond__form-bottom').forEach(element => {
element.classList.remove('hidden');
});
area.removeAttribute('onclick');
}
/**
* Adjust textarea height to fit the value without vertical scroll bar.
*