main.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. console.log('salut');
  2. // menu burger open
  3. var burger = document.getElementById("block-burger");
  4. var burgertitle = document.getElementById("block-burger-menu");
  5. burgertitle.addEventListener("click", toggleMenu);
  6. function toggleMenu(event) {
  7. console.log(event);
  8. burger.classList.toggle('opened');
  9. }
  10. // faq reponse open
  11. var answers = document.getElementsByClassName("field--name-field-reponse");
  12. var fichiers = document.getElementsByClassName("field--name-field-fichiers");
  13. var questions = document.getElementsByClassName("field--name-field-question");
  14. for (let i = 0; i < questions.length; i++) {
  15. const question = questions[i]
  16. question.addEventListener("click", toggleFaq);
  17. }
  18. function toggleFaq(event) {
  19. console.log(event, this);
  20. // fermé tout
  21. for (let i = 0; i < answers.length; i++) {
  22. answers[i].classList.remove('opened');
  23. }
  24. // la réponse correspndante a la question clické
  25. // | this c'est l'élément sur le quel on a clické
  26. // | |le parent |la réponse dans le parent
  27. let answer = this.parentNode.querySelector('.field--name-field-reponse');
  28. // console.log(answer);
  29. answer.classList.add('opened');
  30. }
  31. // fleche qui tourne faq
  32. var questions = document.getElementsByClassName("field--name-field-question");
  33. for (let i = 0; i < questions.length; i++) {
  34. const question = questions[i]
  35. question.addEventListener("click", toggleFaq);
  36. }
  37. function rotateFleche(event) {
  38. console.log(event, this);
  39. for (let i = 0; i < answers.length; i++) {
  40. answers[i].classList.remove('opened');
  41. }
  42. }
  43. // /////////////////
  44. //// ancre dans texte
  45. document.querySelector('.paragraph--view-mode--textes-toc').click( function() {
  46. var page = this.attr('href');
  47. var speed = 750; // gérer la vitesse de défliement
  48. // Ici on retranche la hauteur du bandeau (201px dans ta feuille de styles)
  49. document.querySelector('html, body').animate( { scrollTop: page.offset().top - 201 }, speed );
  50. return false;
  51. });
  52. /// sticky header on scroll
  53. // // When the user scrolls the page, execute myFunction
  54. // window.onscroll = function() {stickyHeader()};
  55. // console.log(Event);
  56. // // Get the header
  57. // var header = document.getElementById("header-top");
  58. // // Get the offset position of the navbar
  59. // var sticky = header.offsetTop;
  60. // // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
  61. // function stickyHeader() {
  62. // if (window.pageYOffset > sticky) {
  63. // header.classList.add("sticky");
  64. // } else {
  65. // header.classList.remove("sticky");
  66. // }
  67. // }
  68. ///////////////////
  69. // document.addEventListener('click', function(e) {
  70. // if (e.target.classList.contains('rect_white_left') {
  71. // e.target.parentNode.nextElementSibling.classList.toggle('opened');}
  72. // }
  73. // fonction pour attribuer la class du parents
  74. // var fields = document.getElementsByClassName("field--name-field-titre");
  75. // var paragraphs = document.getElementsByClassName("paragraph--type--texte");
  76. // for (let i = 0; i < fields.length; i++) {
  77. // const field = fields[i]
  78. // }
  79. // function giveIdParent(){
  80. // document.field.classList="paragraphs";
  81. // }
  82. // Function mouseOut ()
  83. // {
  84. // document.getelementbyid("flashdiv").classname="flash-I";
  85. // }
  86. // open external link in new window
  87. // $(".ext").each(
  88. // function(i,e){
  89. // window.open(e, '_blank');
  90. // }
  91. // );
  92. // var target = document.getElementsByClassName("ext");
  93. // document.addEventListener("click", function(e) {
  94. // if (e.target == true )
  95. // {
  96. // e.target.setAttribute("target", "_blank");
  97. // }
  98. // });
  99. // add id to field
  100. // Add data-extlink attribute.
  101. // $links_to_process.attr('data-extlink', '');
  102. // var i;
  103. // var length = $links_to_process.length;
  104. // for (i = 0; i < length; i++) {
  105. // var $link = $($links_to_process[i]);
  106. // if (drupalSettings.data.extlink.extUseFontAwesome) {
  107. // if (class_name === drupalSettings.data.extlink.mailtoClass) {
  108. // $link[icon_placement]('<span class="fa-' + class_name + ' extlink"><span class="' + drupalSettings.data.extlink.extFaMailtoClasses + '" aria-label="' + drupalSettings.data.extlink.mailtoLabel + '"></span></span>');
  109. // }
  110. // else {
  111. // $link[icon_placement]('<span class="fa-' + class_name + ' extlink"><span class="' + drupalSettings.data.extlink.extFaLinkClasses + '" aria-label="' + drupalSettings.data.extlink.extLabel + '"></span></span>');
  112. // }
  113. // }
  114. // else {
  115. // if (class_name === drupalSettings.data.extlink.mailtoClass) {
  116. // $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>');
  117. // }
  118. // else {
  119. // $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>');
  120. // }
  121. // }
  122. // }
  123. // };