views resources

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5406,7 +5406,13 @@ svg.ext {
     padding-bottom: 1rem;
   }
 }
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-ressources-hidden {
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+}
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content {
+  transition: opacity 0.3s ease;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

web/themes/custom/eql/eql.theme

@@ -8,6 +8,8 @@
 // use Drupal\Core\Link;
 // use Drupal\Core\Url;
 use Drupal\Component\Utility\Html;
+use Drupal\Component\Transliteration\TransliterationInterface;
+
 
 function eql_preprocess_html(&$variables) {
   $node = \Drupal::routeMatch()->getParameter('node');
@@ -29,14 +31,21 @@ function eql_preprocess_node(&$variables){
     $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
     $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
   }
-  // Vérifie si le champ field_type_de_ressource existe et ajoute une classe basée sur sa valeur
+  
-  if ($node->hasField('field_type_de_ressource') && !$node->get('field_type_de_ressource')->isEmpty()) {
+  // if ($node->hasField('field_type_de_ressource') && !$node->get('field_type_de_ressource')->isEmpty()) {
-    // Récupère la valeur de field_type_de_ressource
+  //   // Récupère la valeur de field_type_de_ressource
-    $type_de_ressource_entity = $node->get('field_type_de_ressource')->entity;
+  //   $type_de_ressource_entity = $node->get('field_type_de_ressource')->entity;
-    if ($type_de_ressource_entity) {
+  //   if ($type_de_ressource_entity) {
-      $type_de_ressource_name = $type_de_ressource_entity->getName();
+  //     $type_de_ressource_name = $type_de_ressource_entity->getName();
-      // Ajoute la classe CSS basée sur la valeur du type de ressource
+  //     // Ajoute la classe CSS basée sur la valeur du type de ressource
-      $variables['attributes']['class'][] = 'type-de-ressource-' . Html::cleanCssIdentifier($type_de_ressource_name);
+  //     $variables['attributes']['class'][] = 'type-de-ressource-' . Html::cleanCssIdentifier($type_de_ressource_name);
+  //   }
+  // }
+  if ($node->getType() === 'ressource' && $node->hasField('field_type_de_ressource') && !$node->get('field_type_de_ressource')->isEmpty()) {
+    foreach ($node->get('field_type_de_ressource')->referencedEntities() as $term) {
+      $label = $term->label(); // ex: "Presse"
+      $class = 'type-' . Html::cleanCssIdentifier(strtolower($label));
+      $variables['attributes']['class'][] = $class;
     }
   }
 }
@@ -94,3 +103,30 @@ function eql_preprocess_layout__threecol_25_50_25(&$variables) {
 }
 
 
+
+function eql_preprocess_views_view_unformatted(&$variables) {
+  // On utilise le service de translittération de Drupal
+  $transliterator = \Drupal::service('transliteration');
+
+  foreach ($variables['rows'] as &$row) {
+    if (isset($row['content']['#node'])) {
+      $node = $row['content']['#node'];
+
+      if ($node->hasField('field_type_de_ressource') && !$node->get('field_type_de_ressource')->isEmpty()) {
+        foreach ($node->get('field_type_de_ressource')->referencedEntities() as $term) {
+          $label = $term->label();
+
+          // Supprimer les accents
+          $label_ascii = $transliterator->transliterate($label);
+
+          // Nettoyer pour que ce soit une classe CSS valide
+          $class = 'type-' . Html::cleanCssIdentifier(strtolower($label_ascii));
+
+          $row['attributes']->addClass($class);
+        }
+      }
+    }
+  }
+}
+
+

web/themes/custom/eql/scripts/main.js

@@ -1,373 +1,194 @@
+jQuery(function ($) {
+  console.log('salut');
 
-console.log('salut');
+  // MENU BURGER
-// menu burger open
+  const burger = document.getElementById("block-burger");
-
+  const burgertitle = document.getElementById("block-burger-menu");
-var burger = document.getElementById("block-burger");
+  if (burger && burgertitle) {
-var burgertitle = document.getElementById("block-burger-menu");
+    burgertitle.addEventListener("click", function () {
-
+      burger.classList.toggle('opened');
-
+    });
-burgertitle.addEventListener("click", toggleMenu);
-
-function toggleMenu(event) {
-  // console.log(event);
-  burger.classList.toggle('opened');
-}
-
-//////////////////////////
-// faq reponse open 
-
-var answers = document.getElementsByClassName("field--name-field-reponse");
-var fichiers = document.getElementsByClassName("field--name-field-fichiers");
-var questions = document.getElementsByClassName("field--name-field-question");
-
-for (let i = 0; i < questions.length; i++) {
-  const question = questions[i]
-  question.addEventListener("click", toggleFaq);
-}
-function toggleFaq(event) {
-  // console.log(event, this);
-  // fermé tout
-  for (let i = 0; i < answers.length; i++) {
-    answers[i].classList.remove('opened');  
   }
-  // la réponse correspndante a la question clické
-  //           | this c'est l'élément sur le quel on a clické
-  //           |    |le parent |la réponse dans le parent
-  let answer = this.parentNode.querySelector('.field--name-field-reponse');
-  // console.log(answer); 
-  answer.classList.add('opened');
 
-}
+  // FAQ — réponses
-///// répète fonction pour les fichiers, les liens et ressources
+  const answers = document.getElementsByClassName("field--name-field-reponse");
-//// il faudrait créer un tableau d'objet ?
+  const fichiers = document.getElementsByClassName("field--name-field-fichiers");
+  const liens = document.getElementsByClassName("field--name-field-liens");
+  const ressources = document.getElementsByClassName("field--name-field-ress");
+  const questions = document.getElementsByClassName("field--name-field-question");
 
-var fichiers = document.getElementsByClassName("field--name-field-fichiers");
+  for (let i = 0; i < questions.length; i++) {
-var questions = document.getElementsByClassName("field--name-field-question");
+    const q = questions[i];
+    q.addEventListener("click", function () {
+      // Réponses
+      Array.from(answers).forEach(a => a.classList.remove("opened"));
+      const r = this.parentNode.querySelector(".field--name-field-reponse");
+      if (r) r.classList.add("opened");
 
-for (let i = 0; i < questions.length; i++) {
+      // Fichiers
-  const question = questions[i]
+      Array.from(fichiers).forEach(f => f.classList.remove("opened"));
-  question.addEventListener("click", toggleFaqFichiers);
+      const f = this.parentNode.querySelector(".field--name-field-fichiers");
-}
+      if (f) f.classList.add("opened");
-function toggleFaqFichiers(event) {
-  // console.log(event, this);
-for (let i = 0; i < fichiers.length; i++) {
-  fichiers[i].classList.remove('opened');  
-}
-let fichier = this.parentNode.querySelector('.field--name-field-fichiers');
 
-fichier.classList.add('opened');
+      // Liens
-}
+      Array.from(liens).forEach(l => l.classList.remove("opened"));
+      const l = this.parentNode.querySelector(".field--name-field-liens");
+      if (l) l.classList.add("opened");
 
+      // Ressources
+      Array.from(ressources).forEach(r => r.classList.remove("opened"));
+      const res = this.parentNode.querySelector(".field--name-field-ress");
+      if (res) res.classList.add("opened");
+    });
+  }
 
-////////////////////////
+  // SLIDESHOW INIT
-var liens = document.getElementsByClassName("field--name-field-liens");
+  $('.path-frontpage .view-actus-blocks-pages .view-content .view-type-slide .views-row-wrapper').slick({
-var questions = document.getElementsByClassName("field--name-field-question");
+    slidesToShow: 1,
-
+    dots: true,
-for (let i = 0; i < questions.length; i++) {
+    arrows: true,
-  const question = questions[i]
+    centerMode: true,
-  question.addEventListener("click", toggleFaqLiens);
+    responsive: [{
-}
+      breakpoint: 810,
-function toggleFaqLiens(event) {
+      settings: {
-  // console.log(event, this);
-for (let i = 0; i < liens.length; i++) {
-  liens[i].classList.remove('opened');  
-}
-let lien = this.parentNode.querySelector('.field--name-field-liens');
- 
-lien.classList.add('opened');
-}
-
-//////////////////////
-var ressources = document.getElementsByClassName("field--name-field-ress");
-var questions = document.getElementsByClassName("field--name-field-question");
-
-for (let i = 0; i < questions.length; i++) {
-  const question = questions[i]
-  question.addEventListener("click", toggleFaqRessources);
-}
-function toggleFaqRessources(event) {
-  // console.log(event, this);
-for (let i = 0; i < resources.length; i++) {
-  ressources[i].classList.remove('opened');  
-}
-let ressource = this.parentNode.querySelector('.field--name-field-ress');
-
-ressource.classList.add('opened');
-}
-
-///////////////////////////////
-////////////////////////////////
-// fleche qui tourne faq
-
-// var questions = document.getElementsByClassName("field--name-field-question");
-// var paragraph = document.querySelector('.field--name-field-question p::after');
-// console.log(paragraph)
-// var styles = window.getComputedStyle(element,':after')
-// console.log(styles)
-// var content = styles['content']
-// console.log(content)
-
-
-// for (let i = 0; i < questions.length; i++) {
-//   const question = questions[i]
-//   question.addEventListener("click", rotateFleche);
-// }
-// function rotateFleche(event) {
-//   console.log(event, this);
-//   // for (let i = 0; i < answers.length; i++) {
-//   //   answers[i].classList.remove('opened');  
-//   // }
-// }
-
-//////////////////////////////////////////
-// block collection reste bleu quand actif
-     
-jQuery(function($) {
-    var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
-  console.log(path);
-  $(".view-id-collections .view-content .views-row a").each(function() {
-   if (this.href === path) {
-    $(this).parent().closest('.views-row').addClass('active');
-   }
-  });
- });
-
-// /////////////////
-//// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
-
-
-(function($, window) {
-  var adjustAnchor = function() {
-      var $anchor = $('.block-entity-fieldnodefield-textes'),
-              fixedElementHeight = 350;
-      if ($anchor.length > 0) {
-          $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
-      }
-  };
-
-  $(window).on('hashchange', function() {
-      adjustAnchor();
-  });
-
-})(jQuery, window);
-
-
-// ///////////////////////////////
-
-
-//  slideshow home // marche pas. attention ai rajouter des class dans template views.view.html.twig et views-view-actus-blocks-pages--block-1.html.twig
-
-(function($, window) {
-  console.log('hello')
-  $(document).ready(function(){
-      $('.path-frontpage .view-actus-blocks-pages .view-content .view-type-slide .views-row-wrapper').slick({
         slidesToShow: 1,
-        // slidesToScroll: 1,
-        dots: true,
-        arrows: true,
-        centerMode: true,
-        // centerPadding: '100px',
-        responsive: [
-          {
-            breakpoint: 810,
-            settings: {
-              slidesToShow: 1,
-              adaptiveHeight: true,
-              arrows: false,
-              draggable: true,
-              centerMode: true,
-            }
-          }]
-      });
-      console.log('salut slick home');
-
-
-      $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({
-        dots: true,
-        arrows: true,
         adaptiveHeight: true,
-        responsive: [
-          {
-            breakpoint: 800,
-            settings: {
-              adaptiveHeight: true
-            }
-          }]
-      });
-      console.log('salut slick actus');
-
-
-      $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({
-        slidesToShow: 1,
-        dots: true,
         arrows: false,
         draggable: true,
-        adaptiveHeight: true,
+        centerMode: true,
-        responsive: [
+      }
-          {
+    }]
-            breakpoint: 800,
-            settings: {
-              adaptiveHeight: true
-            }
-          }]
-      });
-      console.log('salut slick projets');
-
-      $('.path-ressources .view:not(.view-partenaires) .view-content .view-type-slide .views-row-wrapper').slick({
-        slidesToShow: 3,
-        dots: false,
-        arrows: true,
-        infinite: false,
-        centerMode: false,
-        responsive: [
-          {
-            breakpoint: 810,
-            settings: {
-              slidesToShow: 3,
-              arrows: false,
-              draggable: true,
-              centerMode: true,
-            }
-          }]
-        });
-      console.log('salut slick ressource');
-
   });
 
-
+  $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({
-// //////// start ajoute class à views-row-wrapper et view-type-slide dans /ressources ////////
+    dots: true,
-$(document).ready(function () {
+    arrows: true,
-  if (hasActiveFilters()) return;
+    adaptiveHeight: true,
-  $(".views-row-wrapper").each(function () {
+    responsive: [{
-    let h3 = $(this).prev("h3");
+      breakpoint: 800,
-    let link = h3.find("a");
+      settings: { adaptiveHeight: true }
-    if (link.length) {
+    }]
-      let text = link.text().trim();
-      let className = text
-        .toLowerCase()
-        .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // enlever les accents
-        .replace(/[^a-z0-9]+/g, '-') // remplacer tout ce qui n'est pas a-z0-9 par -
-        .replace(/(^-|-$)/g, ''); // enlever tirets début/fin
-
-      $(this).addClass('type-' + className);
-            // Ajouter la même classe sur le <h3>
-            h3.addClass('type-' + className);
-            h3.closest('.view-type-slide').addClass('type-' + className); // ajouter aussi au bloc parent
-    }
   });
 
+  $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({
+    slidesToShow: 1,
+    dots: true,
+    arrows: false,
+    draggable: true,
+    adaptiveHeight: true,
+    responsive: [{
+      breakpoint: 800,
+      settings: { adaptiveHeight: true }
+    }]
+  });
 
-  $(".wrapper-ressource").each(function(){
+  // Classes media → .wrapper-ressource
-    let media = $(this).find(".field--name-field-type-de-media");
+  $(".wrapper-ressource").each(function () {
-
+    const media = $(this).find(".field--name-field-type-de-media").text().trim();
-    // console.log(media);
+    const className = media
-    
+      .toLowerCase()
-    let mediaText = media.text().trim();
+      .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
-    let className = mediaText
+      .replace(/[^a-z0-9]+/g, '-')
-    .toLowerCase()
+      .replace(/(^-|-$)/g, '');
-    .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // enlever les accents
-    .replace(/[^a-z0-9]+/g, '-') // remplacer tout ce qui n'est pas a-z0-9 par -
-    .replace(/(^-|-$)/g, ''); // enlever tirets début/fin
-    // console.log(mediaText);
     $(this).addClass('type-media-' + className);
   });
 
-// ////// cache les slide non voulue en fonction de la class /////////
+  // SLIDES RECONSTRUCTION LORS DU CHARGEMENT COMPLET
-//   const allowedTypes = [
+  $(window).on('load', function () {
-//     "type-publication-issue-du-programme-eqld",
+    const $viewContent = $('.path-ressources .view-content').first();
-//     "type-paroles-de-laureats",
+    if ($viewContent.length === 0) return;
-//     "type-les-projets-en-images",
+    $viewContent.addClass('view-ressources-hidden');
-//     "type-presse"
-//   ];
 
-//   $(".view-type-slide").each(function () {
+    const allowedTypes = [
-//     let $block = $(this);
+      'type-publication-issue-du-programme-eqld',
-//     let keep = allowedTypes.some(type => $block.hasClass(type));
+      'type-paroles-de-laureats',
+      'type-les-projets-en-images',
+      'type-presse'
+    ];
+
+    // const $viewContent = $('.view-content');
+    const allRows = $('.path-ressources .view-base-de-donnees .views-row').detach();
+    function toLabel(str) {
+      return str.replace('type-', '').replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+    }  
+    allowedTypes.forEach(type => {
+        const label = toLabel(type);   
+        const $slide = $(`
+        <div class="view-type-slide ${type}">
+          <h3 class="${type}">${label}</h3>
+          <div class="views-row-wrapper"></div>
+        </div>
+      `);
+      $viewContent.append($slide);
+    });
+
+    allRows.each(function () {
+      const $row = $(this);
+      const classList = $row.attr('class').split(/\s+/);
+      classList.forEach(cls => {
+        if (allowedTypes.includes(cls)) {
+          $(`.view-type-slide.${cls} .views-row-wrapper`).append($row.clone(true, true));
+        }
+      });
+    });
+
+    $('.path-ressources .view:not(.view-partenaires) .view-content .view-type-slide .views-row-wrapper').slick({
+      slidesToShow: 3,
+      dots: false,
+      arrows: true,
+      infinite: false,
+      centerMode: false,
+      responsive: [{
+        breakpoint: 810,
+        settings: {
+          slidesToShow: 3,
+          arrows: false,
+          draggable: true,
+          centerMode: true,
+        }
+      }]
+    });
+    // Supprimer les .view-type-slide originales générées par Drupal (vides ou non autorisées)
+    $('.path-ressources .view-base-de-donnees .view-type-slide').each(function () {
+      const classes = $(this).attr('class').split(/\s+/);
+      const isCustom = classes.some(cls => allowedTypes.includes(cls));
+      if (!isCustom) {
+        $(this).remove();
+      }
+    });
     
+    $viewContent.removeClass('view-ressources-hidden');
 
-//     if (!keep) {
+  });
-//       $block.hide(); // ou fadeOut() si tu veux un effet
-//     }
-//   });
-// });
-// $(".view-type-slide").each(function () {
-//   let $block = $(this);
-//   let matched = allowedTypes.filter(type => $block.hasClass(type));
-//   console.log("Matched:", matched);
 
-//   let keep = matched.length > 0;
+  // Ouvrir les liens externes dans un nouvel onglet
-//   if (!keep) {
+  document.querySelectorAll('a[href^="http"]').forEach(link => {
-//     $block.hide();
+    if (!link.href.includes(location.hostname)) {
-//   }
+      link.setAttribute('target', '_blank');
-});
+      link.setAttribute('rel', 'noopener noreferrer');
-
-
-function hasActiveFilters() {
-  const params = new URLSearchParams(window.location.search);
-  for (const [key, value] of params) {
-    if (key !== 'page' && value !== 'All' && value !== '') {
-      return true;
     }
-  }
+  });
-  return false;
-}
-// /////// end class à views-row-wrapper ///////
 
-
+  // Scroll automatique au filtre
-/////////////// start ouverture liens externes vers nouvel onglet //////////////////
-document.querySelectorAll('a[href^="http"]').forEach(link => {
-  if (!link.href.includes(location.hostname)) {
-    link.setAttribute('target', '_blank');
-    link.setAttribute('rel', 'noopener noreferrer');
-  }
-});
-
-/////////////// end ouverture liens externes vers nouvel onglet //////////////////
-
-
-/// start /// dans pages /projets  après click sur appliquer filtres, scroll down la page au niveau des filtres //////
-document.addEventListener("DOMContentLoaded", function () {
   const form = document.querySelector(".views-exposed-form");
+  if (form) form.setAttribute("action", form.action.split("#")[0] + "#filtres");
 
-  // console.log(form);
-
-  if (form) {
-    form.setAttribute("action", form.action.split("#")[0] + "#filtres");
-  }
   if (window.location.hash === "#filtres") {
     const target = document.getElementById("filtres");
     if (target) {
-      // target.scrollIntoView({ behavior: "smooth", block: "start" });
       const offset = 300;
       const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
-
+      window.scrollTo({ top: top, behavior: "smooth" });
-      window.scrollTo({
-        top: top,
-        behavior: "smooth"
-      });
     }
   }
-/// end //// dans pages /projets  après click sur appliquer filtres, scroll down la page au niveau des filtres //////
 
-
+  // MASQUER TYPE DE RESSOURCE DOUBLON
-
+  $(".view-type-slide").each(function () {
-
+    const h3Content = $(this).find("h3").text().trim();
-  //// start ne pas afficher type de ressource 2 fois dans /ressources //////
+    $(this).find(".field--name-field-type-de-ressource").each(function () {
-  document.querySelectorAll(".view-type-slide").forEach(view => {
+      if ($(this).text().trim() === h3Content) {
-    const h3Content = view.querySelector("h3 > a")?.textContent.trim();
+        $(this).hide();
-
-    view.querySelectorAll(".field--name-field-type-de-ressource").forEach(field => {
-      const fieldText = field.textContent.trim();
-
-      if (fieldText === h3Content) {
-        field.style.display = "none";
       }
     });
   });
-
-  //// end ne pas afficher type de ressource 2 fois dans /ressources //////
-
 });
-
-})(jQuery, window);
-

web/themes/custom/eql/scss/pages/ressources.scss

@@ -151,7 +151,18 @@
                                         }
 
                                     }
+                                    .view-ressources-hidden {
+                                        visibility: hidden;
+                                        height: 0;
+                                        overflow: hidden;
+                                    }
+                                      
+                                      
+
+                                      
                                     .view-content{
+                                       
+                                        transition: opacity 0.3s ease;
                                         display: flex;
                                         flex-direction: row;
                                         flex-wrap: wrap;

web/themes/custom/eql/templates/views-view-unformatted.html.twig

@@ -21,6 +21,8 @@
   default_row_class ? 'views-row-wrapper',
   ]
 %}
+
+
 <div class="view-type-slide">
 
 {% if title %}
@@ -44,4 +46,4 @@
 
 {% endfor %}
 </div>
-</div>
+</div>

web/themes/custom/eql/templates/views-view.html.twig

@@ -40,6 +40,7 @@
     dom_id ? 'js-view-dom-id-' ~ dom_id,
   ]
 %}
+
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}
   {% if title %}
@@ -62,13 +63,17 @@
     </div>
   {% endif %}
 
-  {% if rows %}
+{% if rows %}
 
+  {% set content_classes = ['view-content'] %}
+  {% if view.id == 'base_de_donnees' %}
+    {% set content_classes = content_classes|merge(['view-ressources-hidden']) %}
+  {% endif %}
 
-    <div class="view-content" {{dom_id}}>
+    <div{{ create_attribute().addClass(content_classes) }}>
       {{ rows }}
-    
     </div>
+    
   {% elseif empty %}
     <div class="view-empty">
       {{ empty }}