Modif temporaire pour le chargement des news

assets/rank-math-integration.js

@@ -0,0 +1,28 @@
+// Assurez-vous que ce fichier est traité comme un module ES6 si nécessaire (par exemple, en ajoutant type="module" à la balise <script>).
+document.addEventListener('DOMContentLoaded', () => {
+  initRankMathIntegration();
+});
+
+async function initRankMathIntegration() {
+  try {
+    const editedContent = await getEditedContent();
+    wp.hooks.addFilter('rank_math_content', 'rank-math', () => editedContent);
+    console.log('rankMathEditor:', rankMathEditor.refresh);
+    // Rafraîchit Rank Math pour qu'il prenne en compte le contenu édité
+    rankMathEditor.refresh('content');
+    console.log(rankMathEditor.refresh(editedContent));
+  } catch (error) {
+    console.error('Error getting edited content:', error);
+  }
+}
+
+// Exemple de fonction asynchrone pour obtenir le contenu édité.
+async function getEditedContent() {
+  // Simule une opération asynchrone si nécessaire
+  return new Promise((resolve) => {
+    // Simule un délai d'une seconde
+    setTimeout(() => {
+      resolve(wp.data.select('core/editor').getEditedPostContent());
+    }, 100);
+  });
+}

includes/init.php

@@ -57,7 +57,7 @@ add_action('after_setup_theme', 'tailpress_setup');
 function homegrade_enqueue_scripts()
 {
 	$theme = wp_get_theme();
-
+	// wp_enqueue_script('rank-math-integration',  get_template_directory_uri() . '/assets/rank-math-integration.js', ['wp-hooks', 'rank-math-analyzer'], false, true);
 	wp_enqueue_script('gsap', get_template_directory_uri() . '/assets/gsap/gsap.min.js', array(), $theme->get('Version'));
 	wp_enqueue_script('swiperjs', get_template_directory_uri() . '/assets/swiper/swiper-bundle_11.min.js', array(), $theme->get('Version'));
 	wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
@@ -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);
 

includes/post_types.php

@@ -62,7 +62,7 @@ function create_posttype()
 			'show_in_rest' => true,
 			'menu_icon'           => 'dashicons-pressthis',
 			'menu_position'       => 2,
-			'supports'     => array('title', 'editor', 'page-attributes', 'thumbnail', 'revisions'),
+			'supports'     => array('title', 'editor', 'page-attributes', 'thumbnail', 'revisions', 'excerpt'),
 
 			// 'supports' => array('title', 'custom-fields', 'editor'),
 		)

resources/css/app.css

@@ -15,6 +15,7 @@
 @import './base/thematiques-colors.css';
 
 /* ########### COMPONENTS ############ */
+@import './components/lightbox.css';
 @import './components/cta.css';
 @import './components/card.css';
 @import './components/card-large-content.css';
@@ -119,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/labelled-picture.css

@@ -1,10 +1,37 @@
 .homegrade-blocks-labelled-picture {
-  @apply relative w-full;
+  @apply relative w-full !my-4;
   img {
     @apply rounded-lg w-full object-cover;
-    max-height: 300px;
   }
   figcaption {
-    @apply bg-white absolute  px-8 py-2 text-center  bottom-4 left-4 z-10 rounded-lg font-bold text-base;
+    @apply px-1 py-2 font-bold text-base;
+  }
+
+  &--fixed-height {
+    img {
+      max-height: 300px;
+    }
+  }
+
+  &--legend-sticky {
+    figcaption {
+      @apply absolute left-0 bottom-4 left-4 z-10 rounded-lg bg-white text-center  w-fit px-8;
+    }
+  }
+
+  &--rounded-shadow {
+    @apply rounded-2xl shadowed-lg  p-4;
+  }
+
+  &--legend-has-title {
+    figcaption {
+      @apply font-normal;
+      .figcaption-title {
+        @apply font-bold;
+        &:after {
+          content: ' :';
+        }
+      }
+    }
   }
 }

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/blocks/page-card.css

@@ -38,3 +38,47 @@
     /* position: unset; */
   }
 }
