From 6386363df15ffd7e501fdbb5aa1a68766589340a Mon Sep 17 00:00:00 2001 From: EarthlingDavey <15802017+EarthlingDavey@users.noreply.github.com> Date: Thu, 10 Oct 2024 18:27:03 +0100 Subject: [PATCH 1/6] Initial commit WIP. --- .../clarity/inc/content-filter/search.php | 165 ++++++++---- .../app/themes/clarity/inc/pagination.tpl.php | 21 ++ public/app/themes/clarity/page_news.php | 14 +- .../c-article-item/view-news-feed.tpl.php | 33 +++ .../src/components/c-content-filter/view.php | 61 +++-- .../src/components/c-pagination/style.styl | 5 + .../src/globals/js/blog-content_filter.js | 252 +++++++++++++----- 7 files changed, 404 insertions(+), 147 deletions(-) create mode 100644 public/app/themes/clarity/inc/pagination.tpl.php create mode 100644 public/app/themes/clarity/src/components/c-article-item/view-news-feed.tpl.php diff --git a/public/app/themes/clarity/inc/content-filter/search.php b/public/app/themes/clarity/inc/content-filter/search.php index fe92d8727..ddd279c62 100644 --- a/public/app/themes/clarity/inc/content-filter/search.php +++ b/public/app/themes/clarity/inc/content-filter/search.php @@ -14,8 +14,59 @@ use MOJ\Intranet\EventsHelper; use WP_Query; + +/** + * QueryProps + * + * This class is responsible for handling the query properties. + * + * @package Clarity + * + * @property string $agency - The active agency. + * @property string $post_type - The post type. + * @property string $page - The page number. + * @property string $posts_per_page - The number of posts per page. + * @property string $keywords_filter - The keywords filter. + * @property string $date_filter - The date filter. + * + * @return void + */ + +class QueryProps +{ + public $agency_term_id; + public $post_type; + public $page; + public $posts_per_page; + public $keywords_filter; + public $date_filter; + public $news_category_id; + public $region_id; + + public function __construct( + $agency_term_id, + $post_type, + $page, + $posts_per_page = 10, + $keywords_filter = null, + $date_filter = null, + $news_category_id = null, + $region_id = null + ) { + $this->agency_term_id = $agency_term_id; + $this->post_type = $post_type; + $this->page = $page; + $this->posts_per_page = $posts_per_page; + $this->date_filter = $date_filter; + $this->keywords_filter = $keywords_filter; + $this->news_category_id = $news_category_id; + $this->region_id = $region_id; + } +} + class FilterSearch { + /** * FilterSearch constructor. * @@ -113,6 +164,20 @@ public function loadEventSearchResults() die(); } + public function mapResults(\WP_Post $post) + { + return [ + 'ID' => $post->ID, + 'post_title' => $post->post_title, + 'post_date_formatted' => get_gmt_from_date($post->post_date, 'j M Y'), + 'post_excerpt_formatted' => empty($post->post_excerpt) ? '' : "

{$post->post_excerpt}

", + 'permalink' => get_permalink($post->ID), + 'post_type' => get_post_type($post->ID), // ? Is not used in the template. + 'post_thumbnail' => get_the_post_thumbnail_url($post->ID, 'user-thumb'), + 'post_thumbnail_alt' => get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true), + ]; + } + /** * Load results for post types except for events. * @@ -121,7 +186,7 @@ public function loadEventSearchResults() public function loadSearchResults() { - if (!wp_verify_nonce($_POST['nonce_hash'], 'search_filter_nonce')) { + if (!wp_verify_nonce($_POST['_nonce'], 'search_filter_nonce')) { exit('Access not allowed.'); } @@ -131,32 +196,41 @@ public function loadSearchResults() // Apply the weighting fields configuration to the query. add_filter('ep_enable_do_weighting', '__return_true'); - // Run a query based on generated query arguments. - $query = new WP_Query($this->getQueryArgs()); - - // Use output buffering to capture the HTML output. - // This is necessary to get the html without refactoring the component's code. - ob_start(); - echo '
'; - foreach ($query->posts as $post) { - // $post is used in the included file. - include locate_template('src/components/c-article-item/view-news-feed.php'); + $page = (int) $_POST['page'] ?? 1; + if($page < 1 || $page > 1000) { + $page = 1; + } + + $posts_per_page = (int) ($_POST['posts_per_page'] ?? 10); + if($posts_per_page < 1 || $posts_per_page > 100) { + $posts_per_page = 10; } - $result_html = ob_get_clean(); - // Get the pagination HTML. - $pagination_html = $this->getPagination( - sanitize_text_field($_POST['valueSelected']), - sanitize_text_field($_POST['nextPageToRetrieve']), - $query->max_num_pages + $query_props = new QueryProps( + (new Agency())->getCurrentAgency()['wp_tag_id'], + sanitize_text_field($_POST['post_type']), + $page, + $posts_per_page, + sanitize_text_field($_POST['keywords_filter'] ?? null), + sanitize_text_field($_POST['date_filter'] ?? null), + sanitize_text_field($_POST['news_category_id'] ?? null), + sanitize_text_field($_POST['region_id'] ?? null) ); - // Return the results as JSON. + // Run a query based on generated query arguments. + $query = new WP_Query($this->getQueryArgs($query_props)); + + // include locate_template('src/components/c-article-item/view-news-feed.php'); + return wp_send_json([ - 'results' => $result_html, - 'total' => $query->found_posts . ' search results', - 'pagination' => $pagination_html + 'aggregates' => [ + 'totalResults' => $query->found_posts, + 'resultsPerPage' => $posts_per_page, + 'currentPage' => $page, + ], + 'results' => array_map([$this, 'mapResults'], $query->posts), ]); + } /** @@ -165,29 +239,14 @@ public function loadSearchResults() * @return array */ - function getQueryArgs() + function getQueryArgs(QueryProps $props) { - // Get the active agency. - $active_agency = (new Agency())->getCurrentAgency(); - // Pagination. - $post_per_page = 10; - $next_page_to_retrieve = sanitize_text_field($_POST['nextPageToRetrieve'] ?? ''); - $offset = $next_page_to_retrieve ? (($next_page_to_retrieve - 1) * $post_per_page) : 0; - - // Post type, with a cleanup of the value. - $post_type = sanitize_text_field($_POST['postType'] ?? ''); - $post_type = $post_type === 'posts' ? 'post' : $post_type; - - // Is the request for a news category? - $news_category_id = sanitize_text_field($_POST['newsCategoryValue'] ?? ''); - - // Check if the post type is regional. - $is_regional = $post_type === 'regional_news' ? true : false; + $offset = $props->page ? (($props->page - 1) * $props->posts_per_page) : 0; $args = [ - 'numberposts' => $post_per_page, - 'post_type' => $post_type, + 'numberposts' => $props->posts_per_page, + 'post_type' => $props->post_type, 'post_status' => 'publish', 'offset' => $offset, 'tax_query' => [ @@ -195,30 +254,27 @@ function getQueryArgs() [ 'taxonomy' => 'agency', 'field' => 'term_id', - 'terms' => $active_agency['wp_tag_id'] + 'terms' => $props->agency_term_id ], // If the region is set add its ID to the taxonomy query - ...($is_regional ? [ + ...(!empty($props->region_id) ? [ 'taxonomy' => 'region', 'field' => 'region_id', - 'terms' => $news_category_id, + 'terms' => $props->region_id, ] : []), // If the news category is set add its ID unless the query is regional, // as it will have already been added to the tax query. - ...(!empty($news_category_id) && !$is_regional ? [ + ...(!empty($props->news_category_id) && empty($props->region_id) ? [ 'taxonomy' => 'news_category', 'field' => 'category_id', - 'terms' => $news_category_id, + 'terms' => $props->news_category_id, ] : []), ] ]; - // Get the date filter value. - $value_selected = sanitize_text_field($_POST['valueSelected'] ?? ''); - - // Parse dates from the value selected. - if (!empty($value_selected)) { - preg_match('/&after=([^&]*)&before=([^&]*)/', $value_selected, $matches); + // Parse dates from the date filter. + if (!empty($props->date_filter)) { + preg_match('/&after=([^&]*)&before=([^&]*)/', $props->date_filter, $matches); $args['date_query'] = [ 'after' => date('Y-m-d', strtotime($matches[1])), 'before' => date('Y-m-d', strtotime($matches[2])), @@ -226,13 +282,10 @@ function getQueryArgs() ]; } - // Get the search query. - $query = sanitize_text_field($_POST['query'] ?? ''); - // If there is a search query, set the orderby to relevance. - if (!empty($query)) { + if (!empty($props->keywords_filter)) { $args['orderby'] = 'relevance'; - $args['s'] = $query; + $args['s'] = $props->keywords_filter; } return $args; diff --git a/public/app/themes/clarity/inc/pagination.tpl.php b/public/app/themes/clarity/inc/pagination.tpl.php new file mode 100644 index 000000000..10f1eb11e --- /dev/null +++ b/public/app/themes/clarity/inc/pagination.tpl.php @@ -0,0 +1,21 @@ + + + + + diff --git a/public/app/themes/clarity/page_news.php b/public/app/themes/clarity/page_news.php index 5a712ca4d..c52d26852 100644 --- a/public/app/themes/clarity/page_news.php +++ b/public/app/themes/clarity/page_news.php @@ -1,25 +1,35 @@ getCurrentAgency(); + +// TODO: Add this to a function later +get_template_part('src/components/c-article-item/view-news-feed.tpl'); +// TODO: Add this to a function later +require_once 'inc/pagination.tpl.php'; + ?>

- + 'news', 'template' => 'view-news-feed-template']); ?>

Latest

- +
diff --git a/public/app/themes/clarity/src/components/c-article-item/view-news-feed.tpl.php b/public/app/themes/clarity/src/components/c-article-item/view-news-feed.tpl.php new file mode 100644 index 000000000..a921e6f8d --- /dev/null +++ b/public/app/themes/clarity/src/components/c-article-item/view-news-feed.tpl.php @@ -0,0 +1,33 @@ + + + + + \ No newline at end of file diff --git a/public/app/themes/clarity/src/components/c-content-filter/view.php b/public/app/themes/clarity/src/components/c-content-filter/view.php index c31ef96cf..d1a014125 100644 --- a/public/app/themes/clarity/src/components/c-content-filter/view.php +++ b/public/app/themes/clarity/src/components/c-content-filter/view.php @@ -1,41 +1,62 @@ getCurrentAgency(); - $agency = $activeAgency['shortcode']; +$activeAgency = $oAgency->getCurrentAgency(); +$agency = $activeAgency['shortcode']; + +$archives_args = [ + 'type' => 'monthly', + 'format' => 'custom', + 'show_post_count' => false, +]; - $archives_args = [ - 'type' => 'monthly', - 'format' => 'custom', - 'show_post_count' => false, - ]; - ?> +?>
-
+
-

