templates/property.html.twig line 7

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Biens{% endblock %}
  5. {% block body %} 
  7.     {% set headerContent = content('Biens', 'Header') %}
  9.     {% if headerContent.picture is defined and headerContent.picture is not empty %}
  10.         {% set backgroundImage = headerContent.picture[0].path %}
  11.     {% else %}
  12.         {% set backgroundImage = 'empty' %}
  13.     {% endif %}
  15.     {#
  16.     <header class="header-tracol slider-home slider-not-home who-is bottom-right-border position-relative overflow-hidden to-right" id="sliderHeader"  style="background: url({% if backgroundImage == 'empty' %}'https://tracol.lu/uploads/images/residences-61c0b1dd3141b610699350.jpeg'{% else %}'/uploads/images/{{ backgroundImage }}'{% endif %}) center center no-repeat;background-size:cover;">
  17.         <div class="container-fluid">
  18.             <div id="header-habiter" class="col-lg-8 mx-auto div-svg-header">
  19.                 <div class="header-habiter-div2">
  20.                     {% if headerContent.name is defined %}
  21.                         <svg id="svg-habiter" width="10" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 10 16"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Tracé 76</title><path d="M9.08929,0.51465v0h-9.08929v0v14.77002v0l9.08929,-1.93109v0z" fill="#f6a400" fill-opacity="1"></path></g></g></svg>
  22.                         <h2 class="header-habiter-title col-lg-8">{{ headerContent.name }}</h2>
  23.                     {% endif %}
  24.                 </div>
  25.             </div>
  26.         </div>
  27.     </header>
  28.     #}
  33.     <div class="container-fluid">
  34.         {% set sectionContent1 = content('Biens', 'Section-1') %}
  36.         {#
  37.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  38.             <div class="col-lg-5 property-title" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  39.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  40.                     <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
  41.                 </svg>
  42.                 {% if properties|length == 0 %}
  43.                     <h1 class="lowercase-title">Nous n'avons aucun bien correspondant à votre recherche.</h1>
  44.                 {% elseif properties|length == 1 %}
  45.                     <h1 class="project-title">{{ properties|length }} bien disponible</h1>
  46.                 {% else %}
  47.                     <h1 class="project-title">{{properties|length }} biens disponibles</h1>
  48.                 {% endif %}
  49.             </div>
  50.             <div class="separator"></div>
  51.             <div class="col-lg-6 pre-section-content">
  52.                 {% if sectionContent1.content is defined %}
  53.                     {{ sectionContent1.content|raw }}
  54.                 {% else %}
  55.                     Que vous soyez un particulier ou un professionnel, que vous recherchiez un appartement, une maison, un bureau ou un commerce, nos équipes d’experts vous accompagnent tout au long de votre projet immobilier.
  56.                 {% endif %}
  57.             </div>
  58.         </div>
  59.         #}
  62.         <section class="project" style="margin-bottom: 120px; margin-top: 60px">
  63.             
  64.             <div id="button-property-page"  class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; padding-left: 7px">
  65.                 <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  66.                 <button data-id="sale" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ACHAT</span></button>
  67.                 <button data-id="rental" class="btn btn-primary come border-radius projectButton"><span class="span-projects">LOCATION</span></button>
  68.             </div>
  70.             <div id="button-property-page-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
  71.                 <div id="flick3" class="flicking-viewport">
  72.                     <div class="flicking-camera">
  73.                         <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  74.                         <button data-id="sale" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ACHAT</span></button>
  75.                         <button data-id="rental" class="btn btn-primary come border-radius projectButton"><span class="span-projects">LOCATION</span></button>
  76.                     </div>
  77.                 </div>
  78.             </div>
  80.             <div class="col-lg-8 mx-auto div-svg-header deactive-tablet" style="display: flex; flex-direction: column; justify-content: center">
  82.                 {#
  83.                 <div style="display: flex; flex-direction: row; padding-left: 7px; align-items: center; margin-top: 15px;">
  84.                     <div id="filter-desktop" class="filters-biens">
  85.                         {% for key, subType in getTypeProperties() %}
  86.                             <button data-id="{{ key }}" class="select-projet">{{ subType }} <i class="fas fa-times"></i></button>
  87.                         {% endfor %}
  88.                     </div>
  90.                     <div id="filter-mobile" class="col-lg-3 div-form selectSubFilter property" style="display: none">
  91.                         <div class="input-group dropdown show">
  92.                             <label class="label-search-filter" for="location">Filtrer par Type</label>
  93.                             <input style="height: 75px; width: 60px;" type="text" autocomplete="off" name="filters" id="filters"
  94.                                    class="form-control" aria-expanded="false">
  95.                             <ul id="form-search-filter-ajax" class="dropdown-menu form-search-filter-ajax" aria-labelledby="">
  96.                                 {% for key, subType in getTypeProperties() %}
  97.                                     <li value="{{ key }}" data-id="{{ key }}" class="select-filter"><i class="fas fa-times"></i>{{ subType }}</li>
  98.                                 {% endfor %}
  99.                             </ul>
  100.                         </div>
  101.                     </div>
  102.                 </div>
  103.                 #}
  107.                 <div id="loading">
  108.                     <h1 id="showOutput"></h1>
  109.                 </div>
  112.                 <div id="properties" class="col-lg-12 mt-5" style="display: flex; flex-wrap: wrap; flex-direction: row">
  113.                     {% for property in properties %}
  114.                         <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  115.                             {#
  116.                             <div class="div-hover-2" id="div-hover-2" aria-haspopup="true" style="position: absolute; bottom: 8px; left: 9px; background-color: #242424; color: white; width: 291px; height: 70px">
  117.                                                             {% if property.comments[0].comment is not empty %}
  118.                                                                 <p class="project-content">
  119.                                                                     {{ property.comments[0].comment|slice(0, 350) }}</p>
  121.                                                                 <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  122.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  123.                                                                 </a>
  124.                                                             {% else %}
  125.                                                                 <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  126.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  127.                                                                 </a>
  128.                                                             {% endif %}
  129.                                                         </div>
  131.                                                         <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  132.                                                             <p style="font-size: 20px;" class="properties-price">
  133.                                                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  134.                                                             </p>
  135.                                                         </div>
  136.                             #}
  139.                             {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  140.                             {% if property.pictures is not empty %}
  141.                                 <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}" style="height:300px;">
  142.                                     {% for picture in property.pictures|slice(0,3) %}
  143.                                         {#                                    <img class="img-100" src="{{ picture.url }}">#}
  144.                                         <div class="img" style="background-image: url('{{ picture.url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  145.                                         </div>
  146.                                     {% endfor %}
  147.                                 </div>
  149.                             {% else %}
  150.                                 <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  151.                             {% endif %}
  152.                             <div class="row col-md-12 justify-content-between">
  153.                                 <ul class="col-md-4 items">
  154.                                     <li class="item surface">
  155.                                        <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  156.                                     </li>
  157.                                 </ul>
  158.                                 <div class="col-md-8 properties-price d-flex justify-content-end">
  159.                                     {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  160.                                 </div>
  161.                             </div>
  162.                             <p class="city">{{ property.city.name }}</p>
  163.                             <p class="project-name">{{ property.reference }}</p>
  164.                         </div>
  165.                     {% else %}
  166.                         <h4>Aucun bien disponible avec ces critères</h4>
  167.                     {% endfor %}
  168.                 </div>
  169.                 {#<div class="text-center text-capitalize more-projects">
  170.                     <p>AFFICHER PLUS DE BIENS</p>
  171.                 </div>#}
  172.             </div>
  173.         </section>
  175.         <section class="other-properties pt-5 pb-5" style="background:#F7F7F7">
  176.             <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; margin-top: 30px">
  177.                 <div class="col-lg-6">
  178.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  179.                         <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"></path>
  180.                     </svg>
  181.                     <h1 class="project-title">
  182.                         {% if app.request.attributes.get('_route_params')['keyword'] is defined %}
  183.                             {% if app.request.attributes.get('_route_params')['keyword'] == 'location' %}
  184.                                 {% set otherDispo = 'vente' %}
  185.                             {% else %}
  186.                                 {% set otherDispo = 'location' %}
  187.                             {% endif %}
  188.                         {% else %}
  189.                             {% set otherDispo = null %}
  190.                         {% endif %}
  191.                         NOS biens disponibles<br> {% if otherDispo %}À la <span style="color:#F6A400">{{ otherDispo }}</span>{% endif %}
  192.                     </h1>
  193.                 </div>
  194.             </div>
  196.             <div  class="col-lg-8 mx-auto">
  197.                 <div id="propertiesOther" class="col-lg-12 mt-5 property-other-list" style="display: flex; flex-wrap: wrap; flex-direction: row">
  198.                     {% for property in otherProperties %}
  199.                         <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  200.                             {#
  201.                             <div class="div-hover-2" id="div-hover-2" aria-haspopup="true" style="position: absolute; bottom: 8px; left: 9px; background-color: #242424; color: white; width: 291px; height: 70px">
  202.                                                             {% if property.comments[0].comment is not empty %}
  203.                                                                 <p class="project-content">
  204.                                                                     {{ property.comments[0].comment|slice(0, 350) }}</p>
  206.                                                                 <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  207.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  208.                                                                 </a>
  209.                                                             {% else %}
  210.                                                                 <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  211.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  212.                                                                 </a>
  213.                                                             {% endif %}
  214.                                                         </div>
  216.                                                         <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  217.                                                             <p style="font-size: 20px;" class="properties-price">
  218.                                                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  219.                                                             </p>
  220.                                                         </div>
  221.                             #}
  224.                             {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  225.                             {% if property.pictures is not empty %}
  226.                                 <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}">
  227.                                     {% for picture in property.pictures|slice(0,3) %}
  228.                                         {#                                    <img class="img-100" src="{{ picture.url }}">#}
  229.                                         <div class="img" style="background-image: url('{{ picture.url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  230.                                         </div>
  231.                                     {% endfor %}
  232.                                 </div>
  234.                             {% else %}
  235.                                 <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  236.                             {% endif %}
  237.                             <div class="row col-md-12 justify-content-between infos-list">
  238.                                 <ul class="col-md-4 items">
  239.                                     <li class="item surface">
  240.                                         <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  241.                                     </li>
  242.                                 </ul>
  243.                                 <div class="col-md-8 properties-price d-flex justify-content-end">
  244.                                     {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  245.                                 </div>
  246.                             </div>
  247.                             <p class="city">{{ property.city.name }}</p>
  248.                             <p class="project-name">{{ property.reference }}</p>
  249.                         </div>
  250.                     {% endfor %}
  251.                 </div>
  253.                 {% set paramUrl = app.request.get('keyword') %}
  254.                 {% if app.request.get('keyword') == 'location' %}
  255.                     {% set paramUrl = 'vente' %}
  256.                 {% elseif app.request.get('keyword') == 'vente' %}
  257.                     {% set paramUrl = 'location' %}
  258.                 {% endif %}
  259.                 <div id="link-none" class="col-lg-12 mx-auto other-property-link div-svg-header d-flex justify-content-end">
  260.                     <div>
  261.                         <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': paramUrl}) }}">Découvrir plus
  262.                             <svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
  263.                         </a>
  264.                     </div>
  265.                 </div>
  266.             </div>
  268.         </section>
  270.         {#
  271.         <section style="margin-bottom: 80px; margin-top: 150px;">
  272.             <div class="col-lg-8 mx-auto div-svg-header">
  273.                 {% set sectionContent1 = content('Biens', 'Section-2') %}
  274.                 <div id="habiter-content-id" class="col-lg-6 habiter-content">
  275.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  276.                         <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
  277.                     </svg>
  278.                     <div class="col-lg-7">
  279.                         <h1 class="habiter-title mb-5">
  280.                             {% if sectionContent1.name is defined %}
  281.                                 {{ sectionContent1.name }}
  282.                             {% else %}
  283.                                 HABITER AU LUXEMBOURG
  284.                             {% endif %}
  285.                         </h1>
  286.                         {% if sectionContent1.content is defined %}
  287.                             {{ sectionContent1.content|raw }}
  288.                         {% else %}
  289.                             Vous avez découvert l’appartement ou la maison de vos rêves ? Parfait ! En achetant au Luxembourg vous pouvez bénéficier de plusieurs avantages fiscaux.
  290.                         {% endif %}
  291.                     </div>
  292.                 </div>
  293.                 <div id="display-none-mobile" class="col-lg-6 habiter-img">
  294.                     {% if sectionContent1.picture is defined %}
  295.                         <img id="img-property-section" class="img-100" src="/uploads/images/{{ sectionContent1.picture[0].path }}">
  296.                     {% else %}
  297.                         <img id="img-property-section" class="img-100" src="https://tracol.lu/uploads/images/millebierg-6194cb6331d44212004123.png">
  298.                     {% endif %}
  299.                 </div>
  300.             </div>
  301.             <div id="link-none" class="col-lg-8 mx-auto div-svg-header">
  302.                 <div style="display: flex; align-content: center">
  303.                     <a id="link-none-a" class="property-span-arrow" href="{{ path('habiter') }}">Découvrir les avantages
  304.                         <i class="fas fa-arrow-right property-arrow"></i>
  305.                     </a>
  306.                 </div>
  307.             </div>
  308.         </section>
  309.         #}
  311.     </div>
  312.     <div id="img-property-section" class="container-fluid" style="display: none">
  313.         <div id="link-ok" class="col-lg-3" style="display: flex; align-content: center">
  314.             <a class="property-span-arrow" href="{{ path('habiter') }}">Découvrir les avantages
  316.                 <i class="fas fa-arrow-right property-arrow"></i>
  317.             </a>
  318.         </div>
  319.         <div class="col-lg-6 habiter-img">
  320.             {% if sectionContent1.picture is defined %}
  321.                 <img style="padding: 0px;"  class="img-100" src="/uploads/images/{{ sectionContent1.picture[0].path }}">
  322.             {% else %}
  323.                 <img style="padding: 0px;"  class="img-100" src="https://tracol.lu/uploads/images/millebierg-6194cb6331d44212004123.png">
  324.             {% endif %}
  325.         </div>
  326.     </div>
  327.     <script>
  328.         {#const slideNextHeader = document.getElementById('slideNextHeader');#}
  329.         {#const slidePreviousHeader = document.getElementById('slidePreviousHeader');#}
  330.         {#const propertiesCity = document.getElementsByClassName('properties-city')#}
  331.         {#const propertiesArea = document.getElementsByClassName('properties-area')#}
  332.         {#const propertiesReference = document.getElementsByClassName('properties-reference')#}
  333.         {#const propertiesPrice = document.getElementsByClassName('properties-price')#}
  334.         {#const propertiesLink = document.getElementsByClassName('properties-link')#}
  335.         {#const currentFigure = document.getElementsByClassName('current-figure')#}
  336.         {#const lastFigure = document.getElementsByClassName('last-figure')#}
  339.         {#let slideHeader = document.getElementById('sliderHeader');#}
  340.         {#let positionHeader = 0;#}
  341.         {#let positionThumbHeader = 1;#}
  343.         {#arraySlidesHeader = [#}
  344.         {#    {#}
  345.         {#        'position': 1,#}
  346.         {#        'img': '{{ saleProperties[0].pictures[0].url }}',#}
  347.         {#        'city': '{{ saleProperties[0].city.name }}',#}
  348.         {#        'area': '{{ saleProperties[0].area.value == null ? '' : saleProperties[0].area.value ~ areaConversion(saleProperties[0].area.unit) }}',#}
  349.         {#        'reference': '{{ saleProperties[0].reference }}',#}
  350.         {#        'price':  '{{ saleProperties[0].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[0].price.value ~  saleProperties[0].price.currency|replace({"EUR": " €"})  }}',#}
  351.         {#        'link': '{{ path('property-detail', {'id': saleProperties[0].id}) }}',#}
  352.         {#        'dot': 'dot1'#}
  353.         {#    },#}
  354.         {#    {#}
  355.         {#        'position': 2,#}
  356.         {#        'img': '{{ saleProperties[1].pictures[0].url }}',#}
  357.         {#        'city': '{{ saleProperties[1].city.name }}',#}
  358.         {#        'area': '{{ saleProperties[1].area.value == null ? '' : saleProperties[1].area.value ~ areaConversion(saleProperties[1].area.unit) }}',#}
  359.         {#        'reference': '{{ saleProperties[1].reference }}',#}
  360.         {#        'price':  '{{ saleProperties[1].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[1].price.value ~  saleProperties[1].price.currency|replace({"EUR": " €"})  }}',#}
  361.         {#        'link': '{{ path('property-detail', {'id': saleProperties[1].id}) }}',#}
  362.         {#        'dot': 'dot2'#}
  363.         {#    },#}
  364.         {#    {#}
  365.         {#        'position': 3,#}
  366.         {#        'img': '{{ saleProperties[2].pictures[0].url }}',#}
  367.         {#        'city': '{{ saleProperties[2].city.name }}',#}
  368.         {#        'area': '{{ saleProperties[2].area.value == null ? '' : saleProperties[2].area.value ~ areaConversion(saleProperties[2].area.unit) }}',#}
  369.         {#        'reference': '{{ saleProperties[2].reference }}',#}
  370.         {#        'price':  '{{ saleProperties[2].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[2].price.value ~  saleProperties[2].price.currency|replace({"EUR": " €"})  }}',#}
  371.         {#        'link': '{{ path('property-detail', {'id': saleProperties[2].id}) }}',#}
  372.         {#        'dot': 'dot3'#}
  373.         {#    },#}
  374.         {#];#}
  376.         {#slidePreviousHeader.addEventListener('click', () => {#}
  377.         {#    if (arraySlidesHeader.length < (positionThumbHeader  + 1)) {#}
  378.         {#        positionHeader = 0;#}
  379.         {#        positionThumbHeader = 1;#}
  380.         {#    } else {#}
  381.         {#        positionHeader++;#}
  382.         {#        positionThumbHeader++;#}
  383.         {#    }#}
  385.         {#    slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;#}
  386.         {#    propertiesCity[0].innerHTML = arraySlidesHeader[positionHeader].city#}
  387.         {#    propertiesArea[0].innerHTML = arraySlidesHeader[positionHeader].area#}
  388.         {#    propertiesReference[0].innerHTML = arraySlidesHeader[positionHeader].reference#}
  389.         {#    propertiesPrice[0].innerHTML = arraySlidesHeader[positionHeader].price#}
  390.         {#    propertiesLink[0].setAttribute('href', arraySlidesHeader[positionHeader].link)#}
  391.         {#    currentFigure[0].innerHTML = '0'+positionThumbHeader#}
  394.         {#    slideHeader.style.backgroundSize = `cover`;#}
  395.         {#});#}
  396.         {#slideNextHeader.addEventListener('click', () => {#}
  397.         {#    if (positionThumbHeader === 1) {#}
  398.         {#        positionHeader = (arraySlidesHeader.length - 1);#}
  399.         {#        positionThumbHeader = arraySlidesHeader.length;#}
  400.         {#    } else {#}
  401.         {#        positionHeader = positionHeader - 1;#}
  402.         {#        positionThumbHeader = positionThumbHeader - 1;#}
  403.         {#    }#}
  404.         {#    slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;#}
  405.         {#    propertiesCity[0].innerHTML = arraySlidesHeader[positionHeader].city#}
  406.         {#    propertiesArea[0].innerHTML = arraySlidesHeader[positionHeader].area#}
  407.         {#    propertiesReference[0].innerHTML = arraySlidesHeader[positionHeader].reference#}
  408.         {#    propertiesPrice[0].innerHTML = arraySlidesHeader[positionHeader].price#}
  409.         {#    currentFigure[0].innerHTML = '0'+positionThumbHeader#}
  412.         {#    slideHeader.style.backgroundSize = `cover`;#}
  413.         {#});#}
  416.         const futurProjects = document.getElementById('properties')
  417.         let buttons = document.getElementsByClassName('projectButton')
  419.         for (const eElement of buttons) {
  420.             eElement.addEventListener('click', function (e) {
  421.                 e.preventDefault()
  423.                 for (let button of buttons) {
  424.                     if (button.classList.contains('all')){
  425.                         button.classList.remove('all')
  426.                         button.classList.add('come')
  427.                         button.querySelector('span').classList.replace('span-all', 'span-projects')
  428.                     }
  429.                 }
  431.                 eElement.classList.remove('come')
  432.                 eElement.classList.add('all')
  433.                 eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  435.                 fetch('properties/display/'+this.dataset.id, {
  436.                     method: 'GET',
  437.                 })
  438.                     .then(response => response.json())
  439.                     .then(data => {
  440.                         futurProjects.innerHTML = ''
  441.                         futurProjects.innerHTML = data.data
  443.                         _ww = $(window).width();
  444.                         var lightbox = $('.lightbox'),
  445.                             item = 0;
  447.                         $('.lightbox-on').click(function(e){
  448.                             e.stopPropagation();
  449.                             item = 0;
  450.                             console.log('click btn');
  452.                             var id = $(this).attr('data-id'),
  453.                                 max = 0;
  454.                             $('#'+id).toggle();
  455.                             $('#'+id).animate({opacity: 1}, 300);
  456.                             $('#'+id).find('img').each(function( i ) {
  457.                                 //console.log('h : '+$(this).height());
  458.                                 //console.log('w : '+$(this).width());
  459.                                 max = i;
  460.                                 item = 1;
  461.                                 counter(item, max+1);
  462.                                 itemWidth($(this));
  463.                             });
  464.                         });
  466.                         lightbox.click(function(e) {
  467.                             e.stopPropagation();
  468.                             $(this).animate({opacity: 0}, 300, function(){
  469.                                 $(this).toggle();
  470.                             });
  471.                         });
  473.                         $('.closer').on('click', function (e) {
  474.                             e.stopPropagation();
  475.                             $(this).parent().animate(
  476.                                 {opacity: 0},
  477.                                 300,
  478.                                 function(){
  479.                                     $(this).toggle();
  480.                                 }
  481.                             );
  482.                         });
  484.                         function itemWidth(img){
  485.                             img.closest('.items').width(img.width());
  486.                         }
  488.                         function counter(item, max){
  489.                             $('.counter').text(item + ' / ' + max);
  490.                         }
  492.                         $('.item', lightbox).on('click, swipeleft', function (e) {
  493.                             var wd = $(this).width(),
  494.                                 last = $(this).parent().find('.item').last(),
  495.                                 img = $(this).find('.img');
  496.                             itemWidth(img);
  498.                             $(this).animate(
  499.                                 {marginLeft: -wd, opacity: 0},
  500.                                 500,
  501.                                 'swing',
  502.                                 function(){
  503.                                     $(this).insertAfter(last);
  504.                                     $(this).css({marginLeft: 0, opacity: 1});
  505.                                 }
  506.                             );
  507.                         });
  509.                         $('.item', lightbox).on('swiperight', function (e) {
  510.                             var wd = $(this).width(),
  511.                                 first = $(this).parent().find('.item').first(),
  512.                                 last = $(this).parent().find('.item').last(),
  513.                                 img = $(this).find('.img');
  514.                             itemWidth(img);
  516.                             $(last).insertBefore($(this));
  517.                             $(last).css({marginLeft: -wd, opacity: 0});
  518.                             $(this).parent().find('.item').eq(0).animate(
  519.                                 {marginLeft: 0, opacity: 1},
  520.                                 500,
  521.                                 'swing'
  522.                             );
  523.                         });
  525.                         $('.arrows', lightbox).on('click', function (e) {
  526.                             e.stopPropagation();
  528.                             var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  529.                                 max = $(this)
  530.                                     .siblings('.items').find('.item').length,
  531.                                 first = $(this).siblings('.items').find('.item').first(),
  532.                                 last = $(this).siblings('.items').find('.item').last(),
  533.                                 isRight = $(this).hasClass('right'),
  534.                                 marginL = isRight ? -wd : 0,
  535.                                 marginL0 = isRight ? 0: -wd,
  536.                                 opacOn = isRight ? 1 : 0,
  537.                                 opacOff = isRight ? 0 : 1;
  539.                             if (!isRight){
  540.                                 $(last).insertBefore(first);
  541.                                 $(last).css({marginLeft: -wd, opacity: 0});
  542.                                 item++;
  543.                                 if (item == max+1) {item = 1};
  544.                             } else {
  545.                                 item--;
  546.                                 if (item == 0) {item = max};
  547.                             };
  549.                             counter(item, max);
  551.                             var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  552.                             itemWidth(img);
  554.                             $(this).siblings('.items').find('.item').eq(1).animate(
  555.                                 {opacity: opacOn},
  556.                                 500,
  557.                                 'swing');
  559.                             $(this).siblings('.items').find('.item').eq(0).animate(
  560.                                 {marginLeft: marginL, opacity: 1},
  561.                                 500,
  562.                                 'swing',
  563.                                 function(){
  564.                                     if (isRight){
  565.                                         $(this).insertAfter(last);
  566.                                         $(this).css({ marginLeft: 0, opacity: 1});
  567.                                     }
  568.                                 }
  569.                             );
  570.                         });
  573.                         if (_ww > 768){
  574.                             $('.div-img-hover-2').hover(function (e) {
  575.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  576.                                 var htext = $(this).find('.project-content').height();
  577.                                 if (htext == undefined){htext = 0};
  578.                                 $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  579.                                 $(this).find('.project-content').css({'visibility': 'visible'});
  580.                                 $(this).find('.project-content').animate({opacity: 1}, 150);
  581.                             }, function() {
  582.                                 console.log('down');
  583.                                 $(this).find('.div-hover-2').animate({height : 85}, 150);
  584.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  586.                                 $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  587.                                     $(this).find('.project-content').css({'visibility': 'hidden'});
  588.                                 });
  589.                             });
  590.                         } else {
  591.                             $('.div-img-hover-2').on( "tap", function( event ) {
  592.                                 console.log('tap tap');
  593.                                 var opened = $(this).find('.div-hover-2').hasClass('open'),
  594.                                     ht = opened ? 85 : '100%',
  595.                                     vis = opened ? 0 : 1;
  596.                                 $(this).find('.div-hover-2').toggleClass('open');
  597.                                 $(this).find('.div-hover-2').animate({height : ht}, 150);
  598.                                 $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  599.                             });
  600.                         }
  601.                     })
  602.                     .catch((error) => {
  603.                         console.error('Error:', error);
  604.                     });
  605.             })
  606.         }
  609.         if (window.matchMedia("(max-width: 768px)").matches) {
  610.             new Flicking("#flick3", {
  611.                 moveType: "freeScroll",
  612.                 bound: true
  613.             });
  615.         }
  617.         if (window.matchMedia("(max-width: 768px)").matches) {
  618.             const test = document.getElementsByClassName('select-filter')
  620.             for (const testElement of test) {
  621.                 testElement.addEventListener('click', function (e) {
  622.                     e.preventDefault()
  623.                     testElement.classList.toggle('select-projet-active')
  624.                     const infos = document.querySelector('.projectButton.all')
  625.                     const dataId = []
  626.                     const tests = document.querySelectorAll('.select-filter.select-projet-active')
  628.                     for (const test1 of tests) {
  629.                         dataId.push(parseFloat(test1.dataset.id))
  630.                     }
  631.                     fetch('properties/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  632.                         method: 'GET',
  633.                     })
  634.                         .then(response => response.json())
  635.                         .then(data => {
  636.                             futurProjects.innerHTML = data.data
  637.                         })
  638.                         .catch((error) => {
  639.                             console.error('Error:', error);
  640.                         });
  641.                 })
  642.             }
  643.         } else {
  644.             const test = document.getElementsByClassName('select-projet')
  645.             const textOutput = document.querySelector("#showOutput");
  647.             for (const testElement of test) {
  648.                 testElement.addEventListener('click', function (e) {
  649.                     displayLoading()
  650.                     e.preventDefault()
  651.                     testElement.classList.toggle('select-projet-active')
  652.                     const infos = document.querySelector('.projectButton.all')
  653.                     const dataId = []
  654.                     const tests = document.querySelectorAll('.select-projet.select-projet-active')
  655.                     for (const test1 of tests) {
  656.                         dataId.push(parseFloat(test1.dataset.id))
  657.                     }
  658.                     fetch('properties/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  659.                         method: 'GET'
  660.                     })
  661.                         .then(response => response.json())
  662.                         .then(data => {
  663.                             hideLoading()
  664.                             futurProjects.innerHTML = data.data
  666.                             _ww = $(window).width();
  667.                             var lightbox = $('.lightbox'),
  668.                                 item = 0;
  670.                             $('.lightbox-on').click(function(e){
  671.                                 e.stopPropagation();
  672.                                 item = 0;
  673.                                 console.log('click btn');
  675.                                 var id = $(this).attr('data-id'),
  676.                                     max = 0;
  677.                                 $('#'+id).toggle();
  678.                                 $('#'+id).animate({opacity: 1}, 300);
  679.                                 $('#'+id).find('img').each(function( i ) {
  680.                                     //console.log('h : '+$(this).height());
  681.                                     //console.log('w : '+$(this).width());
  682.                                     max = i;
  683.                                     item = 1;
  684.                                     counter(item, max+1);
  685.                                     itemWidth($(this));
  686.                                 });
  687.                             });
  689.                             lightbox.click(function(e) {
  690.                                 e.stopPropagation();
  691.                                 $(this).animate({opacity: 0}, 300, function(){
  692.                                     $(this).toggle();
  693.                                 });
  694.                             });
  696.                             $('.closer').on('click', function (e) {
  697.                                 e.stopPropagation();
  698.                                 $(this).parent().animate(
  699.                                     {opacity: 0},
  700.                                     300,
  701.                                     function(){
  702.                                         $(this).toggle();
  703.                                     }
  704.                                 );
  705.                             });
  707.                             function itemWidth(img){
  708.                                 img.closest('.items').width(img.width());
  709.                             }
  711.                             function counter(item, max){
  712.                                 $('.counter').text(item + ' / ' + max);
  713.                             }
  715.                             $('.item', lightbox).on('click, swipeleft', function (e) {
  716.                                 var wd = $(this).width(),
  717.                                     last = $(this).parent().find('.item').last(),
  718.                                     img = $(this).find('.img');
  719.                                 itemWidth(img);
  721.                                 $(this).animate(
  722.                                     {marginLeft: -wd, opacity: 0},
  723.                                     500,
  724.                                     'swing',
  725.                                     function(){
  726.                                         $(this).insertAfter(last);
  727.                                         $(this).css({marginLeft: 0, opacity: 1});
  728.                                     }
  729.                                 );
  730.                             });
  732.                             $('.item', lightbox).on('swiperight', function (e) {
  733.                                 var wd = $(this).width(),
  734.                                     first = $(this).parent().find('.item').first(),
  735.                                     last = $(this).parent().find('.item').last(),
  736.                                     img = $(this).find('.img');
  737.                                 itemWidth(img);
  739.                                 $(last).insertBefore($(this));
  740.                                 $(last).css({marginLeft: -wd, opacity: 0});
  741.                                 $(this).parent().find('.item').eq(0).animate(
  742.                                     {marginLeft: 0, opacity: 1},
  743.                                     500,
  744.                                     'swing'
  745.                                 );
  746.                             });
  748.                             $('.arrows', lightbox).on('click', function (e) {
  749.                                 e.stopPropagation();
  751.                                 var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  752.                                     max = $(this)
  753.                                         .siblings('.items').find('.item').length,
  754.                                     first = $(this).siblings('.items').find('.item').first(),
  755.                                     last = $(this).siblings('.items').find('.item').last(),
  756.                                     isRight = $(this).hasClass('right'),
  757.                                     marginL = isRight ? -wd : 0,
  758.                                     marginL0 = isRight ? 0: -wd,
  759.                                     opacOn = isRight ? 1 : 0,
  760.                                     opacOff = isRight ? 0 : 1;
  762.                                 if (!isRight){
  763.                                     $(last).insertBefore(first);
  764.                                     $(last).css({marginLeft: -wd, opacity: 0});
  765.                                     item++;
  766.                                     if (item == max+1) {item = 1};
  767.                                 } else {
  768.                                     item--;
  769.                                     if (item == 0) {item = max};
  770.                                 };
  772.                                 counter(item, max);
  774.                                 var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  775.                                 itemWidth(img);
  777.                                 $(this).siblings('.items').find('.item').eq(1).animate(
  778.                                     {opacity: opacOn},
  779.                                     500,
  780.                                     'swing');
  782.                                 $(this).siblings('.items').find('.item').eq(0).animate(
  783.                                     {marginLeft: marginL, opacity: 1},
  784.                                     500,
  785.                                     'swing',
  786.                                     function(){
  787.                                         if (isRight){
  788.                                             $(this).insertAfter(last);
  789.                                             $(this).css({ marginLeft: 0, opacity: 1});
  790.                                         }
  791.                                     }
  792.                                 );
  793.                             });
  796.                             if (_ww > 768){
  797.                                 $('.div-img-hover-2').hover(function (e) {
  798.                                     $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  799.                                     var htext = $(this).find('.project-content').height();
  800.                                     if (htext == undefined){htext = 0};
  801.                                     $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  802.                                     $(this).find('.project-content').css({'visibility': 'visible'});
  803.                                     $(this).find('.project-content').animate({opacity: 1}, 150);
  804.                                 }, function() {
  805.                                     console.log('down');
  806.                                     $(this).find('.div-hover-2').animate({height : 85}, 150);
  807.                                     $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  809.                                     $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  810.                                         $(this).find('.project-content').css({'visibility': 'hidden'});
  811.                                     });
  812.                                 });
  813.                             } else {
  814.                                 $('.div-img-hover-2').on( "tap", function( event ) {
  815.                                     console.log('tap tap');
  816.                                     var opened = $(this).find('.div-hover-2').hasClass('open'),
  817.                                         ht = opened ? 85 : '100%',
  818.                                         vis = opened ? 0 : 1;
  819.                                     $(this).find('.div-hover-2').toggleClass('open');
  820.                                     $(this).find('.div-hover-2').animate({height : ht}, 150);
  821.                                     $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  822.                                 });
  823.                             }
  824.                             $('.div-hover').hover(function (e) {
  825.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  826.                             }, function() {
  827.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  828.                             });
  829.                         })
  830.                         .catch((error) => {
  831.                         });
  832.                 })
  833.             }
  834.         }
  836.         const filter = document.getElementById('filters')
  837.         const filterElement = document.getElementById('form-search-filter-ajax')
  838.         filter.addEventListener('click', function (e) {
  839.             e.preventDefault()
  840.             filterElement.classList.toggle('show')
  841.         })
  843.         const loader = document.querySelector("#loading");
  845.         function displayLoading() {
  846.             loader.classList.add("display");
  847.             // to stop loading after some time
  848.             setTimeout(() => {
  849.                 loader.classList.remove("display");
  850.             }, 5000);
  851.         }
  853.         // hiding loading
  854.         function hideLoading() {
  855.             loader.classList.remove("display");
  856.         }
  858.     </script>
  860.     <script>
  861.         const arrowPrev = `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  862.                                 <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  863.                             </svg>`;
  864.         const arrowNext= `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  865.                             <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  866.                         </svg>`;
  867.         var countProperties = '{{ properties|length }}';
  869.         var loopProp = 1;
  870.         while (loopProp <= countProperties) {
  871.             if (window.innerWidth > 768) {
  872.                 $('.slick-slide-single-'+loopProp).slick({
  873.                     'slidesToShow': 1,
  874.                     'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  875.                     'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  876.                 });
  877.             }
  879.             loopProp++;
  880.         }
  882.     </script>
  883. {% endblock %}