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

Open in your IDE?
  1. {% extends 'Nordinfo/Main/base.html.twig' %}
  2. {% block title %}{{ title }} - Nord Info{% endblock %}
  3. {% block body %}
  4.   <main role="main" id="mainContent" tabindex="-1">
  5.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--nordServices --barHeading'} %}
  6.     <div class="barHeading">
  7.       <h1>Glossaire</h1>
  8.     </div>
  9.     <div class="containerListGlossaryOuter">
  10.       <div class="barLetters --leftOnMobile --sticky" data-sticky>
  11.         <nav>
  12.           <ul>
  13.             {% for letter in letters %}
  14.               <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>
  15.             {% endfor %}
  16.           </ul>
  17.         </nav>
  18.       </div>
  19.       <ul class="containerListGlossary --leftMenu">
  20.         {% set first_letter = null %}
  21.         {% set current_letter = null %}
  22.         {% set alternative = false %}
  23.         {% for glossaire in glossaires %}
  24.           {% set first_letter = glossaire.terme|first|lower %}
  25.           {% if first_letter != current_letter %}
  26.             {% set current_letter = first_letter %}
  27.             {% if loop.first == false %}</dl></div></li>{% endif %}
  28.             {% if alternative == false %}
  29.               {% set alternative = true %}
  30.             {% else %}
  31.               {% set alternative = false %}
  32.             {% endif %}
  33.             <li class="col item {% if alternative == false %}dark{% endif %}">
  34.             <div class="container">
  35.             <h2 id="lettre_{{ current_letter|upper }}" class="__letter">{{ current_letter|upper }}</h2>
  36.             <dl class="gridGlossary gridGlossary-{{ current_letter }}" style="position:relative;">
  37.             <div class="gridGlossary__sizer"></div>
  38.           {% endif %}
  39.           {{ include('Lenord/Main/parts/part-glossaire.html.twig') }}
  40.           {% if loop.last %}</dl></div></li>{% endif %}
  41.         {% endfor %}
  42.       </ul>
  43.     </div>
  44.   </main>
  45. {% endblock %}
  46. {% block include_js %}
  47.   <script>
  48.     (function() {
  49.       $('.gridGlossary').masonry({
  50.         itemSelector: '.gridGlossary__item',
  51.         columnWidth: '.gridGlossary__sizer',
  52.         percentPosition: true,
  53.         gutter: 80,
  54.         horizontalOrder: true
  55.       });
  57.       const mut = new MutationObserver((mutations, mut) => {
  58.         $('.gridGlossary').masonry({
  59.           itemSelector: '.gridGlossary__item',
  60.           columnWidth: '.gridGlossary__sizer',
  61.           percentPosition: true,
  62.           gutter: 80,
  63.           horizontalOrder: true
  64.         });
  65.       });
  66.       const html = document.documentElement
  67.       mut.observe(html, {
  68.         'attributes': true
  69.       });
  71.       setTimeout(() => {
  72.         html.className = 'bar'
  73.       }, 1000)
  74.     })();
  75.   </script>
  76.   <script>
  77.     (function () {
  79.       let anchorsInContent = document.querySelectorAll('.containerListGlossary a');
  81.       for (let i = 0; i < anchorsInContent.length; i++) {
  82.         if (anchorsInContent[i].host !== window.location.host) {
  83.           if (!anchorsInContent[i].classList.contains('no-external-icon')) {
  84.             let isTel = false;
  85.             let isEmail = false;
  86.             let href = anchorsInContent[i].getAttribute('href');
  87.             if (href.startsWith('tel')) {
  88.               isTel = true;
  89.             }
  90.             if (href.startsWith('mailto')) {
  91.               isEmail = true;
  92.             }
  93.             if (!isTel && !isEmail) {
  94.               anchorsInContent[i].classList.add('link-external');
  95.               anchorsInContent[i].setAttribute('target', '_blank');
  96.             }
  97.           }
  98.         }
  99.       }
  101.     })();
  102.   </script>
  103. {% endblock %}