Add order and orderby interface to lists

This commit is contained in:
Tetrakern 2023-06-07 22:27:26 +02:00
parent 509a627064
commit b7aa7ba2a3
12 changed files with 237 additions and 87 deletions

View File

@ -414,6 +414,7 @@ List page template hook. Fires right after the content section in the `chapters.
* $queried_type (string) `fcn_chapter`
**Hooked actions:**
* `fictioneer_sort_order_filter_interface( $args )` Interface to sort, order, and filter. Priority 20.
* `fictioneer_chapters_list( $args )` Paginated card list of all visible chapters. Priority 30.
---
@ -483,6 +484,7 @@ List page template hook. Fires right after the content section in the `collectio
* $queried_type (string) `fcn_collection`
**Hooked actions:**
* `fictioneer_sort_order_filter_interface( $args )` Interface to sort, order, and filter. Priority 20.
* `fictioneer_collections_list( $args )` Paginated card list of all visible collections. Priority 30.
---
@ -673,6 +675,7 @@ List page template hook. Fires right after the content section in the `recommend
* $queried_type (string) `fcn_recommendation`
**Hooked actions:**
* `fictioneer_sort_order_filter_interface( $args )` Interface to sort, order, and filter. Priority 20.
* `fictioneer_recommendations_list( $args )` Paginated card list of all visible recommendations. Priority 30.
---
@ -759,6 +762,7 @@ List page template hook. Fires right after the content section in the `stories.p
**Hooked actions:**
* `fictioneer_stories_statistics( $args )` Compiled statistics of all stories. Priority 10.
* `fictioneer_sort_order_filter_interface( $args )` Interface to sort, order, and filter. Priority 20.
* `fictioneer_stories_list( $args )` Paginated card list of all visible stories. Priority 30.
---

View File

@ -410,6 +410,24 @@ Filters the intermediate output array of the `fictioneer_mobile_user_menu()` fun
---
### `apply_filters( 'fictioneer_filter_orderby_popup_menu', $menu, $args )`
Filters the array of URLs and labels of the orderby popup menu in the `fictioneer_sort_order_filter_interface( $args )` function before it is rendered.
**$menu:**
* $modified (array) Tuple of $label (Updated) and unescaped $url (`...?orderby=modified&order={$order}#sof`).
* $date (array) Tuple of $label (Published) and unescaped $url (`...?orderby=date&order={$order}#sof`).
* $title (array) Tuple of $label (Title) and unescaped $url (`...?orderby=title&order={$order}#sof`).
**$args:**
* $current_page (int) Current page if paginated or `1`.
* $post_id (int) Current post ID.
* $queried_type (string) Queried post type.
* $query_args (array) Query arguments used.
* $order (string) Current order or `'desc'`.
* $orderby (string) Current orderby or `'modified'`.
---
### `apply_filters( 'fictioneer_filter_post_meta_items', $output, $args )`
Filters the intermediate output array of the `fictioneer_get_post_meta_items()` function before it is imploded and returned.
@ -751,8 +769,8 @@ Filters the arguments to query the stories in the `stories.php` template.
* $post_type (string) `'fcn_story'`
* $post_status (string) `'publish'`
* $meta_key (string) `'fictioneer_story_sticky'`
* $orderby (string) `'meta_value modified'`
* $order (string) `'DESC'`
* $orderby (string) Current orderby or `'meta_value modified'`.
* $order (string) Current order or `desc`.
* $paged (int) Current page if paginated or `1`.
* $posts_per_page (int) `get_option( 'posts_per_page' )`

View File

@ -16,26 +16,32 @@
?>
<?php
// Get current page (of main query, but can be used since open-ended)
$page = get_query_var( 'paged', 1 );
// Prepare query
$query_args = array (
'post_type' => 'fcn_chapter',
'post_status' => 'publish',
'orderby' => 'modified',
'order' => 'DESC',
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page', 8 ),
'meta_key' => 'fictioneer_chapter_hidden',
'meta_value' => '0'
);
// Setup
$page = get_query_var( 'paged', 1 ); // Main query
$order = array_intersect( [strtolower( $_GET['order'] ?? 0 )], ['desc', 'asc'] );
$order = reset( $order ) ?: 'desc';
$orderby = array_intersect( [strtolower( $_GET['orderby'] ?? 0 )], ['modified', 'date', 'title', 'rand'] );
$orderby = reset( $orderby ) ?: 'modified';
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_chapters_query_args', $query_args, get_the_ID() );
// Prepare query
$query_args = array (
'post_type' => 'fcn_chapter',
'post_status' => 'publish',
'orderby' => $orderby,
'order' => $order,
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page', 8 ),
'meta_key' => 'fictioneer_chapter_hidden',
'meta_value' => '0'
);
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_chapters_query_args', $query_args, get_the_ID() );
// Query chapters
$list_of_chapters = new WP_Query( $query_args );
// Query chapters
$list_of_chapters = new WP_Query( $query_args );
?>
<?php get_header(); ?>
@ -60,7 +66,10 @@
'current_page' => $page,
'post_id' => get_the_ID(),
'chapters' => $list_of_chapters,
'queried_type' => 'fcn_chapter'
'queried_type' => 'fcn_chapter',
'query_args' => $query_args,
'order' => $order,
'orderby' => $orderby
);
?>