Filter by

 + +

Filter by

+
- +
- // Hidden field to pass nonce for improved security - form_builder('hidden', '', false, '_nonce', '_search_filter_wpnonce', $nonce, null, null, false, null, null); + + + + + + + + +
- + \ No newline at end of file diff --git a/public/app/themes/clarity/src/components/c-pagination/style.styl b/public/app/themes/clarity/src/components/c-pagination/style.styl index d05de63df..7c577af17 100644 --- a/public/app/themes/clarity/src/components/c-pagination/style.styl +++ b/public/app/themes/clarity/src/components/c-pagination/style.styl @@ -30,6 +30,11 @@ display: block; float: left; } + &[disabled=disabled] { + span.u-icon { + display: none; + } + } } .more-btn:hoover{ background-color: #f8f8f8; diff --git a/public/app/themes/clarity/src/globals/js/blog-content_filter.js b/public/app/themes/clarity/src/globals/js/blog-content_filter.js index 62adadab5..b187d0925 100644 --- a/public/app/themes/clarity/src/globals/js/blog-content_filter.js +++ b/public/app/themes/clarity/src/globals/js/blog-content_filter.js @@ -1,87 +1,201 @@ export default (function ($) { + /** + * A helper to render a template with props. + * + * @see https://stackoverflow.com/a/39065147/6671505 + * + * @param {[string, string|number]} props + * @returns {function(string, number): string} + */ + const templateRender = (props) => (tok, i) => i % 2 ? props[tok] : tok; + + /** + * Render the response to the page. + * + * The results type should match the php response object + * as returned by the `FilterSearch->mapResults()` method. + * @typedef {Object} Result + * @property {string} ID + * @property {string} post_title + * @property {string} post_date_formatted + * @property {string} post_excerpt_formatted + * @property {string} permalink + * @property {string} post_type + * @property {string} post_thumbnail + * @property {string} post_thumbnail_alt + * + * The response type should match the php response object + * as returned by the `FilterSearch->loadSearchResults()` method. + * @typedef {Object} Response + * @property {Object} aggregates + * @property {number} aggregates.currentPage + * @property {number} aggregates.resultsPerPage + * @property {number} aggregates.totalResults + * @property {Result[]} results + * + * Templates used for rendering the response. + * @typedef {Object} Templates + * @property {string[]} result + * @property {string[]} pagination + * + * @param {Response} response + * @param {Templates} templates + */ + + const renderResponse = ( + { results, aggregates: { currentPage, resultsPerPage, totalResults } }, + templates, + ) => { + // Remove all articles if page is 1. + if (currentPage === 1) { + $(".c-article-item").remove(); + } + + // Build the html from the response. + // See https://stackoverflow.com/a/39065147/6671505 + const resultsHtml = results.map((props) => + templates.result.map(templateRender(props)).join(""), + ); + + // Append the html to the content section. + $("#content").append(resultsHtml); + + // Update the title and pagination. + $("#title-section").text(`${totalResults} search results`); + + const isLastPage = currentPage * resultsPerPage >= totalResults; + + const paginationTitle = ({ totalResults, isLastPage }) => { + if (!totalResults) { + return "No Results"; + } + if (isLastPage) { + return "No More Results"; + } + return `Load Next ${resultsPerPage} Results`; + }; + + // Update the pagination. + const paginationHtml = templates.pagination + .map( + templateRender({ + title: paginationTitle({ totalResults, isLastPage }), + // Disable the button if it's the last page. + disabled: isLastPage ? `disabled="disabled"` : "", + // Adjust the zero-indexed current page. + currentPageFormatted: parseInt(currentPage), + // Calculate the total pages - if no results, then set as 1 to render '1 of 1'. + totalPages: !totalResults + ? 1 + : Math.ceil(totalResults / resultsPerPage), + }), + ) + .join(""); + + $(".c-pagination").html(paginationHtml); + }; + + const getAjaxProps = (form) => { + const formData = new FormData(form); + + const prefix = formData.get("prefix"); + + const resultTemplateName = formData.get("template"); + const templates = { + result: $(`script[data-template="${resultTemplateName}"]`) + .text() + .split(/\$\{(.+?)\}/g), + pagination: $(`script[data-template="pagination"]`) + .text() + .split(/\$\{(.+?)\}/g), + }; + + // Loop all form entries, remove the prefix from keys, and assign to data. + const entries = [...formData.entries()] + .map(([key, value]) => { + // Remove prefix if it exists. + const newKey = key.startsWith(prefix) ? key.replace(prefix, "") : key; + + // Parse the page number to integer. + if ("page" === newKey) { + value = parseInt(value); + } + + return [newKey, value]; + }) + .filter(([key, value]) => { + // Skip prefix and template keys. + if (["prefix", "template"].includes(key)) { + return false; + } + + // Skip empty values. + if (value === "") { + return false; + } + + if (key === "post_type" && value === "posts") { + console.error("posts needs to transformed to post! or edit the form"); + value = "post"; + } + + return true; + }); + + entries.push(["action", $(form).attr("action")]); + + const data = Object.fromEntries(entries); + + const ajaxProps = { + type: $(form).attr("method"), + url: mojAjax.ajaxurl, + dataType: "json", + data, + success: (response) => renderResponse(response, templates), + }; + + return ajaxProps; + }; + $.fn.moji_ajaxFilter = function () { - const postType = $(".data-type").data("type"); - const termID = $(".l-secondary").data("termid"); - const nonceHash = $("#_search_filter_wpnonce").val(); - $(document).on("submit", "#ff", function (e) { + // On page load get the form data and store it on the pagination element. + const ajaxProps = getAjaxProps($("#ff").get(0)); + // Store form data on the pagination element. + $(".c-pagination").data("ajax-props", ajaxProps); + + $("#ff").on("submit", function (e) { e.preventDefault(); - const nextPageToRetrieve = $("#ff").data("page") + 1; - $(".more-btn").attr("data-page", nextPageToRetrieve); + const ajaxProps = getAjaxProps(this); - const valueSelected = $(this) - .find( - "#ff_date_filter option:selected, #ff_region_news_date_filter option:selected", - ) - ?.val(); - const newsCategoryValue = - $(this) - .find( - '#ff_categories_filter_e-news, input[name="ff_categories_filter_regions"]', - ) - ?.val() ?? 0; + // Store form data on the pagination element. + $(".c-pagination").data("ajax-props", ajaxProps); - $.ajax({ - type: "post", - url: mojAjax.ajaxurl, - dataType: "json", - data: { - action: "load_search_results", - query: $(this).find("#ff_keywords_filter").val(), - nextPageToRetrieve, - valueSelected, - postType, - newsCategoryValue, - termID, - nonce_hash: nonceHash, - }, - success: function (response) { - $(".c-article-item").remove(); - $("#content").html(response.results); - $("#title-section").html(response.total); - $(".c-pagination").html(response.pagination); - }, - }); + console.log($(".c-pagination").data("parent-form")); - return false; + $.ajax(ajaxProps); }); - $(".c-pagination").on("click", function () { - $("#load_more div.data-type").addClass("shown-item"); + $(".c-pagination").on("click keydown", "button", function (e) { + e.stopPropagation(); - const nextPageToRetrieve = $(".more-btn").data("page") + 1; - $(".more-btn").attr("data-page", nextPageToRetrieve); + if (e.type === "keydown" && ![13, 32].includes(e.keyCode)) { + console.log("pressed: ".e.keyCode); + return; + } - const newsCategoryValue = - $('input[name="ff_categories_filter_news-category"]:checked')?.val() ?? - 0; + const ajaxProps = $(this).closest(".c-pagination").data("ajax-props"); - $.ajax({ - type: "post", - url: mojAjax.ajaxurl, - dataType: "json", - data: { - action: "load_search_results", - query: $(this).find("#ff_keywords_filter").val(), - valueSelected: $(".more-btn, .nomore-btn").data("date"), - nextPageToRetrieve, - postType, - newsCategoryValue, - termID, - nonce_hash: nonceHash, - }, + // if(!ajaxProps) { + // // handle the load next button being pressed without a filter. + // $("#ff").submit(); + // return + // } - success: function (response) { - $("#load_more").append(response.results); - $(".c-pagination").html(response.pagination); - $( - "#load_more div.data-type:not('.shown-item')+article div.content a", - ).focus(); - }, - }); + ajaxProps.data.page += 1; - return false; + $.ajax(ajaxProps); }); $(document).on("submit", "#ff_events", function (e) { From a9580bb064babca65ace90c73ae4e0c54be6ef14 Mon Sep 17 00:00:00 2001 From: EarthlingDavey <15802017+EarthlingDavey@users.noreply.github.com> Date: Tue, 15 Oct 2024 15:10:42 +0100 Subject: [PATCH 2/6] AJAX News & Blogs filtering complete --- public/app/themes/clarity/functions.php | 5 +- .../clarity/inc/api/get-news-rest-api.php | 2 +- .../clarity/inc/api/get-posts-rest-api.php | 41 --- .../clarity/inc/content-filter/search.php | 264 ++++++++++-------- .../clarity/inc/pagination-newscategory.php | 54 ---- public/app/themes/clarity/inc/pagination.php | 4 +- public/app/themes/clarity/page_blog.php | 30 +- public/app/themes/clarity/page_news.php | 45 +-- .../src/components/c-article-item/style.styl | 33 ++- .../c-article-item/view-blog-feed.ajax.php | 42 +++ .../c-article-item/view-blog-feed.php | 76 +++-- ...s-feed.tpl.php => view-news-feed.ajax.php} | 10 +- .../c-article-item/view-news-feed.php | 34 +-- .../clarity/src/components/c-article/view.php | 27 +- .../c-content-filter/view-events.php | 14 +- .../src/components/c-content-filter/view.php | 20 +- .../src/components/c-news-article/view.php | 26 +- .../c-pagination/view-infinite.ajax.php} | 4 +- .../components/c-pagination/view-infinite.php | 41 +++ .../clarity/src/globals/js/ajax-filter.js | 205 ++++++++++++++ .../clarity/src/globals/js/ajax-templating.js | 87 ++++++ .../src/globals/js/blog-content_filter.js | 227 --------------- .../clarity/src/globals/js/script-loader.js | 2 +- 23 files changed, 718 insertions(+), 575 deletions(-) delete mode 100644 public/app/themes/clarity/inc/api/get-posts-rest-api.php delete mode 100644 public/app/themes/clarity/inc/pagination-newscategory.php create mode 100644 public/app/themes/clarity/src/components/c-article-item/view-blog-feed.ajax.php rename public/app/themes/clarity/src/components/c-article-item/{view-news-feed.tpl.php => view-news-feed.ajax.php} (82%) rename public/app/themes/clarity/{inc/pagination.tpl.php => src/components/c-pagination/view-infinite.ajax.php} (82%) create mode 100644 public/app/themes/clarity/src/components/c-pagination/view-infinite.php create mode 100644 public/app/themes/clarity/src/globals/js/ajax-filter.js create mode 100644 public/app/themes/clarity/src/globals/js/ajax-templating.js delete mode 100644 public/app/themes/clarity/src/globals/js/blog-content_filter.js diff --git a/public/app/themes/clarity/functions.php b/public/app/themes/clarity/functions.php index 9763e6f9b..b5ce4e6c0 100644 --- a/public/app/themes/clarity/functions.php +++ b/public/app/themes/clarity/functions.php @@ -59,7 +59,6 @@ require_once 'inc/amazon-s3-and-cloudfront-signing.php'; require_once 'inc/amazon-s3-and-cloudfront.php'; -require_once 'inc/api/get-posts-rest-api.php'; require_once 'inc/api/campaign-api.php'; require_once 'inc/api/get-campaign-posts-api.php'; require_once 'inc/api/get-news-rest-api.php'; @@ -94,7 +93,6 @@ require_once 'inc/menu.php'; require_once 'inc/utilities.php'; require_once 'inc/pagination.php'; -require_once 'inc/pagination-newscategory.php'; require_once 'inc/post-types/post.php'; require_once 'inc/post-types/event.php'; @@ -120,6 +118,9 @@ new MOJ\Intranet\WPOffloadMedia(); new MOJ\Intranet\WPElasticPress(); +$search = new MOJ\Intranet\Search(); +$search->hooks(); + /// Prevent the Agency Switcher page from being overwritten add_action('save_post', function ($post_id, $post) { if ($post->post_name === 'agency-switcher') { diff --git a/public/app/themes/clarity/inc/api/get-news-rest-api.php b/public/app/themes/clarity/inc/api/get-news-rest-api.php index 2e21c13ce..d28f654cc 100644 --- a/public/app/themes/clarity/inc/api/get-news-rest-api.php +++ b/public/app/themes/clarity/inc/api/get-news-rest-api.php @@ -17,7 +17,7 @@ function get_news_api($set_cpt = '') $oAgency = new Agency(); $activeAgency = $oAgency->getCurrentAgency(); $post_per_page = 10; - $post_type = 'news'; + $post_type = get_post_type(); $post_id = get_the_ID(); $region_id = get_the_terms($post_id, 'region'); $regional_template = get_post_meta(get_the_ID(), 'dw_regional_template', true); diff --git a/public/app/themes/clarity/inc/api/get-posts-rest-api.php b/public/app/themes/clarity/inc/api/get-posts-rest-api.php deleted file mode 100644 index a8628adb9..000000000 --- a/public/app/themes/clarity/inc/api/get-posts-rest-api.php +++ /dev/null @@ -1,41 +0,0 @@ -getCurrentAgency(); - - $args = [ - 'numberposts' => $blog_posts_number, - 'post_type' => 'post', - 'post_status' => 'publish', - 'tax_query' => [ - 'relation' => 'AND', - [ - 'taxonomy' => 'agency', - 'field' => 'term_id', - 'terms' => $activeAgency['wp_tag_id'] - ], - ] - ]; - - $posts = get_posts($args); - - echo '
'; - foreach ($posts as $key => $post) { - include locate_template('src/components/c-article-item/view-blog-feed.php'); - } - -} diff --git a/public/app/themes/clarity/inc/content-filter/search.php b/public/app/themes/clarity/inc/content-filter/search.php index ddd279c62..4a58fd3e9 100644 --- a/public/app/themes/clarity/inc/content-filter/search.php +++ b/public/app/themes/clarity/inc/content-filter/search.php @@ -24,47 +24,86 @@ * * @property string $agency - The active agency. * @property string $post_type - The post type. - * @property string $page - The page number. - * @property string $posts_per_page - The number of posts per page. - * @property string $keywords_filter - The keywords filter. - * @property string $date_filter - The date filter. - * + * @property int $page - The page number. + * @property int $posts_per_page - The number of posts per page. + * @property ?bool $exclude_current - Exclude the current post. + * @property ?string $keywords_filter - The keywords filter. + * @property ?string $date_filter - The date filter. + * @property ?string $news_category_id - The news category ID. + * @property ?string $region_id - The region ID. + * * @return void */ -class QueryProps +class SearchQueryArgs { - public $agency_term_id; - public $post_type; - public $page; - public $posts_per_page; - public $keywords_filter; - public $date_filter; - public $news_category_id; - public $region_id; - public function __construct( - $agency_term_id, - $post_type, - $page, - $posts_per_page = 10, - $keywords_filter = null, - $date_filter = null, - $news_category_id = null, - $region_id = null - ) { - $this->agency_term_id = $agency_term_id; - $this->post_type = $post_type; - $this->page = $page; - $this->posts_per_page = $posts_per_page; - $this->date_filter = $date_filter; - $this->keywords_filter = $keywords_filter; - $this->news_category_id = $news_category_id; - $this->region_id = $region_id; + public string $agency_term_id, + public string $post_type, + public int $page, + public int $posts_per_page = 10, + public ?bool $exclude_current = false, + public ?string $keywords_filter = null, + public ?string $date_filter = null, + public ?string $news_category_id = null, + public ?string $region_id = null, + ) {} + + function get() + { + // Pagination. + $offset = $this->page ? (($this->page - 1) * $this->posts_per_page) : 0; + + $args = [ + 'posts_per_page' => $this->posts_per_page, + 'post_type' => $this->post_type, + 'post_status' => 'publish', + 'offset' => $offset, + ...($this->exclude_current ? ['post__not_in' => [get_the_ID()]] : []), + 'tax_query' => [ + 'relation' => 'AND', + [ + 'taxonomy' => 'agency', + 'field' => 'term_id', + 'terms' => $this->agency_term_id + ], + // If the region is set add its ID to the taxonomy query + ...(!empty($this->region_id) ? [ + 'taxonomy' => 'region', + 'field' => 'region_id', + 'terms' => $this->region_id, + ] : []), + // If the news category is set add its ID unless the query is regional, + // as it will have already been added to the tax query. + ...(!empty($this->news_category_id) && empty($this->region_id) ? [ + 'taxonomy' => 'news_category', + 'field' => 'category_id', + 'terms' => $this->news_category_id, + ] : []), + ] + ]; + + // Parse dates from the date filter. + if (!empty($this->date_filter)) { + preg_match('/&after=([^&]*)&before=([^&]*)/', $this->date_filter, $matches); + $args['date_query'] = [ + 'after' => date('Y-m-d', strtotime($matches[1])), + 'before' => date('Y-m-d', strtotime($matches[2])), + 'inclusive' => false, + ]; + } + + // If there is a search query, set the orderby to relevance. + if (!empty($this->keywords_filter)) { + $args['orderby'] = 'relevance'; + $args['s'] = $this->keywords_filter; + } + + return $args; } } -class FilterSearch +class Search { /** @@ -73,10 +112,7 @@ class FilterSearch * @return void */ - public function __construct() - { - $this->hooks(); - } + public function __construct() {} /** * Hooks @@ -85,10 +121,14 @@ public function __construct() */ public function hooks(): void { + // Add functions to handle AJAX requests. add_action('wp_ajax_load_search_results', [$this, 'loadSearchResults']); add_action('wp_ajax_nopriv_load_search_results', [$this, 'loadSearchResults']); add_action('wp_ajax_load_events_filter_results', [$this, 'loadEventSearchResults']); add_action('wp_ajax_nopriv_load_events_filter_results', [$this, 'loadEventSearchResults']); + + // Add templates to the footer. + add_action('wp_footer', [$this, 'addAjaxTemplates']); } /** @@ -164,20 +204,49 @@ public function loadEventSearchResults() die(); } - public function mapResults(\WP_Post $post) + public function mapNewsResult(\WP_Post $post) { return [ 'ID' => $post->ID, + 'post_type' => get_post_type($post->ID), 'post_title' => $post->post_title, 'post_date_formatted' => get_gmt_from_date($post->post_date, 'j M Y'), 'post_excerpt_formatted' => empty($post->post_excerpt) ? '' : "

{$post->post_excerpt}

", 'permalink' => get_permalink($post->ID), - 'post_type' => get_post_type($post->ID), // ? Is not used in the template. 'post_thumbnail' => get_the_post_thumbnail_url($post->ID, 'user-thumb'), 'post_thumbnail_alt' => get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true), ]; } + public function mapPostResult(\WP_Post $post) + { + + $thumbnail = get_the_post_thumbnail_url($post->ID, 'user-thumb'); + $thumbnail_alt = get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true); + + $author = $post->post_author; + $author_display_name = $author ? get_the_author_meta('display_name', $author) : ''; + + if (!$thumbnail) { + // Mutate thumbnail with author image. + $thumbnail = $author ? get_the_author_meta('thumbnail_avatar', $author) : false; + $thumbnail_alt = $author_display_name; + } + + return [ + 'ID' => $post->ID, + 'post_type' => get_post_type($post->ID), + 'post_title' => $post->post_title, + 'post_date_formatted' => get_gmt_from_date($post->post_date, 'j M Y'), + 'post_excerpt_formatted' => empty($post->post_excerpt) ? '' : "

{$post->post_excerpt}

", + 'permalink' => get_permalink($post->ID), + // 'post_thumbnail' => $thumbnail, + 'post_thumbnail' => false, + 'post_thumbnail_alt' => $thumbnail_alt, + 'author_display_name' => $author ? get_the_author_meta('display_name', $author) : '', + ]; + } + /** * Load results for post types except for events. * @@ -197,20 +266,29 @@ public function loadSearchResults() add_filter('ep_enable_do_weighting', '__return_true'); $page = (int) $_POST['page'] ?? 1; - if($page < 1 || $page > 1000) { + if ($page < 1 || $page > 1000) { $page = 1; } $posts_per_page = (int) ($_POST['posts_per_page'] ?? 10); - if($posts_per_page < 1 || $posts_per_page > 100) { + if ($posts_per_page < 1 || $posts_per_page > 100) { $posts_per_page = 10; } - $query_props = new QueryProps( + $allowed_post_types = ['post', 'news']; + + if (!in_array($_POST['post_type'], $allowed_post_types)) { + throw new \Exception('Invalid post type.'); + } + + $post_type = $_POST['post_type']; + + $query_args = new SearchQueryArgs( (new Agency())->getCurrentAgency()['wp_tag_id'], - sanitize_text_field($_POST['post_type']), + $post_type, $page, $posts_per_page, + false, sanitize_text_field($_POST['keywords_filter'] ?? null), sanitize_text_field($_POST['date_filter'] ?? null), sanitize_text_field($_POST['news_category_id'] ?? null), @@ -218,9 +296,9 @@ public function loadSearchResults() ); // Run a query based on generated query arguments. - $query = new WP_Query($this->getQueryArgs($query_props)); + $query = new WP_Query($query_args->get()); - // include locate_template('src/components/c-article-item/view-news-feed.php'); + $map_function = $post_type === 'news' ? 'mapNewsResult' : 'mapPostResult'; return wp_send_json([ 'aggregates' => [ @@ -228,98 +306,36 @@ public function loadSearchResults() 'resultsPerPage' => $posts_per_page, 'currentPage' => $page, ], - 'results' => array_map([$this, 'mapResults'], $query->posts), + 'results' => [ + 'posts' => array_map([$this, $map_function], $query->posts), + 'templateName' => "view-{$post_type}-feed", + ], ]); - } + /** - * Get Query Args + * Add AJAX templates to the footer. * - * @return array + * These JS templates are used to render the AJAX results to html. + * + * @return void */ - function getQueryArgs(QueryProps $props) + public function addAjaxTemplates() { - // Pagination. - $offset = $props->page ? (($props->page - 1) * $props->posts_per_page) : 0; - $args = [ - 'numberposts' => $props->posts_per_page, - 'post_type' => $props->post_type, - 'post_status' => 'publish', - 'offset' => $offset, - 'tax_query' => [ - 'relation' => 'AND', - [ - 'taxonomy' => 'agency', - 'field' => 'term_id', - 'terms' => $props->agency_term_id - ], - // If the region is set add its ID to the taxonomy query - ...(!empty($props->region_id) ? [ - 'taxonomy' => 'region', - 'field' => 'region_id', - 'terms' => $props->region_id, - ] : []), - // If the news category is set add its ID unless the query is regional, - // as it will have already been added to the tax query. - ...(!empty($props->news_category_id) && empty($props->region_id) ? [ - 'taxonomy' => 'news_category', - 'field' => 'category_id', - 'terms' => $props->news_category_id, - ] : []), - ] - ]; - - // Parse dates from the date filter. - if (!empty($props->date_filter)) { - preg_match('/&after=([^&]*)&before=([^&]*)/', $props->date_filter, $matches); - $args['date_query'] = [ - 'after' => date('Y-m-d', strtotime($matches[1])), - 'before' => date('Y-m-d', strtotime($matches[2])), - 'inclusive' => false, - ]; + if (is_page_template('page_blog.php') || is_page_template('page_news.php')) { + get_template_part('src/components/c-pagination/view-infinite.ajax'); + echo ''; } - // If there is a search query, set the orderby to relevance. - if (!empty($props->keywords_filter)) { - $args['orderby'] = 'relevance'; - $args['s'] = $props->keywords_filter; + if (is_page_template('page_blog.php')) { + get_template_part('src/components/c-article-item/view-blog-feed.ajax'); } - return $args; - } - - /** - * Get Pagination - * - * @param string $selected - * @param int|string $next - * @param int $total - * @return string - */ - - function getPagination(string $selected, int|string $next, int $total): string - { - $html = ''; - if ($next == $total) { - $html .= ''; - $html .= 'No More Results'; - $html .= ''; - } elseif ($total <= 1) { - $html .= ''; - } else { - $html .= ''; + if (is_page_template('page_news.php')) { + get_template_part('src/components/c-article-item/view-news-feed.ajax'); } - return $html; } } - -new FilterSearch(); diff --git a/public/app/themes/clarity/inc/pagination-newscategory.php b/public/app/themes/clarity/inc/pagination-newscategory.php deleted file mode 100644 index e914a6ea0..000000000 --- a/public/app/themes/clarity/inc/pagination-newscategory.php +++ /dev/null @@ -1,54 +0,0 @@ -getCurrentAgency(); - - $post_per_page = 10; - - $args = [ - 'numberposts' => $post_per_page, - 'post_type' => 'news', - 'post_status' => 'publish', - 'tax_query' => [ - 'relation' => 'AND', - [ - 'taxonomy' => 'agency', - 'field' => 'term_id', - 'terms' => $activeAgency['wp_tag_id'] - ], - // If the category_id is set add it to the taxonomy query - ...( $category_id ? [ - 'taxonomy' => 'news_category', - 'field' => 'category_id', - 'terms' => $category_id, - ] : []), - ] - ]; - - $query = new WP_Query($args); - $pagetotal = $query->max_num_pages; - - ?> -
- - 0) { ?> - - diff --git a/public/app/themes/clarity/page_blog.php b/public/app/themes/clarity/page_blog.php index 0ad71d22e..82508d1d7 100644 --- a/public/app/themes/clarity/page_blog.php +++ b/public/app/themes/clarity/page_blog.php @@ -1,31 +1,45 @@ getCurrentAgency(); +// Use the SearchQueryProps class to create the query properties. +$query_args = new SearchQueryArgs((new Agency())->getCurrentAgency()['wp_tag_id'], 'post', 1, 10); + +// Run the query. +$query = new WP_Query($query_args->get()); ?>
+

+
- + 'post', 'template' => 'view-news-feed']); ?>
+

