templates/Lenord/Main/glossaire.html.twig line 1

Open in your IDE?
  1. {% extends 'Lenord/base.html.twig' %}
  2. {% block header_epingles %}
  3.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  4. {% endblock %}
  5. {% block header_breadcrumb %}
  6.   {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}
  7. {% endblock %}
  8. {% block header_breadcrumb_pdf %}
  9.   {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}
  10. {% endblock %}
  11. {% block body %}
  12.   <main tabindex="-1" role="main" id="mainContent">
  13.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--leNord --barHeading --blueMedium'} %}
  14.     <div class="barHeading --leNord">
  15.       <h1>Glossaire</h1>
  16.     </div>
  17.     <div class="containerListGlossaryOuter">
  18.       <div class="barLetters --leNord --leftOnMobile --sticky" data-sticky>
  19.         <nav>
  20.           <ul>
  21.             {% for letter in letters %}
  22.               <li><a href="#lettre_{{ letter[1] }}" aria-label="Se diriger vers la liste du glossaire de la lettre {{ letter[1] }}" data-anchor-smooth>{{ letter[1] }}</a></li>
  23.             {% endfor %}
  24.           </ul>
  25.         </nav>
  26.       </div>
  27.       <ul class="containerListGlossary --leftMenu">
  28.         {% set first_letter = null %}
  29.         {% set current_letter = null %}
  30.         {% set alternative = false %}
  31.         {% for glossaire in glossaires %}
  32.           {% set first_letter = glossaire.terme|first|lower %}
  33.           {% if first_letter != current_letter %}
  34.             {% set current_letter = first_letter %}
  35.             {% if loop.first == false %}</dl></div></li>{% endif %}
  36.             {% if alternative == false %}
  37.               {% set alternative = true %}
  38.             {% else %}
  39.               {% set alternative = false %}
  40.             {% endif %}
  41.             <li class="col item {% if alternative == false %}dark{% endif %}">
  42.             <div class="container">
  43.             <h2 id="lettre_{{ current_letter|upper }}" class="__letter">{{ current_letter|upper }}</h2>
  44.             <dl class="gridGlossary gridGlossary-{{ current_letter }}" style="position:relative;">
  45.             <div class="gridGlossary__sizer"></div>
  46.           {% endif %}
  47.           {{ include('Lenord/Main/parts/part-glossaire.html.twig') }}
  48.           {% if loop.last %}</dl></div></li>{% endif %}
  49.         {% endfor %}
  50.       </ul>
  51.       <script>
  52.         (function() {
  53.           const itemsGridGlossary = document.querySelectorAll('.gridGlossary__item');
  54.           itemsGridGlossary.forEach((el) => {
  55.             let stringHTML = el.innerHTML.toString();
  56.             stringHTML = stringHTML.replace('<p></p>', '');
  57.             el.innerHTML = stringHTML;
  58.           });
  59.         })();
  60.       </script>
  61.     </div>
  62.   </main>
  63. {% endblock %}
  64. {% block footer_top %}
  65.   {% include 'Nordinfo/Main/parts/our-websites.html.twig' %}
  66. {% endblock %}
  67. {% block include_js %}
  68.   <script>
  69.     (function() {
  70.       $('.gridGlossary').masonry({
  71.         itemSelector: '.gridGlossary__item',
  72.         columnWidth: '.gridGlossary__sizer',
  73.         percentPosition: true,
  74.         gutter: 80,
  75.         horizontalOrder: true
  76.       });
  78.       const mut = new MutationObserver((mutations, mut) => {
  79.         $('.gridGlossary').masonry({
  80.           itemSelector: '.gridGlossary__item',
  81.           columnWidth: '.gridGlossary__sizer',
  82.           percentPosition: true,
  83.           gutter: 80,
  84.           horizontalOrder: true
  85.         });
  86.       });
  87.       const html = document.documentElement
  88.       mut.observe(html, {
  89.         'attributes': true
  90.       });
  92.       setTimeout(() => {
  93.         html.className = 'bar'
  94.       }, 1000)
  95.     })();
  96.   </script>
  97.   <script>
  98.     (function () {
  100.       let anchorsInContent = document.querySelectorAll('.containerListGlossary a');
  102.       for (let i = 0; i < anchorsInContent.length; i++) {
  103.         if (anchorsInContent[i].host !== window.location.host) {
  104.           if (!anchorsInContent[i].classList.contains('no-external-icon')) {
  105.             let isTel = false;
  106.             let isEmail = false;
  107.             let href = anchorsInContent[i].getAttribute('href');
  108.             if (href.startsWith('tel')) {
  109.               isTel = true;
  110.             }
  111.             if (href.startsWith('mailto')) {
  112.               isEmail = true;
  113.             }
  114.             if (!isTel && !isEmail) {
  115.               anchorsInContent[i].classList.add('link-external');
  116.               anchorsInContent[i].setAttribute('target', '_blank'); 
  117.             }
  118.           }
  119.         }
  120.       }
  122.     })();
  123.   </script>
  124. {% endblock %}