View File

@ -16,24 +16,30 @@
?>
<?php
// Get current page
$page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
// Prepare query
$query_args = array (
'post_type' => 'fcn_collection',
'post_status' => 'publish',
'orderby' => 'modified',
'order' => 'DESC',
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page' ) ?? 8
);
// Setup
$page = get_query_var( 'paged', 1 ); // Main query
$order = array_intersect( [strtolower( $_GET['order'] ?? 0 )], ['desc', 'asc'] );
$order = reset( $order ) ?: 'desc';
$orderby = array_intersect( [strtolower( $_GET['orderby'] ?? 0 )], ['modified', 'date', 'title', 'rand'] );
$orderby = reset( $orderby ) ?: 'modified';
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_collections_query_args', $query_args, get_the_ID() );
// Prepare query
$query_args = array (
'post_type' => 'fcn_collection',
'post_status' => 'publish',
'orderby' => $orderby,
'order' => $order,
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page' ) ?? 8
);
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_collections_query_args', $query_args, get_the_ID() );
// Query collections
$list_of_collections = new WP_Query( $query_args );
// Query collections
$list_of_collections = new WP_Query( $query_args );
?>
<?php get_header(); ?>
@ -58,7 +64,10 @@
'current_page' => $page,
'post_id' => get_the_ID(),
'collections' => $list_of_collections,
'queried_type' => 'fcn_collection'
'queried_type' => 'fcn_collection',
'query_args' => $query_args,
'order' => $order,
'orderby' => $orderby
);
?>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1323,7 +1323,7 @@ if ( ! function_exists( 'fictioneer_get_card_controls' ) ) {
<?php if ( count( $menu ) > 0 ) : ?>
<div class="card__popup-menu-toggle" tabindex="0"><i class="fa-solid fa-ellipsis-vertical"></i></div>
<div class="popup-menu"><?php foreach ( $menu as $item ) echo $item; ?></div>
<div class="popup-menu _bottom"><?php foreach ( $menu as $item ) echo $item; ?></div>
<?php endif; ?>
</div>

View File

@ -189,4 +189,77 @@ if ( ! function_exists( 'fictioneer_header_background' ) ) {
}
add_action( 'fictioneer_header', 'fictioneer_header_background', 10 );
// =============================================================================
// SORT, ORDER & FILTER QUERIES
// =============================================================================
/**
* Renders interface to sort, order, and filter queries
*
* @since Fictioneer 5.4.0
*
* @param array $args {
* Array of arguments.
*
* @type int $current_page Current page if paginated or `1`.
* @type int $post_id Current post ID.
* @type string $queried_type Queried post type.
* @type array $query_args Query arguments used.
* @type string $order Current order or `desc`.
* @type string $orderby Current orderby or `'modified'`.
* }
*/
function fictioneer_sort_order_filter_interface( $args ) {
// Setup
$current_url = add_query_arg( array( 'order' => $args['order'] ), get_permalink() );
$orderby_menu = array(
'modified' => array(
'label' => __( 'Updated', 'fictioneer' ),
'url' => add_query_arg( array( 'orderby' => 'modified' ), $current_url ) . '#sof'
),
'date' => array(
'label' => __( 'Published', 'fictioneer' ),
'url' => add_query_arg( array( 'orderby' => 'date' ), $current_url ) . '#sof'
),
'title' => array(
'label' => __( 'Title', 'fictioneer' ),
'url' => add_query_arg( array( 'orderby' => 'title' ), $current_url ) . '#sof'
)
);
$order_link = esc_url(
add_query_arg(
array( 'order' => $args['order'] === 'desc' ? 'asc' : 'desc', 'orderby' => $args['orderby'] ),
$current_url
) . '#sof'
);
// Apply filters
$orderby_menu = apply_filters( 'fictioneer_filter_orderby_popup_menu', $orderby_menu, $args );
// Start HTML ---> ?>
<div id="sof" class="sort-order-filter">
<div class="list-button _text popup-menu-toggle toggle-last-clicked" tabindex="0" role="button"><?php
echo $orderby_menu[ $args['orderby'] ]['label'] ?? __( 'Custom', 'fictioneer' );
echo '<div class="popup-menu _bottom _center">';
foreach( $orderby_menu as $tuple ) {
$url = esc_url( $tuple['url'] );
echo "<a href='{$url}'>{$tuple['label']}</a>";
}
echo '</div>';
?></div>
<a class="list-button _order <?php echo $args['order'] === 'desc' ? '_on' : '_off'; ?>" href="<?php echo $order_link; ?>">
<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
}
add_action( 'fictioneer_stories_after_content', 'fictioneer_sort_order_filter_interface', 20 );
add_action( 'fictioneer_chapters_after_content', 'fictioneer_sort_order_filter_interface', 20 );
add_action( 'fictioneer_collections_after_content', 'fictioneer_sort_order_filter_interface', 20 );
add_action( 'fictioneer_recommendations_after_content', 'fictioneer_sort_order_filter_interface', 20 );
?>

View File

@ -16,24 +16,30 @@
?>
<?php
// Get current page (of main query, but can be used since open-ended)
$page = get_query_var( 'paged', 1 );
// Prepare query
$query_args = array (
'post_type' => 'fcn_recommendation',
'post_status' => 'publish',
'orderby' => 'publish_date',
'order' => 'DESC',
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page', 8 )
);
// Setup
$page = get_query_var( 'paged', 1 ); // Main query
$order = array_intersect( [strtolower( $_GET['order'] ?? 0 )], ['desc', 'asc'] );
$order = reset( $order ) ?: 'desc';
$orderby = array_intersect( [strtolower( $_GET['orderby'] ?? 0 )], ['modified', 'date', 'title', 'rand'] );
$orderby = reset( $orderby ) ?: 'modified';
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_recommendations_query_args', $query_args, get_the_ID() );
// Prepare query
$query_args = array (
'post_type' => 'fcn_recommendation',
'post_status' => 'publish',
'orderby' => $orderby,
'order' => $order,
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page', 8 )
);
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_recommendations_query_args', $query_args, get_the_ID() );
// Query recommendations
$list_of_recommendations = new WP_Query( $query_args );
// Query recommendations
$list_of_recommendations = new WP_Query( $query_args );
?>
<?php get_header(); ?>
@ -58,7 +64,10 @@
'current_page' => $page,
'post_id' => get_the_ID(),
'recommendations' => $list_of_recommendations,
'queried_type' => 'fcn_recommendation'
'queried_type' => 'fcn_recommendation',
'query_args' => $query_args,
'order' => $order,
'orderby' => $orderby
);
?>

