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 = '/uploads/images/'~headerContent.picture[0].path %}
  21.     {% else %}
  22.         {% set backgroundImage = 'img/projets_header.jpg' %}
  23.     {% endif %}
  25.     <header class="header-tracol col-lg-8 mx-auto" style="background-image: url({{ backgroundImage }});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 and headerContent.name %}
  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: 40px">
  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="item2 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 img-wrapper">
  184.                                             {% set url = 'http' in property.pictures.0.url ? property.pictures.0.url : asset('uploads/images/properties/'~property.id~'/'~property.pictures.0.url) %}
  185.                                             <div class="img" style="background-image: url('{{ url }}')"  onclick="location.href='{{ path('project-detail', {'id': property.id}) }}'">
  186.                                             </div>
  187.                                     </div>
  189.                                 {% else %}
  190.                                 <div class="img-wrapper">
  191.                                     <div class="img" style="background-image: url('{{ asset('build/Maisons_H_R1.jpg') }}')"></div>
  192.                                 </div>
  193.                                 {% endif %}
  194.                                 {#
  195.                                 <div class="row col-md-12 justify-content-between">
  196.                                     <ul class="col-md-4 items">
  197.                                         <li class="item surface">
  198.                                             <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  199.                                         </li>
  200.                                     </ul>
  201.                                     <div class="col-md-8 properties-price d-flex justify-content-end">
  202.                                         {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  203.                                     </div>
  204.                                 </div>
  205.                                 #}
  207.                                 <p class="city">{{ property.city.name }}</p>
  208.                                 <p class="project-name">{{ property.reference }}</p>
  209.                                 <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ typeProject(property.construction.construction_step) }}</span></div>
  210.                             </div>
  211.                         {% endfor %}
  212.                     </div>
  213.                 </div>
  216.                 <div class="text-center text-capitalize more-projects">
  217.                     <p>AFFICHER PLUS DE PROJETS</p>
  218.                 </div>
  219.             </div>
  220.             {#
  221.             <div class="col-lg-8 mx-auto div-svg-header content-projet">
  222.                 {% set sectionContent1 = content('Projets', 'Section-2') %}
  223.                 <div id="section-2-project" class="col-lg-6 habiter-content">
  224.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  225.                         <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"/>
  226.                     </svg>
  227.                     <div class="col-lg-9">
  228.                         <h1 class="habiter-title mb-5">
  229.                             {% if sectionContent1.name is defined %}{{ sectionContent1.name }}{% else %}INVESTIR À LUXEMBOURG{% endif %}
  230.                         </h1>
  231.                         {% 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 %}
  232.                     </div>
  233.                 </div>
  234.                 <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 %}>
  235.                 </div>
  236.             </div>
  238.             <div class="col-lg-12 div-svg-header last-section-project">
  239.                 <div id="section-projet-margin" class="offset-lg-2 col-lg-2" style="display: flex; justify-content: flex-start;">
  240.                     <a id="link-more" class="property-span-arrow" href="{{ path('invest') }}">EN SAVOIR PLUS
  241.                         <i class="fas fa-arrow-right property-arrow"></i>
  242.                     </a>
  243.                 </div>
  244.                 <div class="col-lg-3" style="display: flex;justify-content: flex-start;margin-left: 0;">
  245.                     <a href="{{ path('location-management') }}" class="property-span-arrow">LA GESTION LOCATIVE
  246.                         <i class="fas fa-arrow-right property-arrow"></i>
  247.                     </a>
  248.                 </div>
  249.             </div>
  250.             #}
  252.         </section>
  253.     </div>
  254.     <div id="img-property-section" class="container-fluid" style="display: none">
  255.         <div class="col-lg-6 habiter-img">
  256.             <img style="padding: 0px;" height="430px" class="img-100" {% if sectionContent1.picture is defined and sectionContent1.picture[0] is defined %}src="/uploads/images/{{ sectionContent1.picture[0].path }}"{% endif %}>
  257.         </div>
  258.     </div>
  261.     <script>
  262.         const futurProjects = document.getElementById('projects')
  263.         let buttons = document.getElementsByClassName('projectButton')
  265.         for (const eElement of buttons) {
  266.             eElement.addEventListener('click', function (e) {
  267.                 e.preventDefault()
  269.                 for (let button of buttons) {
  270.                     if (button.classList.contains('all')){
  271.                         button.classList.remove('all')
  272.                         //button.classList.add('come')
  273.                         //button.querySelector('span').classList.replace('span-all', 'span-projects')
  274.                     }
  275.                 }
  277.                 eElement.classList.remove('come')
  278.                 //eElement.classList.add('all')
  279.                 //eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  281.                 fetch('projects/display/'+this.dataset.id, {
  282.                     method: 'GET',
  283.                 })
  284.                     .then(response => response.json())
  285.                     .then(data => {
  286.                         futurProjects.innerHTML = ''
  287.                         futurProjects.innerHTML = data.data
  289.                         _ww = $(window).width();
  290.                         var lightbox = $('.lightbox'),
  291.                             item = 0;
  293.                         $('.lightbox-on').click(function(e){
  294.                             e.stopPropagation();
  295.                             item = 0;
  297.                             var id = $(this).attr('data-id'),
  298.                                 max = 0;
  299.                             $('#'+id).toggle();
  300.                             $('#'+id).animate({opacity: 1}, 300);
  301.                             $('#'+id).find('img').each(function( i ) {
  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.                                 $(this).find('.div-hover-2').animate({height : 85}, 150);
  426.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  428.                                 $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  429.                                     $(this).find('.project-content').css({'visibility': 'hidden'});
  430.                                 });
  431.                             });
  432.                         } else {
  433.                             $('.div-img-hover-2').on( "tap", function( event ) {
  434.                                 var opened = $(this).find('.div-hover-2').hasClass('open'),
  435.                                     ht = opened ? 85 : '100%',
  436.                                     vis = opened ? 0 : 1;
  437.                                 $(this).find('.div-hover-2').toggleClass('open');
  438.                                 $(this).find('.div-hover-2').animate({height : ht}, 150);
  439.                                 $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  440.                             });
  441.                         }
  442.                         $('.div-hover').hover(function (e) {
  443.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  444.                         }, function() {
  445.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  446.                         });
  447.                     })
  448.                     .catch((error) => {
  449.                         console.error('Error:', error);
  450.                     });
  451.             })
  452.         }
  456.         if (window.matchMedia("(max-width: 768px)").matches) {
  457.             const test = document.getElementsByClassName('select-filter')
  459.             for (const testElement of test) {
  460.                 testElement.addEventListener('click', function (e) {
  461.                     e.preventDefault()
  462.                     testElement.classList.toggle('select-projet-active')
  463.                     const infos = document.querySelector('.projectButton.all')
  464.                     const dataId = []
  465.                     const tests = document.querySelectorAll('.select-filter.select-projet-active')
  466.                     for (const test1 of tests) {
  467.                         dataId.push(parseFloat(test1.dataset.id))
  468.                     }
  469.                     fetch('projects/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  470.                         method: 'GET'
  471.                     })
  472.                         .then(response => response.json())
  473.                         .then(data => {
  474.                             futurProjects.innerHTML = data.data
  475.                         })
  476.                         .catch((error) => {
  477.                             console.error('Error:', error);
  478.                         });
  479.                 })
  480.             }
  481.         } else {
  482.             const test = document.getElementsByClassName('select-projet')
  483.             for (const testElement of test) {
  484.                 testElement.addEventListener('click', function (e) {
  485.                     displayLoading()
  486.                     e.preventDefault()
  487.                     testElement.classList.toggle('select-projet-active')
  488.                     const infos = document.querySelector('.projectButton.all')
  489.                     const dataId = []
  490.                     const tests = document.querySelectorAll('.select-projet.select-projet-active')
  491.                     for (const test1 of tests) {
  492.                         dataId.push(parseFloat(test1.dataset.id))
  493.                     }
  495.                     fetch('projects/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  496.                         method: 'GET'
  497.                     })
  498.                         .then(response => response.json())
  499.                         .then(data => {
  500.                             hideLoading()
  501.                             futurProjects.innerHTML = data.data
  507.                             _ww = $(window).width();
  508.                             var lightbox = $('.lightbox'),
  509.                                 item = 0;
  511.                             $('.lightbox-on').click(function(e){
  512.                                 e.stopPropagation();
  513.                                 item = 0;
  515.                                 var id = $(this).attr('data-id'),
  516.                                     max = 0;
  517.                                 $('#'+id).toggle();
  518.                                 $('#'+id).animate({opacity: 1}, 300);
  519.                                 $('#'+id).find('img').each(function( i ) {
  520.                                     max = i;
  521.                                     item = 1;
  522.                                     counter(item, max+1);
  523.                                     itemWidth($(this));
  524.                                 });
  525.                             });
  527.                             lightbox.click(function(e) {
  528.                                 e.stopPropagation();
  529.                                 $(this).animate({opacity: 0}, 300, function(){
  530.                                     $(this).toggle();
  531.                                 });
  532.                             });
  534.                             $('.closer').on('click', function (e) {
  535.                                 e.stopPropagation();
  536.                                 $(this).parent().animate(
  537.                                     {opacity: 0},
  538.                                     300,
  539.                                     function(){
  540.                                         $(this).toggle();
  541.                                     }
  542.                                 );
  543.                             });
  545.                             function itemWidth(img){
  546.                                 img.closest('.items').width(img.width());
  547.                             }
  549.                             function counter(item, max){
  550.                                 $('.counter').text(item + ' / ' + max);
  551.                             }
  553.                             $('.item', lightbox).on('click, swipeleft', function (e) {
  554.                                 var wd = $(this).width(),
  555.                                     last = $(this).parent().find('.item').last(),
  556.                                     img = $(this).find('.img');
  557.                                 itemWidth(img);
  559.                                 $(this).animate(
  560.                                     {marginLeft: -wd, opacity: 0},
  561.                                     500,
  562.                                     'swing',
  563.                                     function(){
  564.                                         $(this).insertAfter(last);
  565.                                         $(this).css({marginLeft: 0, opacity: 1});
  566.                                     }
  567.                                 );
  568.                             });
  570.                             $('.item', lightbox).on('swiperight', function (e) {
  571.                                 var wd = $(this).width(),
  572.                                     first = $(this).parent().find('.item').first(),
  573.                                     last = $(this).parent().find('.item').last(),
  574.                                     img = $(this).find('.img');
  575.                                 itemWidth(img);
  577.                                 $(last).insertBefore($(this));
  578.                                 $(last).css({marginLeft: -wd, opacity: 0});
  579.                                 $(this).parent().find('.item').eq(0).animate(
  580.                                     {marginLeft: 0, opacity: 1},
  581.                                     500,
  582.                                     'swing'
  583.                                 );
  584.                             });
  586.                             $('.arrows', lightbox).on('click', function (e) {
  587.                                 e.stopPropagation();
  589.                                 var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  590.                                     max = $(this)
  591.                                         .siblings('.items').find('.item').length,
  592.                                     first = $(this).siblings('.items').find('.item').first(),
  593.                                     last = $(this).siblings('.items').find('.item').last(),
  594.                                     isRight = $(this).hasClass('right'),
  595.                                     marginL = isRight ? -wd : 0,
  596.                                     marginL0 = isRight ? 0: -wd,
  597.                                     opacOn = isRight ? 1 : 0,
  598.                                     opacOff = isRight ? 0 : 1;
  600.                                 if (!isRight){
  601.                                     $(last).insertBefore(first);
  602.                                     $(last).css({marginLeft: -wd, opacity: 0});
  603.                                     item++;
  604.                                     if (item == max+1) {item = 1};
  605.                                 } else {
  606.                                     item--;
  607.                                     if (item == 0) {item = max};
  608.                                 };
  610.                                 counter(item, max);
  612.                                 var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  613.                                 itemWidth(img);
  615.                                 $(this).siblings('.items').find('.item').eq(1).animate(
  616.                                     {opacity: opacOn},
  617.                                     500,
  618.                                     'swing');
  620.                                 $(this).siblings('.items').find('.item').eq(0).animate(
  621.                                     {marginLeft: marginL, opacity: 1},
  622.                                     500,
  623.                                     'swing',
  624.                                     function(){
  625.                                         if (isRight){
  626.                                             $(this).insertAfter(last);
  627.                                             $(this).css({ marginLeft: 0, opacity: 1});
  628.                                         }
  629.                                     }
  630.                                 );
  631.                             });
  634.                             if (_ww > 768){
  635.                                 $('.div-img-hover-2').hover(function (e) {
  636.                                     $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  637.                                     var htext = $(this).find('.project-content').height();
  638.                                     if (htext == undefined){htext = 0};
  639.                                     $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  640.                                     $(this).find('.project-content').css({'visibility': 'visible'});
  641.                                     $(this).find('.project-content').animate({opacity: 1}, 150);
  642.                                 }, function() {
  643.                                     $(this).find('.div-hover-2').animate({height : 85}, 150);
  644.                                     $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  646.                                     $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  647.                                         $(this).find('.project-content').css({'visibility': 'hidden'});
  648.                                     });
  649.                                 });
  650.                             } else {
  651.                                 $('.div-hover-2').on( "click", function( event ) {
  652.                                     var opened = $(this).find('.div-hover-2').hasClass('open'),
  653.                                         ht = opened ? 85 : '100%',
  654.                                         vis = opened ? 0 : 1;
  655.                                     $(this).find('.div-hover-2').toggleClass('open');
  656.                                     $(this).find('.div-hover-2').animate({height : ht}, 150);
  657.                                     $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  658.                                 });
  659.                             }
  660.                             $('.div-hover').hover(function (e) {
  661.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  662.                             }, function() {
  663.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  664.                             });
  667.                         })
  668.                         .catch((error) => {
  669.                             console.error('Error:', error);
  670.                         });
  671.                 })
  672.             }
  673.         }
  675.         const buttonFilter = document.getElementsByClassName('select-projet')
  676.         for (const buttonFilterElement of buttonFilter) {
  677.             buttonFilterElement.addEventListener('click', function () {
  679.             })
  680.         }
  682.         if (window.matchMedia("(max-width: 768px)").matches) {
  683.             const flick = document.getElementById("flick4")
  685.             if(flick){
  686.                 new Flicking("#flick4", {
  687.                     moveType: "freeScroll",
  688.                     bound: true
  689.                 })
  690.             }
  691.         }
  693.         const filter = document.getElementById('filters')
  694.         const filterElement = document.getElementById('form-search-filter-ajax')
  695.         filter.addEventListener('click', function (e) {
  696.             e.preventDefault()
  697.             filterElement.classList.toggle('show')
  698.         })
  701.         const loader = document.querySelector("#loading");
  703.         function displayLoading() {
  704.             loader.classList.add("display");
  705.             // to stop loading after some time
  706.             setTimeout(() => {
  707.                 loader.classList.remove("display");
  708.             }, 5000);
  709.         }
  711.         // hiding loading
  712.         function hideLoading() {
  713.             loader.classList.remove("display");
  714.         }
  715.     </script>
  716. {% endblock %}