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 // work but does the same for all node-type-actualite, faut limiter à ceux dans la path-frontpage
// var slideIndex = 1;
// showDivs(slideIndex);

// function plusDivs(n) {
//   showDivs(slideIndex += n);
// }

// function showDivs(n) {
//   var i;
//   var x = document.getElementsByPath("node-type-actualite");
//   if (n > x.length) {slideIndex = 1}
//   if (n < 1) {slideIndex = x.length} ;
//   for (i = 0; i < x.length; i++) {
//     x[i].style.display = "none";
//   }
//   x[slideIndex-1].style.display = "block";
// }

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

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


(function($, window) {
  
    // 'slick-carousel';
    var mobile = false;
  
    $(function(){
      console.log("$ ready !!");
  
      
      // if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)){
      //   mobile = true;
      // }
    
      if($(".path-frontpage").length > 0){
        console.log(".path-frontpage");
        // $("#"+).fadeIn();

        $(".node-type-actualite").slick({
          slidesToShow: 1,
          slidesToScroll: 4,
          centerMode: true,
          centerPadding: '300px',
          // appendDots: $(element),
          dots: true,
          // appendArrows: $(element),
          arrows: true,
          // prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
          // nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
          responsive: [
          {
            breakpoint: 800,
            settings: {
              centerPadding: '0',
            }
          }]

        });
        console.log(".node-type-actualite");


      }
      
  });
  })(jQuery, window);