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}, 250);
      }
  };

  $(window).on('hashchange load', function() {
      adjustAnchor();
  });

})(jQuery, window);


// ///////////////////////////////
// (function(document, history, location) {
//   var HISTORY_SUPPORT = !!(history && history.pushState);

//   var anchorScrolls = {
//     ANCHOR_REGEX: /^#[^ ]+$/,
//     OFFSET_HEIGHT_PX: 50,

//     /**
//      * Establish events, and fix initial scroll position if a hash is provided.
//      */
//     init: function() {
//       this.scrollToCurrent();
//       $(window).on('hashchange', $.proxy(this, 'scrollToCurrent'));
//       $('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
//     },

//     /**
//      * Return the offset amount to deduct from the normal scroll position.
//      * Modify as appropriate to allow for dynamic calculations
//      */
//     getFixedOffset: function() {
//       return this.OFFSET_HEIGHT_PX;
//     },

//     /**
//      * If the provided href is an anchor which resolves to an element on the
//      * page, scroll to it.
//      * @param  {String} href
//      * @return {Boolean} - Was the href an anchor.
//      */
//     scrollIfAnchor: function(href, pushToHistory) {
//       var match, anchorOffset;

//       if(!this.ANCHOR_REGEX.test(href)) {
//         return false;
//       }

//       match = document.getElementById(href.slice(1));

//       if(match) {
//         anchorOffset = $(match).offset().top - this.getFixedOffset();
//         $('html, body').animate({ scrollTop: anchorOffset});

//         // Add the state to history as-per normal anchor links
//         if(HISTORY_SUPPORT && pushToHistory) {
//           history.pushState({}, document.title, location.pathname + href);
//         }
//       }

//       return !!match;
//     },
    
//     /**
//      * Attempt to scroll to the current location's hash.
//      */
//     scrollToCurrent: function(e) { 
//       if(this.scrollIfAnchor(window.location.hash) && e) {
//       	e.preventDefault();
//       }
//     },

//     /**
//      * If the click event's target was an anchor, fix the scroll position.
//      */
//     delegateAnchors: function(e) {
//       var elem = e.target;

//       if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {
//         e.preventDefault();
//       }
//     }
//   };

// 	$(document).ready($.proxy(anchorScrolls, 'init'));
// })(window.document, window.history, window.location);