Modif temporaire pour le chargement des news

includes/init.php

@@ -69,9 +69,13 @@ function homegrade_enqueue_scripts()
 	$main_app_js_dynamic_datas = array(
 		'yes' => __('Oui', 'homegrade-theme__texte-fonctionnel'),
 		'no' => __('Non', 'homegrade-theme__texte-fonctionnel'),
+		'neutral' => __('Neutre', 'homegrade-theme__texte-fonctionnel'),
 		'deleteFilter' => __('Supprimer le filtre', 'homegrade-theme__texte-fonctionnel'),
 		'template_directory_uri' => get_template_directory_uri(),
 		'current_thematique' => get_the_terms(get_the_ID(), 'thematiques')[0] ?? null,
+		'privilegier' => __('À privilégier', 'homegrade-theme__texte-fonctionnel'),
+		'prudence' => __('Prudence', 'homegrade-theme__texte-fonctionnel'),
+		'ecarter' => __('À écarter', 'homegrade-theme__texte-fonctionnel'),
 	);
 	wp_localize_script('main-app-js', 'mainAppJsDynamicDatas', $main_app_js_dynamic_datas);
 

resources/css/app.css

@@ -120,6 +120,7 @@
 @import './blocks/parcours-renovateur.css';
 @import './blocks/page-card.css';
 @import './blocks/lightbox-gallery.css';
+@import './blocks/explainer-screen.css';
 
 /* Home */
 @import './blocks/home-header.css';

resources/css/blocks/explainer-screen.css

@@ -0,0 +1,10 @@
+.homegrade-blocks-explainer-screen {
+  @apply border-2 border-neutral-200 p-8 rounded-3xl;
+  &__step-position {
+    @apply text-xs font-bold text-neutral-500 !mb-0 uppercase;
+  }
+
+  &__step-title {
+    @apply !my-0  py-2 text-2xl font-bold !text-neutral-900;
+  }
+}

resources/css/blocks/lightbox-gallery.css

@@ -14,6 +14,11 @@
   backdrop-filter: brightness(50%) blur(1px);
   overflow-y: auto;
   animation: lightboxIn 0.5s;
+  transition: opacity 0.3s;
+
+  &.fade-out {
+    opacity: 0;
+  }
 
   &--inactive {
     @apply hidden;

resources/css/components/lightbox.css

@@ -1,3 +1,3 @@
 .singleLightbox-link {
-  @apply cursor-pointer;
+  @apply cursor-zoom-in;
 }

resources/css/editor-content/gutenberg.css

@@ -42,19 +42,23 @@ article > *:not(.entry-content, .chapter-header-block),
     }
   }
 
