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

// 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
// idée: lorsque la div description du parent collection est en vue, appliquer 
// la classe .activ{background-color:$blue-dark}
// OU if class
// const Autre = document.getElementsByClassName("");
// const Historique = document.getElementsByClassName("");

var descriptionAutre = document.getElementsByClassName("js-view-dom-id-b65e57a8672654a3b2a59e71c9f5ccfb730d7879c2c0096e324b0ce29b2a3b74").value
console.log(descriptionAutre);
// const descriptionHistorique = document.getElementsByClassName("js-view-dom-id-5c891f37126eb689016ea6da376ca1a15cc90c3dbcb394d063fb43dc16ec5250");


var nameCollection = document.querySelectorAll(".path-ressources .basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections .view-content .views-row a").value
console.log(nameCollection);

// var descriptionCollection = document.getElementsByClassName("");

// let nameCollection = { Autre: "Autres contributions sur la qualité du logement", Historique: "Histoire des expérimentations du logement depuis les années 1950 en Europe"};

var Autre = "Autres contributions sur la qualité du logement"
var Historique = "Histoire des expérimentations du logement depuis les années 1950 en Europe"
console.log(Autre, Historique);

// function getValue(){
//   for (const nameCollection = Autre ){}

//   if (nameCollection === Autre){
//     return "Autres contributions sur la qualité du logement";
//   }
  
// }

// function blueBackground(){
//   // console.log('nameCollection')
//   // var descriptionCollection = document.getElementsByClassName("");
// // if (descriptionCollection === descriptionAutre) 
// //   nameCollection.addClass('blue');
// if (getvalue === "Autres contributions sur la qualité du logement")
// nameCollection.addClass('blue');
// }


// let inView = addEventListener("inView", blueBackground);
// console.log(inView)

// function blueBackground(event){
//   console.log(event, this);

// }

//






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

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

// document.addEventListener('click', function(e) {
//   if (e.target.classList.contains('rect_white_left') {
//     e.target.parentNode.nextElementSibling.classList.toggle('opened');}
//   }


// fonction pour attribuer la class du parents

// var fields = document.getElementsByClassName("field--name-field-titre");
// var paragraphs = document.getElementsByClassName("paragraph--type--texte");
// for  (let i = 0; i < fields.length; i++) {
//   const field = fields[i]
// }
// function giveIdParent(){
//   document.field.classList="paragraphs";
// }

// Function mouseOut ()
// {
//     document.getelementbyid("flashdiv").classname="flash-I";
// }

// open external link in new window
// $(".ext").each(
//   function(i,e){
//      window.open(e, '_blank');
//   }
// );
// var target = document.getElementsByClassName("ext");

// document.addEventListener("click", function(e) {
//   if (e.target == true )
//   {
//       e.target.setAttribute("target", "_blank");
//   }
// });

// add id to field

   // Add data-extlink attribute.
//    $links_to_process.attr('data-extlink', '');

//    var i;
//    var length = $links_to_process.length;
//    for (i = 0; i < length; i++) {
//      var $link = $($links_to_process[i]);
//      if (drupalSettings.data.extlink.extUseFontAwesome) {
//        if (class_name === drupalSettings.data.extlink.mailtoClass) {
//          $link[icon_placement]('<span class="fa-' + class_name + ' extlink"><span class="' + drupalSettings.data.extlink.extFaMailtoClasses + '" aria-label="' + drupalSettings.data.extlink.mailtoLabel + '"></span></span>');
//        }
//        else {
//          $link[icon_placement]('<span class="fa-' + class_name + ' extlink"><span class="' + drupalSettings.data.extlink.extFaLinkClasses + '" aria-label="' + drupalSettings.data.extlink.extLabel + '"></span></span>');
//        }
//      }
//      else {
//        if (class_name === drupalSettings.data.extlink.mailtoClass) {
//          $link[icon_placement]('<svg focusable="false" class="' + class_name + '" role="img" aria-label="' + drupalSettings.data.extlink.mailtoLabel + '" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 70 20"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><sliceSourceBounds y="-8160" x="-8165" width="16389" height="16384" bottomLeftOrigin="true"/><optimizationSettings><targetSettings targetSettingsID="0" fileFormat="PNG24Format"><PNG24Format transparency="true" filtered="false" interlaced="false" noMatteColor="false" matteColor="#FFFFFF"/></targetSettings></optimizationSettings></sfw></metadata><title>' + drupalSettings.data.extlink.mailtoLabel + '</title><path d="M56 14H8c-1.1 0-2 0.9-2 2v32c0 1.1 0.9 2 2 2h48c1.1 0 2-0.9 2-2V16C58 14.9 57.1 14 56 14zM50.5 18L32 33.4 13.5 18H50.5zM10 46V20.3l20.7 17.3C31.1 37.8 31.5 38 32 38s0.9-0.2 1.3-0.5L54 20.3V46H10z"/></svg>');
//        }
//        else {
//          $link[icon_placement]('<svg focusable="false" class="' + class_name + '" role="img" aria-label="' + drupalSettings.data.extlink.extLabel + '" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><sliceSourceBounds y="-8160" x="-8165" width="16389" height="16384" bottomLeftOrigin="true"/><optimizationSettings><targetSettings targetSettingsID="0" fileFormat="PNG24Format"><PNG24Format transparency="true" filtered="false" interlaced="false" noMatteColor="false" matteColor="#FFFFFF"/></targetSettings></optimizationSettings></sfw></metadata><title>' + drupalSettings.data.extlink.extLabel + '</title><path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"/><path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"/></svg>');
//        }
//      }
//    }
//  };