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


 ///////////////////////////////////////////
 // border box change color when protagoniste change

// var protagoniste = document.getElementsByClassName("type-de-protagoniste-7");
// console.log(protagoniste);
// ressource.classList.add('opened');



/**
 * Return the term id for a given term name.
 */

//  function _get_tid_from_term_name($term_name) {
//   $vocabulary = 'Type de protagoniste';
//   $arr_terms = taxonomy_get_term_by_name($term_name, $vocabulary);
//   if (!empty($arr_terms)) {
//     $arr_terms = array_values($arr_terms);
//     $tid = $arr_terms[0]->tid;
//   }
//   else {
//     $vobj = taxonomy_vocabulary_machine_name_load($vocabulary);
//     $term = new stdClass();
//     $term->name = $term_name;
//     $term->vid = $vobj->vid;
//     taxonomy_term_save($term);
//     $tid = $term->tid;
//   }
//   return $tid;
// }

// function getVal() {
//   const val = document. querySelector('input').value;
//   log(val);
// }
// /////////////////
//// ancre dans texte
// document.querySelector('.paragraph--view-mode--textes-toc').click( function() {
//   var page = this.attr('href'); 
//   var speed = 750; // gérer la vitesse de défliement
      
//       // Ici on retranche la hauteur du bandeau (201px dans ta feuille de styles)
// document.querySelector('html, body').animate( { scrollTop: page.offset().top - 201 }, speed );
//   return false;
// });

/// sticky header on scroll

// // When the user scrolls the page, execute myFunction
// window.onscroll = function() {stickyHeader()};
// console.log(Event);

// // Get the header
// var header = document.getElementById("header-top");

// // Get the offset position of the navbar
// var sticky = header.offsetTop;

// // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
// function stickyHeader() {
//   if (window.pageYOffset > sticky) {
//     header.classList.add("sticky");
//   } else {
//     header.classList.remove("sticky");
//   }
// } 

///////////////////