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

Open in your IDE?
  1. {% extends 'Nordinfo/Main/base.html.twig' %}
  2. {% set show_btt = true %}
  3. {% block title %}
  4.   {{ contact.firstName }}
  5.   {{ contact.lastName }}
  6.   - Nord Info
  7. {% endblock %}
  8. {% block body_class %}body-detail-contact
  9. {% endblock %}
  10. {% block header_epingles %}
  11.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  12. {% endblock %}
  13. {% block header_breadcrumb %}
  14.   {{ include('Nordinfo/Main/parts/breadcrumb.html.twig') }}
  15. {% endblock %}
  16. {% block body %}
  17.   <main role="main" class="mainContent pt-0 pb-0" data-form-validation-step="hidden" id="mainContent" tabindex="-1">
  18.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--contactDetailsPage'} %}
  19.     {% if contact.type == "admin" %}
  20.       <div class="containerContactDetailsTop">
  21.         <div class="containerSm">
  22.           <div class="containerContactDetailsTop__inner">
  23.             <div>
  24.               <div class="containerContactDetailsTop__imgWrapper">
  25.                 <img src="{{ asset('upload/images/'~contact.picture) }}" alt="">
  26.               </div>
  27.             </div>
  28.             <div>
  29.               <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
  30.               <p class="mb-0">{{ contact.typeContact.name|replace({'Élu':'Conseiller départemental'}) }}</p>
  31.               {% if contact.shortDescription is not null %}
  32.                 <p class="mt-0"><strong>{{ contact.shortDescription }}</strong></p>
  33.               {% endif %}
  34.               {% if contact.longDescription is not null %}
  35.                 <p class="mb-0"><strong>Groupe : </strong>{{ contact.longDescription }}</p>
  36.               {% endif %}
  37.               {% if contact.canton is not null %}
  38.                 <p class="mb-0 mt-0"><strong>Canton : </strong>{{ contact.canton.canton }}</p>
  39.               {% endif %}
  40.               {% if contact.canton.communes is not null %}
  41.                 <p class="mb-0 mt-0"><strong>Communes du canton : </strong>{{ contact.canton.communes }}</p>
  42.               {% endif %}
  43.               {% if contact.territory is not null %}
  44.                 <p class="mb-0 mt-0"><strong>Territoire : </strong>{{ contact.territory.displayName }}</p>
  45.               {% endif %}
  46.             </div>
  47.           </div>
  48.         </div>
  49.       </div>
  50.     {% endif %}
  51.     <div class="containerContactDetailsForm">
  52.       <div class="containerSm">
  53.         <h2 class="text-center mt-0">Me contacter</h2>
  54.         <p class="text-center fontWeightMedium mBSm">{{ contact.rue }} {{ contact.codePostal }} {{ contact.ville }}</p>
  55.         <div class="text-center">
  56.           {% if contact.phone is not null or contact.acceo is not null %}
  57.             {% if contact.phone is not null %}
  58.               <a href="tel:+33{{ contact.phone|slice(1)|spaceless }}" class="containerContactDetailsForm__btnTel">
  59.                 <div class="__inner">
  60.                   <span class="__icon">{{ source('svg/icons/icon-telephone.svg') }}</span>
  61.                   <span class="__text">{{ contact.phone }}</span>
  62.                 </div>
  63.               </a>
  64.             {% endif %}
  65.             {% if contact.acceo is not null %}
  66.               <a href="{{ contact.acceo }}" class="btn btn-lg btnContactAction _eastern-blue _deaf mt-3">
  67.                 <div class="__inner">
  68.                   <div class="__col-icon">
  69.                     <svg aria-hidden="true" focusable="false" id="Layer_1" data-name="Layer 1"
  70.                          xmlns="http://www.w3.org/2000/svg" viewbox="0 0 51.84 51.84">
  71.                       <defs>
  72.                         <style>
  73.                           .cls-1 {
  74.                             fill: #ec671c;
  75.                           }
  76.                         </style>
  77.                       </defs>
  78.                       <path id="Tracé_78" data-name="Tracé 78" class="cls-1"
  79.                             d="M24.27,18.27a5.44,5.44,0,0,0-4,1.7,5.61,5.61,0,0,0-1.7,4,5.76,5.76,0,0,0,1.6,4l4,4,4.1-4.1a5.61,5.61,0,0,0,1.7-4,5,5,0,0,0-1.6-4A6.4,6.4,0,0,0,24.27,18.27Zm2.3,8a3.39,3.39,0,1,1,0-4.8h0a3.27,3.27,0,0,1,0,4.8Z"/>
  80.                       <g id="Groupe_61" data-name="Groupe 61">
  81.                         <g id="Groupe_60" data-name="Groupe 60">
  82.                           <path id="Tracé_79" data-name="Tracé 79"
  83.                                 d="M24.49,49.17a12.35,12.35,0,0,1-11.2-6.5,4.25,4.25,0,1,1,7.4-4.2h0a4,4,0,0,0,4.3,2.2,4.67,4.67,0,0,0,3.2-2.6,7.77,7.77,0,0,0,.2-1.6,16.9,16.9,0,0,1,1.3-6.3,19.83,19.83,0,0,1,2.7-4.7,15.72,15.72,0,0,0,1.8-3.1,9.11,9.11,0,0,0-.9-7.2,8.19,8.19,0,0,0-7.4-4.2h-.4a8.82,8.82,0,0,0-6.5,3.3,13.84,13.84,0,0,0-1.8,3.9,4.28,4.28,0,0,1-4.2,3.4,2.77,2.77,0,0,1-.9-.1,4.32,4.32,0,0,1-3.3-5.1,19.12,19.12,0,0,1,3.5-7.5,17.15,17.15,0,0,1,13.1-6.4h.8a16.62,16.62,0,0,1,14.2,8.1l.1.1a17.19,17.19,0,0,1,2.1,13.6v.1a17.62,17.62,0,0,1-3.1,6.1,14.92,14.92,0,0,0-1.8,3l-.1.3a9.6,9.6,0,0,0-.6,3.3,13.19,13.19,0,0,1-.9,4.8,13,13,0,0,1-10.3,7.5A3.18,3.18,0,0,0,24.49,49.17Zm-7.4-10.3a1.88,1.88,0,0,0-.8.2,2,2,0,0,0-.8,1,1.28,1.28,0,0,0,.2,1.2,9.61,9.61,0,0,0,8.9,5.2h1a10.33,10.33,0,0,0,8.1-6,9.86,9.86,0,0,0,.7-3.8,12.6,12.6,0,0,1,.8-4.3l.1-.1a12.54,12.54,0,0,1,2.1-3.5,16.68,16.68,0,0,0,2.7-5.1h0a14.35,14.35,0,0,0-1.7-11.6h0a13.64,13.64,0,0,0-12.1-6.8h-.7a14.66,14.66,0,0,0-11,5.4,16.89,16.89,0,0,0-2.9,6.4,1.61,1.61,0,0,0,1.2,1.9h.3a1.6,1.6,0,0,0,1.6-1.3,13.4,13.4,0,0,1,2.3-5,11.13,11.13,0,0,1,9.1-4.2,10.9,10.9,0,0,1,9.6,5.4h0a11.43,11.43,0,0,1,1.3,9.2h0a12,12,0,0,1-2.2,4,17.55,17.55,0,0,0-2.4,4.2v.1a14.08,14.08,0,0,0-1.1,5.4,7.83,7.83,0,0,1-.4,2.6,7.15,7.15,0,0,1-5.4,4.1h-.8a6.48,6.48,0,0,1-6-3.5C18.19,39.27,17.69,38.87,17.09,38.87Z"/>
  84.                         </g>
  85.                       </g>
  86.                     </svg>
  87.                   </div>
  88.                   <div class="__col-text">Sourd ou malentendant ?</div>
  89.                 </div>
  90.               </a>
  91.             {% endif %}
  92.           {% endif %}
  93.         </div>
  94.         <h3 class="text-center d-validation-none colorBlue mTMd" data-focus-content-target="initial">Par courriel</h3>
  95.         <h3 class="text-center d-none d-validation-block">Vérifier votre message</h3>
  96.         <p class="text-center"><strong>Une fois envoyé, vous recevez une copie de ce message à l'adresse courriel que
  97.             vous avez saisie.</strong></p>
  98.         <p class="text-center d-validation-none">Les champs suivis d'un astérisque (<span class="colorRed">*</span>)
  99.           sont obligatoires</p>
  100.         <form action="{{ path('send_form') }}" method="POST" enctype="multipart/form-data"
  101.               class="needs-validation formCustom mT" novalidate>
  102.           <input type="hidden" name="dest_nom" value="{{ contact.firstName }} {{ contact.lastName }}">
  103.           <input type="hidden" name="dest" value="{{ contact.email }}">
  104.           <input type="hidden" name="raison">
  105.           <div class="form-validation-overlay mb-5">
  106.             <div class="form-group">
  107.               <div class="__input-wrapper">
  108.                 <div class="__inner">
  109.                   <label for="nom">Nom
  110.                     <span class="colorRed d-validation-none">*</span>
  111.                   </label>
  112.                   <input type="text" class="form-control" name="nom" id="nom"
  113.                          placeholder="" required>
  114.                 </div>
  115.               </div>
  116.             </div>
  117.             <div class="form-group">
  118.               <div class="__input-wrapper">
  119.                 <div class="__inner">
  120.                   <label for="prenom">Prénom
  121.                     <span class="colorRed d-validation-none">*</span>
  122.                   </label>
  123.                   <input type="text" class="form-control" name="prenom" id="prenom"
  124.                          placeholder="" required>
  125.                 </div>
  126.               </div>
  127.             </div>
  128.             <div class="form-group">
  129.               <div class="__input-wrapper">
  130.                 <div class="__inner">
  131.                   <label for="ville">Ville
  132.                     <span class="colorRed d-validation-none">*</span>
  133.                   </label>
  134.                   <input type="text" class="form-control" name="ville" id="ville"
  135.                          placeholder="" required>
  136.                 </div>
  137.               </div>
  138.             </div>
  139.             <div class="form-group">
  140.               <div class="__input-wrapper">
  141.                 <div class="__inner">
  142.                   <label for="adresse">
  143.                     <span class="label-text">Adresse <span class="colorRed">*</span></span>
  144.                   </label>
  145.                   <input name="adresse" data-paste-clear type="text" class="form-control"
  146.                          id="adresse" placeholder="" required>
  147.                   <input type="hidden" id="adresseSelected" value="false" />
  148.                   <div class="address-feedback position-absolute list-group top-0"
  149.                        style="z-index:1100;top: calc(100% - 14px);width: calc(100% - 63px);">
  150.                   </div>
  151.                 </div>
  152.               </div>
  153.             </div>
  154.             <div class="form-group">
  155.               <div class="__input-wrapper">
  156.                 <div class="__inner">
  157.                   <label for="validationCustom01">Adresse courriel (ex : nom@domaine.fr)
  158.                     <span class="colorRed d-validation-none">*</span>
  159.                   </label>
  160.                   <input type="email" class="form-control" autocomplete="email" name="email" id="validationCustom01"
  161.                          placeholder="" required>
  162.                 </div>
  163.               </div>
  164.             </div>
  165.             <div class="form-group">
  166.               <div class="__input-wrapper">
  167.                 <div class="__inner">
  168.                   <label for="validationCustom02">Objet
  169.                     <span class="colorRed d-validation-none">*</span>
  170.                   </label>
  171.                   <input type="text" name="objet" class="form-control" id="validationCustom02" placeholder="" required>
  172.                 </div>
  173.               </div>
  174.             </div>
  175.             <div class="form-group">
  176.               <div class="__input-wrapper _textarea">
  177.                 <div class="__inner">
  178.                   <label for="validationCustom03">Votre Message
  179.                     <span class="colorRed d-validation-none">*</span>
  180.                     :</label>
  181.                   <textarea class="form-control" name="message" id="validationCustom03" placeholder="" rows="3"
  182.                             required></textarea>
  183.                 </div>
  184.               </div>
  185.             </div>
  186.             {# <div class="form-group" data-form-validation-step-file-wrapper>
  187.               <div class="inputFileWrapper">
  188.                 <input type="file" name="file" id="file-1" class="inputfile inputfile-1"
  189.                        accept="image/jpeg,image/gif,image/png,.pdf,.doc,.odt"/>
  190.                 <label for="file-1" class="label-file">
  191.                   <svg aria-hidden="true" focusable="false" data-name="Calque 1"
  192.                        xmlns="http://www.w3.org/2000/svg" viewbox="0 0 283.5 283.5">
  193.                     <path
  194.                       d="M261.5,124.6c-5.7-3.5-12.2-2.5-17.4,2.7-37.4,37.4-74.8,75-112.4,112.3-15.1,15-33.5,19.4-53.8,12.9C41.8,240.8,30.2,195,56.2,167.4c6.8-7.2,13.8-14,20.8-20.9h0l1.2-1.2,48-48,44.4-44.4c4.9-4.9,9.7-9.8,14.6-14.6,7.8-7.7,17.2-11.1,28-9.4,12.9,2,22,9.3,26.2,21.7,4.3,12.6,1.5,24-7.6,33.6-5.1,5.4-10.5,10.6-15.8,15.9L168.1,148c-9.2,9.2-18.4,18.5-27.7,27.6l-5.3,5.4c-1.4,1.3-2.6,2.8-4,4-2.8,2.5-5.3,5.3-8,7.9-1.5,1.4-3.1,2.6-4.6,3.9-7.7,4.1-14.1-1.3-14.5-1.7-5.6-5.4-5.7-13.3-.3-18.8l84-84c4.2-4.2,8.5-8.3,12.5-12.7,5.1-5.8,3.7-15-2.7-19.4-5.7-3.9-12.6-3.1-17.8,2.1L144.5,97.5c-19.9,19.9-39.9,39.8-59.8,59.8C75,167,71.3,178.6,73.3,192c2.7,18.7,19.6,33.3,38.6,33.3a39.87,39.87,0,0,0,29.3-12.2L250.5,103.8a59.56,59.56,0,0,0,15.7-27,58.78,58.78,0,0,0,1.9-18.2V57.5a48.59,48.59,0,0,0-.7-5.5C262.8,28,249,11.7,225.7,4.5c-21-6.5-40.4-2.1-56.8,12.6-10.2,9.1-19.5,19.2-29.2,28.9Q89.6,95.95,39.6,146c-15.1,15-23.5,33.1-24.1,54.4-.7,25.5,8.8,46.9,28.3,63.3,17.2,14.6,37.4,20.4,59.8,18a76.42,76.42,0,0,0,46.2-21.8c11.9-11.7,23.6-23.5,35.4-35.3,12.8-12.7,25.5-25.5,38.2-38.2l39.9-39.9a19.61,19.61,0,0,0,3.6-5.4C269.5,135.1,266.8,127.9,261.5,124.6Z"/>
  195.                   </svg>
  196.                   <span>
  197.                                         <span class="__underline">Ajouter une pièce jointe</span><br>
  198.                                         <span class="fsXs">5 Mo maximum. JPEG, GIF, PNG, PDF, DOC, ODT</span>
  199.                                     </span>
  200.                 </label>
  201.               </div>
  202.               <script>
  203.                 'use strict';
  204.                 ;
  205.                 (function (document, window, index) {
  206.                   var inputs = document.querySelectorAll('.inputfile');
  207.                   Array.prototype.forEach.call(inputs, function (input) {
  208.                     var label = input.nextElementSibling,
  209.                       labelVal = label.innerHTML;
  210.                     input.addEventListener('change', function (e) {
  211.                       var fileName = '';
  212.                       if (this.files && this.files.length > 1)
  213.                         fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
  214.                       else
  215.                         fileName = e.target.value.split('\\').pop();
  218.                       if (fileName)
  219.                         label.querySelector('span').innerHTML = fileName;
  220.                       else
  221.                         label.innerHTML = labelVal;
  223.                     }});
  224. // Firefox bug fix
  225.                     input.addEventListener('focus', function () {
  226.                       input.classList.add('has-focus');
  227.                     });
  228.                     input.addEventListener('blur', function () {
  229.                       input.classList.remove('has-focus');
  230.                     });
  231.                   });
  232.                 }(document, window, 0));
  233.               </script>
  234.             </div> #}
  235.             <div class="form-group">
  236.               <div class="form-check">
  237.                 <input class="form-check-input" type="checkbox" value="" id="invalidCheck" name="checkbox" required>
  238.                 <label class="form-check-label" for="invalidCheck">
  239.                   En cochant cette case, j'accepte les
  240.                   <a href="{{ path('post_detail', {slug: 'cgu'}) }}">Conditions Générales d'Utilisation</a>&nbsp;<span
  241.                     class="colorRed d-validation-none">*</span>
  242.                 </label>
  243.                 <p class="invalid-feedback" id="invalidFeedback">
  244.                   Ce champs est obligatoire
  245.                 </p>
  246.               </div>
  247.             </div>
  248.             <div class="form-group">
  249.               <div class="form-check">
  250.                 <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" name="checkbox2">
  251.                 <label class="form-check-label" for="invalidCheck2">
  252.                   J'accepte de recevoir les informations du Département du Nord
  253.                 </label>
  254.               </div>
  255.             </div>
  256.             <div class="form-group" id="infoUnsubscribe">
  257.               <p>
  258.                 Votre adresse de messagerie sera uniquement utilisée pour vous envoyer les lettres d'information du
  259.                 Département du Nord. Vous pouvez à tout moment utiliser le lien de désabonnement intégré dans
  260.                 l'infolettre. <a href="https://lenord.fr/donnees-personnelles#infolettre/">En savoir plus sur la gestion
  261.                   de vos données et vos droits</a>.
  262.               </p>
  263.             </div>
  264.           </div>
  265.           <div class="form-group d-none d-validation-block">
  266.             <input type="hidden" name="nb1" value="{{ caps['valeur1']['valeur'] }}">
  267.             <input type="hidden" name="nb2" value="{{ caps['valeur2']['valeur'] }}">
  268.             <div class="__input-wrapper _captcha">
  269.               <div class="__inner">
  270.                 <label for="inputCaptcha">Répondez à cette question de vérification avant d’envoyer votre évènement :
  271.                   Quel est le résultat de {{ caps['valeur1']['libelle'] }}
  272.                   +
  273.                   {{ caps['valeur2']['libelle'] }} (en chiffres)
  274.                   <span class="colorRed d-validation-none">*</span>
  275.                 </label>
  276.                 <input class="form-control _captcha" id="inputCaptcha" type="text" name="captcha" data-focus-content-target="verify">
  277.               </div>
  278.             </div>
  279.           </div>
  280.           <div class="__buttons-wrapper">
  281.             <button class="btn btnFormSubmit d-none d-validation-inline-block _modify" data-form-validation-step-toggle>
  282.               <span>MODIFIER</span>
  283.             </button>
  284.             <button class="btn btnFormSubmit d-none d-validation-inline-block" type="submit">
  285.               <span>ENVOYER</span>
  286.             </button>
  287.             <button class="btn btnFormSubmit d-validation-none _validation" data-form-validation-step-toggle>
  288.               <span>VALIDER</span>
  289.             </button>
  290.           </div>
  291.         </form>
  292.       </div>
  293.     </div>
  294.     {% if contact_posts is not empty %}
  295.       <div>
  296.         <div class="containerSm">
  297.           <h2 class="text-center mb-0">Dernières actualités</h2>
  298.           <div class="pT">
  299.             {% if contact.link1 is not null or contact.link2 is not null %}
  300.               <ul class="lsNone pb-3">
  301.                 <li>
  302.                   {% if contact.link1 is not null %}
  303.                     <a href="{{ contact.link1 }}" target="_blank" class="cardResource _external">
  304.                       <div class="__col-icon">
  305.                         <svg aria-hidden="true" focusable="false" id="Calque_1"
  306.                              data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 283.5 283.5">
  307.                           <path class="cls-1"
  308.                                 d="M172.1,104.5a15.74,15.74,0,0,0-12.4-5.9,16,16,0,0,0-12.3,26.2,14.31,14.31,0,0,0,1.1,1.5l8.3,8.2a46.35,46.35,0,0,1,0,65.6l-36.6,36.6a46.41,46.41,0,0,1-65.6,0l-7.8-7.8a46.41,46.41,0,0,1,0-65.6l21.5-21.5a5.72,5.72,0,0,0,.7-.8,16,16,0,0,0-11.8-26.8,15.71,15.71,0,0,0-11.5,5L24.2,140.7a78.34,78.34,0,0,0,.1,110.6l7.8,7.8a78.46,78.46,0,0,0,110.8,0l36.6-36.6a78.46,78.46,0,0,0,0-110.8Z"/>
  309.                           <path
  310.                             d="M259.1,32.1l-7.8-7.8a78.46,78.46,0,0,0-110.8,0L103.9,60.9a78.34,78.34,0,0,0,0,110.8l7.7,7.7.6.6a7.17,7.17,0,0,0,1.5,1.1,15.76,15.76,0,0,0,9.5,3.2,16,16,0,0,0,10-28.5l-6.7-6.7a46.41,46.41,0,0,1,0-65.6l36.6-36.6a46.35,46.35,0,0,1,65.6,0l7.8,7.8a46.35,46.35,0,0,1,0,65.6l-21.4,21.4a15.73,15.73,0,0,0-4.9,11.5,16,16,0,0,0,26.1,12.4,3.92,3.92,0,0,0,1-.8l21.9-21.9A78.43,78.43,0,0,0,259.1,32.1Z"/>
  311.                         </svg>
  312.                         <span class="sr-only">lien</span>
  313.                       </div>
  314.                       <div class="__col-info">
  315.                         <div class="__title">
  316.                           <span>{{ contact.link1 }}</span>
  317.                         </div>
  318.                       </div>
  319.                     </a>
  320.                   {% endif %}
  321.                 </li>
  322.                 <li>
  323.                   {% if contact.link2 is not null %}
  324.                     <a href="{{ contact.link2 }}" target="_blank" class="cardResource _external">
  325.                       <div class="__col-icon">
  326.                         <svg aria-hidden="true" focusable="false" id="Calque_1"
  327.                              data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 283.5 283.5">
  328.                           <path class="cls-1"
  329.                                 d="M172.1,104.5a15.74,15.74,0,0,0-12.4-5.9,16,16,0,0,0-12.3,26.2,14.31,14.31,0,0,0,1.1,1.5l8.3,8.2a46.35,46.35,0,0,1,0,65.6l-36.6,36.6a46.41,46.41,0,0,1-65.6,0l-7.8-7.8a46.41,46.41,0,0,1,0-65.6l21.5-21.5a5.72,5.72,0,0,0,.7-.8,16,16,0,0,0-11.8-26.8,15.71,15.71,0,0,0-11.5,5L24.2,140.7a78.34,78.34,0,0,0,.1,110.6l7.8,7.8a78.46,78.46,0,0,0,110.8,0l36.6-36.6a78.46,78.46,0,0,0,0-110.8Z"/>
  330.                           <path
  331.                             d="M259.1,32.1l-7.8-7.8a78.46,78.46,0,0,0-110.8,0L103.9,60.9a78.34,78.34,0,0,0,0,110.8l7.7,7.7.6.6a7.17,7.17,0,0,0,1.5,1.1,15.76,15.76,0,0,0,9.5,3.2,16,16,0,0,0,10-28.5l-6.7-6.7a46.41,46.41,0,0,1,0-65.6l36.6-36.6a46.35,46.35,0,0,1,65.6,0l7.8,7.8a46.35,46.35,0,0,1,0,65.6l-21.4,21.4a15.73,15.73,0,0,0-4.9,11.5,16,16,0,0,0,26.1,12.4,3.92,3.92,0,0,0,1-.8l21.9-21.9A78.43,78.43,0,0,0,259.1,32.1Z"/>
  332.                         </svg>
  333.                         <span class="sr-only">lien</span>
  334.                       </div>
  335.                       <div class="__col-info">
  336.                         <div class="__title">
  337.                           <span>{{ contact.link2 }}</span>
  338.                         </div>
  339.                       </div>
  340.                     </a>
  341.                   {% endif %}
  342.                 </li>
  343.               </ul>
  344.             {% endif %}
  345.             {% if contact_posts is not empty %}
  346.               {% for post in contact_posts %}
  347.                 {% include 'Nordinfo/Main/parts/card.html.twig' with {
  348.                   'type' : 'link-external',
  349.                   'url' : path('post_detail', {"slug": post.slug}),
  350.                   'title' : post.title
  351.                 } %}
  352.               {% endfor %}
  353.             {% endif %}
  354.           </div>
  355.         </div>
  356.       </div>
  357.     {% endif %}
  358.   </main>
  359. {% endblock %}
  360. {% block footer_top %}
  361.   {% if is_preview != 1 %}
  362.     <div class="container pB pT">
  363.       {% include 'Nordinfo/Main/parts/article-actions.html.twig' with {'post_title':contact.firstName, 'post_id':'test', 'is_nord_services':true, 'is_contact_page_nord_info':true} %}
  364.     </div>
  365.   {% endif %}
  366.   {% include 'Nordinfo/Main/parts/preFooter.html.twig' with {prefooter_template: 'nordinfo'} %}
  367. {% endblock %}
  368. {% block javascripts %}
  369.   {{ parent() }}
  370.   <script>
  371.     // FACULTATIF : Pour l'infobulle bootstrap du champ #adresse
  372.     $(function () {
  373.       $('[data-toggle="tooltip"]').tooltip();
  374.     });
  376.     /*
  377.     * Script de gestion de recherche avec l'API adresses.data.gouv.fr
  378.     * 
  379.     */
  381.     var currentFocus = -1;
  382.     var fetchTrigger = 0;
  384.     // Fonction pour mettre en forme visuellement un résultat sélectionné
  385.     function setActive() {
  386.       var nbVal = $("div.address-feedback a").length;
  387.       if (!nbVal)
  388.         return false; // Si on n'a aucun résultat listé, on s'arrête là.
  389.       // On commence par nettoyer une éventuelle sélection précédente
  390.       $('div.address-feedback a').removeClass("active");
  392.       // Bidouille mathématique pour contraindre le focus dans la plage du nombre de résultats
  393.       currentFocus = ((currentFocus + nbVal - 1) % nbVal) + 1;
  395.       $('div.address-feedback a:nth-child(' + currentFocus + ')').addClass("active");
  396.     }
  398.     // Au clic sur une adresse suggérée, on ventile l'adresse dans les champs appropriés. On espionne mousedown plutôt que click pour l'attraper avant la perte de focus du champ adresse.
  399.     $('div.address-feedback').on("mousedown", "a", function (event) {
  400.       // Stop la propagation par défaut
  401.       event.preventDefault();
  402.       event.stopPropagation();
  404.       $("#adresse").val($(this).attr("data-name"));
  405.       $("#ville").val($(this).attr("data-city"));
  406.       $("#adresseSelected").val("true");
  407.       $("#adresse").removeClass("error").parent().find('div.error').remove();
  409.       $('.address-feedback').empty();
  410.     });
  412.     // On espionne le clavier dans le champ adresse pour déclencher les actions qui vont bien
  413.     $("#adresse").keyup(function (event) {
  414.       $("#adresseSelected").val("false");
  415.       // Stop la propagation par défaut
  416.       event.preventDefault();
  417.       event.stopPropagation();
  419.       if (event.keyCode === 38) { // Flèche HAUT
  420.         currentFocus--;
  421.         setActive();
  422.         return false;
  423.       } else if (event.keyCode === 40) { // Flèche BAS
  424.         currentFocus++;
  425.         setActive();
  426.         return false;
  427.       } else if (event.keyCode === 13) { // Touche ENTREE
  428.         if (currentFocus > 0) {
  429.           // On simule un clic sur l'élément actif
  430.           $("div.address-feedback a:nth-child(" + currentFocus + ")").mousedown();
  431.         }
  432.         return false;
  433.       }
  435.       // Si on arrive ici, c'est que l'user a avancé dans la saisie : on réinitialise le curseur de sélection.
  436.       $('div.address-feedback a').removeClass("active");
  437.       currentFocus = 0;
  439.       // On annule une éventuelle précédente requête en attente
  440.       clearTimeout(fetchTrigger);
  442.       // Si le champ adresse est vide, on nettoie la liste des suggestions et on ne lance pas de requête.
  443.       let rue = $("#adresse").val();
  444.       if (rue.length === 0) {
  445.         $('.address-feedback').empty();
  446.         return false;
  447.       }
  449.       // On lance une minuterie pour une requête vers l'API.
  450.       fetchTrigger = setTimeout(function () {
  451.         // On lance la requête sur l'API
  452.         $.get('https://api-adresse.data.gouv.fr/search/', {
  453.           q: rue,
  454.           limit: 15,
  455.           autocomplete: 1
  456.         }, function (data, status, xhr) {
  457.           let liste = "";
  458.           $.each(data.features, function (i, obj) {
  459.             // Données phase 1 (obj.properties.label) & phase 2 : name, postcode, city.
  460.             // J'ajoute chaque élément dans une liste
  461.             let cooladdress = obj.properties.name + " " + obj.properties.postcode + " <strong>" + obj.properties.city + "</strong>";
  462.             liste += '<a class="list-group-item list-group-item-action py-1" href="#" name="' + obj.properties.label + '" data-name="' + obj.properties.name + '" data-postcode="' + obj.properties.postcode + '" data-city="' + obj.properties.city + '">' + cooladdress + '</a>';
  463.           });
  464.           $('.address-feedback').html(liste);
  465.         }, 'json');
  466.       }, 500);
  467.     });
  469.     // On cache la liste si le champ adresse perd le focus
  470.     $("#adresse").focusout(function () {
  471.       $('.address-feedback').empty();
  472.     });
  474.     // On annule le comportement par défaut des touches entré et flèches si une liste de suggestion d'adresses est affichée
  475.     $("#adresse").keydown(function (e) {
  476.       if ($("div.address-feedback a").length > 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) {
  477.         e.preventDefault();
  478.       }
  479.     });
  480.   </script>
  481. {% endblock %}