Symfony Profiler

{% extends 'base.html.twig' %}
{% block title %}References{% endblock %}
{% block body %}
{% set headerContent = content('Reference', 'Header') %}
{% if headerContent.picture is defined and headerContent.picture is not empty %}
{% set backgroundImage = headerContent.picture[0].path %}
{% else %}
{% set backgroundImage = 'empty' %}
{% endif %}
{#
<header class="header-tracol" style="background-image: url('/uploads/images/{{ backgroundImage }}');">
<div class="col-lg-8 mx-auto div-svg-header">
{% if headerContent.name is defined %}
<div class="header-habiter-div">
<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>
<h2 class="header-habiter-title col-lg-12">{{ headerContent.name }}</h2>
</div>
{% endif %}
</div>
</header>
#}
<div class="container-fluid reference-page">
{% set sectionContent1 = content('Reference', 'Section-1') %}
<div class="col-lg-8 mx-auto div-svg-header pre-section">
<div class="col-lg-4" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
<svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
<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"/>
</svg>
{% if references|length == 0 %}
<h1 class="project-title">pas de reference</h1>
{% elseif references|length == 1 %}
<h1 class="project-title">{{ references|length }} référence</h1>
{% else %}
<h1 class="project-title">{{ references|length }} références</h1>
{% endif %}
</div>
{% if sectionContent1.content is defined %}
<div class="separator"></div>
<div id="section-1-reference" class="col-lg-6 pre-section-content">
{{ sectionContent1.content|raw }}
</div>
{% endif %}
</div>
<section class="project filter" style="margin-bottom: 120px">
<div id="button-reference-page" class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; padding-left: 7px">
<div class="input-filter" style="padding-right:20px;">
<label for="all-references" class="mr-2">TOUS</label>
<input data-id="all" type="radio" name="type" id="all-references" class="mr-3 projectButton">
</div>
<div class="input-filter" style="padding-right:20px;">
<label for="residences-references" class="mr-2">RÉSIDENCES</label>
<input data-id="residences" type="radio" name="type" id="residences-references" class="mr-3 projectButton">
</div>
<div class="input-filter" style="padding-right:20px;">
<label for="maisons-references" class="mr-2">MAISONS</label>
<input data-id="maisons" type="radio" name="type" id="maisons-references" class=" projectButton">
</div>
{#
<div class="input-filter" style="padding-right:20px;">
<label for="commerces-references">COMMERCES</label>
<input data-id="commerces" type="radio" name="type" id="commerces-references" class=" projectButton">
</div>
<div class="input-filter" style="padding-right:20px;">
<label for="bureaux-references">BUREAUX</label>
<input data-id="bureaux" type="radio" name="type" id="bureaux-references" class=" projectButton">
</div>
#}
{#
<button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
<button data-id="residences" class="btn btn-primary come border-radius projectButton"><span class="span-projects">RÉSIDENCES</span></button>
<button data-id="maisons" class="btn btn-primary come border-radius projectButton"><span class="span-projects">MAISONS</span></button>
<button data-id="commerces" class="btn btn-primary come border-radius projectButton"><span class="span-projects">COMMERCES</span></button>
<button data-id="bureaux" class="btn btn-primary come border-radius projectButton"><span class="span-projects">BUREAUX</span></button>
#}
</div>
<div id="button-reference-page-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
<div id="flick5" class="flicking-viewport">
<div class="flicking-camera">
<button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
<button data-id="residences" class="btn btn-primary come border-radius projectButton"><span class="span-projects">RÉSIDENCES</span></button>
<button data-id="maisons" class="btn btn-primary come border-radius projectButton"><span class="span-projects">MAISONS</span></button>
{#
<button data-id="commerces" class="btn btn-primary come border-radius projectButton"><span class="span-projects">COMMERCES</span></button>
<button data-id="bureaux" class="btn btn-primary come border-radius projectButton"><span class="span-projects">BUREAUX</span></button>
#}
</div>
</div>
</div>
<div id="reference" class="col-lg-8 mx-auto div-svg-header row" style="display: flex;justify-content: center">
{% for key, reference in references %}
<div class="col-lg-6 div-img-hover-2 position-relative reference-list-single lightbox-on" data-id="modul-{{ key }}" style="cursor: pointer">
<div class="div-hover-2" id="div-hover-2" style="position: absolute; bottom: 8px; left:21px; background-color: #242424; color: white; height: 85px">
<div class="d-flex justify-content-between">
<p class="city">{{ reference.city.name }}</p>
<p class="date-ref">{# {{ reference.updated_at|date("d/m/Y") }} #}</p>
</div>
<p class="project-name">{{ reference.reference }}</p>
{% if reference.comments[0].comment is not empty %}
<p class="project-content" style="visibility: hidden">
{{ reference.comments[0].comment|slice(0, 350) }}
</p>
<a href="javascript:void(0);" class="project-arrow-2">
<span class="galerry-ref">GALERIE PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
</a>
{% else %}
<a style="margin-top: 180px" href="javascript:void(0);" class="project-arrow-2 ">
<span class="galerry-ref">GALERIE PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
</a>
{% endif %}
</div>
<div class="tag-ref-projet-2"><span class="text-tag-ref">{{ getTypeReferences(reference.type) }}</span></div>
{% if reference.pictures is not empty %}
{% for picture in reference.pictures|slice(0,1) %}
<div class="img" style="background-image: url('{{ picture.url }}')"></div>
{% endfor %}
{% else %}
<div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
{% endif %}
<div class="lightbox" id="modul-{{ key }}">
<div class="closer"></div>
<div class="arrows left">←</div>
<div class="arrows right">→</div>
<div class="counter">1/1</div>
<ul class="items">
{% for picture in reference.pictures %}
<li class="item">
<img class="img" src="{{ picture.url }}">
</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
<div class="text-center text-capitalize more-projects">
<p>AFFICHER PLUS DE REFERENCES</p>
</div>
</div>
</section>
</div>
<script>
for (const eElement of document.getElementsByClassName('projectButton')) {
eElement.addEventListener('click', function (e) {
e.preventDefault()
for (let button of document.getElementsByClassName('projectButton')) {
if (button.classList.contains('all')){
button.classList.remove('all')
button.classList.add('come')
//button.querySelector('span').classList.replace('span-all', 'span-projects')
}
}
eElement.classList.remove('come')
eElement.classList.add('all')
//eElement.querySelector('span').classList.replace('span-projects', 'span-all')
fetch('references/display/'+this.dataset.id, {
method: 'GET',
})
.then(response => response.json())
.then(data => {
console.log(data)
document.getElementById('reference').innerHTML = ''
document.getElementById('reference').innerHTML = data.data
_ww = $(window).width();
var lightbox = $('.lightbox'),
item = 0;
$('.lightbox-on').click(function(e){
e.stopPropagation();
item = 0;
console.log('click btn');
var id = $(this).attr('data-id'),
max = 0;
$('#'+id).toggle();
$('#'+id).animate({opacity: 1}, 300);
$('#'+id).find('img').each(function( i ) {
//console.log('h : '+$(this).height());
//console.log('w : '+$(this).width());
max = i;
item = 1;
counter(item, max+1);
itemWidth($(this));
});
});
lightbox.click(function(e) {
e.stopPropagation();
$(this).animate({opacity: 0}, 300, function(){
$(this).toggle();
});
});
$('.closer').on('click', function (e) {
e.stopPropagation();
$(this).parent().animate(
{opacity: 0},
300,
function(){
$(this).toggle();
}
);
});
function itemWidth(img){
img.closest('.items').width(img.width());
}
function counter(item, max){
$('.counter').text(item + ' / ' + max);
}
$('.item', lightbox).on('click, swipeleft', function (e) {
var wd = $(this).width(),
last = $(this).parent().find('.item').last(),
img = $(this).find('.img');
itemWidth(img);
$(this).animate(
{marginLeft: -wd, opacity: 0},
500,
'swing',
function(){
$(this).insertAfter(last);
$(this).css({marginLeft: 0, opacity: 1});
}
);
});
$('.item', lightbox).on('swiperight', function (e) {
var wd = $(this).width(),
first = $(this).parent().find('.item').first(),
last = $(this).parent().find('.item').last(),
img = $(this).find('.img');
itemWidth(img);
$(last).insertBefore($(this));
$(last).css({marginLeft: -wd, opacity: 0});
$(this).parent().find('.item').eq(0).animate(
{marginLeft: 0, opacity: 1},
500,
'swing'
);
});
$('.arrows', lightbox).on('click', function (e) {
e.stopPropagation();
var wd = $(this).siblings('.items').find('.item').eq(0).width(),
max = $(this)
.siblings('.items').find('.item').length,
first = $(this).siblings('.items').find('.item').first(),
last = $(this).siblings('.items').find('.item').last(),
isRight = $(this).hasClass('right'),
marginL = isRight ? -wd : 0,
marginL0 = isRight ? 0: -wd,
opacOn = isRight ? 1 : 0,
opacOff = isRight ? 0 : 1;
if (!isRight){
$(last).insertBefore(first);
$(last).css({marginLeft: -wd, opacity: 0});
item++;
if (item == max+1) {item = 1};
} else {
item--;
if (item == 0) {item = max};
};
counter(item, max);
var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
itemWidth(img);
$(this).siblings('.items').find('.item').eq(1).animate(
{opacity: opacOn},
500,
'swing');
$(this).siblings('.items').find('.item').eq(0).animate(
{marginLeft: marginL, opacity: 1},
500,
'swing',
function(){
if (isRight){
$(this).insertAfter(last);
$(this).css({ marginLeft: 0, opacity: 1});
}
}
);
});
if (_ww > 768){
$('.div-img-hover-2').hover(function (e) {
$(this).find('.project-arrow-2').animate({opacity: 1}, 150);
var htext = $(this).find('.project-content').height();
if (htext == undefined){htext = 0};
$(this).find('.div-hover-2').animate({height : htext+180}, 150);
$(this).find('.project-content').css({'visibility': 'visible'});
$(this).find('.project-content').animate({opacity: 1}, 150);
}, function() {
console.log('down');
$(this).find('.div-hover-2').animate({height : 85}, 150);
$(this).find('.project-arrow-2').animate({opacity: 0}, 150);
$(this).find('.project-content').animate({opacity: 0}, 150, function(){
$(this).find('.project-content').css({'visibility': 'hidden'});
});
});
} else {
$('.div-img-hover-2').on( "tap", function( event ) {
console.log('tap tap');
var opened = $(this).find('.div-hover-2').hasClass('open'),
ht = opened ? 85 : '100%',
vis = opened ? 0 : 1;
$(this).find('.div-hover-2').toggleClass('open');
$(this).find('.div-hover-2').animate({height : ht}, 150);
$(this).find('.project-arrow-2').animate({opacity: vis}, 150);
});
}
$('.div-hover').hover(function (e) {
$(this).find('.project-arrow-2').animate({opacity: 1}, 150);
}, function() {
$(this).find('.project-arrow-2').animate({opacity: 0}, 50);
});
})
.catch((error) => {
console.error('Error:', error);
});
})
}
if (window.matchMedia("(max-width: 768px)").matches) {
new Flicking("#flick5", {
moveType: "freeScroll",
bound: true
});
}
</script>
{# <script>#}
{# $('.slider-ref-detail').slick({#}
{# dots: false,#}
{# infinite: true,#}
{# speed: 300,#}
{# slidesToShow: 1,#}
{# slidesToScroll: 1,#}
{# autoplay: true,#}
{# responsive: [#}
{# {#}
{# breakpoint: 576,#}
{# settings: {#}
{# slidesToShow: 1,#}
{# slidesToScroll: 1#}
{# }#}
{# }#}
{# // You can unslick at a given breakpoint now by adding:#}
{# // settings: "unslick"#}
{# // instead of a settings object#}
{# ]#}
{# });#}
{# </script>#}
{% endblock %}

templates/reference.html.twig line 7