+
+.post-card--coproprietes,
+.post-card--mede-eigendommen,
+.post-card--acoustique,
+.post-card--akoestiek {
+  h2.post-card__title {
+    @apply text-acoustique-coproprietes;
+  }
+}
+
+.post-card--urbanisme,
+.post-card--stedenbouw,
+.post-card--energies,
+.post-card--energie {
+  h2.post-card__title {
+    @apply text-energies-urbanisme;
+  }
+}
+
+.post-card--au-quotidien,
+.post-card--dagelijks,
+.post-card--isolatie,
+.post-card--isolation {
+  h2.post-card__title {
+    @apply text-isolation-quotidien;
+  }
+}
+
+.post-card--patrimoine,
+.post-card--erfgoed,
+.post-card--sante-et-securite,
+.post-card--gezondheid-en-veiligheid {
+  h2.post-card__title {
+    @apply text-patrimoine-sante-securite;
+  }
+}
+.post-card--location,
+.post-card--verhuur,
+.post-card--durabilite,
+.post-card--duurzaamheid {
+  h2.post-card__title {
+    @apply !text-location-durabilite;
+  }
+}

resources/css/blocks/post-card.css

@@ -1,7 +1,7 @@
 .post-card {
   @apply bg-white flex flex-col md:flex-row gap-8 items-start md:items-center justify-between !p-6 rounded-xl shadowed my-4;
   text-decoration: none !important;
-
+  transition: all 0.3s ease;
   &__cover {
     @apply h-16 w-16 md:h-24 md:w-24 rounded-2xl;
     &--videos-webinaires {

resources/css/components/lightbox.css

@@ -0,0 +1,3 @@
+.singleLightbox-link {
+  @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 {
@@ -217,7 +221,7 @@ article > *:not(.entry-content, .chapter-header-block),
   }
 }
 .post-conseil-page-container {
-  h2 {
+  h2:not(.post-card__title, .homegrade-blocks-plus-loin__block-title) {
     @apply font-bold !text-black text-3xl sm:text-3xl lg:!text-4xl leading-tight;
   }
   .wp-block-button__link {

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/app.js

@@ -8,6 +8,7 @@ import accordeonInit from './accordeon';
 import pageScrollerInit from './pageScroller';
 import observeChapterProgression from './chapter-progression';
 import notificationsInit from './notifications.js';
+import LightBoxSingle from './lightboxSingle';
 // window.addEventListener('load', function () {});
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -27,4 +28,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
 
   // NOTIFICATIONS
   notificationsInit();
+  LightBoxSingle.init();
+  
 });

resources/js/editor.js

@@ -1,25 +1,72 @@
+/**
+ * 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;
+  }
+
+  editorContent.innerHTML = replaceShortcodes(editorContent.innerHTML);
+}
+
 export default function editorInit() {
-  const tablesCells = document.querySelectorAll('.wp-block-table td');
+  handleEditorShortCodes();
-  function filterCells(element, stringToParse) {
-    return element.textContent.trim() === stringToParse;
-  }
-  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);
-  //   });
-  // });
 }

resources/js/lightboxSingle.js

@@ -0,0 +1,88 @@
+/**
+ * @property {HTMLElement} lightBox
+ **/
+export default class LightboxSingle {
+  constructor(picture) {
+    this.lightBox = this.buildDomLightBox(picture.getAttribute('src'));
+    this.onKeyUp = this.onKeyUp.bind(this);
+    document.body.appendChild(this.lightBox);
+
+    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() {
+    const lightboxLinks = document.querySelectorAll('.singleLightbox-link');
+    if (!lightboxLinks) return;
+
+    lightboxLinks.forEach((link) => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const picture = link.querySelector('img');
+        if (!picture) return;
+        new LightboxSingle(picture);
+      });
+    });
+  }
+
+  /**
+   * 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');
+    lightBoxDomElement.setAttribute('aria-hidden', 'true');
+
+    lightBoxDomElement.innerHTML = `<div class="lightbox__container">
+		<button class="lightbox__close cta cta--button cta--button--mini cta--outline">
+			Fermer
+		</button>
+
+		<div class="lightbox__current-picture">
+			<img src="${pictureSrc}" alt="" />
+		</div>
+
+	</div>`;
+    lightBoxDomElement
+      .querySelector('.lightbox__close')
+      .addEventListener('click', this.close.bind(this));
+
+    return lightBoxDomElement;
+  }
+}
+
+// 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>