templates/Lenord/Main/page.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 role="main" tabindex="-1" id="mainContent">
  13.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--leNord --barHeading --blueDark'} %}
  14.     <div class="barHeading --leNord --blueDark">
  15.       <h1>{{ page.titre }}</h1>
  16.     </div>
  17.     {% if page.sommaireAffiche == 1 %}
  18.       <div class="barInternalLinks --leNord" data-sticky data-submenu-target="contentContainer">
  19.         <nav>
  20.           <ul></ul>
  21.         </nav>
  22.       </div>
  23.     {% endif %}
  24.     <article>
  25.       <div class="containerSm containerPostDetails --nordServices">
  26.         <div class="containerContent --nordServices" id="contentContainer">
  27.           <p class="__intro">{# page.metaDescription|raw #}</p>
  28.           <div class="wrapperSectionsBackground">
  29.             {{ content_post|raw }}
  30.           </div>
  31.         </div>
  32.       </div>
  33.       {% if page.relatedPost1 != null or page.relatedPost2 != null or page.relatedPost3 != null %}
  34.         <section>
  35.           <h2>À lire aussi</h2>
  36.           <ul class="listLinks">
  37.             {% if page.relatedPost1 != null %}
  38.               <li>
  39.                 <a
  40.                   href="{{ path('page_detail', {"slug": page.relatedPost1.slug}) }}"><span>{{ page.relatedPost1.title }}</span></a>
  41.               </li>
  42.             {% endif %}
  43.             {% if page.relatedPost2 != null %}
  44.               <li>
  45.                 <a
  46.                   href="{{ path('page_detail', {"slug": page.relatedPost2.slug}) }}"><span>{{ page.relatedPost2.title }}</span></a>
  47.               </li>
  48.             {% endif %}
  49.             {% if page.relatedPost3 != null %}
  50.               <li>
  51.                 <a
  52.                   href="{{ path('page_detail', {"slug": page.relatedPost3.slug}) }}"><span>{{ page.relatedPost3.title }}</span></a>
  53.               </li>
  54.             {% endif %}
  55.           </ul>
  56.         </section>
  57.       {% endif %}
  58.     </article>
  59.     {% if isElus == 1 %}
  60.       <div class="containerSm">
  61.         <h2 class="textCenter">Liste des conseillers départementaux</h2>
  62.         <div class="containerContactsFilters">
  63.           <div>
  64.             <form id="formContactsCanton">
  65.               <div class="form-group">
  66.                 <label for="selectCanton">Votre canton</label>
  67.                 <select class="form-control" name="canton_id" id="selectCanton" aria-label="Votre canton, mise à jour de la liste des conseillers départementaux à la sélection d'un canton">
  68.                   <option value="" selected>Votre canton</option>
  69.                   {% for canton in cantons %}
  70.                     <option value="{{ canton.id }}">{{ canton.canton }}</option>
  71.                   {% endfor %}
  72.                 </select>
  73.               </div>
  74.             </form>
  75.           </div>
  76.           <div>
  77.             <form class="formSearchMain form" id="formContactsSearch">
  78.               <label for="inputSearchContacts">Recherche</label>
  79.               <div class="__input-wrapper">
  80.                 <input name="search" type="text" id="inputSearchContacts" placeholder="Rechercher"
  81.                        class="form-control __input-search" title="Rechercher">
  82.                 <button type="submit" class="__btn-search">
  83.                   <img src="{{ asset('img/brandmaster/icon-search-le-nord.svg') }}" alt="">
  84.                   <span class="sr-only">rechercher un élu</span>
  85.                 </button>
  86.               </div>
  87.             </form>
  88.           </div>
  89.         </div>
  90.         <div class="containerContactsResults mBMd" aria-live="polite">
  91.           <div class="containerContactResults__loader" id="loaderContacts" style="display:none;">
  92.             <span class="loader"></span>
  93.           </div>
  94.           <h3 class="containerContactsResults__title mB" id="titleResults" aria-live="polite">{{ filter_title }}</h3>
  95.           <div class="containerContactsResults__reset mB" style="display:none;" id="containerBtnReset"><button role="button" id="bthResetSearch">Réinitialiser ma recherche</button></div>
  96.           <ul class="containerContactsResults__list" id="listResults">
  97.             {% for contact in contacts %}
  98.               <li>
  99.                 <a href="{{ path('elus_lenord_detail', {'slug': contact.slug}) }}" class="itemContact --searchResult"
  100.                    data-first-letter="{{ contact.firstName|first }}">
  101.                   <div class="__inner">
  102.                     <div class="__col-img">
  103.                       <div class="__img"
  104.                            style="background-image:url('{{ asset('upload/images/'~contact.picture) }}')"></div>
  105.                     </div>
  106.                     <div class="__col-text">
  107.                       <div class="__name">
  108.                               <span>{{ contact.firstName }}
  109.                                 {{ contact.lastName }}</span>
  110.                       </div>
  111.                       <div class="__info">
  112.                         {% if contact.civilite == "Mr" %}Conseiller départemental{% else %}Conseillère départementale{% endif %}
  113.                         {% if contact.shortDescription is not null %}
  114.                           -
  115.                           {{ contact.shortDescription }}
  116.                         {% endif %}
  117.                         {% if contact.canton is not null %}
  118.                             -
  119.                           {{ contact.canton.canton }}
  120.                         {% endif %}
  121.                       </div>
  122.                     </div>
  123.                   </div>
  124.                 </a>
  125.               </li>
  126.             {% endfor %}
  127.           </ul>
  128.         </div>
  129.       </div>
  130.       <script>
  131.         (function() {
  132.           const inputSearchContacts = document.getElementById('inputSearchContacts');
  133.           const formContactsSearch = document.getElementById('formContactsSearch');
  134.           const titleResults = document.getElementById('titleResults');
  135.           const listResults = document.getElementById('listResults');
  136.           const selectCanton = document.getElementById('selectCanton');
  137.           const loaderContacts = document.getElementById('loaderContacts');
  138.           const containerBtnReset = document.getElementById('containerBtnReset');
  139.           const bthResetSearch = document.getElementById('bthResetSearch');
  140.           const params = new URLSearchParams(location.search);
  141.           if (params.get('canton_id') && params.get('canton_id') !== '') {
  142.             selectCanton.value = params.get('canton_id');
  143.             containerBtnReset.style.display = 'block';
  144.           }
  145.           if (params.get('search') && params.get('search') !== '') {
  146.             inputSearchContacts.value = params.get('search');
  147.             containerBtnReset.style.display = 'block';
  148.           }
  149.           selectCanton.addEventListener('change', function(e) {
  150.             listResults.innerHTML = '';
  151.             loaderContacts.style.display = 'block';
  152.             containerBtnReset.style.display = 'none';
  153.             titleResults.innerText = '';
  154.             inputSearchContacts.value = '';
  155.             let xhttp;
  156.             let formData = new FormData();
  157.             formData.append('function', 'ajax_search_contacts');
  158.             formData.append('canton_id', e.target.value);
  159.             xhttp = new XMLHttpRequest();
  160.             xhttp.onreadystatechange = function () {
  161.               if (this.readyState === 4 && this.status === 200) {
  162.                 const response = JSON.parse(this.responseText);
  163.                 let wrapper = document.createElement('div');
  164.                 wrapper.innerHTML = response['html'];
  165.                 let elems = wrapper.querySelectorAll('li');
  166.                 let fragment = document.createDocumentFragment();
  167.                 for ( let i = 0; i < elems.length; i++ ) {
  168.                   let elem = elems[i];
  169.                   fragment.appendChild(elem);
  170.                 }
  171.                 listResults.appendChild(fragment);
  172.                 titleResults.innerText = response.filter_title;
  173.                 loaderContacts.style.display = 'none';
  174.                 containerBtnReset.style.display = 'block';
  175.                 window.history.replaceState(null, null, "?canton_id=" + e.target.value);
  176.               }
  177.             };
  178.             xhttp.open('POST', '', true);
  179.             xhttp.send(formData);
  180.           });
  181.           bthResetSearch.addEventListener('click', function(e) {
  182.             listResults.innerHTML = '';
  183.             loaderContacts.style.display = 'block';
  184.             containerBtnReset.style.display = 'none';
  185.             titleResults.innerText = '';
  186.             inputSearchContacts.value = '';
  187.             selectCanton.value = '';
  188.             let xhttp;
  189.             let formData = new FormData();
  190.             formData.append('function', 'ajax_search_contacts_reset');
  191.             formData.append('canton_id', '');
  192.             xhttp = new XMLHttpRequest();
  193.             xhttp.onreadystatechange = function () {
  194.               if (this.readyState === 4 && this.status === 200) {
  195.                 const response = JSON.parse(this.responseText);
  196.                 let wrapper = document.createElement('div');
  197.                 wrapper.innerHTML = response['html'];
  198.                 let elems = wrapper.querySelectorAll('li');
  199.                 let fragment = document.createDocumentFragment();
  200.                 for ( let i = 0; i < elems.length; i++ ) {
  201.                   let elem = elems[i];
  202.                   fragment.appendChild(elem);
  203.                 }
  204.                 listResults.appendChild(fragment);
  205.                 loaderContacts.style.display = 'none';
  206.                 window.history.replaceState(null, null, "?canton_id=");
  207.               }
  208.             };
  209.             xhttp.open('POST', '', true);
  210.             xhttp.send(formData);
  211.           });
  212.           formContactsSearch.addEventListener('submit', (e) => {
  213.             e.preventDefault();
  214.             listResults.innerHTML = '';
  215.             loaderContacts.style.display = 'block';
  216.             containerBtnReset.style.display = 'none';
  217.             titleResults.innerText = '';
  218.             selectCanton.value = '';
  219.             let xhttp;
  220.             let formData = new FormData();
  221.             formData.append('function', 'ajax_search_contacts');
  222.             formData.append('search', inputSearchContacts.value);
  223.             xhttp = new XMLHttpRequest();
  224.             xhttp.onreadystatechange = function () {
  225.               if (this.readyState === 4 && this.status === 200) {
  226.                 const response = JSON.parse(this.responseText);
  227.                 let wrapper = document.createElement('div');
  228.                 wrapper.innerHTML = response['html'];
  229.                 let elems = wrapper.querySelectorAll('li');
  230.                 let fragment = document.createDocumentFragment();
  231.                 for ( let i = 0; i < elems.length; i++ ) {
  232.                   let elem = elems[i];
  233.                   fragment.appendChild(elem);
  234.                 }
  235.                 listResults.appendChild(fragment);
  236.                 titleResults.innerText = response.filter_title;
  237.                 loaderContacts.style.display = 'none';
  238.                 containerBtnReset.style.display = 'block';
  239.                 window.history.replaceState(null, null, "?search=" + inputSearchContacts.value);
  240.               }
  241.             };
  242.             xhttp.open('POST', '', true);
  243.             xhttp.send(formData);
  244.           });
  245.         })();
  246.       </script>
  247.     {% endif %}
  248.   </main>
  249. {% endblock %}
  250. {% block footer_top %}
  251.   {% if is_preview != 1 %}
  252.     <div class="container pB pT">
  253.       {% include 'Nordinfo/Main/parts/article-actions.html.twig' with {'post_title':'test', 'post_id':'test', 'is_nord_services':true} %}
  254.     </div>
  255.   {% endif %}
  256.   {% if nordinfo_rss|length > 0 %}
  257.     <div class="containerGridPosts --nordInfo">
  258.       <div class="container">
  259.         <h2 class="headingSection --white mTMd--imp mBMd--imp">{{ nordinfo_rss_description }}</h2>
  260.         <ul class="gridPosts">
  261.           {% for post in nordinfo_rss %}
  262.             <li class="__col">
  263.               {{ include('Lenord/Main/parts/item-post.html.twig') }}
  264.             </li>
  265.           {% endfor %}
  266.           <li class="__col">
  267.             <a href="https://info.lenord.fr" class="__btnLoadMore" title="Toute l'info">
  268.               <div class="__inner">
  269.                 <div>
  270.                   <div>{{ source('svg/icons/icon-plus.svg') }}</div>
  271.                   <div><p><span class="__text">Toute l'info</span>&nbsp;<span class="__icon-external">{{ source('svg/icons/icon-external.svg') }}</span></p></div>
  272.                 </div>
  273.               </div>
  274.             </a>
  275.           </li>
  276.         </ul>
  277.       </div>
  278.     </div>
  279.   {% endif %}
  280.   {{ include('Lenord/Main/js/submenu.js.html.twig') }}
  281. {% endblock %}