{% extends "base.html.twig" %}
{% block title %}
{{ parent() }}
| Concept
{% endblock %}
{% block stylesheets_add %}
{{ parent() }}
{{ encore_entry_link_tags('concept') }}
<style>
<!-- parse-ignore-start -->
{% for concept in concepts %}
.fp-arrow.fp-next {
border:none;
margin-right:25px;
color: {% if concepts|length > 0 %}{{ concepts[0].backgroundColor }}{% else %}#000000{% endif %};
}
.fp-arrow.fp-prev {
border:none;
color: {% if concepts|length > 0 %}{{ concepts[0].backgroundColor }}{% else %}#000000{% endif %};
}
.barre {
position: absolute;
height: 7px;
width: 100%;
background-color: {% if concepts|length > 0 %}{{ concepts[0].backgroundColor }}{% else %}#000000{% endif %};
z-index: 1000;
top: 100%;
}
{% if loop.first %}
.first-concept::after {
background-color: transparent !important;
}
{% endif %}
a.not-active::after {
background-color: transparent;
}
#navConcepts {
position: relative;
}
{% endfor %}
<!-- parse-ignore-end -->
</style>
{% endblock %}
{% block NavLink %}
{% for concept in concepts %}
<li class="nav-item">
<a class="nav-link me-3 rounded" id="linkconcept_{{ loop.index }}" style="color:{{concept.backgroundColor}};" href="#{{concept.NomConcept|lower|replace({' ':'-'})}}">{{concept.NomConcept}}</a>
</li>
{% endfor %}
{% endblock %}
{% block body %}
{% if (is_mobile()) and not (is_tablet()) %}
{% else %}
<div id="navConcepts" class="d-flex fixed-top shadow" role="group" aria-label="Basic mixed styles example" style="top:73px;">
{% for concept in concepts %}
<a type="button" id="linkconcept_{{ loop.index }}" class="not-active text-center py-1 btnlogo flex-fill border border-top-0 border-bottom-0 border-white rounded-0 {{ loop.first ? 'border-start-0' }} {{ loop.last ? 'border-end-0' }}{% if loop.first %}first-concept{% endif %} " style="background:{{concept.backgroundColor}}" href="#{{concept.NomConcept|lower|replace({' ':'-'})}}">
<img class="logo position-relative img-fluid" src="/uploads/logo/{{concept.logo}}" style="">
</a>
{% endfor %}
<div class="barre"></div>
</div>
{% endif %}
<div style="position: absolute; top: 10rem; right: 0; z-index:1100">
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SOUND') %}
{{ render ( controller ('App\\Controller\\Admin\\SonController::Modal')) }}
{% endif %}
</div>
<div style="position: absolute; top: 10rem; left: 0px; z-index:1000">
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SOUND') %}
<div class="custom-buttondroite" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<div class="logo">
<i style="color:black" class="fa-solid fa-bars fa-lg"></i>
</div>
<span style="text-align: center; color:black;" class="text">Admin menu</span>
</div>
{% endif %}
</div>
<div style="position: absolute; top: 14rem; right: 0px; z-index:1150">
<div id="btnsound" class="custom-button2" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<div class="logo">
<img src="/uploads/logosd/WP_small2.png" class="img-fluid me-auto rotas" alt="Votre image">
</div>
<span style="text-align: center;" class="text">Menu Web Sound Design</span>
</div>
</div>
<div id="fullpage">
{% for concept in concepts %}
{% if concept.displayvb == 0 %}
<div id="idconcept_{{ loop.index }}" class="section text-center test arrow" data-anchor="{{concept.NomConcept|lower|replace({' ':'-'})}}" style="background:{{concept.backgroundColor}};">
{% endif %}
{% if concept.displayvb == 1 %}
{% if (is_mobile()) and not (is_tablet()) %}
<div id="idconcept_{{ loop.index }}" class="section text-center test vid arrow" data-anchor="{{concept.NomConcept|lower|replace({' ':'-'})}}">
{% if concept.choicevb == 1 %}
<div class="video-container">
<iframe class="fullscreen" src="https://www.youtube.com/embed/{{concept.videom}}?autoplay=1&loop=1&controls=0&modestbranding=1&mute=1&playlist={{concept.videob}}" frameborder="0" allowfullscreen></iframe>
</div>
{% endif %}
{% if concept.choicevb == 0 %}
<div class="video-container">
<iframe src="https://player.vimeo.com/video/{{concept.videom}}?autoplay=1&muted=1&autopause=0&loop=1&title=0&byline=0&portrait=0&controls=0" frameborder="0" allowfullscreen allow="autoplay; fullscreen; picture-in-picture;"></iframe>
</div>
{% endif %}
{% else %}
<div id="idconcept_{{ loop.index }}" class="section text-center test vid arrow" data-anchor="{{concept.NomConcept|lower|replace({' ':'-'})}}">
<div class="overlay"></div>
{% if concept.choicevb == 1 %}
<div class="video-container">
<iframe class="fullscreen" src="https://www.youtube.com/embed/{{concept.videob}}?autoplay=1&loop=1&controls=0&modestbranding=1&mute=1&playlist={{concept.videob}}" frameborder="0" allowfullscreen></iframe>
</div>
{% endif %}
{% if concept.choicevb == 0 %}
<div class="video-container">
<iframe src="https://player.vimeo.com/video/{{concept.videob}}?autoplay=1&muted=1&autopause=0&loop=1&title=0&byline=0&portrait=0&controls=0" frameborder="0" allowfullscreen allow="autoplay; fullscreen; picture-in-picture;"></iframe>
</div>
{% endif %}
{% endif %}
{% endif %}
<div class=" slide d-flex align-items-center justify-content-center">
<div class="overlayslide"></div>
{% if concept.diplayVideo == 0 %}
<div class="card border-0 imageC mb-3" style=" border-radius: 10px;">
<div class="cycle-slideshow ">
{% for imageConcept in concept.imageConcepts %}
<img src="/uploads/images/{{imageConcept.image.name}}" class="card-img-top rounded" alt="...">
{% endfor %}
</div>
</div>
{% endif %}
{% if concept.diplayVideo == 1 %}
<div class="image-container mb-3" style="">
<a data-fancybox href="https://www.youtube.com/embed/{{concept.video}}">
<img class="card-img rounded" style="object-fit: cover; width: 100%; height: 100%;" src="http://img.youtube.com/vi/{{concept.video}}/hqdefault.jpg"/>
<i class="overlay-icon fa-solid fa-play fa-2xl"></i>
</a>
</div>
{% endif %}
<div class="card border-0 mb-3 rounded cardL scrollable-card" style="">
{% if (is_mobile()) and not (is_tablet()) %}
<div class="card-body text-center text-white rounded" style="background:{{concept.backgroundColor}}dd; border-radius: 10px;">
{% else %}
<div class="card-body text-center text-white rounded" style="background:{{concept.backgroundColor}}aa; border-radius: 10px;">
{% endif %}
<h4 class="card-title" style="">En quelques mots</h4>
<p class="card-text">{{concept.TexteCo|raw}}</p>
{% if concept.realisations|length is not null %}
<a href="" class="link-light h5 mb-3 lienVoirRealisations">Voir les Réalisations</a>
{% endif %}
</div>
</div>
</div>
{% for r in concept.realisations %}
{% if (is_mobile()) and not (is_tablet()) %}
<div id="idrealisation_{{ r.id }}" data-anchor="{{r.name|lower|replace({' ':'-'})}}" class="slide rea justify-content-end align-items-center slideshow" style="background-size: cover; background-position:center;z-index: 100;">
<div class="mb-5" style=" padding-right:15px; padding-left:15px;width:89%; ">
<div id="collapseHeader{{ r.id }}" class="p-3 collapseHeader" style="background: {{concept.backgroundColor}}dd; color: white; border-radius: 10px; width:312px; height:451px; z-index: 100; position: relative;">
<div class="scrollable" style="max-height: calc(100vh - 250px); z-index:100;">
<h4>Quel Concept, quel but ?</h4>
<div>{{r.TextP|raw}}</div>
</div>
</div>
</div>
</div>
{% else %}
<div id="idrealisation_{{ r.id }}" data-anchor="{{r.name|lower|replace({' ':'-'})}}" class="slide rea justify-content-end align-items-center slideshow" style="background-size: cover; background-position:center;">
<div class="" style=" padding-right:15px; padding-left:15px; width:1000px ; margin-bottom:110px; ">
<div id="collapseHeader{{ r.id }}" class="p-3 collapseHeader" style="background: {{concept.backgroundColor}}aa; color: white; border-radius: 10px; z-index: 100; position: relative;">
<div class="scrollable" style="max-height: calc(100vh - 250px); z-index:100;">
<h4>Quel Concept, quel but ?</h4>
<div>{{r.TextP|raw}}</div>
<button type="button" class="btn btn-outline-light btn-sm mb-3" data-bs-toggle="collapse" data-bs-target="#collapse{{ r.id }}">Voir plus</button>
<div id="collapse{{ r.id }}" class="collapse" aria-labelledby="headingOne">
<div>{{r.TexteG|raw}}</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
{% endblock %}
{% block javascripts_add %}
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script>
<!-- parse-ignore-start -->
var arrayBackgrounds = new Array;
var arrayBackgroundsMobile = new Array;
document.addEventListener('DOMContentLoaded', function () {
{% if (is_mobile()) and not (is_tablet()) %}
{% for concept in concepts %}
{% for realisation in concept.realisations %}
{% for imageRealisationMob in realisation.imageRealisationsMobile %}
if(typeof arrayBackgrounds['idrealisation_{{ realisation.id }}'] == 'undefined'){
arrayBackgrounds['idrealisation_{{ realisation.id }}'] = new Array;
}
arrayBackgrounds['idrealisation_{{ realisation.id }}'].push('/uploads/images/{{imageRealisationMob.imagemobile.name}}');
{% endfor %}
{% endfor %}
{% endfor %}
$('.slideshow').each(function(){
let elt = $(this);
let timer = null;
let id = $(this).prop('id');
let listBackground = arrayBackgrounds[$(this).prop('id')];
if(typeof listBackground !== 'undefined'){
let nbPhotos = listBackground.length;
let index = 0;
elt.css('background-image', 'url('+listBackground[index]+')');
timer = setInterval(() => {
index++;
if(index >= nbPhotos){
index = 0;
}
elt.css('background-image', 'url('+listBackground[index]+')');
}, 4000);
}
});
{% else %}
{% for concept in concepts %}
{% for realisation in concept.realisations %}
{% for imageRealisation in realisation.imageRealisations %}
if(typeof arrayBackgrounds['idrealisation_{{ realisation.id }}'] == 'undefined'){
arrayBackgrounds['idrealisation_{{ realisation.id }}'] = new Array;
}
arrayBackgrounds['idrealisation_{{ realisation.id }}'].push('/uploads/images/{{imageRealisation.image.name}}');
{% endfor %}
{% endfor %}
{% endfor %}
$('.slideshow').each(function(){
let elt = $(this);
let timer = null;
let id = $(this).prop('id');
let listBackground = arrayBackgrounds[$(this).prop('id')];
if(typeof listBackground !== 'undefined'){
let nbPhotos = listBackground.length;
let index = 0;
elt.css('background-image', 'url('+listBackground[index]+')');
timer = setInterval(() => {
index++;
if(index >= nbPhotos){
index = 0;
}
elt.css('background-image', 'url('+listBackground[index]+')');
}, 4000);
}
});
{% endif %}
{% for concept in concepts %}
{% for r in concept.realisations %}
$('#collapse{{ r.id }}').on('show.bs.collapse', function () {
$('#collapseHeader{{ r.id }} .scrollable').css('overflow-y', 'scroll');
});
$('#collapse{{ r.id }}').on('shown.bs.collapse', function () {
$('#collapseHeader{{ r.id }} .btn-outline-light').html('Voir moins');
});
$('#collapse{{ r.id }}').on('hide.bs.collapse', function () {
$('#collapseHeader{{ r.id }} .scrollable').css('overflow-y', 'hidden');
});
$('#collapse{{ r.id }}').on('hidden.bs.collapse', function () {
$('#collapseHeader{{ r.id }} .btn-outline-light').html('Voir plus');
});
{% endfor %}
{% endfor %}
const videoIframe = document.querySelector('.video-container iframe');
videoIframe.style.pointerEvents = 'none';
$('#fullpage').fullpage({
autoScrolling: true,
normalScrollElements: '.collapse, .scrollable-card, .collapseHeader',
navigation: false,
scrollingSpeed: 500,
{% if (is_mobile()) and not (is_tablet()) %}
controlArrows: false,
{% else %}
controlArrows: true,
{% endif %}
slidesNavigation: true,
loopHorizontal: false,
scrollBar: false,
{% if (is_mobile()) and not (is_tablet()) %}
paddingTop:'70px',
{% else %}
{% endif %}
onSlideLeave : function (section, origin, destination, direction, trigger) {
$('#link' + section.anchor).addClass('active');
setTimeout(() => {
$('#link' + section.anchor).removeClass('active');
}, 400);
},
onLeave : function (origin, destination, direction, trigger) {
$('#link' + destination.anchor).addClass('active');
setTimeout(() => {
$('#link' + destination.anchor).removeClass('active');
}, 400);
var currentAnchor = destination.anchor;
var barre = $('.barre');
var arrowNext = document.querySelectorAll('.arrow[data-anchor="' + currentAnchor + '"] .fp-arrow.fp-next');
var arrowPrev = document.querySelectorAll('.arrow[data-anchor="' + currentAnchor + '"] .fp-arrow.fp-prev');
if (currentAnchor.includes('/')) {
var anchorPart = currentAnchor.split('/')[0];
}
else{
var anchorPart = currentAnchor
}
{% for concept in concepts %}
if (anchorPart === "{{ concept.NomConcept|lower|replace({' ':'-'}) }}") {
barre.css('background-color', "{{ concept.backgroundColor }}");
arrowNext.forEach(function(element) {
element.style.color = '{{ concept.backgroundColor }}';
});
arrowPrev.forEach(function(element) {
element.style.color = '{{ concept.backgroundColor }}';
});
var linkConcept = document.getElementById("linkconcept_{{ loop.index }}");
linkConcept.classList.remove("not-active");
linkConcept.classList.remove("first-concept");
}
else{
// Ajouter la classe "not-active" à l'élément
var linkConcept = document.getElementById("linkconcept_{{ loop.index }}");
linkConcept.classList.add("not-active");
linkConcept.classList.remove("first-concept");
}
{% endfor %}
},
afterLoad: function(section,origin, direction, destination) {
$('#link' + section.anchor).addClass('active');
setTimeout(() => {
$('#link' + section.anchor).removeClass('active');
}, 400);
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
var cookieParts = cookie.split('=');
var cookieName = cookieParts[0];
var cookieValue = cookieParts[1];
var currentUrl2 = window.location.href;
{% for p in Perso %}
if (getCookie("{{p.nom|lower|replace({' ':''})}}")) {
{% for son in p.Son %}
if (direction == 'down' || direction == 'up') {
if (currentUrl2 === "{{ son.nomPage }}") {
if (!getCookie("son_" + "{{son.id}}")) {
const delayInSeconds = {{ son.delay }}; // Délai du son
const delayInMilliseconds = delayInSeconds * 1000; // Conversion en millisecondes
var audio = new Audio('/uploads/sons/{{ son.sonH }}');
setTimeout(function() {
audio.play();
}, delayInMilliseconds); // Le son sera joué après un délai
setCookie("son_" + {{son.id}}, true, {{son.frequence}});
}
else{
// Vérifiez la date et l'heure du dernier jeu du son
let lastPlayedTime = getCookie("son_" + "{{son.id}}");
if (lastPlayedTime) {
// Calculer la différence de temps entre le dernier jeu du son et maintenant
let timeDiff = (new Date().getTime() - new Date(lastPlayedTime).getTime()) / 1000 / 60 / 60; // en heures
if (timeDiff >= {{son.frequence}}) {
// Le temps écoulé est supérieur ou égal à la fréquence, donc jouer le son à nouveau
const delayInSeconds = {{ son.delay }}; // Délai du son
const delayInMilliseconds = delayInSeconds * 1000; // Conversion en millisecondes
var audio = new Audio('/uploads/sons/{{ son.sonH }}');
setTimeout(function() {
audio.play();
}, delayInMilliseconds); // Le son sera joué après un délai
// Mettre à jour le cookie avec la date et l'heure du dernier jeu du son
setCookie("son_" + "{{son.id}}", new Date().toISOString(), {{son.frequence}});
}
}
}
}
}
{% endfor %}
}
{% endfor %}
if (getCookie("mute")) {
// Couper tous les fichiers audio
var audioElements = document.getElementsByTagName('audio');
for (var j = 0; j < audioElements.length; j++) {
audioElements[j].pause();
}
}
};
},
afterSlideLoad: function(section, origin, destination, direction, trigger) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
var cookieParts = cookie.split('=');
var cookieName = cookieParts[0];
var cookieValue = cookieParts[1];
var currentUrl2 = window.location.href;
{% for p in Perso %}
if (getCookie("{{p.nom|lower|replace({' ':''})}}")) {
{% for son in p.Son %}
if (direction == 'right' || direction == 'left') {
if(!checkModalCookie()){
if (currentUrl2 === "{{ son.nomPage }}") {
if (!getCookie("son_" + "{{son.id}}")) {
const delayInSeconds = {{ son.delay }}; // Délai du son
const delayInMilliseconds = delayInSeconds * 1000; // Conversion en millisecondes
var audio = new Audio('/uploads/sons/{{ son.sonH }}');
setTimeout(function() {
audio.play();
}, delayInMilliseconds); // Le son sera joué après un délai
setCookie("son_" + {{son.id}}, true, {{son.frequence}});
}
else{
// Vérifiez la date et l'heure du dernier jeu du son
let lastPlayedTime = getCookie("son_" + "{{son.id}}");
if (lastPlayedTime) {
// Calculer la différence de temps entre le dernier jeu du son et maintenant
let timeDiff = (new Date().getTime() - new Date(lastPlayedTime).getTime()) / 1000 / 60 / 60; // en heures
if (timeDiff >= {{son.frequence}}) {
// Le temps écoulé est supérieur ou égal à la fréquence, donc jouer le son à nouveau
const delayInSeconds = {{ son.delay }}; // Délai du son
const delayInMilliseconds = delayInSeconds * 1000; // Conversion en millisecondes
var audio = new Audio('/uploads/sons/{{ son.sonH }}');
setTimeout(function() {
audio.play();
}, delayInMilliseconds); // Le son sera joué après un délai
// Mettre à jour le cookie avec la date et l'heure du dernier jeu du son
setCookie("son_" + "{{son.id}}", new Date().toISOString(), {{son.frequence}});
}
}
}
}
}
}
{% endfor %}
}
{% endfor %}
if (getCookie("mute")) {
// Couper tous les fichiers audio
var audioElements = document.getElementsByTagName('audio');
for (var j = 0; j < audioElements.length; j++) {
audioElements[j].pause();
}
}
};
}
});
// Récupérer tous les liens correspondants à l'aide du sélecteur de classe
const liensVoirRealisations = document.querySelectorAll('.lienVoirRealisations');
// Ajouter un gestionnaire d'événements à chaque lien
liensVoirRealisations.forEach(function(lien) {
lien.addEventListener('click', function(event) {
event.preventDefault(); // Empêcher le comportement de lien par défaut
// Appeler la fonction de FullPage.js pour passer à la diapositive suivante (slide à droite)
fullpage_api.moveSlideRight();
});
});
$('.fp-prev').append('<span class="fa-solid fa-play fa-rotate-180 fa-2xl"></span>');
$('.fp-next').append('<span class="fa-solid fa-play fa-2xl"></span>');
// to gain events control / click event delegation
$('.fp-prev').on('click', function(){ fullpage_api.moveSlideLeft(); });
$('.fp-next').on('click', function(){ fullpage_api.moveSlideRight(); });
});
<!-- parse-ignore-end -->
</script>
{% endblock %}