FEATURE refining block features and handling load more

This commit is contained in:
Antoine M 2026-04-08 15:52:40 +02:00
parent 8f28d999a2
commit 08ae57586e
9 changed files with 135 additions and 341 deletions

View File

@ -1,4 +1 @@
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/dbmob-archives/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

View File

@ -1,312 +1 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/dbmob-archives/block.json":
/*!***************************************!*\
!*** ./src/dbmob-archives/block.json ***!
\***************************************/
/***/ ((module) => {
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/dbmob-archives","version":"0.1.0","title":"Archives des notices biographiques","category":"carhop-blocks","icon":"smiley","description":"Archives des notices biographiques","supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","viewScript":"file:./view.js"}');
/***/ }),
/***/ "./src/dbmob-archives/edit.js":
/*!************************************!*\
!*** ./src/dbmob-archives/edit.js ***!
\************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ });
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/dbmob-archives/editor.scss");
/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/server-side-render */ "@wordpress/server-side-render");
/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
function Edit() {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)(),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_3__.ServerSideRender, {
block: "carhop-blocks/dbmob-archives"
})
});
}
/***/ }),
/***/ "./src/dbmob-archives/editor.scss":
/*!****************************************!*\
!*** ./src/dbmob-archives/editor.scss ***!
\****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/dbmob-archives/index.js":
/*!*************************************!*\
!*** ./src/dbmob-archives/index.js ***!
\*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/dbmob-archives/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/dbmob-archives/edit.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/dbmob-archives/block.json");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"]
});
/***/ }),
/***/ "./src/dbmob-archives/style.scss":
/*!***************************************!*\
!*** ./src/dbmob-archives/style.scss ***!
\***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
\*************************************/
/***/ ((module) => {
module.exports = window["wp"]["blockEditor"];
/***/ }),
/***/ "@wordpress/blocks":
/*!********************************!*\
!*** external ["wp","blocks"] ***!
\********************************/
/***/ ((module) => {
module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/i18n":
/*!******************************!*\
!*** external ["wp","i18n"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["i18n"];
/***/ }),
/***/ "@wordpress/server-side-render":
/*!******************************************!*\
!*** external ["wp","serverSideRender"] ***!
\******************************************/
/***/ ((module) => {
module.exports = window["wp"]["serverSideRender"];
/***/ }),
/***/ "react/jsx-runtime":
/*!**********************************!*\
!*** external "ReactJSXRuntime" ***!
\**********************************/
/***/ ((module) => {
module.exports = window["ReactJSXRuntime"];
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/chunk loaded */
/******/ (() => {
/******/ var deferred = [];
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var [chunkIds, fn, priority] = deferred[i];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "dbmob-archives/index": 0,
/******/ "dbmob-archives/style-index": 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var [chunkIds, moreModules, runtime] = data;
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = globalThis["webpackChunkcarhop_blocks"] = globalThis["webpackChunkcarhop_blocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["dbmob-archives/style-index"], () => (__webpack_require__("./src/dbmob-archives/index.js")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;
//# sourceMappingURL=index.js.map
(()=>{"use strict";var r,e={1660:()=>{const r=window.wp.blocks,e=(window.wp.i18n,window.wp.blockEditor),o=window.wp.serverSideRender,i=window.ReactJSXRuntime,n=JSON.parse('{"UU":"carhop-blocks/dbmob-archives"}');(0,r.registerBlockType)(n.UU,{edit:function(){return(0,i.jsx)("div",{...(0,e.useBlockProps)(),children:(0,i.jsx)(o.ServerSideRender,{block:"carhop-blocks/dbmob-archives"})})}})}},o={};function i(r){var n=o[r];if(void 0!==n)return n.exports;var s=o[r]={exports:{}};return e[r](s,s.exports,i),s.exports}i.m=e,r=[],i.O=(e,o,n,s)=>{if(!o){var c=1/0;for(p=0;p<r.length;p++){for(var[o,n,s]=r[p],t=!0,a=0;a<o.length;a++)(!1&s||c>=s)&&Object.keys(i.O).every(r=>i.O[r](o[a]))?o.splice(a--,1):(t=!1,s<c&&(c=s));if(t){r.splice(p--,1);var l=n();void 0!==l&&(e=l)}}return e}s=s||0;for(var p=r.length;p>0&&r[p-1][2]>s;p--)r[p]=r[p-1];r[p]=[o,n,s]},i.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={7966:0,4546:0};i.O.j=e=>0===r[e];var e=(e,o)=>{var n,s,[c,t,a]=o,l=0;if(c.some(e=>0!==r[e])){for(n in t)i.o(t,n)&&(i.m[n]=t[n]);if(a)var p=a(i)}for(e&&e(o);l<c.length;l++)s=c[l],i.o(r,s)&&r[s]&&r[s][0](),r[s]=0;return i.O(p)},o=globalThis.webpackChunkcarhop_blocks=globalThis.webpackChunkcarhop_blocks||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})();var n=i.O(void 0,[4546],()=>i(1660));n=i.O(n)})();

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,10 @@
<?php
$initialPostDisplayAmount = 10;
$args = array(
'post_type' => 'dbmob',
'posts_per_page' => -1,
'posts_per_page' => $initialPostDisplayAmount,
);
$query = new WP_Query($args);
$post_count = $query->found_posts;
@ -10,7 +12,7 @@ $post_count = $query->found_posts;
<section <?php echo get_block_wrapper_attributes(); ?>>
<h2>Les notices rédigées par le CARHOP</h2>
<div class="notice-toolbar">
<div class="notices-toolbar" data-post-type="dbmob">
<h2 class="post-count">
<span class="post-count__count">
<?php echo $post_count; ?>
@ -20,14 +22,18 @@ $post_count = $query->found_posts;
</span>
</h2>
<select class="sort_by" name="sort_by" id="sort_by">
<option value="date_desc" selected><?php _e('Voir les dernières notices en premier', 'carhop-blocks'); ?></option>
<option value="date_asc"><?php _e('Voir les plus anciennes notices en premier', 'carhop-blocks'); ?></option>
</select>
<div class="search-bar">
<label for="search-input"><?php _e('Rechercher une notice par nom', 'carhop-blocks'); ?></label>
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>">
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>" name="search">
</div>
</div>
</div>
<?php if ($query->have_posts()) : ?>
<div class="dbmob-grid">
<?php while ($query->have_posts()) : $query->the_post(); ?>
@ -40,10 +46,16 @@ $post_count = $query->found_posts;
'external_link' => $maitron_url,
'external_link_text' => 'Voir la notice',
)); ?>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<?php if ($post_count > $initialPostDisplayAmount) : ?>
<button class="load-more-button" data-offset="0" data-posts-per-page="-1">Afficher plus</button>
<?php endif; ?>

View File

@ -1,4 +1 @@
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/dbmob-archives/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '402a8fd622dd4bbb3e35');
<?php return array('dependencies' => array(), 'version' => '9561c72bdfe7bbd52265');