Latest

+ +
- + posts as $key => $post) { + include locate_template('src/components/c-article-item/view-blog-feed.php'); + } ?>
- + + $query->max_num_pages, 'page' => 1]); ?> +
+
getCurrentAgency(); +// Use the SearchQueryProps class to create the query properties. +$query_args = new SearchQueryArgs((new Agency())->getCurrentAgency()['wp_tag_id'], 'news', 1, 10); -// TODO: Add this to a function later -get_template_part('src/components/c-article-item/view-news-feed.tpl'); -// TODO: Add this to a function later -require_once 'inc/pagination.tpl.php'; +// Run the query. +$query = new WP_Query($query_args->get()); ?> -
-

-
- 'news', 'template' => 'view-news-feed-template']); ?> -
-
-

Latest

-
- -
- + +
+ +

+ +
+ 'news', 'template' => 'view-news-feed']); ?> +
+ +
+ +

Latest

+ +
+ posts as $key => $post) { + include locate_template('src/components/c-article-item/view-news-feed.php'); + } ?>
-
+ + $query->max_num_pages, 'page' => 1]); ?> + +
+
+ + diff --git a/public/app/themes/clarity/src/components/c-article-item/view-blog-feed.php b/public/app/themes/clarity/src/components/c-article-item/view-blog-feed.php index f749911b7..af79a0ec2 100644 --- a/public/app/themes/clarity/src/components/c-article-item/view-blog-feed.php +++ b/public/app/themes/clarity/src/components/c-article-item/view-blog-feed.php @@ -9,73 +9,63 @@ use MOJ\Intranet\Authors; -$oAuthor = new Authors(); $id = $post->ID; -$authors = $oAuthor->getAuthorInfo($id); + $thumbnail = get_the_post_thumbnail_url($id, 'user-thumb'); $thumbnail_alt = get_post_meta(get_post_thumbnail_id($id), '_wp_attachment_image_alt', true); -$link = get_the_permalink($id); + +// TODO: Why is this here? It's not used. +// If it should be here, make sure to update `Search->mapPostResult()` +$oAuthor = new Authors(); +$authors = $oAuthor->getAuthorInfo($id); + $author = $post->post_author; $author_display_name = $author ? get_the_author_meta('display_name', $author) : ''; -$author_avatar = $author ? get_the_author_meta('thumbnail_avatar', $author) : ''; - -// Filter right-hand blog list so the page your on isn't duplicated and doesn't appear in that list -if (is_singular('post')) { - $post_id = $post_id ?? 0; - if ($post_id === $id) { - $id = ''; - } -} -if ($id != '') : - ?> -
+if (!$thumbnail) { + // Mutate thumbnail with author image. + $thumbnail = $author ? get_the_author_meta('thumbnail_avatar', $author) : false; + $thumbnail_alt = $author_display_name; +} - +?> - +
- - + + - - '; ?> +
- +

- +

- By | - post_date, 'j M Y') ?> - + By + | + + post_date, 'j M Y') ?> + +
- + + -
-

