malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add comment order toggle button

Browse Source
This commit is contained in:
Tetrakern 2024-04-24 17:17:50 +02:00
parent b3e79e80fe
commit bba6bc0042
8 changed files with 136 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
comments.php
View File

@ -17,93 +17,102 @@ if ( post_password_required() ) {
return;
}
global $wp;
// Setup
$post_id = get_the_ID();
$user = wp_get_current_user();
$comments_count = get_comments_number();
$order = fictioneer_sanitize_query_var( $_GET['corder'] ?? 0, ['desc', 'asc'], get_option( 'comment_order' ) );
$logout_url = fictioneer_get_logout_url( get_permalink() );
$order_link = add_query_arg( 'corder', $order === 'desc' ? 'asc' : 'desc', home_url( $wp->request ) ) . '#comments';
$is_ajax_comments = get_option( 'fictioneer_enable_ajax_comments' );
?>
<div id="comments" class="fictioneer-comments scroll-margin-top" data-post-id="<?php echo $post_id; ?>" data-order="<?php echo $order; ?>" data-logout-url="<?php echo esc_url( $logout_url ); ?>" <?php echo $is_ajax_comments ? 'data-ajax-comments' : ''; ?>>
<div id="comments" class="fictioneer-comments scroll-margin-top" data-post-id="<?php echo $post_id; ?>" data-order="<?php echo $order; ?>" data-logout-url="<?php echo esc_url( $logout_url ); ?>" <?php echo $is_ajax_comments ? 'data-ajax-comments' : ''; ?>><?php
if ( get_option( 'fictioneer_enable_ajax_comments' ) ) {
fictioneer_comments_ajax_skeleton( $comments_count ); // AJAX loading skeleton
} else {
// Query arguments
$query_args = array(
'post_id' => $post_id,
'order' => $order
);
<?php
if ( get_option( 'fictioneer_enable_ajax_comments' ) ) {
fictioneer_comments_ajax_skeleton( $comments_count ); // AJAX loading skeleton
if ( ! get_option( 'fictioneer_disable_comment_query' ) ) {
$query_args['type'] = ['comment', 'private'];
} else {
// Query arguments
$query_args = array(
'post_id' => $post_id,
'order' => $order
);
if ( ! get_option( 'fictioneer_disable_comment_query' ) ) {
$query_args['type'] = ['comment', 'private'];
} else {
$query_args['type'] = ['comment'];
}
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_comments_query', $query_args, $post_id );
// Query comments
$comments_query = new WP_Comment_Query( $query_args );
$comments = $comments_query->comments;
// Filter comments
$comments = apply_filters( 'fictioneer_filter_comments', $comments, $post_id );
// Comments header
fictioneer_comment_header( $comments_count );
// Comment form
if ( ! fictioneer_is_commenting_disabled( $post_id ) ) {
if ( get_option( 'fictioneer_enable_ajax_comment_form' ) ) {
fictioneer_comments_ajax_form_skeleton();
} else {
comment_form();
}
} else {
echo '<div class="fictioneer-comments__disabled">' . __( 'Commenting is disabled.', 'fictioneer' ) . '</div>';
}
// Count all comments regardless of status
$count = count( $comments );
// Comment list
if (
have_comments() ||
( $count > 0 && user_can( $user, 'moderate_comments' ) ) ||
( $count > 0 && ! empty( $_GET['commentcode'] ?? 0 ) )
) {
// Start HTML ---> ?>
<ol class="fictioneer-comments__list commentlist">
<?php wp_list_comments( [], $comments ); ?>
</ol>
<?php // <--- End HTML
// Pagination
$pag_args = [];
if ( ! get_option( 'fictioneer_disable_comment_pagination' ) ) {
$pag_args['prev_text'] = fcntr( 'previous' );
$pag_args['next_text'] = fcntr( 'next' );
}
the_comments_pagination( $pag_args );
}
$query_args['type'] = ['comment'];
}
// Edit template
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_comments_query', $query_args, $post_id );
// Query comments
$comments_query = new WP_Comment_Query( $query_args );
$comments = $comments_query->comments;
// Filter comments
$comments = apply_filters( 'fictioneer_filter_comments', $comments, $post_id );
// Comments header
fictioneer_comment_header( $comments_count );
// Comment form
if ( ! fictioneer_is_commenting_disabled( $post_id ) ) {
if ( get_option( 'fictioneer_enable_ajax_comment_form' ) ) {
fictioneer_comments_ajax_form_skeleton();
} else {
comment_form();
}
} else {
echo '<div class="fictioneer-comments__disabled">' . __( 'Commenting is disabled.', 'fictioneer' ) . '</div>';
}
if ( $comments_count > 1 ) {
// Start HTML ---> ?>
<div id="sof" class="sort-order-filter _comments">
<a class="list-button _order <?php echo $order === 'desc' ? '_on' : '_off'; ?>" href="<?php echo $order_link; ?>" rel='nofollow' aria-label="<?php esc_attr_e( 'Toggle comments between ascending and descending order', 'fictioneer' ); ?>">
<i class="fa-solid fa-arrow-up-short-wide _off"></i><i class="fa-solid fa-arrow-down-wide-short _on"></i>
</a>
</div>
<?php // <--- End HTML
}
// Count all comments regardless of status
$count = count( $comments );
// Comment list
if (
get_option( 'fictioneer_enable_user_comment_editing' ) &&
! fictioneer_is_commenting_disabled()
have_comments() ||
( $count > 0 && user_can( $user, 'moderate_comments' ) ) ||
( $count > 0 && ! empty( $_GET['commentcode'] ?? 0 ) )
) {
get_template_part( 'partials/_template_comment_edit' );
}
// Start HTML ---> ?>
<ol class="fictioneer-comments__list commentlist">
<?php wp_list_comments( [], $comments ); ?>
</ol>
<?php // <--- End HTML
?>
</div>
// Pagination
$pag_args = [];
if ( ! get_option( 'fictioneer_disable_comment_pagination' ) ) {
$pag_args['prev_text'] = fcntr( 'previous' );
$pag_args['next_text'] = fcntr( 'next' );
}
the_comments_pagination( $pag_args );
}
}
// Edit template
if (
get_option( 'fictioneer_enable_user_comment_editing' ) &&
! fictioneer_is_commenting_disabled()
) {
get_template_part( 'partials/_template_comment_edit' );
}
?></div>