View File

@ -1,7 +1 @@
/******/ (() => { // webpackBootstrap
/*!************************************!*\
!*** ./src/dbmob-archives/view.js ***!
\************************************/
/******/ })()
;
document.addEventListener("DOMContentLoaded",function(){const t=document.querySelector(".wp-block-carhop-blocks-dbmob-archives");if(!t)return;const e=t.querySelector(".notices-toolbar");if(!e)return;const r=e.querySelector("input[name='search']"),o=e.querySelector("select[name='sort_by']"),n=t.querySelector(".load-more-button");let c=null,s=0;async function a(){var e,n;const a=null!==(e=r?.value)&&void 0!==e?e:"",l=null!==(n=o?.value)&&void 0!==n?n:"date_desc",u=`/wp-json/carhop-datas/v1/build/posts?${new URLSearchParams({sort_by:l,recherche:a,post_type:"dbmob",offset:String(0),posts_per_page:String(-1)}).toString()}`;c&&c.abort(),c=new AbortController;const i=++s;try{const e=await fetch(u,{signal:c.signal});if(!e.ok)throw new Error(`HTTP ${e.status}`);const r=await e.json();if(i!==s)return;const o=t.querySelector(".dbmob-grid");if(!o)return;o.innerHTML=r.html_template,function(e){const r=t.querySelector(".post-count__count");null!=r&&null!=e&&(r.textContent=String(e))}(r.post_count)}catch(t){if("AbortError"===t?.name)return;console.error("Erreur lors de la récupération des articles:",t)}}const l=function(t){let e;return(...r)=>{e&&window.clearTimeout(e),e=window.setTimeout(()=>t(...r),150)}}(a);o&&o.addEventListener("change",t=>{t.target.value,a()}),r&&r.addEventListener("input",()=>{l()}),n&&n.addEventListener("click",()=>{n.dataset.offset,n.dataset.postsPerPage,a()})});

