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

console.log('salut');
// menu burger open

var burger = document.getElementById("block-burger");
var burgertitle = document.getElementById("block-burger-menu");


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');

}
///// répète fonction pour les fichiers, les liens et ressources
//// il faudrait créer un tableau d'objet ?

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", toggleFaqFichiers);
}
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');
}


////////////////////////
var liens = document.getElementsByClassName("field--name-field-liens");
var questions = document.getElementsByClassName("field--name-field-question");

for (let i = 0; i < questions.length; i++) {
  const question = questions[i]
  question.addEventListener("click", toggleFaqLiens);
}
function toggleFaqLiens(event) {
  // 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,
        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');

  });


// //////// start ajoute class à views-row-wrapper et view-type-slide dans /ressources ////////
$(document).ready(function () {
  $(".views-row-wrapper").each(function () {
    let h3 = $(this).prev("h3");
    let link = h3.find("a");
    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
    }
  });


  $(".wrapper-ressource").each(function(){
    let media = $(this).find(".field--name-field-type-de-media");

    // console.log(media);
    
    let mediaText = media.text().trim();
    let className = mediaText
    .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
    // console.log(mediaText);
    $(this).addClass('type-media-' + className);
  });

////// cache les slide non voulue en fonction de la class /////////
  const allowedTypes = [
    "type-publication-issue-du-programme-eqld",
    "type-paroles-de-laureats",
    "type-les-projets-en-images",
    "type-presse"
  ];

  $(".view-type-slide").each(function () {
    let $block = $(this);
    let keep = allowedTypes.some(type => $block.hasClass(type));

    if (!keep) {
      $block.hide(); // ou fadeOut() si tu veux un effet
    }
  });
});
// /////// end class à views-row-wrapper ///////


/////////////// 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");

  // 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"
      });
    }
  }
/// end //// dans pages /projets  après click sur appliquer filtres, scroll down la page au niveau des filtres //////




  //// start ne pas afficher type de ressource 2 fois dans /ressources //////
  document.querySelectorAll(".view-type-slide").forEach(view => {
    const h3Content = view.querySelector("h3 > a")?.textContent.trim();

    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);