-
+
+

+
-
- +
\ No newline at end of file diff --git a/public/app/themes/clarity/src/components/c-article-item/view-news-feed.tpl.php b/public/app/themes/clarity/src/components/c-article-item/view-news-feed.ajax.php similarity index 82% rename from public/app/themes/clarity/src/components/c-article-item/view-news-feed.tpl.php rename to public/app/themes/clarity/src/components/c-article-item/view-news-feed.ajax.php index a921e6f8d..79444e11c 100644 --- a/public/app/themes/clarity/src/components/c-article-item/view-news-feed.tpl.php +++ b/public/app/themes/clarity/src/components/c-article-item/view-news-feed.ajax.php @@ -1,7 +1,7 @@ +defined('ABSPATH') || exit; - +?> - \ No newline at end of file + diff --git a/public/app/themes/clarity/src/components/c-article-item/view-news-feed.php b/public/app/themes/clarity/src/components/c-article-item/view-news-feed.php index 494199581..a0796597f 100644 --- a/public/app/themes/clarity/src/components/c-article-item/view-news-feed.php +++ b/public/app/themes/clarity/src/components/c-article-item/view-news-feed.php @@ -18,17 +18,11 @@
- '; - echo '' . $thumbnail_alt . ''; - echo ''; - else : - echo ''; - endif; - - ?> + + +
@@ -37,18 +31,16 @@
- post_date, 'j M Y') ?> + + post_date, 'j M Y') ?> +
- -
- - -
-

-
- - + +
+

+
+
diff --git a/public/app/themes/clarity/src/components/c-article/view.php b/public/app/themes/clarity/src/components/c-article/view.php index 721a7e64c..6fbe8ddca 100644 --- a/public/app/themes/clarity/src/components/c-article/view.php +++ b/public/app/themes/clarity/src/components/c-article/view.php @@ -5,6 +5,28 @@ * */ + +use MOJ\Intranet\Agency; +use MOJ\Intranet\SearchQueryArgs; + +/* +* Template Name: Blog archive +*/ + +if (!defined('ABSPATH')) { + die(); +} + +defined('ABSPATH') || exit; + +get_header(); + +// Use the SearchQueryProps class to create the query properties. +$query_args = new SearchQueryArgs((new Agency())->getCurrentAgency()['wp_tag_id'], 'post', 1, 5, true); + +// Run the query. +$query = new WP_Query($query_args->get()); + ?>
@@ -22,8 +44,9 @@ diff --git a/public/app/themes/clarity/src/components/c-content-filter/view-events.php b/public/app/themes/clarity/src/components/c-content-filter/view-events.php index a944ebf5e..e8f5d4638 100644 --- a/public/app/themes/clarity/src/components/c-content-filter/view-events.php +++ b/public/app/themes/clarity/src/components/c-content-filter/view-events.php @@ -9,7 +9,7 @@
-
+

