templates/project.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Projets{% endblock %}
  5. {% block body %}
  7.     {% set headerContent = content('Projets', '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 %}
  14.     <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 %});">
  15.         <div class="col-lg-8 mx-auto div-svg-header">
  16.             <div id="header-project" class="header-habiter-div">
  17.                 <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>
  18.                 <h2 class="header-habiter-title col-lg-6">{% if headerContent.name is defined %}{{ headerContent.name }}{% else %}Nos projets{% endif %}</h2>
  19.                 <div class="col-lg-8 header-content">
  20.                     {% if headerContent.content is defined %}{{ headerContent.content|raw }} {% else %}L’immobilier ayant un fort impact, Tracol Immobilier a pour ambition de répondre aux grands enjeux urbains du Luxembourg, tout en développant des projets environnementaux et sociétaux.{% endif %}
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </header>
  26.     <div class="container-fluid">
  27.         {% set sectionContent1 = content('Projets', 'Section-1') %}
  28.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  29.             <div class="col-lg-4" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  30.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  31.                     <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"/>
  32.                 </svg>
  33.                 {% if projects|length == 0 %}
  34.                     <h1 class="project-title">pas de projet</h1>
  35.                 {% elseif projects|length == 1  %}
  36.                     <h1 class="project-title">{{ projects|length }} projet</h1>
  37.                 {% else %}
  38.                     <h1 class="project-title">{{ projects|length }} projets</h1>
  39.                 {% endif %}
  40.             </div>
  41.             <div class="separator"></div>
  42.             <div id="section-1-project" class="col-lg-6 pre-section-content">
  43.                 {% if headerContent.content is defined %}{{ sectionContent1.content|raw }}{% else %}Développer durable, travailler avec des entreprises locales, maximiser nos impacts positifs (régénération urbaine, emploi local, etc.) et réduire nos impacts négatifs (émissions de CO2, biodiversité, ressources, …) pour apporter du mieux-vivre en ville, voilà comment nous imaginons nos projets !{% endif %}
  44.             </div>
  45.         </div>
  47.         <section class="project filter mt-5" style="margin-bottom: 120px">
  48.             <div id="button-project-page" class="col-lg-8 mx-auto div-svg-header mb-4" style="display: flex; align-items: center; padding-left: 7px">
  49.                 <div class="input-filter">
  50.                     <label for="all-projects">TOUS</label>
  51.                     <input data-id="all" type="radio" name="type" id="all-projects" class="mr-3 projectButton">
  52.                 </div>
  53.                 <div class="input-filter">
  54.                     <label for="futur-projects">A VENIR</label>
  55.                     <input data-id="futur" type="radio" name="type" id="futur-projects" class="mr-3 projectButton">
  56.                 </div>
  57.                 <div class="input-filter">
  58.                     <label for="construction-projects">EN COURS</label>
  59.                     <input data-id="construction" type="radio" name="type" id="construction-projects" class=" projectButton">
  60.                 </div>
  64.                 {#
  65.                 <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  66.                 <button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
  67.                 <button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
  68.                 #}
  69.             </div>
  70.             <div id="button-project-page-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
  71.                 <div  class="flicking-viewport">
  72.                     <div class="flicking-camera">
  73.                         <div class="input-filter">
  74.                             <label for="all-projects-mobile">TOUS</label>
  75.                             <input data-id="all" type="radio" name="type" id="all-projects-mobile" class="mr-3 projectButton">
  76.                         </div>
  77.                         <div class="input-filter">
  78.                             <label for="futur-projects-mobile">A VENIR</label>
  79.                             <input data-id="futur" type="radio" name="type" id="futur-projects-mobile" class="mr-3 projectButton">
  80.                         </div>
  81.                         <div class="input-filter">
  82.                             <label for="construction-projects-mobile">EN COURS</label>
  83.                             <input data-id="construction" type="radio" name="type" id="construction-projects-mobile" class=" projectButton">
  84.                         </div>
  85.                         {#
  86.                         <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  87.                         <button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
  88.                         <button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
  89.                         #}
  91.                     </div>
  92.                 </div>
  93.             </div>
  96.             <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; justify-content: center; flex-direction: column;">
  97.                 {#
  98.                 <div id="filter-project-desktop">
  99.                     {% for key, subType in getSubTypeProject() %}
  100.                         <button data-id="{{ key }}" class="select-projet">{{ subType }} <i class="fas fa-times"></i></button>
  101.                     {% endfor %}
  102.                 </div>
  104.                 <div id="filter-project-mobile" class="col-lg-3 div-form selectSubFilter" style="display: none">
  105.                     <div class="input-group dropdown show">
  106.                         <label class="label-search-filter" for="location">Filtrer par Type</label>
  107.                         <input style="height: 75px; width: 60px;" type="text" autocomplete="off" name="filters" id="filters"
  108.                                class="form-control" aria-expanded="false">
  109.                         <ul id="form-search-filter-ajax" class="dropdown-menu form-search-filter-ajax" aria-labelledby="">
  110.                             {% for key, subType in getSubTypeProject() %}
  111.                                 <li value="{{ key }}" data-id="{{ key }}" class="select-filter"><i class="fas fa-times"></i>{{ subType }}</li>
  112.                             {% endfor %}
  113.                         </ul>
  114.                     </div>
  115.                 </div>
  116.                 #}
  119.                 {#
  120.                 <div id="loading">
  121.                     <h1 id="showOutput"></h1>
  122.                 </div>
  123.                 #}
  125.                 <div id="projects" class="row">
  126.                     {#
  127.                     {% for key, project in projects|slice(0,5) %}
  128.                         <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">
  129.                             {% if key == 0 %}
  130.                                 <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">
  131.                                     <p class="city">{{ project.city.name }}</p>
  132.                                     <p class="project-name">{{ project.reference }}</p>
  133.                                     {% if project.comments[0].comment is not empty %}
  134.                                         <p class="project-content">
  135.                                             {{ project.comments[0].comment|slice(0, 250) }}</p>
  136.                                         <a  href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
  137.                                             <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  138.                                         </a>
  139.                                     {% else %}
  140.                                         <a style="margin-top: 180px" href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
  141.                                             <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  142.                                         </a>
  143.                                     {% endif %}
  144.                                 </div>
  145.                                 <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ typeProject(project.construction.construction_step) }}</span></div>
  146.                                 {% if project.pictures is not empty %}
  147.                                     {% for picture in project.pictures|slice(0,1) %}
  148.                                         <div class="img" style="background-image: url('{{ picture.url }}')"></div>
  149.                                     {% endfor %}
  150.                                 {% else %}
  151.                                     <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  152.                                 {% endif %}
  153.                             {% endif %}
  155.                         </div>
  156.                     {% endfor %}
  157.                     #}
  159.                     <div class="col-lg-12 project-desktop" style="display: flex; flex-wrap: wrap; flex-direction: row">
  160.                         {% for key, property in projects|slice(0,5) %}
  161.                             <div  class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12" style="position:relative;cursor: pointer">
  162.                                 {% if property.pictures is not empty %}
  163.                                     <div class="position-relative properties-slide">
  164.                                             <div class="img" style="background-image: url('{{ property.pictures.0.url }}')"  onclick="location.href='{{ path('project-detail', {'id': property.id}) }}'">
  165.                                             </div>
  166.                                     </div>
  168.                                 {% else %}
  169.                                     <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  170.                                 {% endif %}
  171.                                 {#
  172.                                 <div class="row col-md-12 justify-content-between">
  173.                                     <ul class="col-md-4 items">
  174.                                         <li class="item surface">
  175.                                             <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  176.                                         </li>
  177.                                     </ul>
  178.                                     <div class="col-md-8 properties-price d-flex justify-content-end">
  179.                                         {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  180.                                     </div>
  181.                                 </div>
  182.                                 #}
  184.                                 <p class="city">{{ property.city.name }}</p>
  185.                                 <p class="project-name">{{ property.reference }}</p>
  186.                                 <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ typeProject(property.construction.construction_step) }}</span></div>
  187.                             </div>
  188.                         {% endfor %}
  189.                     </div>
  190.                 </div>
  193.                 <div class="text-center text-capitalize more-projects">
  194.                     <p>AFFICHER PLUS DE PROJETS</p>
  195.                 </div>
  196.             </div>
  197.             {#
  198.             <div class="col-lg-8 mx-auto div-svg-header content-projet">
  199.                 {% set sectionContent1 = content('Projets', 'Section-2') %}
  200.                 <div id="section-2-project" class="col-lg-6 habiter-content">
  201.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  202.                         <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"/>
  203.                     </svg>
  204.                     <div class="col-lg-9">
  205.                         <h1 class="habiter-title mb-5">
  206.                             {% if sectionContent1.name is defined %}{{ sectionContent1.name }}{% else %}INVESTIR À LUXEMBOURG{% endif %}
  207.                         </h1>
  208.                         {% 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 %}
  209.                     </div>
  210.                 </div>
  211.                 <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 %}>
  212.                 </div>
  213.             </div>
  215.             <div class="col-lg-12 div-svg-header last-section-project">
  216.                 <div id="section-projet-margin" class="offset-lg-2 col-lg-2" style="display: flex; justify-content: flex-start;">
  217.                     <a id="link-more" class="property-span-arrow" href="{{ path('invest') }}">EN SAVOIR PLUS
  218.                         <i class="fas fa-arrow-right property-arrow"></i>
  219.                     </a>
  220.                 </div>
  221.                 <div class="col-lg-3" style="display: flex;justify-content: flex-start;margin-left: 0;">
  222.                     <a href="{{ path('location-management') }}" class="property-span-arrow">LA GESTION LOCATIVE
  223.                         <i class="fas fa-arrow-right property-arrow"></i>
  224.                     </a>
  225.                 </div>
  226.             </div>
  227.             #}
  229.         </section>
  230.     </div>
  231.     <div id="img-property-section" class="container-fluid" style="display: none">
  232.         <div class="col-lg-6 habiter-img">
  233.             <img style="padding: 0px;" height="430px" class="img-100" {% if sectionContent1.picture is defined %}src="/uploads/images/{{ sectionContent1.picture[0].path }}"{% endif %}>
  234.         </div>
  235.     </div>
  238.     <script>
  239.         const futurProjects = document.getElementById('projects')
  240.         let buttons = document.getElementsByClassName('projectButton')
  242.         for (const eElement of buttons) {
  243.             eElement.addEventListener('click', function (e) {
  244.                 e.preventDefault()
  246.                 for (let button of buttons) {
  247.                     if (button.classList.contains('all')){
  248.                         button.classList.remove('all')
  249.                         //button.classList.add('come')
  250.                         //button.querySelector('span').classList.replace('span-all', 'span-projects')
  251.                     }
  252.                 }
  254.                 eElement.classList.remove('come')
  255.                 //eElement.classList.add('all')
  256.                 //eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  258.                 fetch('projects/display/'+this.dataset.id, {
  259.                     method: 'GET',
  260.                 })
  261.                     .then(response => response.json())
  262.                     .then(data => {
  263.                         futurProjects.innerHTML = ''
  264.                         futurProjects.innerHTML = data.data
  266.                         _ww = $(window).width();
  267.                         var lightbox = $('.lightbox'),
  268.                             item = 0;
  270.                         $('.lightbox-on').click(function(e){
  271.                             e.stopPropagation();
  272.                             item = 0;
  273.                             console.log('click btn');
  275.                             var id = $(this).attr('data-id'),
  276.                                 max = 0;
  277.                             $('#'+id).toggle();
  278.                             $('#'+id).animate({opacity: 1}, 300);
  279.                             $('#'+id).find('img').each(function( i ) {
  280.                                 //console.log('h : '+$(this).height());
  281.                                 //console.log('w : '+$(this).width());
  282.                                 max = i;
  283.                                 item = 1;
  284.                                 counter(item, max+1);
  285.                                 itemWidth($(this));
  286.                             });
  287.                         });
  289.                         lightbox.click(function(e) {
  290.                             e.stopPropagation();
  291.                             $(this).animate({opacity: 0}, 300, function(){
  292.                                 $(this).toggle();
  293.                             });
  294.                         });
  296.                         $('.closer').on('click', function (e) {
  297.                             e.stopPropagation();
  298.                             $(this).parent().animate(
  299.                                 {opacity: 0},
  300.                                 300,
  301.                                 function(){
  302.                                     $(this).toggle();
  303.                                 }
  304.                             );
  305.                         });
  307.                         function itemWidth(img){
  308.                             img.closest('.items').width(img.width());
  309.                         }
  311.                         function counter(item, max){
  312.                             $('.counter').text(item + ' / ' + max);
  313.                         }
  315.                         $('.item', lightbox).on('click, swipeleft', function (e) {
  316.                             var wd = $(this).width(),
  317.                                 last = $(this).parent().find('.item').last(),
  318.                                 img = $(this).find('.img');
  319.                             itemWidth(img);
  321.                             $(this).animate(
  322.                                 {marginLeft: -wd, opacity: 0},
  323.                                 500,
  324.                                 'swing',
  325.                                 function(){
  326.                                     $(this).insertAfter(last);
  327.                                     $(this).css({marginLeft: 0, opacity: 1});
  328.                                 }
  329.                             );
  330.                         });
  332.                         $('.item', lightbox).on('swiperight', function (e) {
  333.                             var wd = $(this).width(),
  334.                                 first = $(this).parent().find('.item').first(),
  335.                                 last = $(this).parent().find('.item').last(),
  336.                                 img = $(this).find('.img');
  337.                             itemWidth(img);
  339.                             $(last).insertBefore($(this));
  340.                             $(last).css({marginLeft: -wd, opacity: 0});
  341.                             $(this).parent().find('.item').eq(0).animate(
  342.                                 {marginLeft: 0, opacity: 1},
  343.                                 500,
  344.                                 'swing'
  345.                             );
  346.                         });
  348.                         $('.arrows', lightbox).on('click', function (e) {
  349.                             e.stopPropagation();
  351.                             var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  352.                                 max = $(this)
  353.                                     .siblings('.items').find('.item').length,
  354.                                 first = $(this).siblings('.items').find('.item').first(),
  355.                                 last = $(this).siblings('.items').find('.item').last(),
  356.                                 isRight = $(this).hasClass('right'),
  357.                                 marginL = isRight ? -wd : 0,
  358.                                 marginL0 = isRight ? 0: -wd,
  359.                                 opacOn = isRight ? 1 : 0,
  360.                                 opacOff = isRight ? 0 : 1;
  362.                             if (!isRight){
  363.                                 $(last).insertBefore(first);
  364.                                 $(last).css({marginLeft: -wd, opacity: 0});
  365.                                 item++;
  366.                                 if (item == max+1) {item = 1};
  367.                             } else {
  368.                                 item--;
  369.                                 if (item == 0) {item = max};
  370.                             };
  372.                             counter(item, max);
  374.                             var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  375.                             itemWidth(img);
  377.                             $(this).siblings('.items').find('.item').eq(1).animate(
  378.                                 {opacity: opacOn},
  379.                                 500,
  380.                                 'swing');
  382.                             $(this).siblings('.items').find('.item').eq(0).animate(
  383.                                 {marginLeft: marginL, opacity: 1},
  384.                                 500,
  385.                                 'swing',
  386.                                 function(){
  387.                                     if (isRight){
  388.                                         $(this).insertAfter(last);
  389.                                         $(this).css({ marginLeft: 0, opacity: 1});
  390.                                     }
  391.                                 }
  392.                             );
  393.                         });
  396.                         if (_ww > 768){
  397.                             $('.div-img-hover-2').hover(function (e) {
  398.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  399.                                 var htext = $(this).find('.project-content').height();
  400.                                 if (htext == undefined){htext = 0};
  401.                                 $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  402.                                 $(this).find('.project-content').css({'visibility': 'visible'});
  403.                                 $(this).find('.project-content').animate({opacity: 1}, 150);
  404.                             }, function() {
  405.                                 console.log('down');
  406.                                 $(this).find('.div-hover-2').animate({height : 85}, 150);
  407.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  409.                                 $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  410.                                     $(this).find('.project-content').css({'visibility': 'hidden'});
  411.                                 });
  412.                             });
  413.                         } else {
  414.                             $('.div-img-hover-2').on( "tap", function( event ) {
  415.                                 console.log('tap tap');
  416.                                 var opened = $(this).find('.div-hover-2').hasClass('open'),
  417.                                     ht = opened ? 85 : '100%',
  418.                                     vis = opened ? 0 : 1;
  419.                                 $(this).find('.div-hover-2').toggleClass('open');
  420.                                 $(this).find('.div-hover-2').animate({height : ht}, 150);
  421.                                 $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  422.                             });
  423.                         }
  424.                         $('.div-hover').hover(function (e) {
  425.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  426.                         }, function() {
  427.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  428.                         });
  429.                     })
  430.                     .catch((error) => {
  431.                         console.error('Error:', error);
  432.                     });
  433.             })
  434.         }
  438.         if (window.matchMedia("(max-width: 768px)").matches) {
  439.             const test = document.getElementsByClassName('select-filter')
  441.             for (const testElement of test) {
  442.                 testElement.addEventListener('click', function (e) {
  443.                     e.preventDefault()
  444.                     testElement.classList.toggle('select-projet-active')
  445.                     const infos = document.querySelector('.projectButton.all')
  446.                     const dataId = []
  447.                     const tests = document.querySelectorAll('.select-filter.select-projet-active')
  448.                     for (const test1 of tests) {
  449.                         dataId.push(parseFloat(test1.dataset.id))
  450.                     }
  451.                     fetch('projects/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  452.                         method: 'GET'
  453.                     })
  454.                         .then(response => response.json())
  455.                         .then(data => {
  456.                             futurProjects.innerHTML = data.data
  457.                         })
  458.                         .catch((error) => {
  459.                             console.error('Error:', error);
  460.                         });
  461.                 })
  462.             }
  463.         } else {
  464.             const test = document.getElementsByClassName('select-projet')
  465.             for (const testElement of test) {
  466.                 testElement.addEventListener('click', function (e) {
  467.                     displayLoading()
  468.                     e.preventDefault()
  469.                     testElement.classList.toggle('select-projet-active')
  470.                     const infos = document.querySelector('.projectButton.all')
  471.                     const dataId = []
  472.                     const tests = document.querySelectorAll('.select-projet.select-projet-active')
  473.                     for (const test1 of tests) {
  474.                         dataId.push(parseFloat(test1.dataset.id))
  475.                     }
  477.                     fetch('projects/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  478.                         method: 'GET'
  479.                     })
  480.                         .then(response => response.json())
  481.                         .then(data => {
  482.                             hideLoading()
  483.                             futurProjects.innerHTML = data.data
  489.                             _ww = $(window).width();
  490.                             var lightbox = $('.lightbox'),
  491.                                 item = 0;
  493.                             $('.lightbox-on').click(function(e){
  494.                                 e.stopPropagation();
  495.                                 item = 0;
  496.                                 console.log('click btn');
  498.                                 var id = $(this).attr('data-id'),
  499.                                     max = 0;
  500.                                 $('#'+id).toggle();
  501.                                 $('#'+id).animate({opacity: 1}, 300);
  502.                                 $('#'+id).find('img').each(function( i ) {
  503.                                     //console.log('h : '+$(this).height());
  504.                                     //console.log('w : '+$(this).width());
  505.                                     max = i;
  506.                                     item = 1;
  507.                                     counter(item, max+1);
  508.                                     itemWidth($(this));
  509.                                 });
  510.                             });
  512.                             lightbox.click(function(e) {
  513.                                 e.stopPropagation();
  514.                                 $(this).animate({opacity: 0}, 300, function(){
  515.                                     $(this).toggle();
  516.                                 });
  517.                             });
  519.                             $('.closer').on('click', function (e) {
  520.                                 e.stopPropagation();
  521.                                 $(this).parent().animate(
  522.                                     {opacity: 0},
  523.                                     300,
  524.                                     function(){
  525.                                         $(this).toggle();
  526.                                     }
  527.                                 );
  528.                             });
  530.                             function itemWidth(img){
  531.                                 img.closest('.items').width(img.width());
  532.                             }
  534.                             function counter(item, max){
  535.                                 $('.counter').text(item + ' / ' + max);
  536.                             }
  538.                             $('.item', lightbox).on('click, swipeleft', function (e) {
  539.                                 var wd = $(this).width(),
  540.                                     last = $(this).parent().find('.item').last(),
  541.                                     img = $(this).find('.img');
  542.                                 itemWidth(img);
  544.                                 $(this).animate(
  545.                                     {marginLeft: -wd, opacity: 0},
  546.                                     500,
  547.                                     'swing',
  548.                                     function(){
  549.                                         $(this).insertAfter(last);
  550.                                         $(this).css({marginLeft: 0, opacity: 1});
  551.                                     }
  552.                                 );
  553.                             });
  555.                             $('.item', lightbox).on('swiperight', function (e) {
  556.                                 var wd = $(this).width(),
  557.                                     first = $(this).parent().find('.item').first(),
  558.                                     last = $(this).parent().find('.item').last(),
  559.                                     img = $(this).find('.img');
  560.                                 itemWidth(img);
  562.                                 $(last).insertBefore($(this));
  563.                                 $(last).css({marginLeft: -wd, opacity: 0});
  564.                                 $(this).parent().find('.item').eq(0).animate(
  565.                                     {marginLeft: 0, opacity: 1},
  566.                                     500,
  567.                                     'swing'
  568.                                 );
  569.                             });
  571.                             $('.arrows', lightbox).on('click', function (e) {
  572.                                 e.stopPropagation();
  574.                                 var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  575.                                     max = $(this)
  576.                                         .siblings('.items').find('.item').length,
  577.                                     first = $(this).siblings('.items').find('.item').first(),
  578.                                     last = $(this).siblings('.items').find('.item').last(),
  579.                                     isRight = $(this).hasClass('right'),
  580.                                     marginL = isRight ? -wd : 0,
  581.                                     marginL0 = isRight ? 0: -wd,
  582.                                     opacOn = isRight ? 1 : 0,
  583.                                     opacOff = isRight ? 0 : 1;
  585.                                 if (!isRight){
  586.                                     $(last).insertBefore(first);
  587.                                     $(last).css({marginLeft: -wd, opacity: 0});
  588.                                     item++;
  589.                                     if (item == max+1) {item = 1};
  590.                                 } else {
  591.                                     item--;
  592.                                     if (item == 0) {item = max};
  593.                                 };
  595.                                 counter(item, max);
  597.                                 var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  598.                                 itemWidth(img);
  600.                                 $(this).siblings('.items').find('.item').eq(1).animate(
  601.                                     {opacity: opacOn},
  602.                                     500,
  603.                                     'swing');
  605.                                 $(this).siblings('.items').find('.item').eq(0).animate(
  606.                                     {marginLeft: marginL, opacity: 1},
  607.                                     500,
  608.                                     'swing',
  609.                                     function(){
  610.                                         if (isRight){
  611.                                             $(this).insertAfter(last);
  612.                                             $(this).css({ marginLeft: 0, opacity: 1});
  613.                                         }
  614.                                     }
  615.                                 );
  616.                             });
  619.                             if (_ww > 768){
  620.                                 $('.div-img-hover-2').hover(function (e) {
  621.                                     $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  622.                                     var htext = $(this).find('.project-content').height();
  623.                                     if (htext == undefined){htext = 0};
  624.                                     $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  625.                                     $(this).find('.project-content').css({'visibility': 'visible'});
  626.                                     $(this).find('.project-content').animate({opacity: 1}, 150);
  627.                                 }, function() {
  628.                                     console.log('down');
  629.                                     $(this).find('.div-hover-2').animate({height : 85}, 150);
  630.                                     $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  632.                                     $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  633.                                         $(this).find('.project-content').css({'visibility': 'hidden'});
  634.                                     });
  635.                                 });
  636.                             } else {
  637.                                 $('.div-hover-2').on( "click", function( event ) {
  638.                                     console.log('tap tap');
  639.                                     var opened = $(this).find('.div-hover-2').hasClass('open'),
  640.                                         ht = opened ? 85 : '100%',
  641.                                         vis = opened ? 0 : 1;
  642.                                     $(this).find('.div-hover-2').toggleClass('open');
  643.                                     $(this).find('.div-hover-2').animate({height : ht}, 150);
  644.                                     $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  645.                                 });
  646.                             }
  647.                             $('.div-hover').hover(function (e) {
  648.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  649.                             }, function() {
  650.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  651.                             });
  654.                         })
  655.                         .catch((error) => {
  656.                             console.error('Error:', error);
  657.                         });
  658.                 })
  659.             }
  660.         }
  662.         const buttonFilter = document.getElementsByClassName('select-projet')
  663.         for (const buttonFilterElement of buttonFilter) {
  664.             buttonFilterElement.addEventListener('click', function () {
  666.             })
  667.         }
  669.         if (window.matchMedia("(max-width: 768px)").matches) {
  670.             new Flicking("#flick4", {
  671.                 moveType: "freeScroll",
  672.                 bound: true
  673.             });
  675.         }
  677.         const filter = document.getElementById('filters')
  678.         const filterElement = document.getElementById('form-search-filter-ajax')
  679.         filter.addEventListener('click', function (e) {
  680.             e.preventDefault()
  681.             filterElement.classList.toggle('show')
  682.         })
  685.         const loader = document.querySelector("#loading");
  687.         function displayLoading() {
  688.             loader.classList.add("display");
  689.             // to stop loading after some time
  690.             setTimeout(() => {
  691.                 loader.classList.remove("display");
  692.             }, 5000);
  693.         }
  695.         // hiding loading
  696.         function hideLoading() {
  697.             loader.classList.remove("display");
  698.         }
  699.     </script>
  700. {% endblock %}