View File

@ -1,8 +1,10 @@
<?php
$initialPostDisplayAmount = 10;
$args = array(
'post_type' => 'dbmob',
'posts_per_page' => -1,
'posts_per_page' => $initialPostDisplayAmount,
);
$query = new WP_Query($args);
$post_count = $query->found_posts;
@ -10,7 +12,7 @@ $post_count = $query->found_posts;
<section <?php echo get_block_wrapper_attributes(); ?>>
<h2>Les notices rédigées par le CARHOP</h2>
<div class="notice-toolbar">
<div class="notices-toolbar" data-post-type="dbmob">
<h2 class="post-count">
<span class="post-count__count">
<?php echo $post_count; ?>
@ -20,14 +22,18 @@ $post_count = $query->found_posts;
</span>
</h2>
<select class="sort_by" name="sort_by" id="sort_by">
<option value="date_desc" selected><?php _e('Voir les dernières notices en premier', 'carhop-blocks'); ?></option>
<option value="date_asc"><?php _e('Voir les plus anciennes notices en premier', 'carhop-blocks'); ?></option>
</select>
<div class="search-bar">
<label for="search-input"><?php _e('Rechercher une notice par nom', 'carhop-blocks'); ?></label>
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>">
<input type="text" placeholder="<?php _e('Rechercher par nom', 'carhop-blocks'); ?>" name="search">
</div>
</div>
</div>
<?php if ($query->have_posts()) : ?>
<div class="dbmob-grid">
<?php while ($query->have_posts()) : $query->the_post(); ?>
@ -40,10 +46,16 @@ $post_count = $query->found_posts;
'external_link' => $maitron_url,
'external_link_text' => 'Voir la notice',
)); ?>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<?php if ($post_count > $initialPostDisplayAmount) : ?>
<button class="load-more-button" data-offset="0" data-posts-per-page="-1">Afficher plus</button>
<?php endif; ?>

View File

@ -0,0 +1,94 @@
document.addEventListener("DOMContentLoaded", function () {
const block = document.querySelector(
".wp-block-carhop-blocks-dbmob-archives",
);
if (!block) return;
const toolbar = block.querySelector(".notices-toolbar");
if (!toolbar) return;
const searchInput = toolbar.querySelector("input[name='search']");
const sortBySelect = toolbar.querySelector("select[name='sort_by']");
const loadMoreButton = block.querySelector(".load-more-button");
// Évite les courses: annule les requêtes précédentes et ignore les réponses obsolètes
let currentAbortController = null;
let lastRequestId = 0;
function updatePostCount(count) {
const el = block.querySelector(".post-count__count");
if (el != null && count != null) {
el.textContent = String(count);
}
}
// Debounce simple pour la recherche
function debounce(fn, waitMs) {
let timeoutId;
return (...args) => {
if (timeoutId) window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => fn(...args), waitMs);
};
}
async function hydratePosts() {
const searchValue = searchInput?.value ?? "";
const offset = 0;
const postsPerPage = -1;
const sortBy = sortBySelect?.value ?? "date_desc";
const params = new URLSearchParams({
sort_by: sortBy,
recherche: searchValue,
post_type: "dbmob",
offset: String(offset),
posts_per_page: String(postsPerPage),
});
const url = `/wp-json/carhop-datas/v1/build/posts?${params.toString()}`;
if (currentAbortController) currentAbortController.abort();
currentAbortController = new AbortController();
const requestId = ++lastRequestId;
try {
const response = await fetch(url, {
signal: currentAbortController.signal,
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
if (requestId !== lastRequestId) return;
const articlesContainer = block.querySelector(".dbmob-grid");
if (!articlesContainer) return;
articlesContainer.innerHTML = data.html_template;
updatePostCount(data.post_count);
} catch (error) {
if (error?.name === "AbortError") return;
console.error("Erreur lors de la récupération des articles:", error);
}
}
const hydratePostsDebounced = debounce(hydratePosts, 150);
if (sortBySelect) {
sortBySelect.addEventListener("change", (value) => {
const sortByValue = value.target.value;
hydratePosts(sortByValue);
});
}
if (searchInput) {
searchInput.addEventListener("input", () => {
hydratePostsDebounced();
});
}
if (loadMoreButton) {
loadMoreButton.addEventListener("click", () => {
const offset = loadMoreButton.dataset.offset;
const postsPerPage = loadMoreButton.dataset.postsPerPage;
hydratePosts(postsPerPage);
});
}
});