-  .table-cell-icon {
+  .homegrade-shortcode-icon {
     @apply mx-auto p-2 w-fit h-auto  rounded-full flex items-center justify-center relative grow-0;
     aspect-ratio: 1;
     img {
       @apply w-4 h-4;
     }
   }
-  .table-cell-icon--checked {
+  .homegrade-shortcode-icon--checked {
     @apply bg-green-600;
   }
-  .table-cell-icon--crossed {
+  .homegrade-shortcode-icon--dashed,
+  .homegrade-shortcode-icon--crossed {
     @apply bg-white border-2 border-neutral-800;
   }
+  .homegrade-shortcode-icon--smiley {
+    @apply p-0 !w-8 !h-8 object-contain object-center;
+  }
 }
 
 .wp-block-columns {

resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="smiley-pratique-bonne" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #00a165;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #00a165;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
+  <g>
+    <path id="oeil-gauche" class="cls-2" d="M15.46,11.7h0c1.22,0,2.2.99,2.2,2.2v5.94h-4.4v-5.94c0-1.22.99-2.2,2.2-2.2Z"/>
+    <path id="oeil-droit" class="cls-2" d="M24.38,11.7h0c1.22,0,2.2.99,2.2,2.2v5.94h-4.4v-5.94c0-1.22.99-2.2,2.2-2.2Z"/>
+  </g>
+  <path id="bouche" class="cls-1" d="M27.9,24.75c-1.49,2.98-4.53,4.9-7.85,4.95-3.41.05-6.57-1.88-8.11-4.95"/>
+</svg>

resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="smiley-pratique-intermediaire" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #c24503;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #c24503;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
+  <g>
+    <g>
+      <rect id="oeil-gauche" class="cls-2" x="13.26" y="11.7" width="4.4" height="8.15"/>
+      <rect id="oeil-droit" class="cls-2" x="22.18" y="11.7" width="4.4" height="8.15"/>
+    </g>
+    <line id="bouche" class="cls-1" x1="11.02" y1="28.26" x2="28.82" y2="28.26"/>
+  </g>
+</svg>

resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="smiley-pratique-mauvaise" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.85 39.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #df1e1e;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        fill: #df1e1e;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="19.92" cy="19.92" r="18.92"/>
+  <g>
+    <rect id="oeil-gauche" class="cls-2" x="13.28" y="13.36" width="4.4" height="4.9"/>
+    <rect id="oeil-droit" class="cls-2" x="22.2" y="13.36" width="4.4" height="4.9"/>
+    <path id="bouche" class="cls-1" d="M12.27,29.13c3.36,1.13,5.03.86,5.93.4,1.61-.82,1.12-2.38,3.03-3.29,1.24-.59,3.05-.7,4.48-.1.83.35,1.47.92,1.86,1.6"/>
+  </g>
+</svg>

resources/img/graphic-assets/table-cell--dash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.05" height="14.05" viewBox="0 0 14.05 14.05">
+  <path id="Tracé_3612" data-name="Tracé 3612" d="M-3933.656,6205.491l-7.117-7.1" transform="translate(-1594.38 -7162.442) rotate(-45)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
+</svg>

resources/js/editor.js

@@ -1,25 +1,72 @@
-export default function editorInit() {
-  const tablesCells = document.querySelectorAll('.wp-block-table td');
-  function filterCells(element, stringToParse) {
-    return element.textContent.trim() === stringToParse;
+/**
+ * Gestion des shortcodes dans l'éditeur
+ * Les shortcodes pris en charge et leurs remplacements sont les suivants :
+ * - `((v))` : Remplacé par une image avec une icône de vérification.
+ * - `((x))` : Remplacé par une image avec une icône de croix.
+ * - `((-))` : Remplacé par une image avec une icône tiret.
+ * - `(:-))` : Remplacé par une image avec une icône de croix.
+ * - `(:-|)` : Remplacé par une image avec une icône de croix.
+ * - `(:-()` : Remplacé par une image avec une icône de croix.
+ *
+ * @function
+ * @returns {void}
+ */
+
+function handleEditorShortCodes() {
+  // Sélectionnez tous les éléments avec la classe 'entry-content'
+  const editorContent = document.querySelector('.entry-content');
+  if (!editorContent) return;
+
+  const replacements = {
+    // ((v))
+    '\\(\\(v\\)\\)': `
+        <div class="homegrade-shortcode-icon homegrade-shortcode-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
+     alt="${mainAppJsDynamicDatas.yes}"/></div>
+    `,
+    // ((x))
+    '\\(\\(x\\)\\)': `
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--crossed" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg" 
+           alt="${mainAppJsDynamicDatas.no}"/>
+    `,
+    // ((-))
+    '\\(\\(-\\)\\)': `
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--dashed" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--dash.svg" 
+            alt="${mainAppJsDynamicDatas.neutral}"/>
+    `,
+    // (:-))
+    '\\(:-\\)\\)': `
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-good" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-bonne.svg" 
+             alt="${mainAppJsDynamicDatas.privilegier}"/>
+    `,
+    // (:-|)
+    '\\(:-\\|\\)': `
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-neutral" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-intermediaire.svg" 
+              alt="${mainAppJsDynamicDatas.prudence}"/>
+    `,
+    // (:-()
+    '\\(:-\\(\\)': `
+        <img class="homegrade-shortcode-icon homegrade-shortcode-icon--smiley homegrade-shortcode-icon--smiley-bad" 
+             src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/homegrade_smiley-pratique-mauvaise.svg" 
+              alt="${mainAppJsDynamicDatas.ecarter}"/>
+    `,
+  };
+
+  // Fonction pour remplacer les shortcodes dans le contenu
+  function replaceShortcodes(content) {
+    for (const [shortcodePattern, replacementHTML] of Object.entries(replacements)) {
+      const regex = new RegExp(shortcodePattern, 'g');
+      content = content.replace(regex, replacementHTML);
+    }
+    return content;
   }
-  const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((v))'));
-  const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((x))'));
 
-  checkedCells.forEach((cell) => {
-    cell.innerHTML = `<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
-      alt="${mainAppJsDynamicDatas.yes}"/></div>`;
-  });
-  crossedCells.forEach((cell) => {
-    cell.innerHTML = `<img class="table-cell-icon table-cell-icon--crossed" src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
-      alt="${mainAppJsDynamicDatas.no}"/>`;
-  });
-
-  // tables.forEach((table) => {
-  //   const tableCells = contains('td', '((v))');
-  //   console.log(tableRows);
-  //   tableRows.forEach((row) => {
-  //     console.log(row);
-  //   });
-  // });
+  editorContent.innerHTML = replaceShortcodes(editorContent.innerHTML);
+}
+
+export default function editorInit() {
+  handleEditorShortCodes();
 }

resources/js/lightboxSingle.js

@@ -1,12 +1,22 @@
+/**
+ * @property {HTMLElement} lightBox
+ **/
 export default class LightboxSingle {
   constructor(picture) {
-    console.log('LightboxSingle constructor');
-    const lightBox = this.buildDomLightBox(picture.getAttribute('src'));
-    document.body.appendChild(lightBox);
+    this.lightBox = this.buildDomLightBox(picture.getAttribute('src'));
+    this.onKeyUp = this.onKeyUp.bind(this);
+    document.body.appendChild(this.lightBox);
 
-    lightBox.classList.remove('lightbox--inactive');
-    lightBox.setAttribute('aria-hidden', 'false');
-    lightBox.classList.add('lightbox--active');
+    this.lightBox.classList.remove('lightbox--inactive');
+    this.lightBox.setAttribute('aria-hidden', 'false');
+    this.lightBox.classList.add('lightbox--active');
+
+    document.addEventListener('keyup', this.onKeyUp);
+
+    this.lightboxCloseButton = this.lightBox.querySelector('.lightbox__close');
+    this.lightboxCloseButton.focus();
+
+    
   }
 
   static init() {
@@ -22,6 +32,34 @@ export default class LightboxSingle {
       });
     });
   }
+
+  /**
+   * Ferme la lightbox
+   * @param {MouseEvent} e
+   */
+  close(e) {
+    e.preventDefault();
+    this.lightBox.classList.add('fade-out');
+    window.setTimeout(() => {
+      this.lightBox.classList.remove('fade-out');
+      this.lightBox.classList.remove('lightbox--active');
+      this.lightBox.classList.add('lightbox--inactive');
+      this.lightBox.setAttribute('aria-hidden', 'true');
+      this.lightBox.querySelector('.lightbox__container').remove();
+    }, 500);
+    document.removeEventListener('keyup', this.onKeyUp);
+  }
+
+  /**
+   * Ferme la lightbox
+   * @param {KeyboardEvent} e
+   */
+  onKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.close(e);
+    }
+  }
+
   buildDomLightBox(pictureSrc) {
     const lightBoxDomElement = document.createElement('div');
     lightBoxDomElement.classList.add('lightbox', 'lightbox--inactive');
@@ -37,6 +75,9 @@ export default class LightboxSingle {
 		</div>
 
 	</div>`;
+    lightBoxDomElement
+      .querySelector('.lightbox__close')
+      .addEventListener('click', this.close.bind(this));
 
     return lightBoxDomElement;
   }
@@ -45,4 +86,3 @@ export default class LightboxSingle {
 // export default function initSingleLightbox() {
 //   LightboxSingle.init();
 // }
-

template-archive-news.php

@@ -8,7 +8,7 @@ $args = array(
 $relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
 $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 
-$post_per_page = 12;
+$post_per_page = 24;
 $args = array(
 	"post_type" => "post",
 	"status" => "publish",
@@ -133,7 +133,7 @@ $posts = new WP_Query($args);
 
 
 		<?php if ($posts->max_num_pages > 1) : ?>
-			<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32">Charger Plus</button>
+			<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32"><?php echo __("Charger Plus", "homegrade-theme__texte-fonctionnel") ?></button>
 		<?php endif; ?>
 	</section>