View File

@ -158,9 +158,7 @@
}
.popup-menu {
bottom: -4px;
right: .75rem;
transform: translateY(100%);
}
}

View File

@ -403,12 +403,12 @@ button[type=submit]:where(:not(._inline)) {
contain: content; // Improve performance
&._top {
top: -8px;
top: var(--vertical-offset, -8px);
--translateY: translateY(-100%);
}
&._bottom {
bottom: -8px;
bottom: var(--vertical-offset, -8px);
--translateY: translateY(100%);
}
@ -688,6 +688,7 @@ html:not(.logged-in) body:not(.logged-in) {
}
.list-button {
cursor: pointer;
color: var(--fg-900);
font-size: var(--fs-s);
padding: 5px 6px 4px;
@ -708,4 +709,24 @@ html:not(.logged-in) body:not(.logged-in) {
display: none;
}
}
&._text {
font-size: var(--fs-dxs);
font-weight: 600;
line-height: 1.2;
letter-spacing: .02em;
padding: 4px 0;
.popup-menu {
--vertical-offset: -4px;
}
}
}
.sort-order-filter {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin: 2rem 0 -0.5rem;
}

View File

@ -16,36 +16,42 @@
?>
<?php
// Get current page (of main query, but can be used since open-ended)
$page = get_query_var( 'paged', 1 );
// Prepare query
$query_args = array (
'post_type' => 'fcn_story',
'post_status' => 'publish',
'meta_key' => 'fictioneer_story_sticky',
'orderby' => 'meta_value modified',
'order' => 'DESC',
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page', 8 ),
'meta_query' => array(
'relation' => 'OR',
array(
'key' => 'fictioneer_story_hidden',
'value' => '0'
),
array(
'key' => 'fictioneer_story_hidden',
'compare' => 'NOT EXISTS'
),
)
);
// Setup
$page = get_query_var( 'paged', 1 ); // Main query
$order = array_intersect( [strtolower( $_GET['order'] ?? 0 )], ['desc', 'asc'] );
$order = reset( $order ) ?: 'desc';
$orderby = array_intersect( [strtolower( $_GET['orderby'] ?? 0 )], ['modified', 'date', 'title', 'rand'] );
$orderby = reset( $orderby ) ?: 'modified';
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_stories_query_args', $query_args, get_the_ID() );
// Prepare query
$query_args = array (
'post_type' => 'fcn_story',
'post_status' => 'publish',
'meta_key' => 'fictioneer_story_sticky',
'orderby' => "meta_value {$orderby}",
'order' => $order,
'paged' => $page,
'posts_per_page' => get_option( 'posts_per_page', 8 ),
'meta_query' => array(
'relation' => 'OR',
array(
'key' => 'fictioneer_story_hidden',
'value' => '0'
),
array(
'key' => 'fictioneer_story_hidden',
'compare' => 'NOT EXISTS'
),
)
);
// Filter query arguments
$query_args = apply_filters( 'fictioneer_filter_stories_query_args', $query_args, get_the_ID() );
// Query stories
$list_of_stories = new WP_Query( $query_args );
// Query stories
$list_of_stories = new WP_Query( $query_args );
?>
<?php get_header(); ?>
@ -70,7 +76,10 @@
'current_page' => $page,
'post_id' => get_the_ID(),
'stories' => $list_of_stories,
'queried_type' => 'fcn_story'
'queried_type' => 'fcn_story',
'query_args' => $query_args,
'order' => $order,
'orderby' => $orderby
);
?>