templates/project.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Projets{% endblock %}
  4. {% block metaDescription %}
  5.     {% set headerContent = content('Projets', 'Header') %}
  6.     <meta name="description" content="
  7.     {% if headerContent.content is defined %}
  8.         {{ headerContent.content|striptags }}
  9.     {% else %}
  10.          Tracol Immobilier propose une large offre en immobilier neuf (logements, bureaux, commerces), qui se caractérise par une architecture résolument contemporaine, des matériaux de qualité, et le soin apporté à chaque détail.
  11.     {% endif %}
  12.     ">
  13. {% endblock %}
  15. {% block body %}
  17.     {% set headerContent = content('Projets', 'Header') %}
  19.     {% if headerContent.picture is defined and headerContent.picture is not empty %}
  20.         {% set backgroundImage = headerContent.picture[0].path %}
  21.     {% else %}
  22.         {% set backgroundImage = 'empty' %}
  23.     {% endif %}
  25.     <header class="header-tracol col-lg-8 mx-auto" style="background-image: url({% if backgroundImage != 'empty' %}'/uploads/images/{{ backgroundImage }}'{% else %}{{ asset('img/projets_header.jpg') }}{% endif %});margin-top: 165px!important;">
  26.         <div class="col-lg-8 mx-auto div-svg-header">
  27.             <div id="header-project" class="header-habiter-div">
  28.                 {% if headerContent.name is defined %}
  29.                     <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>
  30.                     <h2 class="header-habiter-title col-lg-6">{% if headerContent.name is defined %}{{ headerContent.name }}{% endif %}</h2>
  31.                     <div class="col-lg-8 header-content">
  32.                         {% if headerContent.content is defined %}
  33.                             {{ headerContent.content|raw }}
  34.                         {% else %}
  35.                             <p>Fort de plusieurs années d’expérience, Tracol Immobilier propose des projets adaptés aux besoins de chacun. Répondant aux plus hautes exigences et s’inscrivant dans le temps, ils se caractérisent par une architecture résolument contemporaine, des matériaux de qualité et le soin apporté à chaque détail.</p>
  36.                         {% endif %}
  37.                     </div>
  38.                 {% endif %}
  39.             </div>
  40.         </div>
  41.     </header>
  43.     <div class="container-fluid project-page">
  44.         {% set sectionContent1 = content('Projets', 'Section-1') %}
  45.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  46.             <div class="col-lg-4" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  47.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  48.                     <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"/>
  49.                 </svg>
  50.                 {% if projects|length == 0 %}
  51.                     <h1 class="project-title">pas de projet</h1>
  52.                 {% elseif projects|length == 1  %}
  53.                     <h1 class="project-title">{{ projects|length }} projet</h1>
  54.                 {% else %}
  55.                     <h1 class="project-title">{{ projects|length }} projets</h1>
  56.                 {% endif %}
  57.             </div>
  58.             <div class="separator"></div>
  59.             <div id="section-1-project" class="col-lg-6 pre-section-content">
  60.                 {% if headerContent.content is defined %}
  61.                     {{ sectionContent1.content|raw }}
  62.                 {% else %}
  63.                     Fort de plusieurs années d’expérience, Tracol Immobilier propose des projets adaptés aux besoins de chacun. Répondant aux plus hautes exigences et s’inscrivant dans le temps, ils se caractérisent par une architecture résolument contemporaine, des matériaux de qualité et le soin apporté à chaque détail.{% endif %}
  64.             </div>
  65.         </div>
  67.         <section class="project filter mt-5" style="margin-bottom: 120px">
  68.             <div id="button-project-page" class="col-lg-4 div-svg-header mb-4" style="display: flex; align-items: center; padding-left:25px">
  69.                 <div class="input-filter col-lg-3 d-flex">
  70.                     <label for="all-projects" style="margin-right:10px">TOUS</label>
  71.                     <input data-id="all" type="radio" name="type" id="all-projects" class="mr-3 projectButton">
  72.                 </div>
  73.                 <div class="input-filter col-lg-3 d-flex">
  74.                     <label for="futur-projects" style="margin-right:10px">À VENIR</label>
  75.                     <input data-id="futur" type="radio" name="type" id="futur-projects" class="mr-3 projectButton">
  76.                 </div>
  77.                 <div class="input-filter col-lg-3 d-flex">
  78.                     <label for="construction-projects" style="margin-right:10px">EN COURS</label>
  79.                     <input data-id="construction" type="radio" name="type" id="construction-projects" class=" projectButton">
  80.                 </div>
  84.                 {#
  85.                 <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  86.                 <button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
  87.                 <button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
  88.                 #}
  89.             </div>
  90.             <div id="button-project-page-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
  91.                 <div  class="flicking-viewport">
  92.                     <div class="flicking-camera">
  93.                         <div class="input-filter">
  94.                             <label for="all-projects-mobile">TOUS</label>
  95.                             <input data-id="all" type="radio" name="type" id="all-projects-mobile" class="mr-3 projectButton">
  96.                         </div>
  97.                         <div class="input-filter">
  98.                             <label for="futur-projects-mobile">À VENIR</label>
  99.                             <input data-id="futur" type="radio" name="type" id="futur-projects-mobile" class="mr-3 projectButton">
  100.                         </div>
  101.                         <div class="input-filter">
  102.                             <label for="construction-projects-mobile">EN COURS</label>
  103.                             <input data-id="construction" type="radio" name="type" id="construction-projects-mobile" class=" projectButton">
  104.                         </div>
  105.                         {#
  106.                         <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  107.                         <button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
  108.                         <button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
  109.                         #}
  111.                     </div>
  112.                 </div>
  113.             </div>
  116.             <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; justify-content: center; flex-direction: column;">
  117.                 {#
  118.                 <div id="filter-project-desktop">
  119.                     {% for key, subType in getSubTypeProject() %}
  120.                         <button data-id="{{ key }}" class="select-projet">{{ subType }} <i class="fas fa-times"></i></button>
  121.                     {% endfor %}
  122.                 </div>
  124.                 <div id="filter-project-mobile" class="col-lg-3 div-form selectSubFilter" style="display: none">
  125.                     <div class="input-group dropdown show">
  126.                         <label class="label-search-filter" for="location">Filtrer par Type</label>
  127.                         <input style="height: 75px; width: 60px;" type="text" autocomplete="off" name="filters" id="filters"
  128.                                class="form-control" aria-expanded="false">
  129.                         <ul id="form-search-filter-ajax" class="dropdown-menu form-search-filter-ajax" aria-labelledby="">
  130.                             {% for key, subType in getSubTypeProject() %}
  131.                                 <li value="{{ key }}" data-id="{{ key }}" class="select-filter"><i class="fas fa-times"></i>{{ subType }}</li>
  132.                             {% endfor %}
  133.                         </ul>
  134.                     </div>
  135.                 </div>
  136.                 #}
  139.                 {#
  140.                 <div id="loading">
  141.                     <h1 id="showOutput"></h1>
  142.                 </div>
  143.                 #}
  145.                 <div id="projects" class="row">
  146.                     {#
  147.                     {% for key, project in projects|slice(0,5) %}
  148.                         <div onclick="location.href='{{ path('project-detail', {'id': project.id}) }}'" data-id="{{ path('project-detail', {'id': project.id}) }}" class="col-lg-12 div-img-hover-2 project-desktop" style="cursor: pointer">
  149.                             {% if key == 0 %}
  150.                                 <div class="div-hover-2" id="div-hover-2" style="position: absolute; bottom: 8px; left: 8px; background-color: #242424; color: white; width: 291px; height: 85px">
  151.                                     <p class="city">{{ project.city.name }}</p>
  152.                                     <p class="project-name">{{ project.reference }}</p>
  153.                                     {% if project.comments[0].comment is not empty %}
  154.                                         <p class="project-content">
  155.                                             {{ project.comments[0].comment|slice(0, 250) }}</p>
  156.                                         <a  href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
  157.                                             <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  158.                                         </a>
  159.                                     {% else %}
  160.                                         <a style="margin-top: 180px" href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
  161.                                             <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  162.                                         </a>
  163.                                     {% endif %}
  164.                                 </div>
  165.                                 <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ typeProject(project.construction.construction_step) }}</span></div>
  166.                                 {% if project.pictures is not empty %}
  167.                                     {% for picture in project.pictures|slice(0,1) %}
  168.                                         <div class="img" style="background-image: url('{{ picture.url }}')"></div>
  169.                                     {% endfor %}
  170.                                 {% else %}
  171.                                     <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  172.                                 {% endif %}
  173.                             {% endif %}
  175.                         </div>
  176.                     {% endfor %}
  177.                     #}
  179.                     <div class="col-lg-12 project-desktop" style="display: flex; flex-wrap: wrap; flex-direction: row">
  180.                         {% for key, property in projects %}
  181.                             <div  class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12" style="position:relative;cursor: pointer">
  182.                                 {% if property.pictures is not empty %}
  183.                                     <div class="position-relative properties-slide">
  184.                                             <div class="img" style="background-image: url('{{ property.pictures.0.url }}')"  onclick="location.href='{{ path('project-detail', {'id': property.id}) }}'">
  185.                                             </div>
  186.                                     </div>
  188.                                 {% else %}
  189.                                     <div class="img" style="background-image: url('{{ asset('build/Maisons_H_R1.jpg') }}')"></div>
  190.                                 {% endif %}
  191.                                 {#
  192.                                 <div class="row col-md-12 justify-content-between">
  193.                                     <ul class="col-md-4 items">
  194.                                         <li class="item surface">
  195.                                             <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  196.                                         </li>
  197.                                     </ul>
  198.                                     <div class="col-md-8 properties-price d-flex justify-content-end">
  199.                                         {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  200.                                     </div>
  201.                                 </div>
  202.                                 #}
  204.                                 <p class="city">{{ property.city.name }}</p>
  205.                                 <p class="project-name">{{ property.reference }}</p>
  206.                                 <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ typeProject(property.construction.construction_step) }}</span></div>
  207.                             </div>
  208.                         {% endfor %}
  209.                     </div>
  210.                 </div>
  213.                 <div class="text-center text-capitalize more-projects">
  214.                     <p>AFFICHER PLUS DE PROJETS</p>
  215.                 </div>
  216.             </div>
  217.             {#
  218.             <div class="col-lg-8 mx-auto div-svg-header content-projet">
  219.                 {% set sectionContent1 = content('Projets', 'Section-2') %}
  220.                 <div id="section-2-project" class="col-lg-6 habiter-content">
  221.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  222.                         <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"/>
  223.                     </svg>
  224.                     <div class="col-lg-9">
  225.                         <h1 class="habiter-title mb-5">
  226.                             {% if sectionContent1.name is defined %}{{ sectionContent1.name }}{% else %}INVESTIR À LUXEMBOURG{% endif %}
  227.                         </h1>
  228.                         {% if sectionContent1.content is defined %}{{ sectionContent1.content|raw }}{% else %}La demande locative est très importante au Luxembourg. En choisissant d’investir dans nos projets, vous avez l’assurance de louer très vite votre bien immobilier sans souci de devoir partir à la recherche de locataires potentiels. Votre investissement devient rapidement rentable. De plus, notre service de gestion locative peut vous accompagner dans votre démarche de A à Z.{% endif %}
  229.                     </div>
  230.                 </div>
  231.                 <div id="display-none-mobile" class="col-lg-6 habiter-img" {% if sectionContent1.picture is defined %}style="background-image: url('/uploads/images/{{ sectionContent1.picture[0].path }}')"{% endif %}>
  232.                 </div>
  233.             </div>
  235.             <div class="col-lg-12 div-svg-header last-section-project">
  236.                 <div id="section-projet-margin" class="offset-lg-2 col-lg-2" style="display: flex; justify-content: flex-start;">
  237.                     <a id="link-more" class="property-span-arrow" href="{{ path('invest') }}">EN SAVOIR PLUS
  238.                         <i class="fas fa-arrow-right property-arrow"></i>
  239.                     </a>
  240.                 </div>
  241.                 <div class="col-lg-3" style="display: flex;justify-content: flex-start;margin-left: 0;">
  242.                     <a href="{{ path('location-management') }}" class="property-span-arrow">LA GESTION LOCATIVE
  243.                         <i class="fas fa-arrow-right property-arrow"></i>
  244.                     </a>
  245.                 </div>
  246.             </div>
  247.             #}
  249.         </section>
  250.     </div>
  251.     <div id="img-property-section" class="container-fluid" style="display: none">
  252.         <div class="col-lg-6 habiter-img">
  253.             <img style="padding: 0px;" height="430px" class="img-100" {% if sectionContent1.picture is defined %}src="/uploads/images/{{ sectionContent1.picture[0].path }}"{% endif %}>
  254.         </div>
  255.     </div>
  258.     <script>
  259.         const futurProjects = document.getElementById('projects')
  260.         let buttons = document.getElementsByClassName('projectButton')
  262.         for (const eElement of buttons) {
  263.             eElement.addEventListener('click', function (e) {
  264.                 e.preventDefault()
  266.                 for (let button of buttons) {
  267.                     if (button.classList.contains('all')){
  268.                         button.classList.remove('all')
  269.                         //button.classList.add('come')
  270.                         //button.querySelector('span').classList.replace('span-all', 'span-projects')
  271.                     }
  272.                 }
  274.                 eElement.classList.remove('come')
  275.                 //eElement.classList.add('all')
  276.                 //eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  278.                 fetch('projects/display/'+this.dataset.id, {
  279.                     method: 'GET',
  280.                 })
  281.                     .then(response => response.json())
  282.                     .then(data => {
  283.                         futurProjects.innerHTML = ''
  284.                         futurProjects.innerHTML = data.data
  286.                         _ww = $(window).width();
  287.                         var lightbox = $('.lightbox'),
  288.                             item = 0;
  290.                         $('.lightbox-on').click(function(e){
  291.                             e.stopPropagation();
  292.                             item = 0;
  293.                             console.log('click btn');
  295.                             var id = $(this).attr('data-id'),
  296.                                 max = 0;
  297.                             $('#'+id).toggle();
  298.                             $('#'+id).animate({opacity: 1}, 300);
  299.                             $('#'+id).find('img').each(function( i ) {
  300.                                 //console.log('h : '+$(this).height());
  301.                                 //console.log('w : '+$(this).width());
  302.                                 max = i;
  303.                                 item = 1;
  304.                                 counter(item, max+1);
  305.                                 itemWidth($(this));
  306.                             });
  307.                         });
  309.                         lightbox.click(function(e) {
  310.                             e.stopPropagation();
  311.                             $(this).animate({opacity: 0}, 300, function(){
  312.                                 $(this).toggle();
  313.                             });
  314.                         });
  316.                         $('.closer').on('click', function (e) {
  317.                             e.stopPropagation();
  318.                             $(this).parent().animate(
  319.                                 {opacity: 0},
  320.                                 300,
  321.                                 function(){
  322.                                     $(this).toggle();
  323.                                 }
  324.                             );
  325.                         });
  327.                         function itemWidth(img){
  328.                             img.closest('.items').width(img.width());
  329.                         }
  331.                         function counter(item, max){
  332.                             $('.counter').text(item + ' / ' + max);
  333.                         }
  335.                         $('.item', lightbox).on('click, swipeleft', function (e) {
  336.                             var wd = $(this).width(),
  337.                                 last = $(this).parent().find('.item').last(),
  338.                                 img = $(this).find('.img');
  339.                             itemWidth(img);
  341.                             $(this).animate(
  342.                                 {marginLeft: -wd, opacity: 0},
  343.                                 500,
  344.                                 'swing',
  345.                                 function(){
  346.                                     $(this).insertAfter(last);
  347.                                     $(this).css({marginLeft: 0, opacity: 1});
  348.                                 }
  349.                             );
  350.                         });
  352.                         $('.item', lightbox).on('swiperight', function (e) {
  353.                             var wd = $(this).width(),
  354.                                 first = $(this).parent().find('.item').first(),
  355.                                 last = $(this).parent().find('.item').last(),
  356.                                 img = $(this).find('.img');
  357.                             itemWidth(img);
  359.                             $(last).insertBefore($(this));
  360.                             $(last).css({marginLeft: -wd, opacity: 0});
  361.                             $(this).parent().find('.item').eq(0).animate(
  362.                                 {marginLeft: 0, opacity: 1},
  363.                                 500,
  364.                                 'swing'
  365.                             );
  366.                         });
  368.                         $('.arrows', lightbox).on('click', function (e) {
  369.                             e.stopPropagation();
  371.                             var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  372.                                 max = $(this)
  373.                                     .siblings('.items').find('.item').length,
  374.                                 first = $(this).siblings('.items').find('.item').first(),
  375.                                 last = $(this).siblings('.items').find('.item').last(),
  376.                                 isRight = $(this).hasClass('right'),
  377.                                 marginL = isRight ? -wd : 0,
  378.                                 marginL0 = isRight ? 0: -wd,
  379.                                 opacOn = isRight ? 1 : 0,
  380.                                 opacOff = isRight ? 0 : 1;
  382.                             if (!isRight){
  383.                                 $(last).insertBefore(first);
  384.                                 $(last).css({marginLeft: -wd, opacity: 0});
  385.                                 item++;
  386.                                 if (item == max+1) {item = 1};
  387.                             } else {
  388.                                 item--;
  389.                                 if (item == 0) {item = max};
  390.                             };
  392.                             counter(item, max);
  394.                             var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  395.                             itemWidth(img);
  397.                             $(this).siblings('.items').find('.item').eq(1).animate(
  398.                                 {opacity: opacOn},
  399.                                 500,
  400.                                 'swing');
  402.                             $(this).siblings('.items').find('.item').eq(0).animate(
  403.                                 {marginLeft: marginL, opacity: 1},
  404.                                 500,
  405.                                 'swing',
  406.                                 function(){
  407.                                     if (isRight){
  408.                                         $(this).insertAfter(last);
  409.                                         $(this).css({ marginLeft: 0, opacity: 1});
  410.                                     }
  411.                                 }
  412.                             );
  413.                         });
  416.                         if (_ww > 768){
  417.                             $('.div-img-hover-2').hover(function (e) {
  418.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  419.                                 var htext = $(this).find('.project-content').height();
  420.                                 if (htext == undefined){htext = 0};
  421.                                 $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  422.                                 $(this).find('.project-content').css({'visibility': 'visible'});
  423.                                 $(this).find('.project-content').animate({opacity: 1}, 150);
  424.                             }, function() {
  425.                                 console.log('down');
  426.                                 $(this).find('.div-hover-2').animate({height : 85}, 150);
  427.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  429.                                 $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  430.                                     $(this).find('.project-content').css({'visibility': 'hidden'});
  431.                                 });
  432.                             });
  433.                         } else {
  434.                             $('.div-img-hover-2').on( "tap", function( event ) {
  435.                                 console.log('tap tap');
  436.                                 var opened = $(this).find('.div-hover-2').hasClass('open'),
  437.                                     ht = opened ? 85 : '100%',
  438.                                     vis = opened ? 0 : 1;
  439.                                 $(this).find('.div-hover-2').toggleClass('open');
  440.                                 $(this).find('.div-hover-2').animate({height : ht}, 150);
  441.                                 $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  442.                             });
  443.                         }
  444.                         $('.div-hover').hover(function (e) {
  445.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  446.                         }, function() {
  447.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  448.                         });
  449.                     })
  450.                     .catch((error) => {
  451.                         console.error('Error:', error);
  452.                     });
  453.             })
  454.         }
  458.         if (window.matchMedia("(max-width: 768px)").matches) {
  459.             const test = document.getElementsByClassName('select-filter')
  461.             for (const testElement of test) {
  462.                 testElement.addEventListener('click', function (e) {
  463.                     e.preventDefault()
  464.                     testElement.classList.toggle('select-projet-active')
  465.                     const infos = document.querySelector('.projectButton.all')
  466.                     const dataId = []
  467.                     const tests = document.querySelectorAll('.select-filter.select-projet-active')
  468.                     for (const test1 of tests) {
  469.                         dataId.push(parseFloat(test1.dataset.id))
  470.                     }
  471.                     fetch('projects/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  472.                         method: 'GET'
  473.                     })
  474.                         .then(response => response.json())
  475.                         .then(data => {
  476.                             futurProjects.innerHTML = data.data
  477.                         })
  478.                         .catch((error) => {
  479.                             console.error('Error:', error);
  480.                         });
  481.                 })
  482.             }
  483.         } else {
  484.             const test = document.getElementsByClassName('select-projet')
  485.             for (const testElement of test) {
  486.                 testElement.addEventListener('click', function (e) {
  487.                     displayLoading()
  488.                     e.preventDefault()
  489.                     testElement.classList.toggle('select-projet-active')
  490.                     const infos = document.querySelector('.projectButton.all')
  491.                     const dataId = []
  492.                     const tests = document.querySelectorAll('.select-projet.select-projet-active')
  493.                     for (const test1 of tests) {
  494.                         dataId.push(parseFloat(test1.dataset.id))
  495.                     }
  497.                     fetch('projects/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  498.                         method: 'GET'
  499.                     })
  500.                         .then(response => response.json())
  501.                         .then(data => {
  502.                             hideLoading()
  503.                             futurProjects.innerHTML = data.data
  509.                             _ww = $(window).width();
  510.                             var lightbox = $('.lightbox'),
  511.                                 item = 0;
  513.                             $('.lightbox-on').click(function(e){
  514.                                 e.stopPropagation();
  515.                                 item = 0;
  516.                                 console.log('click btn');
  518.                                 var id = $(this).attr('data-id'),
  519.                                     max = 0;
  520.                                 $('#'+id).toggle();
  521.                                 $('#'+id).animate({opacity: 1}, 300);
  522.                                 $('#'+id).find('img').each(function( i ) {
  523.                                     //console.log('h : '+$(this).height());
  524.                                     //console.log('w : '+$(this).width());
  525.                                     max = i;
  526.                                     item = 1;
  527.                                     counter(item, max+1);
  528.                                     itemWidth($(this));
  529.                                 });
  530.                             });
  532.                             lightbox.click(function(e) {
  533.                                 e.stopPropagation();
  534.                                 $(this).animate({opacity: 0}, 300, function(){
  535.                                     $(this).toggle();
  536.                                 });
  537.                             });
  539.                             $('.closer').on('click', function (e) {
  540.                                 e.stopPropagation();
  541.                                 $(this).parent().animate(
  542.                                     {opacity: 0},
  543.                                     300,
  544.                                     function(){
  545.                                         $(this).toggle();
  546.                                     }
  547.                                 );
  548.                             });
  550.                             function itemWidth(img){
  551.                                 img.closest('.items').width(img.width());
  552.                             }
  554.                             function counter(item, max){
  555.                                 $('.counter').text(item + ' / ' + max);
  556.                             }
  558.                             $('.item', lightbox).on('click, swipeleft', function (e) {
  559.                                 var wd = $(this).width(),
  560.                                     last = $(this).parent().find('.item').last(),
  561.                                     img = $(this).find('.img');
  562.                                 itemWidth(img);
  564.                                 $(this).animate(
  565.                                     {marginLeft: -wd, opacity: 0},
  566.                                     500,
  567.                                     'swing',
  568.                                     function(){
  569.                                         $(this).insertAfter(last);
  570.                                         $(this).css({marginLeft: 0, opacity: 1});
  571.                                     }
  572.                                 );
  573.                             });
  575.                             $('.item', lightbox).on('swiperight', function (e) {
  576.                                 var wd = $(this).width(),
  577.                                     first = $(this).parent().find('.item').first(),
  578.                                     last = $(this).parent().find('.item').last(),
  579.                                     img = $(this).find('.img');
  580.                                 itemWidth(img);
  582.                                 $(last).insertBefore($(this));
  583.                                 $(last).css({marginLeft: -wd, opacity: 0});
  584.                                 $(this).parent().find('.item').eq(0).animate(
  585.                                     {marginLeft: 0, opacity: 1},
  586.                                     500,
  587.                                     'swing'
  588.                                 );
  589.                             });
  591.                             $('.arrows', lightbox).on('click', function (e) {
  592.                                 e.stopPropagation();
  594.                                 var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  595.                                     max = $(this)
  596.                                         .siblings('.items').find('.item').length,
  597.                                     first = $(this).siblings('.items').find('.item').first(),
  598.                                     last = $(this).siblings('.items').find('.item').last(),
  599.                                     isRight = $(this).hasClass('right'),
  600.                                     marginL = isRight ? -wd : 0,
  601.                                     marginL0 = isRight ? 0: -wd,
  602.                                     opacOn = isRight ? 1 : 0,
  603.                                     opacOff = isRight ? 0 : 1;
  605.                                 if (!isRight){
  606.                                     $(last).insertBefore(first);
  607.                                     $(last).css({marginLeft: -wd, opacity: 0});
  608.                                     item++;
  609.                                     if (item == max+1) {item = 1};
  610.                                 } else {
  611.                                     item--;
  612.                                     if (item == 0) {item = max};
  613.                                 };
  615.                                 counter(item, max);
  617.                                 var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  618.                                 itemWidth(img);
  620.                                 $(this).siblings('.items').find('.item').eq(1).animate(
  621.                                     {opacity: opacOn},
  622.                                     500,
  623.                                     'swing');
  625.                                 $(this).siblings('.items').find('.item').eq(0).animate(
  626.                                     {marginLeft: marginL, opacity: 1},
  627.                                     500,
  628.                                     'swing',
  629.                                     function(){
  630.                                         if (isRight){
  631.                                             $(this).insertAfter(last);
  632.                                             $(this).css({ marginLeft: 0, opacity: 1});
  633.                                         }
  634.                                     }
  635.                                 );
  636.                             });
  639.                             if (_ww > 768){
  640.                                 $('.div-img-hover-2').hover(function (e) {
  641.                                     $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  642.                                     var htext = $(this).find('.project-content').height();
  643.                                     if (htext == undefined){htext = 0};
  644.                                     $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  645.                                     $(this).find('.project-content').css({'visibility': 'visible'});
  646.                                     $(this).find('.project-content').animate({opacity: 1}, 150);
  647.                                 }, function() {
  648.                                     console.log('down');
  649.                                     $(this).find('.div-hover-2').animate({height : 85}, 150);
  650.                                     $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  652.                                     $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  653.                                         $(this).find('.project-content').css({'visibility': 'hidden'});
  654.                                     });
  655.                                 });
  656.                             } else {
  657.                                 $('.div-hover-2').on( "click", function( event ) {
  658.                                     console.log('tap tap');
  659.                                     var opened = $(this).find('.div-hover-2').hasClass('open'),
  660.                                         ht = opened ? 85 : '100%',
  661.                                         vis = opened ? 0 : 1;
  662.                                     $(this).find('.div-hover-2').toggleClass('open');
  663.                                     $(this).find('.div-hover-2').animate({height : ht}, 150);
  664.                                     $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  665.                                 });
  666.                             }
  667.                             $('.div-hover').hover(function (e) {
  668.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  669.                             }, function() {
  670.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  671.                             });
  674.                         })
  675.                         .catch((error) => {
  676.                             console.error('Error:', error);
  677.                         });
  678.                 })
  679.             }
  680.         }
  682.         const buttonFilter = document.getElementsByClassName('select-projet')
  683.         for (const buttonFilterElement of buttonFilter) {
  684.             buttonFilterElement.addEventListener('click', function () {
  686.             })
  687.         }
  689.         if (window.matchMedia("(max-width: 768px)").matches) {
  690.             new Flicking("#flick4", {
  691.                 moveType: "freeScroll",
  692.                 bound: true
  693.             });
  695.         }
  697.         const filter = document.getElementById('filters')
  698.         const filterElement = document.getElementById('form-search-filter-ajax')
  699.         filter.addEventListener('click', function (e) {
  700.             e.preventDefault()
  701.             filterElement.classList.toggle('show')
  702.         })
  705.         const loader = document.querySelector("#loading");
  707.         function displayLoading() {
  708.             loader.classList.add("display");
  709.             // to stop loading after some time
  710.             setTimeout(() => {
  711.                 loader.classList.remove("display");
  712.             }, 5000);
  713.         }
  715.         // hiding loading
  716.         function hideLoading() {
  717.             loader.classList.remove("display");
  718.         }
  719.     </script>
  720. {% endblock %}