templates/reference.html.twig line 7

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}References{% endblock %}
  5. {% block body %}
  7.     {% set headerContent = content('Reference', '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.     {#
  15.     <header class="header-tracol" style="background-image: url('/uploads/images/{{ backgroundImage }}');">
  16.         <div class="col-lg-8 mx-auto div-svg-header">
  17.             {% if headerContent.name is defined %}
  18.                 <div class="header-habiter-div">
  19.                     <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>
  20.                     <h2 class="header-habiter-title col-lg-12">{{ headerContent.name }}</h2>
  21.                 </div>
  22.             {% endif %}
  23.         </div>
  24.     </header>
  25.     #}
  28.     <div class="container-fluid reference-page">
  29.         {% set sectionContent1 = content('Reference', 'Section-1') %}
  30.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  31.             <div class="col-lg-4" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  32.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  33.                     <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"/>
  34.                 </svg>
  35.                 {% if references|length == 0 %}
  36.                     <h1 class="project-title">pas de reference</h1>
  37.                 {% elseif references|length == 1  %}
  38.                     <h1 class="project-title">{{ references|length }} référence</h1>
  39.                 {% else %}
  40.                     <h1 class="project-title">{{ references|length }} références</h1>
  41.                 {% endif %}
  42.             </div>
  43.             {% if sectionContent1.content is defined %}
  44.                 <div class="separator"></div>
  45.                 <div id="section-1-reference" class="col-lg-6 pre-section-content">
  46.                     {{ sectionContent1.content|raw }}
  47.                 </div>
  48.             {% endif %}
  49.         </div>
  51.         <section class="project" style="margin-bottom: 120px">
  52.             <div id="button-reference-page"  class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; padding-left: 7px">
  53.                 <div class="input-filter">
  54.                     <label for="all-references">TOUS</label>
  55.                     <input data-id="all" type="radio" name="type" id="all-references" class="mr-3 projectButton">
  56.                 </div>
  57.                 <div class="input-filter">
  58.                     <label for="residences-references">RÉSIDENCES</label>
  59.                     <input data-id="residences" type="radio" name="type" id="residences-references" class="mr-3 projectButton">
  60.                 </div>
  61.                 <div class="input-filter">
  62.                     <label for="maisons-references">MAISONS</label>
  63.                     <input data-id="maisons" type="radio" name="type" id="maisons-references" class=" projectButton">
  64.                 </div>
  65.                 <div class="input-filter">
  66.                     <label for="commerces-references">COMMERCES</label>
  67.                     <input data-id="commerces" type="radio" name="type" id="commerces-references" class=" projectButton">
  68.                 </div>
  69.                 <div class="input-filter">
  70.                     <label for="bureaux-references">BUREAUX</label>
  71.                     <input data-id="bureaux" type="radio" name="type" id="bureaux-references" class=" projectButton">
  72.                 </div>
  73.                 {#
  74.                 <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  75.                 <button data-id="residences" class="btn btn-primary come border-radius projectButton"><span class="span-projects">RÉSIDENCES</span></button>
  76.                 <button data-id="maisons" class="btn btn-primary come border-radius projectButton"><span class="span-projects">MAISONS</span></button>
  77.                 <button data-id="commerces" class="btn btn-primary come border-radius projectButton"><span class="span-projects">COMMERCES</span></button>
  78.                 <button data-id="bureaux" class="btn btn-primary come border-radius projectButton"><span class="span-projects">BUREAUX</span></button>
  79.                 #}
  81.             </div>
  82.             <div id="button-reference-page-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
  83.                 <div id="flick5" class="flicking-viewport">
  84.                     <div class="flicking-camera">
  85.                         <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  86.                         <button data-id="residences" class="btn btn-primary come border-radius projectButton"><span class="span-projects">RÉSIDENCES</span></button>
  87.                         <button data-id="maisons" class="btn btn-primary come border-radius projectButton"><span class="span-projects">MAISONS</span></button>
  88.                         <button data-id="commerces" class="btn btn-primary come border-radius projectButton"><span class="span-projects">COMMERCES</span></button>
  89.                         <button data-id="bureaux" class="btn btn-primary come border-radius projectButton"><span class="span-projects">BUREAUX</span></button>
  90.                     </div>
  91.                 </div>
  92.             </div>
  95.             <div id="reference" class="col-lg-8 mx-auto div-svg-header" style="display: flex; flex-direction: column; justify-content: center">
  96.                 {% for key, reference in references %}
  97.                     <div class="col-lg-12 div-img-hover-2 position-relative reference-list-single">
  99.                         <div class="div-hover-2" id="div-hover-2" style="position: absolute; bottom: 8px; left: 8px; background-color: #242424; color: white; height: 85px">
  100.                             <div class="d-flex justify-content-between">
  101.                                 <p class="city">{{ reference.city.name }}</p>
  102.                                 <p class="date-ref">{{ reference.updated_at|date("d/m/Y") }}</p>
  103.                             </div>
  105.                             <p class="project-name">{{ reference.reference }}</p>
  106.                             {% if reference.comments[0].comment is not empty %}
  107.                                 <p class="project-content" style="visibility: hidden">
  108.                                     {{ reference.comments[0].comment|slice(0, 350) }}
  109.                                 </p>
  110.                                 <a href="javascript:void(0);" class="project-arrow-2 lightbox-on" data-id="modul-{{ key }}">
  111.                                     <span class="galerry-ref">GALERIES PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  112.                                 </a>
  113.                             {% else %}
  114.                                 <a style="margin-top: 180px" href="javascript:void(0);" class="project-arrow-2 lightbox-on">
  115.                                     <span class="galerry-ref">GALERIES PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  116.                                 </a>
  117.                             {% endif %}
  118.                         </div>
  120.                         <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ getTypeReferences(reference.type) }}</span></div>
  121.                         {% if reference.pictures is not empty %}
  122.                             {% for picture in reference.pictures|slice(0,1) %}
  123.                                 <div class="img" style="background-image: url('{{ picture.url }}')"></div>
  124.                             {% endfor %}
  125.                         {% else %}
  126.                             <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  127.                         {% endif %}
  128.                     </div>
  130.                     <div class="lightbox" id="modul-{{ key }}">
  131.                         <div class="closer"></div>
  132.                         <div class="arrows left">&#8592;</div>
  133.                         <div class="arrows right">&#8594;</div>
  134.                         <div class="counter">1/1</div>
  135.                         <ul class="items">
  136.                             {% for picture in reference.pictures %}
  137.                                 <li class="item">
  138.                                     <img class="img" src="{{ picture.url }}">
  139.                                 </li>
  140.                             {% endfor %}
  141.                         </ul>
  142.                     </div>
  144.                 {% endfor %}
  146.                 <div class="text-center text-capitalize more-projects">
  147.                     <p>AFFICHER PLUS DE REFERENCES</p>
  148.                 </div>
  149.             </div>
  150.         </section>
  151.     </div>
  153.     <script>
  155.         for (const eElement of document.getElementsByClassName('projectButton')) {
  156.             eElement.addEventListener('click', function (e) {
  157.                 e.preventDefault()
  159.                 for (let button of document.getElementsByClassName('projectButton')) {
  160.                     if (button.classList.contains('all')){
  161.                         button.classList.remove('all')
  162.                         button.classList.add('come')
  163.                         //button.querySelector('span').classList.replace('span-all', 'span-projects')
  164.                     }
  165.                 }
  167.                 eElement.classList.remove('come')
  168.                 eElement.classList.add('all')
  169.                 //eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  171.                 fetch('references/display/'+this.dataset.id, {
  172.                     method: 'GET',
  173.                 })
  174.                     .then(response => response.json())
  175.                     .then(data => {
  176.                         console.log(data)
  177.                         document.getElementById('reference').innerHTML = ''
  178.                         document.getElementById('reference').innerHTML = data.data
  179.                         _ww = $(window).width();
  180.                         var lightbox = $('.lightbox'),
  181.                             item = 0;
  183.                         $('.lightbox-on').click(function(e){
  184.                             e.stopPropagation();
  185.                             item = 0;
  186.                             console.log('click btn');
  188.                             var id = $(this).attr('data-id'),
  189.                                 max = 0;
  190.                             $('#'+id).toggle();
  191.                             $('#'+id).animate({opacity: 1}, 300);
  192.                             $('#'+id).find('img').each(function( i ) {
  193.                                 //console.log('h : '+$(this).height());
  194.                                 //console.log('w : '+$(this).width());
  195.                                 max = i;
  196.                                 item = 1;
  197.                                 counter(item, max+1);
  198.                                 itemWidth($(this));
  199.                             });
  200.                         });
  202.                         lightbox.click(function(e) {
  203.                             e.stopPropagation();
  204.                             $(this).animate({opacity: 0}, 300, function(){
  205.                                 $(this).toggle();
  206.                             });
  207.                         });
  209.                         $('.closer').on('click', function (e) {
  210.                             e.stopPropagation();
  211.                             $(this).parent().animate(
  212.                                 {opacity: 0},
  213.                                 300,
  214.                                 function(){
  215.                                     $(this).toggle();
  216.                                 }
  217.                             );
  218.                         });
  220.                         function itemWidth(img){
  221.                             img.closest('.items').width(img.width());
  222.                         }
  224.                         function counter(item, max){
  225.                             $('.counter').text(item + ' / ' + max);
  226.                         }
  228.                         $('.item', lightbox).on('click, swipeleft', function (e) {
  229.                             var wd = $(this).width(),
  230.                                 last = $(this).parent().find('.item').last(),
  231.                                 img = $(this).find('.img');
  232.                             itemWidth(img);
  234.                             $(this).animate(
  235.                                 {marginLeft: -wd, opacity: 0},
  236.                                 500,
  237.                                 'swing',
  238.                                 function(){
  239.                                     $(this).insertAfter(last);
  240.                                     $(this).css({marginLeft: 0, opacity: 1});
  241.                                 }
  242.                             );
  243.                         });
  245.                         $('.item', lightbox).on('swiperight', function (e) {
  246.                             var wd = $(this).width(),
  247.                                 first = $(this).parent().find('.item').first(),
  248.                                 last = $(this).parent().find('.item').last(),
  249.                                 img = $(this).find('.img');
  250.                             itemWidth(img);
  252.                             $(last).insertBefore($(this));
  253.                             $(last).css({marginLeft: -wd, opacity: 0});
  254.                             $(this).parent().find('.item').eq(0).animate(
  255.                                 {marginLeft: 0, opacity: 1},
  256.                                 500,
  257.                                 'swing'
  258.                             );
  259.                         });
  261.                         $('.arrows', lightbox).on('click', function (e) {
  262.                             e.stopPropagation();
  264.                             var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  265.                                 max = $(this)
  266.                                     .siblings('.items').find('.item').length,
  267.                                 first = $(this).siblings('.items').find('.item').first(),
  268.                                 last = $(this).siblings('.items').find('.item').last(),
  269.                                 isRight = $(this).hasClass('right'),
  270.                                 marginL = isRight ? -wd : 0,
  271.                                 marginL0 = isRight ? 0: -wd,
  272.                                 opacOn = isRight ? 1 : 0,
  273.                                 opacOff = isRight ? 0 : 1;
  275.                             if (!isRight){
  276.                                 $(last).insertBefore(first);
  277.                                 $(last).css({marginLeft: -wd, opacity: 0});
  278.                                 item++;
  279.                                 if (item == max+1) {item = 1};
  280.                             } else {
  281.                                 item--;
  282.                                 if (item == 0) {item = max};
  283.                             };
  285.                             counter(item, max);
  287.                             var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  288.                             itemWidth(img);
  290.                             $(this).siblings('.items').find('.item').eq(1).animate(
  291.                                 {opacity: opacOn},
  292.                                 500,
  293.                                 'swing');
  295.                             $(this).siblings('.items').find('.item').eq(0).animate(
  296.                                 {marginLeft: marginL, opacity: 1},
  297.                                 500,
  298.                                 'swing',
  299.                                 function(){
  300.                                     if (isRight){
  301.                                         $(this).insertAfter(last);
  302.                                         $(this).css({ marginLeft: 0, opacity: 1});
  303.                                     }
  304.                                 }
  305.                             );
  306.                         });
  309.                         if (_ww > 768){
  310.                             $('.div-img-hover-2').hover(function (e) {
  311.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  312.                                 var htext = $(this).find('.project-content').height();
  313.                                 if (htext == undefined){htext = 0};
  314.                                 $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  315.                                 $(this).find('.project-content').css({'visibility': 'visible'});
  316.                                 $(this).find('.project-content').animate({opacity: 1}, 150);
  317.                             }, function() {
  318.                                 console.log('down');
  319.                                 $(this).find('.div-hover-2').animate({height : 85}, 150);
  320.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  322.                                 $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  323.                                     $(this).find('.project-content').css({'visibility': 'hidden'});
  324.                                 });
  325.                             });
  326.                         } else {
  327.                             $('.div-img-hover-2').on( "tap", function( event ) {
  328.                                 console.log('tap tap');
  329.                                 var opened = $(this).find('.div-hover-2').hasClass('open'),
  330.                                     ht = opened ? 85 : '100%',
  331.                                     vis = opened ? 0 : 1;
  332.                                 $(this).find('.div-hover-2').toggleClass('open');
  333.                                 $(this).find('.div-hover-2').animate({height : ht}, 150);
  334.                                 $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  335.                             });
  336.                         }
  337.                         $('.div-hover').hover(function (e) {
  338.                             $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  339.                         }, function() {
  340.                             $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  341.                         });
  342.                     })
  343.                     .catch((error) => {
  344.                         console.error('Error:', error);
  345.                     });
  346.             })
  347.         }
  350.         if (window.matchMedia("(max-width: 768px)").matches) {
  351.             new Flicking("#flick5", {
  352.                 moveType: "freeScroll",
  353.                 bound: true
  354.             });
  356.         }
  357.     </script>
  358. {#    <script>#}
  359. {#        $('.slider-ref-detail').slick({#}
  360. {#            dots: false,#}
  361. {#            infinite: true,#}
  362. {#            speed: 300,#}
  363. {#            slidesToShow: 1,#}
  364. {#            slidesToScroll: 1,#}
  365. {#            autoplay: true,#}
  366. {#            responsive: [#}
  367. {#                {#}
  368. {#                    breakpoint: 576,#}
  369. {#                    settings: {#}
  370. {#                        slidesToShow: 1,#}
  371. {#                        slidesToScroll: 1#}
  372. {#                    }#}
  373. {#                }#}
  374. {#                // You can unslick at a given breakpoint now by adding:#}
  375. {#                // settings: "unslick"#}
  376. {#                // instead of a settings object#}
  377. {#            ]#}
  378. {#        });#}
  379. {#    </script>#}
  380. {% endblock %}