diff --git a/includes/api.php b/includes/api.php index 540f99d..d20cf0e 100644 --- a/includes/api.php +++ b/includes/api.php @@ -4,35 +4,6 @@ add_action('rest_api_init', function () { - /* --------------------------- - SHIPPING ROUTES - ---------------------------*/ - // Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301 - // register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P\d+)', array( - // 'methods' => 'GET', - // 'callback' => 'get_questions_posts_per_thematique_id', - // 'permission_callback' => '__return_true', - // 'args' => array( - // 'excluded_ids' => array( - // 'sanitize_callback' => 'sanitize_text_field', - // ), - // ), - // )); - // // * SHIP ALL NEWS - // register_rest_route('homegrade-datas/v1', '/news', array( - // 'methods' => 'GET', - // 'callback' => 'get_news', - // 'permission_callback' => '__return_true', - - // )); - // // * SHIP NEWS BY TYPE - // register_rest_route('homegrade-datas/v1', '/news/type/(?P\d+)', array( - // 'methods' => 'GET', - // 'callback' => 'get_news_posts_per_type_id', - // 'permission_callback' => '__return_true', - // )); - - /* ---------------- BUILDING ROUTES -----------------*/ @@ -40,18 +11,22 @@ add_action('rest_api_init', function () { // ################ NEWS ################ // * BUILD ALL NEWS CARDS - register_rest_route('homegrade-datas/v1/build', '/news', array( + register_rest_route('homegrade-datas/v1/build', '/news/all', array( 'methods' => 'GET', 'callback' => 'build_news_posts_feed_all', 'permission_callback' => '__return_true', - + )); + // * BUILD MORE NEWS CARDS + register_rest_route('homegrade-datas/v1/build', '/news/more', array( + 'methods' => 'GET', + 'callback' => 'build_news_posts_more_posts', + 'permission_callback' => '__return_true', )); // * BUILD NEWS CARDS BY NEWS TYPE register_rest_route('homegrade-datas/v1/build', '/news/type/(?P\d+)', array( 'methods' => 'GET', 'callback' => 'build_news_posts_feed_per_type_id', 'permission_callback' => '__return_true', - )); // ################ PUBLICATIONS ################ @@ -100,7 +75,11 @@ add_action('rest_api_init', function () { function build_news_posts_feed_all($request) { + $currentLanguage = $request->get_param('current-page-language') ?? 'fr'; + do_action('wpml_switch_language', $currentLanguage); + $args = array( + "status" => "publish", "post_type" => "post", "posts_per_page" => -1, ); @@ -129,6 +108,8 @@ function build_news_posts_feed_all($request) $response_data = array( 'html_template' => $html_template, 'total_posts_found' => $newsPostsDatas->found_posts, + 'active_page' => 1, + 'max_num_pages' => 1, ); $response = new WP_REST_Response($response_data); @@ -138,12 +119,19 @@ function build_news_posts_feed_all($request) } function build_news_posts_feed_per_type_id($request) { + $currentLanguage = $request->get_param('current-page-language') ?? 'fr'; + $activePage = $request->get_param('active-page') ?? 1; + $postsPerPage = esc_html($request->get_param('posts-per-page')) ?? 8; + + do_action('wpml_switch_language', $currentLanguage); + $typeId = esc_html($request['typeId']); if (!$typeId || (!is_numeric($typeId))) return; $args = array( + "status" => "publish", "post_type" => "post", - "posts_per_page" => -1, + "posts_per_page" => $postsPerPage, "tax_query" => array( array( @@ -178,6 +166,71 @@ function build_news_posts_feed_per_type_id($request) $response_data = array( 'html_template' => $html_template, 'total_posts_found' => $newsPostsDatas->found_posts, + 'active_page' => 1, + 'max_num_pages' => $newsPostsDatas->max_num_pages, + ); + + + $response = new WP_REST_Response($response_data); + + $response->set_status(200); + + return $response; +} + +function build_news_posts_more_posts($request) +{ + $currentLanguage = esc_html($request->get_param('current-page-language')) ?? 'fr'; + $previousActivePage = esc_html($request->get_param('active-page')) ?? 1; + $activeTermID = esc_html($request->get_param('active-term-id')); + $postsPerPage = esc_html($request->get_param('posts-per-page')) ?? 12; + + $activePage = is_numeric($previousActivePage) ? $previousActivePage + 1 : 1; + + $taxQuery = $activeTermID && is_numeric($activeTermID) ? array( + array( + 'taxonomy' => 'news_type', + 'field' => 'term_id', + 'terms' => $activeTermID + ) + ) : null; + + + do_action('wpml_switch_language', $currentLanguage); + + $args = array( + "status" => "publish", + "post_type" => "post", + "posts_per_page" => $postsPerPage, + "paged" => $activePage, + "tax_query" => $taxQuery + ); + $newsPostsDatas = new WP_Query($args); + + ob_start(); + foreach ($newsPostsDatas->posts as $key => $post) { + $post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null; + $news_type = get_the_terms($post->ID, "news_type") ?? null; + get_template_part( + 'template-components/cards/card-news', + null, + array( + 'card_variant' => 'activite', + 'post_ID' => $post->ID, + 'post_title' => get_the_title($post->ID), + 'post_thumbnail' => $post_thumbnail, + 'news_type' => $news_type, + ) + ); + } + + $html_template = ob_get_clean(); + + $response_data = array( + 'html_template' => $html_template, + 'total_posts_found' => $newsPostsDatas->found_posts, + 'active_page' => $activePage, + 'max_num_pages' => $newsPostsDatas->max_num_pages, ); @@ -460,6 +513,34 @@ function build_faq_details_rows_all_from_one_thematique(WP_REST_Request $request + /* --------------------------- + SHIPPING ROUTES + ---------------------------*/ + // Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301 + // register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P\d+)', array( + // 'methods' => 'GET', + // 'callback' => 'get_questions_posts_per_thematique_id', + // 'permission_callback' => '__return_true', + // 'args' => array( + // 'excluded_ids' => array( + // 'sanitize_callback' => 'sanitize_text_field', + // ), + // ), + // )); + // // * SHIP ALL NEWS + // register_rest_route('homegrade-datas/v1', '/news', array( + // 'methods' => 'GET', + // 'callback' => 'get_news', + // 'permission_callback' => '__return_true', + + // )); + // // * SHIP NEWS BY TYPE + // register_rest_route('homegrade-datas/v1', '/news/type/(?P\d+)', array( + // 'methods' => 'GET', + // 'callback' => 'get_news_posts_per_type_id', + // 'permission_callback' => '__return_true', + // )); + // function get_news($request) // { // $args = array( diff --git a/resources/css/pages/template-archives-news.css b/resources/css/pages/template-archives-news.css index 5ebecee..85695dc 100644 --- a/resources/css/pages/template-archives-news.css +++ b/resources/css/pages/template-archives-news.css @@ -5,4 +5,7 @@ .card-grid-container[isLoading] { @apply opacity-30; } + .load-news { + @apply mx-auto w-fit gap-8 flex pb-16; + } } diff --git a/resources/js/archive-template-news.js b/resources/js/archive-template-news.js index dcd8c4e..312ad5d 100644 --- a/resources/js/archive-template-news.js +++ b/resources/js/archive-template-news.js @@ -1,3 +1,6 @@ +// ######################### +// ### FILTER POSTS +// ######################### async function filterPosts(e) { const filterID = e.target.getAttribute('data-term-id') ?? @@ -22,21 +25,45 @@ async function filterPosts(e) { e.target.classList.add('filters-toolbar__action-button--active'); e.target.setAttribute('aria-pressed', 'true'); + + updateActivePageNumber(1); } -async function hydrateNewsFeedByTypeId(filterID, termName) { - let newCardsDatas; - if (filterID === 'all') { - const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`); - newCardsDatas = await response.json(); - } else { - const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`); - newCardsDatas = await response.json(); +async function loadMorePosts(e) { + const newsContainer = document.querySelector('.news-container .card-grid-container'); + newsContainer.setAttribute('isLoading', true); + await hydrateNewsFeedWithNextPosts(); + newsContainer.removeAttribute('isLoading'); +} + +// ################################### +// ### UPDATE INDICATORS AND DISPLAY +// ################################### +function updateActivePageNumber(activePage) { + const filtersToolbar = document.querySelector('.filters-toolbar--archive-news'); + filtersToolbar.setAttribute('data-active-page', activePage); +} + +function updateHasMorePosts(activePage, maxNumPages) { + const filtersToolbar = document.querySelector('.filters-toolbar--archive-news'); + + filtersToolbar.setAttribute('data-has-more-posts', activePage < maxNumPages); +} + +function checkLoadMoreButtonsVisibility() { + const loadMoreButton = document.querySelector('#load-more-news'); + const loadAllButton = document.querySelector('#load-all-news'); + const filtersToolbar = document.querySelector('.filters-toolbar--archive-news'); + const hasMorePosts = filtersToolbar.getAttribute('data-has-more-posts') === 'true'; + + if (hasMorePosts) { + loadMoreButton.removeAttribute('hidden'); + loadAllButton.removeAttribute('hidden'); + return; } - let container = document.querySelector('.card-grid-container'); - container.innerHTML = newCardsDatas.html_template; - updateSearchResultsAmount(newCardsDatas.total_posts_found, termName); + loadAllButton.setAttribute('hidden', 'true'); + loadMoreButton.setAttribute('hidden', 'true'); } function updateSearchResultsAmount(totalPostsFound, termName) { @@ -57,6 +84,95 @@ function updateSearchResultsAmount(totalPostsFound, termName) { return; } } + +function updateToolbarActiveFilter(termId) { + const filterToolbar = document.querySelector('.filters-toolbar--archive-news'); + if (!filterToolbar) return; + + filterToolbar.setAttribute('data-active-news-term', termId); +} + +// ######################### +// ### HYDRATATION +// ######################### +async function hydrateNewsFeedByTypeId(filterID, termName) { + const currentLanguage = document.querySelector('body').getAttribute('current-language'); + const filtersToolbar = document.querySelector('.filters-toolbar--archive-news'); + + const postsPerPage = filtersToolbar.getAttribute('data-posts-per-page') ?? 12; + const activePage = filtersToolbar.getAttribute('data-active-page'); + + let newCardsDatas; + if (filterID === 'all') { + // const response = await fetch( + // `/wp-json/homegrade-datas/v1/build/news/all?current-page-language=${currentLanguage}&active-page=${activePage}&posts-per-page=${postsPerPage}` + // ); + const response = await fetch( + `/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${0}&posts-per-page=${postsPerPage}` + ); + newCardsDatas = await response.json(); + } else { + // const response = await fetch( + // `/wp-json/homegrade-datas/v1/build/news/type/${filterID}?current-page-language=${currentLanguage}&active-page=${activePage}&posts-per-page=${postsPerPage}` + // ); + const response = await fetch( + `/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${0}&active-term-id=${filterID}&posts-per-page=${postsPerPage}` + ); + newCardsDatas = await response.json(); + } + + let container = document.querySelector('.card-grid-container'); + container.innerHTML = newCardsDatas.html_template; + + updateToolbarActiveFilter(filterID); + updateSearchResultsAmount(newCardsDatas.total_posts_found, termName); + updateHasMorePosts(newCardsDatas.active_page, newCardsDatas.max_num_pages); + console.log(newCardsDatas.active_page, newCardsDatas.max_num_pages); + checkLoadMoreButtonsVisibility(); +} + +async function hydrateNewsFeedWithAllPosts() { + const currentLanguage = document.querySelector('body').getAttribute('current-language'); + const activeNewsTermId = + document + .querySelector('.filters-toolbar--archive-news') + .getAttribute('data-active-news-term') ?? null; + const response = await fetch( + `/wp-json/homegrade-datas/v1/build/news/all?current-page-language=${currentLanguage}` + ); + newsDatas = await response.json(); + + const newsGrid = document.querySelector('.news-container .card-grid-container'); + newsGrid.innerHTML = newsDatas.html_template; + + updateHasMorePosts(newsDatas.active_page, newsDatas.max_num_pages); + checkLoadMoreButtonsVisibility(); +} + +async function hydrateNewsFeedWithNextPosts() { + const currentLanguage = document.querySelector('body').getAttribute('current-language'); + const filtersToolbar = document.querySelector('.filters-toolbar--archive-news'); + + const activePage = filtersToolbar.getAttribute('data-active-page') ?? 1; + const postsPerPage = filtersToolbar.getAttribute('data-posts-per-page') ?? 12; + const activeNewsTermId = filtersToolbar.getAttribute('data-active-news-term') ?? 'all'; + + const response = await fetch( + `/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${activePage}&active-term-id=${activeNewsTermId}&posts-per-page=${postsPerPage}` + ); + newsDatas = await response.json(); + + const newsGrid = document.querySelector('.news-container .card-grid-container'); + newsGrid.innerHTML += newsDatas.html_template; + + updateActivePageNumber(newsDatas.active_page); + updateHasMorePosts(newsDatas.active_page, newsDatas.max_num_pages); + checkLoadMoreButtonsVisibility(); +} + +// ######################### +// ### INIT +// ######################### function filterNewsInit() { const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news'); if (!filterNewsToolbar) return; @@ -69,15 +185,16 @@ function filterNewsInit() { button.addEventListener('click', (e) => filterPosts(e)); }); } + function loadMoreNewsInit() { + const loadAllButton = document.querySelector('#load-all-news'); const loadMoreButton = document.querySelector('#load-more-news'); - if (!loadMoreButton) return; - function loadMoreNews() { - console.log('loadMoreNews'); - } + // if (!loadAllButton) return; + loadAllButton.addEventListener('click', hydrateNewsFeedWithAllPosts); - loadMoreButton.addEventListener('click', loadMoreNews); + // if (!loadMoreButton) return; + loadMoreButton.addEventListener('click', loadMorePosts); } export default function archiveNewsInit() { diff --git a/template-archive-news.php b/template-archive-news.php index 4d93d8c..93ff892 100644 --- a/template-archive-news.php +++ b/template-archive-news.php @@ -8,14 +8,16 @@ $args = array( $relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null; $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null; -$post_per_page = 24; +$posts_per_page = 4; $args = array( "post_type" => "post", "status" => "publish", - "posts_per_page" => $post_per_page, + "posts_per_page" => $posts_per_page, + // "paged" => 1, ); $posts = new WP_Query($args); + ?>
-
+

found_posts ?> @@ -131,9 +133,11 @@ $posts = new WP_Query($args); ?>

- max_num_pages > 1) : ?> - +
+ + +