Filter by
@@ -35,6 +35,18 @@ // Hidden field to pass nonce for improved security form_builder('hidden', '', false, '_nonce', '_search_filter_wpnonce', $nonce, null, null, false, null, null); ?> + + + + + + + + + +
diff --git a/public/app/themes/clarity/src/components/c-content-filter/view.php b/public/app/themes/clarity/src/components/c-content-filter/view.php index d1a014125..b42dc8680 100644 --- a/public/app/themes/clarity/src/components/c-content-filter/view.php +++ b/public/app/themes/clarity/src/components/c-content-filter/view.php @@ -1,15 +1,9 @@ getCurrentAgency(); -$agency = $activeAgency['shortcode']; - $archives_args = [ 'type' => 'monthly', 'format' => 'custom', @@ -33,16 +27,7 @@ - + - + + diff --git a/public/app/themes/clarity/src/components/c-news-article/view.php b/public/app/themes/clarity/src/components/c-news-article/view.php index d65a5c932..19156c083 100644 --- a/public/app/themes/clarity/src/components/c-news-article/view.php +++ b/public/app/themes/clarity/src/components/c-news-article/view.php @@ -1,3 +1,24 @@ +getCurrentAgency()['wp_tag_id'], 'news', 1, 6, true); + +// Run the query. +$query = new WP_Query($query_args->get()); + +?> +
@@ -16,8 +37,9 @@ Recent news'; - $news_posts_per_page = ''; - get_news_api(); + foreach ($query->posts as $key => $post) { + include locate_template('src/components/c-article-item/view-news-feed.php'); + } ?> diff --git a/public/app/themes/clarity/inc/pagination.tpl.php b/public/app/themes/clarity/src/components/c-pagination/view-infinite.ajax.php similarity index 82% rename from public/app/themes/clarity/inc/pagination.tpl.php rename to public/app/themes/clarity/src/components/c-pagination/view-infinite.ajax.php index 10f1eb11e..c6aaafe78 100644 --- a/public/app/themes/clarity/inc/pagination.tpl.php +++ b/public/app/themes/clarity/src/components/c-pagination/view-infinite.ajax.php @@ -1,10 +1,10 @@ $query->max_num_pages, 'page' => 1]); + * + * @package Clarity + */ + +defined('ABSPATH') || exit; + +if (empty($args['total_pages']) || empty($args['page'])) { + return; +} + +?> + + + diff --git a/public/app/themes/clarity/src/globals/js/ajax-filter.js b/public/app/themes/clarity/src/globals/js/ajax-filter.js new file mode 100644 index 000000000..059e7bd7b --- /dev/null +++ b/public/app/themes/clarity/src/globals/js/ajax-filter.js @@ -0,0 +1,205 @@ +import AjaxTemplating from "./ajax-templating.js"; + +export default (function ($) { + /** + * Render the response to the page. + * + * The results type should match the php response object + * as returned by the `FilterSearch->mapResults()` method. + * @typedef {Object} Post + * @property {string} ID + * @property {string} post_title + * @property {string} post_date_formatted + * @property {string} post_excerpt_formatted + * @property {string} permalink + * @property {string} post_type + * @property {string} post_thumbnail + * @property {string} post_thumbnail_alt + * + * @typedef {Object} Results + * @property {Post[]} posts + * @property {string} templateName + * + * The response type should match the php response object + * as returned by the `FilterSearch->loadSearchResults()` method. + * @typedef {Object} Response + * @property {Object} aggregates + * @property {number} aggregates.currentPage + * @property {number} aggregates.resultsPerPage + * @property {number} aggregates.totalResults + * @property {Results} results + * + * @param {Response} response + */ + + const renderResults = ({ + results: { posts, templateName }, + aggregates: { currentPage, totalResults }, + }) => { + // Remove all articles if page is 1. + if (currentPage === 1) { + $(".c-article-item").remove(); + } + + const t = new AjaxTemplating(templateName); + + const resultsHtml = posts.map((props) => t.renderHtml(props)); + + // Append the html to the content section. + $("#content").append(resultsHtml); + + // Update the title. + $("#title-section").text(`${totalResults} search results`); + }; + + /** + * Render pagination to the page. + */ + + const renderPagination = ({ currentPage, resultsPerPage, totalResults }) => { + const isLastPage = currentPage * resultsPerPage >= totalResults; + + const paginationTitle = ({ totalResults, isLastPage }) => { + if (!totalResults) { + return "No Results"; + } + if (isLastPage) { + return "No More Results"; + } + return `Load Next ${resultsPerPage} Results`; + }; + + const template = new AjaxTemplating("pagination"); + + // Update the pagination. + const paginationHtml = template.renderHtml({ + title: paginationTitle({ totalResults, isLastPage }), + // Disable the button if it's the last page. + disabled: isLastPage ? `disabled="disabled"` : "", + // Adjust the zero-indexed current page. + currentPageFormatted: parseInt(currentPage), + // Calculate the total pages - if no results, then set as 1 to render '1 of 1'. + totalPages: !totalResults ? 1 : Math.ceil(totalResults / resultsPerPage), + }); + + $(".c-pagination").html(paginationHtml); + + // Update the page number on the pagination element. + if (!isLastPage) { + $(".c-pagination button").attr("data-page", currentPage + 1); + } + }; + + /** + * Parse a form instance into an object. + * + * @param {HTMLElement} form + * @returns {[string, string][]} + */ + + const getFormData = (form) => { + const formData = new FormData(form); + + const prefix = formData.get("prefix"); + + // Loop all form entries, remove the prefix from keys, and assign to data. + const entries = [...formData.entries()] + .map(([key, value]) => { + // Remove prefix if it exists. + const newKey = key.startsWith(prefix) ? key.replace(prefix, "") : key; + + // Parse the page number to integer. + if ("page" === newKey) { + value = parseInt(value); + } + + return [newKey, value]; + }) + .filter(([key, value]) => { + // Skip prefix and template keys, and empty values. + if (["prefix"].includes(key) || value === "") { + return false; + } + + if (key === "post_type" && value === "posts") { + console.error("posts needs to transformed to post! or edit the form"); + value = "post"; + } + + return true; + }); + + entries.push(["action", $(form).attr("action")]); + + return Object.fromEntries(entries); + }; + + $.fn.moji_ajaxFilter = function () { + const DEFAULT_AJAX_PROPS = { + type: "POST", + url: mojAjax.ajaxurl, + dataType: "json", + success: (response) => { + renderResults(response); + renderPagination(response.aggregates); + }, + }; + + const $form = $("#ff, #ff_events"); + + const initialFormData = getFormData($form.get(0)); + + // On page load get the ajax props and store them on the pagination element. + $(".c-pagination").data("ajax-props", { + ...DEFAULT_AJAX_PROPS, + data: initialFormData, + }); + + /** + * Handle a form submit event. + * + * @param {Event} e + * @returns {void} + */ + + $form.on("submit", function (e) { + e.preventDefault(); + + const ajaxProps = { + ...DEFAULT_AJAX_PROPS, + data: getFormData(this), + }; + + // Make the ajax request. + $.ajax(ajaxProps); + + // Store the ajax props on the pagination element. + $(".c-pagination").data("ajax-props", ajaxProps); + }); + + /** + * Handle events on the pagination button. + * + * @param {Event} e + * @returns {void} + */ + + $(".c-pagination").on("click keydown", "button", function (e) { + e.stopPropagation(); + + // If the event is a keydown event, only allow enter or space keys. + if (e.type === "keydown" && ![13, 32].includes(e.keyCode)) { + return; + } + + // Get the ajax props from the pagination element. + const ajaxProps = $(this).closest(".c-pagination").data("ajax-props"); + + // Get the page number from the button. + const page = $(this).data("page"); + + // Make an ajax request with the new page number. + $.ajax({ ...ajaxProps, data: { ...ajaxProps.data, page } }); + }); + }; +})(jQuery); diff --git a/public/app/themes/clarity/src/globals/js/ajax-templating.js b/public/app/themes/clarity/src/globals/js/ajax-templating.js new file mode 100644 index 000000000..38d039aaf --- /dev/null +++ b/public/app/themes/clarity/src/globals/js/ajax-templating.js @@ -0,0 +1,87 @@ +/** + * This Class is responsible for rendering HTML from AJAX template. + * + * @see https://stackoverflow.com/a/39065147/6671505 + * + * @example + * const template = new AjaxTemplating("results-template"); + * const html = template.renderHtml({ + * title: "Hello World", + * content: "This is a test." + * }); + */ + +export default class AjaxTemplating { + /** + * Constructor + * + * @param {string} templateName + */ + constructor(templateName) { + this.resultsTemplate = this.loadTemplate(templateName); + } + + /** + * Load the template from the DOM. + * + * Returns an array of strings where: + * - every odd index is a template variable + * - every even is a string of html text + * + * @param {string} templateName + * @returns {string[]} + */ + + loadTemplate(templateName) { + // do this without jQuery + return document + .querySelector(`script[data-template="${templateName}"]`) + .textContent.split(/\$\{(.+?)\}/g); + } + + /** + * Render the HTML from the template and props. + * + * @param {Object} props + * @returns {string} + */ + + renderHtml(props) { + // Keep track of the conditional blocks + // If a conditional block is not met, we skip the block + let skip = false; + + let parts = []; + + for (let i = 0; i < this.resultsTemplate.length; i++) { + const tok = this.resultsTemplate[i]; + + // Handle the html text - even indexes + + if (i % 2 === 0 && !skip) { + parts.push(tok); + continue; + } + + if (i % 2 === 0) { + continue; + } + + // Handle the template variables - odd indexes + + if (tok.startsWith("?") && !props[tok.substring(1)]) { + skip = true; + } + + if (tok.startsWith("/?") && !props[tok.substring(2)]) { + skip = false; + } + + if (!skip) { + parts.push(props[tok]); + } + } + + return parts.join(""); + } +} diff --git a/public/app/themes/clarity/src/globals/js/blog-content_filter.js b/public/app/themes/clarity/src/globals/js/blog-content_filter.js deleted file mode 100644 index b187d0925..000000000 --- a/public/app/themes/clarity/src/globals/js/blog-content_filter.js +++ /dev/null @@ -1,227 +0,0 @@ -export default (function ($) { - /** - * A helper to render a template with props. - * - * @see https://stackoverflow.com/a/39065147/6671505 - * - * @param {[string, string|number]} props - * @returns {function(string, number): string} - */ - const templateRender = (props) => (tok, i) => i % 2 ? props[tok] : tok; - - /** - * Render the response to the page. - * - * The results type should match the php response object - * as returned by the `FilterSearch->mapResults()` method. - * @typedef {Object} Result - * @property {string} ID - * @property {string} post_title - * @property {string} post_date_formatted - * @property {string} post_excerpt_formatted - * @property {string} permalink - * @property {string} post_type - * @property {string} post_thumbnail - * @property {string} post_thumbnail_alt - * - * The response type should match the php response object - * as returned by the `FilterSearch->loadSearchResults()` method. - * @typedef {Object} Response - * @property {Object} aggregates - * @property {number} aggregates.currentPage - * @property {number} aggregates.resultsPerPage - * @property {number} aggregates.totalResults - * @property {Result[]} results - * - * Templates used for rendering the response. - * @typedef {Object} Templates - * @property {string[]} result - * @property {string[]} pagination - * - * @param {Response} response - * @param {Templates} templates - */ - - const renderResponse = ( - { results, aggregates: { currentPage, resultsPerPage, totalResults } }, - templates, - ) => { - // Remove all articles if page is 1. - if (currentPage === 1) { - $(".c-article-item").remove(); - } - - // Build the html from the response. - // See https://stackoverflow.com/a/39065147/6671505 - const resultsHtml = results.map((props) => - templates.result.map(templateRender(props)).join(""), - ); - - // Append the html to the content section. - $("#content").append(resultsHtml); - - // Update the title and pagination. - $("#title-section").text(`${totalResults} search results`); - - const isLastPage = currentPage * resultsPerPage >= totalResults; - - const paginationTitle = ({ totalResults, isLastPage }) => { - if (!totalResults) { - return "No Results"; - } - if (isLastPage) { - return "No More Results"; - } - return `Load Next ${resultsPerPage} Results`; - }; - - // Update the pagination. - const paginationHtml = templates.pagination - .map( - templateRender({ - title: paginationTitle({ totalResults, isLastPage }), - // Disable the button if it's the last page. - disabled: isLastPage ? `disabled="disabled"` : "", - // Adjust the zero-indexed current page. - currentPageFormatted: parseInt(currentPage), - // Calculate the total pages - if no results, then set as 1 to render '1 of 1'. - totalPages: !totalResults - ? 1 - : Math.ceil(totalResults / resultsPerPage), - }), - ) - .join(""); - - $(".c-pagination").html(paginationHtml); - }; - - const getAjaxProps = (form) => { - const formData = new FormData(form); - - const prefix = formData.get("prefix"); - - const resultTemplateName = formData.get("template"); - const templates = { - result: $(`script[data-template="${resultTemplateName}"]`) - .text() - .split(/\$\{(.+?)\}/g), - pagination: $(`script[data-template="pagination"]`) - .text() - .split(/\$\{(.+?)\}/g), - }; - - // Loop all form entries, remove the prefix from keys, and assign to data. - const entries = [...formData.entries()] - .map(([key, value]) => { - // Remove prefix if it exists. - const newKey = key.startsWith(prefix) ? key.replace(prefix, "") : key; - - // Parse the page number to integer. - if ("page" === newKey) { - value = parseInt(value); - } - - return [newKey, value]; - }) - .filter(([key, value]) => { - // Skip prefix and template keys. - if (["prefix", "template"].includes(key)) { - return false; - } - - // Skip empty values. - if (value === "") { - return false; - } - - if (key === "post_type" && value === "posts") { - console.error("posts needs to transformed to post! or edit the form"); - value = "post"; - } - - return true; - }); - - entries.push(["action", $(form).attr("action")]); - - const data = Object.fromEntries(entries); - - const ajaxProps = { - type: $(form).attr("method"), - url: mojAjax.ajaxurl, - dataType: "json", - data, - success: (response) => renderResponse(response, templates), - }; - - return ajaxProps; - }; - - $.fn.moji_ajaxFilter = function () { - - // On page load get the form data and store it on the pagination element. - const ajaxProps = getAjaxProps($("#ff").get(0)); - // Store form data on the pagination element. - $(".c-pagination").data("ajax-props", ajaxProps); - - $("#ff").on("submit", function (e) { - e.preventDefault(); - - const ajaxProps = getAjaxProps(this); - - // Store form data on the pagination element. - $(".c-pagination").data("ajax-props", ajaxProps); - - console.log($(".c-pagination").data("parent-form")); - - $.ajax(ajaxProps); - }); - - $(".c-pagination").on("click keydown", "button", function (e) { - e.stopPropagation(); - - if (e.type === "keydown" && ![13, 32].includes(e.keyCode)) { - console.log("pressed: ".e.keyCode); - return; - } - - const ajaxProps = $(this).closest(".c-pagination").data("ajax-props"); - - // if(!ajaxProps) { - // // handle the load next button being pressed without a filter. - // $("#ff").submit(); - // return - // } - - ajaxProps.data.page += 1; - - $.ajax(ajaxProps); - }); - - $(document).on("submit", "#ff_events", function (e) { - e.preventDefault(); - - const nextPageToRetrieve = $("#ff").data("page") + 1; - $(".more-btn").attr("data-page", nextPageToRetrieve); - - $.ajax({ - type: "post", - url: mojAjax.ajaxurl, - dataType: "html", - data: { - action: "load_events_filter_results", - query: $(this).find('input[name="ff_keywords_filter"]').val(), - valueSelected: $(this).find("#ff_date_filter option:selected").val(), - postType, - termID, - nonce_hash: nonceHash, - }, - success: function (response) { - $(".c-article-item").remove(); - $("#content").html(response); - }, - }); - return false; - }); - }; -})(jQuery); diff --git a/public/app/themes/clarity/src/globals/js/script-loader.js b/public/app/themes/clarity/src/globals/js/script-loader.js index fe8e38070..741a721c0 100644 --- a/public/app/themes/clarity/src/globals/js/script-loader.js +++ b/public/app/themes/clarity/src/globals/js/script-loader.js @@ -15,7 +15,7 @@ import "../../components/c-notes-from-antonia/lazy_load.js"; // Global scripts import "../../../inc/admin/js/feedback.js"; import "./auth-heartbeat.js"; -import "./blog-content_filter.js"; +import "./ajax-filter.js"; import "./condolences-filter.js"; import "./equaliser.js"; import "./slider.js"; From 03b5b18a73a2365948e6df2a0f8b5fc17ca16792 Mon Sep 17 00:00:00 2001 From: EarthlingDavey <15802017+EarthlingDavey@users.noreply.github.com> Date: Tue, 15 Oct 2024 16:41:20 +0100 Subject: [PATCH 3/6] AJAX Events filtering complete --- .../clarity/inc/content-filter/search.php | 110 ++++++++++-------- .../components/c-calendar-icon/view.ajax.php | 19 +++ .../c-content-filter/view-events.php | 6 - .../c-events-item-byline/view.ajax.php | 28 +++++ .../components/c-events-item-byline/view.php | 1 + .../c-events-item/view-list.ajax.php | 14 +++ .../clarity/src/globals/js/ajax-filter.js | 12 +- 7 files changed, 127 insertions(+), 63 deletions(-) create mode 100644 public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php create mode 100644 public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php create mode 100644 public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php diff --git a/public/app/themes/clarity/inc/content-filter/search.php b/public/app/themes/clarity/inc/content-filter/search.php index 4a58fd3e9..301929a5f 100644 --- a/public/app/themes/clarity/inc/content-filter/search.php +++ b/public/app/themes/clarity/inc/content-filter/search.php @@ -139,69 +139,74 @@ public function hooks(): void public function loadEventSearchResults() { - if (!wp_verify_nonce($_POST['nonce_hash'], 'search_filter_nonce')) { + if (!wp_verify_nonce($_POST['_nonce'], 'search_filter_nonce')) { exit('Access not allowed.'); } - $active_agency = (new Agency())->getCurrentAgency(); - $agency_term_id = $active_agency['wp_tag_id']; - $date_filter = sanitize_text_field($_POST['valueSelected'] ?? 'all'); - $post_id = get_the_ID(); - $query = sanitize_text_field($_POST['query']); - - $filter_options = ['keyword_search' => $query]; - - if ($date_filter != 'all') { - $filter_options['date_filter'] = $date_filter; - } - - $events_helper = new EventsHelper(); - + + $agency_term_id =(new Agency())->getCurrentAgency()['wp_tag_id']; + + $filter_options = [ + 'keyword_search' => sanitize_text_field($_POST['keywords_filter'] ?? ''), + 'date_filter' => $_POST['date_filter'] == 'all' ? '' : sanitize_text_field($_POST['date_filter']), + ]; + + if (isset($_POST['termID'])) { $tax_id = sanitize_text_field($_POST['termID']); - + $filter_options['region_filter'] = $tax_id; - - $events = $events_helper->get_events($agency_term_id, $filter_options); - } else { - $events = $events_helper->get_events($agency_term_id, $filter_options); } - if ($events) { - echo '
'; - - foreach ($events as $key => $event) : - $event_id = $event->ID; - $post_url = $event->url; - $event_title = $event->post_title; - - $start_date = $event->event_start_date; - $end_date = $event->event_end_date; - $start_time = $event->event_start_time; - $end_time = $event->event_end_time; - $location = $event->event_location; - $date = $event->event_start_date; - $day = date('l', strtotime($start_date)); - $month = date('M', strtotime($start_date)); - $year = date('Y', strtotime($start_date)); - $all_day = $event->event_allday; - - if ($all_day == true) { - $all_day = 'all_day'; - } + $events_helper = new EventsHelper(); - echo '
'; + $events = $events_helper->get_events($agency_term_id, $filter_options) ?? []; - include locate_template('src/components/c-calendar-icon/view.php'); + return wp_send_json([ + 'aggregates' => [ + 'totalResults' => count($events), + 'resultsPerPage' => -1, + 'currentPage' => 1, + ], + 'results' => [ + 'templateName' => "c-events-item-list", + 'posts' => array_map([$this, 'mapEventResult'], $events), + ], + ]); + } - include locate_template('src/components/c-events-item-byline/view.php'); + public function mapEventResult($event) + { + // Assign some default values. + $time_formatted = 'All day'; + $datetime = 'P1D'; + + if (!$event->event_allday) { + $datetime = $event->event_start_time; + // If start date and end date selected are the same, just display first date. + if ($event->event_start_time === $event->event_end_time) { + $time_formatted = substr($event->event_start_time, 0, 5); + } else { + $time_formatted = substr($event->event_start_time, 0, 5) . ' - ' . substr($event->event_end_time, 0, 5); + } + } - echo '
'; - endforeach; + if ($event->event_start_date === $event->event_end_date) { + $multi_date = date('d M', strtotime($event->event_start_date)); } else { - echo 'No events found during this date range :('; + $multi_date = date('d M', strtotime($event->event_start_date)) . ' - ' . date('d M', strtotime($event->event_end_date)); } - die(); + + return [ + 'permalink' => $event->url, + 'post_title' => $event->post_title, + 'year' => date('Y', strtotime($event->event_start_date)), + 'day' => date('l', strtotime($event->event_start_date)), + 'location' => $event->event_location, + 'time_formatted' => $time_formatted, + 'datetime_formatted' => $datetime, + 'multi_date_formatted' => $multi_date + ]; } public function mapNewsResult(\WP_Post $post) @@ -240,8 +245,7 @@ public function mapPostResult(\WP_Post $post) 'post_date_formatted' => get_gmt_from_date($post->post_date, 'j M Y'), 'post_excerpt_formatted' => empty($post->post_excerpt) ? '' : "

{$post->post_excerpt}

", 'permalink' => get_permalink($post->ID), - // 'post_thumbnail' => $thumbnail, - 'post_thumbnail' => false, + 'post_thumbnail' => $thumbnail, 'post_thumbnail_alt' => $thumbnail_alt, 'author_display_name' => $author ? get_the_author_meta('display_name', $author) : '', ]; @@ -337,5 +341,9 @@ public function addAjaxTemplates() if (is_page_template('page_news.php')) { get_template_part('src/components/c-article-item/view-news-feed.ajax'); } + + if (is_page_template('page_events.php')) { + get_template_part('src/components/c-events-item/view-list.ajax'); + } } } diff --git a/public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php b/public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php new file mode 100644 index 000000000..c454d82de --- /dev/null +++ b/public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php @@ -0,0 +1,19 @@ + + + + +
+ Date: + +
+ + + diff --git a/public/app/themes/clarity/src/components/c-content-filter/view-events.php b/public/app/themes/clarity/src/components/c-content-filter/view-events.php index e8f5d4638..b4e1cc0f6 100644 --- a/public/app/themes/clarity/src/components/c-content-filter/view-events.php +++ b/public/app/themes/clarity/src/components/c-content-filter/view-events.php @@ -41,12 +41,6 @@ ?> - - - - - - diff --git a/public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php b/public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php new file mode 100644 index 000000000..8cc196c9b --- /dev/null +++ b/public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php @@ -0,0 +1,28 @@ + + + +
+
+ +

${post_title}

+ +
+ Time: + +
+ + ${?location} +
+ Location: +
${location}
+
+ ${/?location} + +
+
+ + diff --git a/public/app/themes/clarity/src/components/c-events-item-byline/view.php b/public/app/themes/clarity/src/components/c-events-item-byline/view.php index 1129bd5ba..2186e19ab 100644 --- a/public/app/themes/clarity/src/components/c-events-item-byline/view.php +++ b/public/app/themes/clarity/src/components/c-events-item-byline/view.php @@ -25,6 +25,7 @@ } } else { $time = 'All day'; + // TODO: fix bug, I think this variable leaks over to next events in the loop. $datetime = 'P1D'; //period 1 day duration } ?> diff --git a/public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php b/public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php new file mode 100644 index 000000000..2e8b4c654 --- /dev/null +++ b/public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php @@ -0,0 +1,14 @@ + + + diff --git a/public/app/themes/clarity/src/globals/js/ajax-filter.js b/public/app/themes/clarity/src/globals/js/ajax-filter.js index 059e7bd7b..f282d64ed 100644 --- a/public/app/themes/clarity/src/globals/js/ajax-filter.js +++ b/public/app/themes/clarity/src/globals/js/ajax-filter.js @@ -38,7 +38,7 @@ export default (function ($) { }) => { // Remove all articles if page is 1. if (currentPage === 1) { - $(".c-article-item").remove(); + $(".c-article-item, .c-events-item-list").remove(); } const t = new AjaxTemplating(templateName); @@ -57,6 +57,11 @@ export default (function ($) { */ const renderPagination = ({ currentPage, resultsPerPage, totalResults }) => { + + if(resultsPerPage === undefined || resultsPerPage === -1) { + return; + } + const isLastPage = currentPage * resultsPerPage >= totalResults; const paginationTitle = ({ totalResults, isLastPage }) => { @@ -121,11 +126,6 @@ export default (function ($) { return false; } - if (key === "post_type" && value === "posts") { - console.error("posts needs to transformed to post! or edit the form"); - value = "post"; - } - return true; }); From fcee827aecba8b64de3fda82148233b7aa8e7ac6 Mon Sep 17 00:00:00 2001 From: EarthlingDavey <15802017+EarthlingDavey@users.noreply.github.com> Date: Tue, 15 Oct 2024 17:02:03 +0100 Subject: [PATCH 4/6] Comment the js. --- .../clarity/src/globals/js/ajax-filter.js | 140 +---------------- .../clarity/src/globals/js/ajax-templating.js | 3 +- .../clarity/src/globals/js/ajax-utils.js | 144 ++++++++++++++++++ 3 files changed, 149 insertions(+), 138 deletions(-) create mode 100644 public/app/themes/clarity/src/globals/js/ajax-utils.js diff --git a/public/app/themes/clarity/src/globals/js/ajax-filter.js b/public/app/themes/clarity/src/globals/js/ajax-filter.js index f282d64ed..8c5451fc4 100644 --- a/public/app/themes/clarity/src/globals/js/ajax-filter.js +++ b/public/app/themes/clarity/src/globals/js/ajax-filter.js @@ -1,140 +1,8 @@ -import AjaxTemplating from "./ajax-templating.js"; +import { getFormData, renderResults, renderPagination } from "./ajax-utils.js"; export default (function ($) { - /** - * Render the response to the page. - * - * The results type should match the php response object - * as returned by the `FilterSearch->mapResults()` method. - * @typedef {Object} Post - * @property {string} ID - * @property {string} post_title - * @property {string} post_date_formatted - * @property {string} post_excerpt_formatted - * @property {string} permalink - * @property {string} post_type - * @property {string} post_thumbnail - * @property {string} post_thumbnail_alt - * - * @typedef {Object} Results - * @property {Post[]} posts - * @property {string} templateName - * - * The response type should match the php response object - * as returned by the `FilterSearch->loadSearchResults()` method. - * @typedef {Object} Response - * @property {Object} aggregates - * @property {number} aggregates.currentPage - * @property {number} aggregates.resultsPerPage - * @property {number} aggregates.totalResults - * @property {Results} results - * - * @param {Response} response - */ - - const renderResults = ({ - results: { posts, templateName }, - aggregates: { currentPage, totalResults }, - }) => { - // Remove all articles if page is 1. - if (currentPage === 1) { - $(".c-article-item, .c-events-item-list").remove(); - } - - const t = new AjaxTemplating(templateName); - - const resultsHtml = posts.map((props) => t.renderHtml(props)); - - // Append the html to the content section. - $("#content").append(resultsHtml); - - // Update the title. - $("#title-section").text(`${totalResults} search results`); - }; - - /** - * Render pagination to the page. - */ - - const renderPagination = ({ currentPage, resultsPerPage, totalResults }) => { - - if(resultsPerPage === undefined || resultsPerPage === -1) { - return; - } - - const isLastPage = currentPage * resultsPerPage >= totalResults; - - const paginationTitle = ({ totalResults, isLastPage }) => { - if (!totalResults) { - return "No Results"; - } - if (isLastPage) { - return "No More Results"; - } - return `Load Next ${resultsPerPage} Results`; - }; - - const template = new AjaxTemplating("pagination"); - - // Update the pagination. - const paginationHtml = template.renderHtml({ - title: paginationTitle({ totalResults, isLastPage }), - // Disable the button if it's the last page. - disabled: isLastPage ? `disabled="disabled"` : "", - // Adjust the zero-indexed current page. - currentPageFormatted: parseInt(currentPage), - // Calculate the total pages - if no results, then set as 1 to render '1 of 1'. - totalPages: !totalResults ? 1 : Math.ceil(totalResults / resultsPerPage), - }); - - $(".c-pagination").html(paginationHtml); - - // Update the page number on the pagination element. - if (!isLastPage) { - $(".c-pagination button").attr("data-page", currentPage + 1); - } - }; - - /** - * Parse a form instance into an object. - * - * @param {HTMLElement} form - * @returns {[string, string][]} - */ - - const getFormData = (form) => { - const formData = new FormData(form); - - const prefix = formData.get("prefix"); - - // Loop all form entries, remove the prefix from keys, and assign to data. - const entries = [...formData.entries()] - .map(([key, value]) => { - // Remove prefix if it exists. - const newKey = key.startsWith(prefix) ? key.replace(prefix, "") : key; - - // Parse the page number to integer. - if ("page" === newKey) { - value = parseInt(value); - } - - return [newKey, value]; - }) - .filter(([key, value]) => { - // Skip prefix and template keys, and empty values. - if (["prefix"].includes(key) || value === "") { - return false; - } - - return true; - }); - - entries.push(["action", $(form).attr("action")]); - - return Object.fromEntries(entries); - }; - $.fn.moji_ajaxFilter = function () { + // Default ajax props. const DEFAULT_AJAX_PROPS = { type: "POST", url: mojAjax.ajaxurl, @@ -147,12 +15,10 @@ export default (function ($) { const $form = $("#ff, #ff_events"); - const initialFormData = getFormData($form.get(0)); - // On page load get the ajax props and store them on the pagination element. $(".c-pagination").data("ajax-props", { ...DEFAULT_AJAX_PROPS, - data: initialFormData, + data: getFormData($form.get(0)), }); /** diff --git a/public/app/themes/clarity/src/globals/js/ajax-templating.js b/public/app/themes/clarity/src/globals/js/ajax-templating.js index 38d039aaf..8df0fe418 100644 --- a/public/app/themes/clarity/src/globals/js/ajax-templating.js +++ b/public/app/themes/clarity/src/globals/js/ajax-templating.js @@ -1,6 +1,7 @@ /** - * This Class is responsible for rendering HTML from AJAX template. + * This class is responsible for rendering HTML from an AJAX template. * + * This is an extension of a bare bones templating engine. * @see https://stackoverflow.com/a/39065147/6671505 * * @example diff --git a/public/app/themes/clarity/src/globals/js/ajax-utils.js b/public/app/themes/clarity/src/globals/js/ajax-utils.js new file mode 100644 index 000000000..9bfd410fc --- /dev/null +++ b/public/app/themes/clarity/src/globals/js/ajax-utils.js @@ -0,0 +1,144 @@ +import AjaxTemplating from "./ajax-templating.js"; + +/** + * Parse the values of a form instance into an object. + * + * @param {HTMLElement} form + * @returns {[string, string][]} + */ + +export const getFormData = (form) => { + const formData = new FormData(form); + + const prefix = formData.get("prefix"); + + // Loop all form entries, remove the prefix from keys, and assign to data. + const entries = [...formData.entries()] + .map(([key, value]) => { + // Remove prefix if it exists. + const newKey = key.startsWith(prefix) ? key.replace(prefix, "") : key; + + // Parse the page number to integer. + if ("page" === newKey) { + value = parseInt(value); + } + + return [newKey, value]; + }) + .filter(([key, value]) => { + // Skip prefix and template keys, and empty values. + if (["prefix"].includes(key) || value === "") { + return false; + } + + return true; + }); + + entries.push(["action", $(form).attr("action")]); + + return Object.fromEntries(entries); +}; + +/** + * Render the response to the page. + * + * The results type should match the php response object + * as returned by the `FilterSearch->mapResults()` method. + * + * @typedef {Object} Post + * @property {string} ID + * @property {string} post_title + * @property {string} post_date_formatted + * @property {string} post_excerpt_formatted + * @property {string} permalink + * @property {string} post_type + * @property {string} post_thumbnail + * @property {string} post_thumbnail_alt + * + * @typedef {Object} Results + * @property {Post[]} posts + * @property {string} templateName + * + * The response type should match the php response object + * as returned by the `FilterSearch->loadSearchResults()` method. + * + * @typedef {Object} Response + * @property {Object} aggregates + * @property {number} aggregates.currentPage + * @property {number} aggregates.resultsPerPage + * @property {number} aggregates.totalResults + * @property {Results} results + * + * @param {Response} response + */ + +export const renderResults = ({ + results: { posts, templateName }, + aggregates: { currentPage, totalResults }, +}) => { + // Remove all articles if page is 1. + if (currentPage === 1) { + $(".c-article-item, .c-events-item-list").remove(); + } + + // Load an instance of the AjaxTemplating class. + const t = new AjaxTemplating(templateName); + + // Render the html for each post. + const resultsHtml = posts.map((props) => t.renderHtml(props)); + + // Append the html to the content section. + $("#content").append(resultsHtml); + + // Update the title. + $("#title-section").text(`${totalResults} search results`); +}; + +/** + * Render pagination to the page. + * + * @param {Object} props + * @param {number} props.currentPage + * @param {number} props.resultsPerPage + * @param {number} props.totalResults + * + * @returns {void} + */ + +export const renderPagination = ({ currentPage, resultsPerPage, totalResults }) => { + if (resultsPerPage === undefined || resultsPerPage === -1) { + return; + } + + const isLastPage = currentPage * resultsPerPage >= totalResults; + + const paginationTitle = ({ totalResults, isLastPage }) => { + if (!totalResults) { + return "No Results"; + } + if (isLastPage) { + return "No More Results"; + } + return `Load Next ${resultsPerPage} Results`; + }; + + const template = new AjaxTemplating("pagination"); + + // Update the pagination. + const paginationHtml = template.renderHtml({ + title: paginationTitle({ totalResults, isLastPage }), + // Disable the button if it's the last page. + disabled: isLastPage ? `disabled="disabled"` : "", + // Adjust the zero-indexed current page. + currentPageFormatted: parseInt(currentPage), + // Calculate the total pages - if no results, then set as 1 to render '1 of 1'. + totalPages: !totalResults ? 1 : Math.ceil(totalResults / resultsPerPage), + }); + + $(".c-pagination").html(paginationHtml); + + // Update the page number on the pagination element. + if (!isLastPage) { + $(".c-pagination button").attr("data-page", currentPage + 1); + } +}; From 59245e663477198fe438debbb43be11042c55c65 Mon Sep 17 00:00:00 2001 From: EarthlingDavey <15802017+EarthlingDavey@users.noreply.github.com> Date: Tue, 15 Oct 2024 17:08:01 +0100 Subject: [PATCH 5/6] Comment the php --- .../clarity/src/components/c-article-item/style.styl | 2 -- .../clarity/src/components/c-calendar-icon/view.ajax.php | 7 +++++++ .../clarity/src/components/c-content-filter/view.php | 2 +- .../src/components/c-events-item-byline/view.ajax.php | 7 +++++++ .../src/components/c-events-item/view-list.ajax.php | 5 +++++ 5 files changed, 20 insertions(+), 3 deletions(-) diff --git a/public/app/themes/clarity/src/components/c-article-item/style.styl b/public/app/themes/clarity/src/components/c-article-item/style.styl index e77876550..8f1d197b1 100644 --- a/public/app/themes/clarity/src/components/c-article-item/style.styl +++ b/public/app/themes/clarity/src/components/c-article-item/style.styl @@ -107,8 +107,6 @@ } } - - &__note-from-antonia.v-align { display: flex; align-items: center; diff --git a/public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php b/public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php index c454d82de..e4730e8f5 100644 --- a/public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php +++ b/public/app/themes/clarity/src/components/c-calendar-icon/view.ajax.php @@ -1,5 +1,12 @@ diff --git a/public/app/themes/clarity/src/components/c-content-filter/view.php b/public/app/themes/clarity/src/components/c-content-filter/view.php index b42dc8680..65de4ceea 100644 --- a/public/app/themes/clarity/src/components/c-content-filter/view.php +++ b/public/app/themes/clarity/src/components/c-content-filter/view.php @@ -45,4 +45,4 @@
- \ No newline at end of file + diff --git a/public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php b/public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php index 8cc196c9b..a252d3273 100644 --- a/public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php +++ b/public/app/themes/clarity/src/components/c-events-item-byline/view.ajax.php @@ -1,5 +1,12 @@ diff --git a/public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php b/public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php index 2e8b4c654..235ccdcf0 100644 --- a/public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php +++ b/public/app/themes/clarity/src/components/c-events-item/view-list.ajax.php @@ -1,5 +1,10 @@ From c04ddba70423d5418d3d6146f765b42f95d3970f Mon Sep 17 00:00:00 2001 From: EarthlingDavey <15802017+EarthlingDavey@users.noreply.github.com> Date: Tue, 15 Oct 2024 17:21:55 +0100 Subject: [PATCH 6/6] Move SearchQueryArgs to own file. --- public/app/themes/clarity/functions.php | 1 + .../inc/content-filter/search-query.php | 94 +++++++++++++++++++ .../clarity/inc/content-filter/search.php | 92 +----------------- 3 files changed, 98 insertions(+), 89 deletions(-) create mode 100644 public/app/themes/clarity/inc/content-filter/search-query.php diff --git a/public/app/themes/clarity/functions.php b/public/app/themes/clarity/functions.php index b5ce4e6c0..cdb9a3c78 100644 --- a/public/app/themes/clarity/functions.php +++ b/public/app/themes/clarity/functions.php @@ -75,6 +75,7 @@ require_once 'inc/cookies.php'; require_once 'inc/comments.php'; require_once 'inc/constants.php'; +require_once 'inc/content-filter/search-query.php'; require_once 'inc/content-filter/search.php'; require_once 'inc/enqueue.php'; require_once 'inc/form-builder.php'; diff --git a/public/app/themes/clarity/inc/content-filter/search-query.php b/public/app/themes/clarity/inc/content-filter/search-query.php new file mode 100644 index 000000000..d719c66f7 --- /dev/null +++ b/public/app/themes/clarity/inc/content-filter/search-query.php @@ -0,0 +1,94 @@ +page ? (($this->page - 1) * $this->posts_per_page) : 0; + + $args = [ + 'posts_per_page' => $this->posts_per_page, + 'post_type' => $this->post_type, + 'post_status' => 'publish', + 'offset' => $offset, + ...($this->exclude_current ? ['post__not_in' => [get_the_ID()]] : []), + 'tax_query' => [ + 'relation' => 'AND', + [ + 'taxonomy' => 'agency', + 'field' => 'term_id', + 'terms' => $this->agency_term_id + ], + // If the region is set add its ID to the taxonomy query + ...(!empty($this->region_id) ? [ + 'taxonomy' => 'region', + 'field' => 'region_id', + 'terms' => $this->region_id, + ] : []), + // If the news category is set add its ID unless the query is regional, + // as it will have already been added to the tax query. + ...(!empty($this->news_category_id) && empty($this->region_id) ? [ + 'taxonomy' => 'news_category', + 'field' => 'category_id', + 'terms' => $this->news_category_id, + ] : []), + ] + ]; + + // Parse dates from the date filter. + if (!empty($this->date_filter)) { + preg_match('/&after=([^&]*)&before=([^&]*)/', $this->date_filter, $matches); + $args['date_query'] = [ + 'after' => date('Y-m-d', strtotime($matches[1])), + 'before' => date('Y-m-d', strtotime($matches[2])), + 'inclusive' => false, + ]; + } + + // If there is a search query, set the orderby to relevance. + if (!empty($this->keywords_filter)) { + $args['orderby'] = 'relevance'; + $args['s'] = $this->keywords_filter; + } + + return $args; + } +} \ No newline at end of file diff --git a/public/app/themes/clarity/inc/content-filter/search.php b/public/app/themes/clarity/inc/content-filter/search.php index 301929a5f..275145421 100644 --- a/public/app/themes/clarity/inc/content-filter/search.php +++ b/public/app/themes/clarity/inc/content-filter/search.php @@ -10,99 +10,13 @@ namespace MOJ\Intranet; +defined('ABSPATH') || exit; + use MOJ\Intranet\Agency; use MOJ\Intranet\EventsHelper; +use MOJ\Intranet\SearchQueryArgs; use WP_Query; - -/** - * QueryProps - * - * This class is responsible for handling the query properties. - * - * @package Clarity - * - * @property string $agency - The active agency. - * @property string $post_type - The post type. - * @property int $page - The page number. - * @property int $posts_per_page - The number of posts per page. - * @property ?bool $exclude_current - Exclude the current post. - * @property ?string $keywords_filter - The keywords filter. - * @property ?string $date_filter - The date filter. - * @property ?string $news_category_id - The news category ID. - * @property ?string $region_id - The region ID. - * - * @return void - */ - -class SearchQueryArgs -{ - public function __construct( - public string $agency_term_id, - public string $post_type, - public int $page, - public int $posts_per_page = 10, - public ?bool $exclude_current = false, - public ?string $keywords_filter = null, - public ?string $date_filter = null, - public ?string $news_category_id = null, - public ?string $region_id = null, - ) {} - - function get() - { - // Pagination. - $offset = $this->page ? (($this->page - 1) * $this->posts_per_page) : 0; - - $args = [ - 'posts_per_page' => $this->posts_per_page, - 'post_type' => $this->post_type, - 'post_status' => 'publish', - 'offset' => $offset, - ...($this->exclude_current ? ['post__not_in' => [get_the_ID()]] : []), - 'tax_query' => [ - 'relation' => 'AND', - [ - 'taxonomy' => 'agency', - 'field' => 'term_id', - 'terms' => $this->agency_term_id - ], - // If the region is set add its ID to the taxonomy query - ...(!empty($this->region_id) ? [ - 'taxonomy' => 'region', - 'field' => 'region_id', - 'terms' => $this->region_id, - ] : []), - // If the news category is set add its ID unless the query is regional, - // as it will have already been added to the tax query. - ...(!empty($this->news_category_id) && empty($this->region_id) ? [ - 'taxonomy' => 'news_category', - 'field' => 'category_id', - 'terms' => $this->news_category_id, - ] : []), - ] - ]; - - // Parse dates from the date filter. - if (!empty($this->date_filter)) { - preg_match('/&after=([^&]*)&before=([^&]*)/', $this->date_filter, $matches); - $args['date_query'] = [ - 'after' => date('Y-m-d', strtotime($matches[1])), - 'before' => date('Y-m-d', strtotime($matches[2])), - 'inclusive' => false, - ]; - } - - // If there is a search query, set the orderby to relevance. - if (!empty($this->keywords_filter)) { - $args['orderby'] = 'relevance'; - $args['s'] = $this->keywords_filter; - } - - return $args; - } -} - class Search {