2
css/comments.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

5
includes/functions/comments/_comments_threads.php
View File

@ -220,6 +220,11 @@ if ( ! function_exists( 'fictioneer_ajax_list_comments' ) ) {
$list_args = apply_filters( 'fictioneer_filter_comment_list_args', $list_args );
// Start HTML ---> ?>
<div id="sof" class="sort-order-filter _comments">
<button class="list-button _order <?php echo ( $args['order'] ?? 0 ) === 'desc' ? '_on' : '_off'; ?>" type="button" data-toggle-order aria-label="<?php esc_attr_e( 'Toggle comments between ascending and descending order', 'fictioneer' ); ?>">
<i class="fa-solid fa-arrow-up-short-wide _off"></i><i class="fa-solid fa-arrow-down-wide-short _on"></i>
</button>
</div>
<ol class="fictioneer-comments__list commentlist">
<?php wp_list_comments( $list_args, $comments ); ?>
</ol>

2
js/ajax-comments.min.js vendored
View File

@ -1 +1 @@
const fcn_commentSection=_$("#comments[data-ajax-comments]");function fcn_getCommentSection(e=null,n=null,t=null,o=!1){if(!fcn_commentSection)return;let c,m="",a=_$$$("comment");if(a&&(m=a.value),fcn_commentSection.classList.contains("ajax-in-progress"))return;if(fcn_commentSection.classList.add("ajax-in-progress"),n||(n=fcn_urlParams.pg??1),!fcn_commentSection)return;const r={action:"fictioneer_ajax_get_comment_section",post_id:e??fcn_commentSection.dataset.postId,page:parseInt(n),order:t??fcn_commentSection.dataset.order??0};fcn_urlParams.commentcode&&(r.commentcode=fcn_urlParams.commentcode),fcn_ajaxGet(r).then((e=>{if(e.success){n=e.data.page;const t=document.createElement("div");if(t.innerHTML=e.data.html,t.querySelector("#comment_post_ID")){t.querySelector("#comment_post_ID").value=e.data.postId,t.querySelector("#cancel-comment-reply-link").href="#respond";const n=t.querySelector(".logout-link");n&&(n.href=fcn_commentSection.dataset.logoutUrl)}fcn_commentSection.innerHTML=t.innerHTML,t.remove(),e.data.disabled||(a=_$$$("comment"),a.value=m,fcn_applyCommentStack(a)),fcn_addCommentMouseleaveEvents(),fcn_addCommentFormEvents(),fcn_bindAJAXCommentSubmit(),fcn_addJSTrap(),fcn_revealEditButton(),fcn_revealDeleteButton();const c=location.hash.includes("#comment")?location.hash:".respond",r=document.querySelector(c)??_$$$("respond");o&&r.scrollIntoView({behavior:"smooth"});const i=window.location.protocol+"//"+window.location.host+window.location.pathname;let s="";fcn_urlParams.commentcode&&(s+=`?commentcode=${fcn_urlParams.commentcode}`),n>1&&(s+=s.length>1?`&pg=${n}`:`?pg=${n}`),window.history.pushState({path:i},"",i+s+location.hash)}else c=fcn_buildErrorNotice(e.data.error)})).catch((e=>{c=fcn_buildErrorNotice(e)})).then((()=>{fcn_commentSection.classList.remove("ajax-in-progress"),c&&(fcn_commentSection.innerHTML="",fcn_commentSection.appendChild(c))}))}function fcn_reloadCommentsPage(e=null){fcn_getCommentSection(null,e,null,!0)}function fcn_jumpToCommentPage(){const e=parseInt(window.prompt(fictioneer_tl.notification.enterPageNumber));e>0&&fcn_reloadCommentsPage(e)}var fct_commentSectionObserver;function fcn_setupCommentSectionObserver(){fct_commentSectionObserver=new IntersectionObserver((([e])=>{e.isIntersecting&&(fcn_getCommentSection(),fct_commentSectionObserver.disconnect())}),{rootMargin:"450px",threshold:1}),fcn_commentSection&&fct_commentSectionObserver.observe(fcn_commentSection)}function fcn_loadCommentEarly(){fcn_commentSection&&location.hash.includes("#comment")&&(_$$$("comment")||(fct_commentSectionObserver.disconnect(),fcn_reloadCommentsPage()))}fcn_theRoot.dataset.ajaxAuth?document.addEventListener("fcnAuthReady",(()=>{fcn_setupCommentSectionObserver()})):fcn_setupCommentSectionObserver(),fcn_theRoot.dataset.ajaxAuth?document.addEventListener("fcnAuthReady",(()=>{fcn_loadCommentEarly()})):fcn_loadCommentEarly(),_$(".fictioneer-comments")?.addEventListener("click",(e=>{if(e.target.closest("[data-page-jump]"))return void fcn_jumpToCommentPage();const n=e.target.closest("[data-page]");n&&fcn_reloadCommentsPage(n.dataset.page)}));
const fcn_commentSection=_$("#comments[data-ajax-comments]");function fcn_getCommentSection(e=null,t=null,n=null,o=!1){if(!fcn_commentSection)return;let c,m="",a=_$$$("comment");if(a&&(m=a.value),fcn_commentSection.classList.contains("ajax-in-progress"))return;if(fcn_commentSection.classList.add("ajax-in-progress"),t||(t=fcn_urlParams.pg??1),n||(n=n??fcn_commentSection.dataset.order??"desc"),!fcn_commentSection)return;const r={action:"fictioneer_ajax_get_comment_section",post_id:e??fcn_commentSection.dataset.postId,page:parseInt(t),corder:n};fcn_urlParams.commentcode&&(r.commentcode=fcn_urlParams.commentcode),fcn_ajaxGet(r).then((e=>{if(e.success){t=e.data.page,fcn_commentSection.dataset.page=t;const c=document.createElement("div");if(c.innerHTML=e.data.html,c.querySelector("#comment_post_ID")){c.querySelector("#comment_post_ID").value=e.data.postId,c.querySelector("#cancel-comment-reply-link").href="#respond";const t=c.querySelector(".logout-link");t&&(t.href=fcn_commentSection.dataset.logoutUrl)}fcn_commentSection.innerHTML=c.innerHTML,c.remove(),e.data.disabled||(a=_$$$("comment"),a.value=m,fcn_applyCommentStack(a)),fcn_addCommentMouseleaveEvents(),fcn_addCommentFormEvents(),fcn_bindAJAXCommentSubmit(),fcn_addJSTrap(),fcn_revealEditButton(),fcn_revealDeleteButton();const r=location.hash.includes("#comment")?location.hash:".respond",s=document.querySelector(r)??_$$$("respond");o&&s.scrollIntoView({behavior:"smooth"});const i=window.location.protocol+"//"+window.location.host+window.location.pathname;let d="";fcn_urlParams.commentcode&&(d+=`?commentcode=${fcn_urlParams.commentcode}`),t>1&&(d+=d.length>1?`&pg=${t}`:`?pg=${t}`),"desc"!=n&&(d+=d.length>1?`&corder=${n}`:`?corder=${n}`),window.history.pushState({path:i},"",i+d+location.hash)}else c=fcn_buildErrorNotice(e.data.error)})).catch((e=>{c=fcn_buildErrorNotice(e)})).then((()=>{fcn_commentSection.classList.remove("ajax-in-progress"),c&&(fcn_commentSection.innerHTML="",fcn_commentSection.appendChild(c))}))}function fcn_reloadCommentsPage(e=null){fcn_getCommentSection(null,e,null,!0)}function fcn_jumpToCommentPage(){const e=parseInt(window.prompt(fictioneer_tl.notification.enterPageNumber));e>0&&fcn_reloadCommentsPage(e)}var fct_commentSectionObserver;function fcn_setupCommentSectionObserver(){fct_commentSectionObserver=new IntersectionObserver((([e])=>{e.isIntersecting&&(fcn_getCommentSection(),fct_commentSectionObserver.disconnect())}),{rootMargin:"450px",threshold:1}),fcn_commentSection&&fct_commentSectionObserver.observe(fcn_commentSection)}function fcn_loadCommentEarly(){fcn_commentSection&&location.hash.includes("#comment")&&(_$$$("comment")||(fct_commentSectionObserver.disconnect(),fcn_reloadCommentsPage()))}function fcn_toggleCommentOrder(e){const t=e.closest(".fictioneer-comments"),n="desc"==t.dataset.order;t.dataset.order=n?"asc":"desc",e.classList.toggle("_on",!n),e.classList.toggle("_off",n),fcn_reloadCommentsPage(t.dataset.page)}fcn_theRoot.dataset.ajaxAuth?document.addEventListener("fcnAuthReady",(()=>{fcn_setupCommentSectionObserver()})):fcn_setupCommentSectionObserver(),fcn_theRoot.dataset.ajaxAuth?document.addEventListener("fcnAuthReady",(()=>{fcn_loadCommentEarly()})):fcn_loadCommentEarly(),_$(".fictioneer-comments")?.addEventListener("click",(e=>{if(e.target.closest("button[data-page-jump]"))return void fcn_jumpToCommentPage();const t=e.target.closest("button[data-page]");if(t)return void fcn_reloadCommentsPage(t.dataset.page);const n=e.target.closest("button[data-toggle-order]");n&&fcn_toggleCommentOrder(n)}));

2
js/complete.min.js vendored
View File

File diff suppressed because one or more lines are too long

46
src/js/ajax-comments.js
View File

@ -53,6 +53,11 @@ function fcn_getCommentSection(post_id = null, page = null, order = null, scroll
page = fcn_urlParams.pg ?? 1;
}
// Get order
if (!order) {
order = order ?? fcn_commentSection.dataset.order ?? 'desc';
}
// Abort if Fictioneer comment section not found
if (!fcn_commentSection) {
return;
@ -63,7 +68,7 @@ function fcn_getCommentSection(post_id = null, page = null, order = null, scroll
'action': 'fictioneer_ajax_get_comment_section',
'post_id': post_id ?? fcn_commentSection.dataset.postId,
'page': parseInt(page),
'corder': order ?? fcn_commentSection.dataset.order ?? 0
'corder': order
};
if (fcn_urlParams.commentcode) {
@ -77,6 +82,7 @@ function fcn_getCommentSection(post_id = null, page = null, order = null, scroll
if (response.success) {
// Update page
page = response.data.page;
fcn_commentSection.dataset.page = page;
// Get HTML
const temp = document.createElement('div');
@ -139,6 +145,10 @@ function fcn_getCommentSection(post_id = null, page = null, order = null, scroll
urlPart += urlPart.length > 1 ? `&pg=${page}` : `?pg=${page}`;
}
if (order != 'desc') {
urlPart += urlPart.length > 1 ? `&corder=${order}` : `?corder=${order}`;
}
window.history.pushState({ path: refresh }, '', refresh + urlPart + location.hash);
} else {
errorNote = fcn_buildErrorNotice(response.data.error);
@ -253,22 +263,52 @@ function fcn_loadCommentEarly() {
}
}
// =============================================================================
// TOGGLE ORDER
// =============================================================================
/**
* Toggle order of comments and reload list.
*
* @since 5.14.0
* @param {HTMLButtonElement} button - The clicked toggle button.
*/
function fcn_toggleCommentOrder(button) {
const section = button.closest('.fictioneer-comments');
const isDesc = section.dataset.order == 'desc';
section.dataset.order = isDesc ? 'asc' : 'desc';
button.classList.toggle('_on', !isDesc);
button.classList.toggle('_off', isDesc);
fcn_reloadCommentsPage(section.dataset.page);
}
// =============================================================================
// COMMENTS EVENT DELEGATES
// =============================================================================
_$('.fictioneer-comments')?.addEventListener('click', event => {
// Handle page number jump
if (event.target.closest('[data-page-jump]')) {
if (event.target.closest('button[data-page-jump]')) {
fcn_jumpToCommentPage();
return;
}
// Handle page number
const pageButton = event.target.closest('[data-page]');
const pageButton = event.target.closest('button[data-page]');
if (pageButton) {
fcn_reloadCommentsPage(pageButton.dataset.page);
return;
}
// Handle order toggle
const orderButton = event.target.closest('button[data-toggle-order]');
if (orderButton) {
fcn_toggleCommentOrder(orderButton);
return;
}
});

6
src/scss/comments.scss
View File

@ -279,8 +279,6 @@
}
&__list {
margin-top: 40px;
.notice {
margin-top: 16px;
}
@ -770,11 +768,11 @@
}
&__response {
height: 144px;
height: 142px;
}
&__list {
margin-top: 40px;
margin-top: 82px;
> .shape {
padding: 12px;