Symfony Profiler

{% extends 'include/base.html.twig' %}
{% set bodyClass = 'home' %}
{% set canvasHeight = 397 %}
{% set canvasWidth = 297 %}
{% set canvasExportScale = 2 %}
{% set bodyClass = 'paso1' %}
{% set paises = [
{
'name': 'Arabia Saudi',
'key': 'arabiasaudi',
},
{
'name': 'Alemania',
'key': 'alemania',
},
{
'name': 'Argentina',
'key': 'argentina',
},
{
'name': 'Australia',
'key': 'australia',
},
{
'name': 'Bélgica',
'key': 'belgica',
},
{
'name': 'Brasil',
'key': 'brasil',
},
{
'name': 'Camerun',
'key': 'camerun',
},
{
'name': 'Canadá',
'key': 'canada',
},
{
'name': 'Corea del Sur',
'key': 'coreasur',
},
{
'name': 'Costa Rica',
'key': 'costarica',
},
{
'name': 'Croacia',
'key': 'croacia',
},
{
'name': 'Dinamarca',
'key': 'dinamarca',
},
{
'name': 'Ecuador',
'key': 'ecuador',
},
{
'name': 'España',
'key': 'espana',
},
{
'name': 'Francia',
'key': 'francia',
},
{
'name': 'Gales',
'key': 'gales',
},
{
'name': 'Ghana',
'key': 'ghana',
},
{
'name': 'Inglaterra',
'key': 'inglaterra',
},
{
'name': 'Iran',
'key': 'iran',
},
{
'name': 'Japón',
'key': 'japon',
},
{
'name': 'Marruecos',
'key': 'marruecos',
},
{
'name': 'Mexico',
'key': 'mexico',
},
{
'name': 'Paises Bajos',
'key': 'paisesbajos',
},
{
'name': 'Polonia',
'key': 'polonia',
},
{
'name': 'Portugal',
'key': 'portugal',
},
{
'name': 'Qatar',
'key': 'qatar',
},
{
'name': 'Senegal',
'key': 'senegal',
},
{
'name': 'Serbia',
'key': 'serbia',
},
{
'name': 'Suiza',
'key': 'suiza',
},
{
'name': 'Tunez',
'key': 'tunez',
},
{
'name': 'Uruguay',
'key': 'uruguay',
},
{
'name': 'USA',
'key': 'usa',
},
] %}
{% block body %}
<div class="ventana ventana-1 home">
<div class="body-content">
<h1><a href="{{ path('program_campaigns') }}" title="">Entrez dans le club</a></h1>
<h2>Jeu Selfie Coupe du monde</h2>
<p>Du 21 novembre 2022 au 18 décembre 2022, prends-toi en selfie, personnalise-le aux couleurs de ton équipe, et tente de gagner</p>
<p><strong>l'une des 5.000 récompenses en jeu</strong></p>
<form method="post" action="" onsubmit="muestraVentana(2);return false;">
<input type="submit" value="Je participe" />
<label for="check1">
<input type="checkbox" name="check1" id="check1" required /> J’accepte la <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">politique de confidentialité</a>
</label>
<label for="check2">
<input type="checkbox" name="check2" id="check2" required /> J’accepte le <a href="{{ path('reglamento') }}" title="Règlement">règlement</a>
</label>
</form>
</div>
<footer>
<ul>
<li><a href="{{ path('reglamento') }}" title="Règlement">Règlement</a></li>
<li> - <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">Politique de confidentialité</a></li>
<li> - <a href="{{ path('contacto') }}" title="Contact">Contact</a></li>
</ul>
</footer>
</div>
<div class="ventana ventana-2 participar">
<h1><a href="{{ path('program_campaigns') }}" title="">Entrez dans le club</a></h1>
<div class="box">
<h2>Comment ça marche ?<br/>C’est très simple</h2>
<ul>
<li><strong>1</strong> <span>Achète une boisson pour un minimum de 5 €</span></li>
<li><strong>2</strong> <span>Créée ton selfie personnalisé</span></li>
<li><strong>3</strong> <span>Poste ton ticket de caisse</span></li>
<li><strong>4</strong> <span>Découvre immédiatement si tu as gagné un lot de 10 tirages photos Cheerz, livrées directement chez toi</span></li>
</ul>
</div>
<div class="wrapper-btn">
<a href="#" title="C’est parti !" class="btn ir-a-ventana" numero-ventana="3">C’est parti !</a>
</div>
<footer>
<ul>
<li><a href="{{ path('reglamento') }}" title="Règlement">Règlement</a></li>
<li> - <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">Politique de confidentialité</a></li>
<li> - <a href="{{ path('contacto') }}" title="Contact">Contact</a></li>
</ul>
</footer>
</div>
<div class="ventana ventana-3 ">
<h1><a href="{{ path('program_campaigns') }}" title="">Entrez dans le club</a></h1>
<div class="pasos paso1 visible">
<h3>Télécharge ta photo</h3>
<ul class="numero-paso">
<li class="actual">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="opciones">
<li class="box seleccionar"><a href="#" id="fileSelect" title="Sélectionner une photo">Sélectionner une photo</a></li>
<li class="box camara"><a href="#" id="pictureFromCamera" title="Prendre une photo<">Prendre une photo</a></li>
</ul>

<input type="file" id="fileElem" accept="image/*" style="display:none" />
<script>
const fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", (e) => {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
fileElem.addEventListener("change", handleFiles, false);
function handleFiles() {
if (this.files.length) {
for (let i = 0; i < this.files.length; i++) {
urlImagenFondo = window.URL.createObjectURL(this.files[i]);
}
reloadCanvas();
irPaso(2);
}
}
</script>

<input id="cameraFileInput" type="file" accept="image/*" capture="environment" style="display:none"/>
<img id="pictureFromCamera" />
<script>
const fileSelectCamera = document.getElementById("pictureFromCamera"),
fileElemCamara = document.getElementById("cameraFileInput");
fileSelectCamera.addEventListener("click", (e) => {
if (fileElemCamara) {
fileElemCamara.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
document
.getElementById("cameraFileInput")
.addEventListener("change", function () {
urlImagenFondo = window.URL.createObjectURL(this.files[0]);
reloadCanvas();
irPaso(2);
});
</script>
</div>
<div class="pasos paso2">
<h3>Porte les couleurs de ton drapeau</h3>
<ul class="numero-paso">
<li>1</li>
<li class="actual">2</li>
<li>3</li>
</ul>
<div class="box">
<canvas hidden width="{{ canvasWidth }}" height="{{ canvasHeight }}" id="presize"></canvas>
<img hidden id="imagenFondo"/>
<div class="preview">
<canvas id="canvas" width="{{ canvasWidth }}" height="{{ canvasHeight }}"></canvas>
</div>
<div id="wrapper-paises" class="wrapper-paises">
<ul class="paises" style="width: {{paises|length * 65}}px;">
{% for pais in paises %}
<li
pais="{{ pais.key }}"
nombre="{{ pais.name }}"
banda="{{ asset('assets/c68ae7b1-8ad2-4ee1-ba95-34dcc54e4181/images/bandas/' ~ pais.key ~ '.png') }}"
cara="{{ asset('assets/c68ae7b1-8ad2-4ee1-ba95-34dcc54e4181/images/caras/' ~ pais.key ~ '.png') }}">
<img src="{{ asset('assets/c68ae7b1-8ad2-4ee1-ba95-34dcc54e4181/images/banderas/' ~ pais.key ~ '.png') }}"/>
<span>{{ pais.name }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
<a href="javascript:irPaso(3);exportFullres()" title="Suivant" class="btn">Suivant</a>
<div hidden id="exportImageContainer">
<img id="exportImagePreview">
<button id="exportPreview" onclick="exportFullres()">Vista previa imagen exportada</button>
<canvas hidden id="exportCanvas"></canvas>
</div>
<script>
const canvasHeight = {{ canvasHeight }} || 300;
const canvasWidth = {{ canvasWidth }} || 300;
const canvasExportScale = {{ canvasExportScale }} || 1;
//http://fabricjs.com/customization
var canvas = new fabric.Canvas('canvas');
var imageFabricCara1 = null;
var imageFabricCara2 = null;
var imageFabricBanda = null;
var textboxFabric = null;
var imageFabricCara1Coords = null;
var imageFabricCara2Coords = null;
var selectableOpts = {
ml: false, //middle left
mr: false, //middle right
mt: false, //middle top
mb: false //middle bottom
};
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
//si existe un parametro tal que debug=1, se muestra el boton para ver la imagen exportada
if (urlParams.get("debug")) {
document.getElementById("exportImageContainer").removeAttribute("hidden");
}
/* metodo alternativo
const coverImg = (ctx, img, type) => {
const imgRatio = img.height / img.width
const winRatio = canvasHeight / canvasWidth
if ((imgRatio < winRatio && type === 'contain') || (imgRatio > winRatio && type === 'cover')) {
const h = canvasWidth * imgRatio
ctx.drawImage(img, 0, (canvasHeight - h) / 2, canvasWidth, h)
}
if ((imgRatio > winRatio && type === 'contain') || (imgRatio < winRatio && type === 'cover')) {
const w = canvasWidth * winRatio / imgRatio
ctx.drawImage(img, (canvasWidth - w) / 2, 0, w, canvasHeight)
}
}
*/
function exportFullres() {
const imagenFondo = document.getElementById("imagenFondo");
//cogemos un canvas, y pintamos la imagen modo 'cover'. Exportamos el canvas a una imagen temporal.
const cv = document.getElementById("exportCanvas");
cv.setAttribute("width", canvasWidth * canvasExportScale);
cv.setAttribute("height", canvasHeight * canvasExportScale);
drawImageProp(cv.getContext("2d"), imagenFondo);
const exportBackgroundImg = document.createElement("img");
exportBackgroundImg.src = cv.toDataURL("image/png", 1);
//con esta imagen temporal ya centrada, creamos un canvas instancia de fabricJS y la ponemos de fondo:
const fabricExportCanvas = new fabric.Canvas('exportCanvas');
function addObjectToExportCanvas(object) {
return new Promise(resolve => {
object.clone(function (clonedObject) {
fabricExportCanvas.add(clonedObject);
clonedObject.set({
top: clonedObject.top * canvasExportScale,
left: clonedObject.left * canvasExportScale,
scaleY: clonedObject.scaleX * canvasExportScale,
scaleX: clonedObject.scaleY * canvasExportScale
});
resolve(true);
});
});
}
fabric.Image.fromURL(exportBackgroundImg.src, async function (img) {
fabricExportCanvas.setBackgroundImage(img, fabricExportCanvas.renderAll.bind(fabricExportCanvas));
//ahora recorremos todos los elementos del canvas principal, y los clonamos. Debemos modificar todos sus parametros acorde a la
//escala que hayamos elegido. Clonar y modificar un elemento del canvas es una operacion asincrona.
const canvasObjects = canvas.getObjects();
for (let i = 0; i < canvasObjects.length; i++) {
await addObjectToExportCanvas(canvasObjects[i]);
fabricExportCanvas.renderAll.bind(fabricExportCanvas)
}
const base64Img = document.getElementById("base64Img");
const base64ExportImg = fabricExportCanvas.toDataURL({format: 'png', quality: 1});
document.getElementById("exportImagePreview").src = base64ExportImg; //cargamos la imagen en el contenedor de previsualizacion para debug
base64Img.setAttribute("value", base64ExportImg);
});
}
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
if (arguments.length === 2) {
x = y = 0;
w = ctx.canvas.width;
h = ctx.canvas.height;
}
// default offset is center
offsetX = typeof offsetX === "number" ? offsetX : 0.5;
offsetY = typeof offsetY === "number" ? offsetY : 0.5;
// keep bounds [0.0, 1.0]
if (offsetX < 0) offsetX = 0;
if (offsetY < 0) offsetY = 0;
if (offsetX > 1) offsetX = 1;
if (offsetY > 1) offsetY = 1;
var iw = img.width,
ih = img.height,
r = Math.min(w / iw, h / ih),
nw = iw * r, // new prop. width
nh = ih * r, // new prop. height
cx, cy, cw, ch, ar = 1;
// decide which gap to fill
if (nw < w) ar = w / nw;
if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated
nw *= ar;
nh *= ar;
// calc source rectangle
cw = iw / (nw / w);
ch = ih / (nh / h);
cx = (iw - cw) * offsetX;
cy = (ih - ch) * offsetY;
// make sure source rectangle is valid
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cw > iw) cw = iw;
if (ch > ih) ch = ih;
// fill image in dest. rectangle
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}
function reloadCanvas() {
if (!urlImagenFondo) return;
imageFabricCara1Coords = imageFabricCara1 ? imageFabricCara1.getCoords() : null;
imageFabricCara2Coords = imageFabricCara2 ? imageFabricCara2.getCoords() : null;
const preImg = document.getElementById("imagenFondo");
const base64Img = document.getElementById("base64Img");
preImg.src = urlImagenFondo;
//se carga primero la imagen en un canvas oculto, se centra y la exportamos
//en el segundo canvas cargamos la imagen ya manipulada
preImg.addEventListener('load', e => {
const preCanvas = document.getElementById("presize");
drawImageProp(preCanvas.getContext("2d"), preImg);
fabric.Image.fromURL(preCanvas.toDataURL("image/png", 1), function(img) {
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
});
canvas.renderAll.bind(canvas);
});
});
if (!textboxFabric) {
textboxFabric = new fabric.Textbox(nombrePais, {
selectable: false,
left: 0,
top: canvas.height - 40,
width: canvas.width,
fontSize: 30,
fill: '#FFF',
textAlign: 'center'
});
canvas.add(textboxFabric);
}
textboxFabric.text = nombrePais;
const imgCara1 = new Image();
imgCara1.src = urlImagenCara1;
imgCara1.onload = function() {
if (!imageFabricCara1) {
imageFabricCara1 = new fabric.Image();
imageFabricCara1.set({left: 150, top: 210});
imageFabricCara1.setControlsVisibility(selectableOpts);
canvas.add(imageFabricCara1);
}
imageFabricCara1.setSrc(urlImagenCara1, function (img) {
imageFabricCara1.setCoords(imageFabricCara1Coords);
canvas.renderAll();
});
}
const imgCara2 = new Image();
imgCara2.src = urlImagenCara2;
imgCara2.onload = function(){
if (!imageFabricCara2) {
imageFabricCara2 = new fabric.Image();
imageFabricCara2.set({right: 230, top: 210});
imageFabricCara2.setControlsVisibility(selectableOpts);
canvas.add(imageFabricCara2);
}
imageFabricCara2.setSrc(urlImagenCara2, function (img) {
imageFabricCara2.setCoords(imageFabricCara2Coords);
canvas.renderAll();
});
}
const imgBanda = new Image();
imgBanda.src = urlImagenBanda;
imgBanda.onload = function(){
if (!imageFabricBanda) {
imageFabricBanda = new fabric.Image();
canvas.add(imageFabricBanda);
}
imageFabricBanda.set({
selectable: false,
top: 0,
left: 0,
angle: 0,
padding: 10,
cornersize: 10,
height: 113,
width: 140,
});
imageFabricBanda.setElement(imgBanda);
canvas.renderAll();
}
//ahora la imagen se exporta al clickar el boton de submit, en lugar de generarla cada vez que se cambia el canvas!
//base64Img.setAttribute("value", exportFullres());
//document.write('<img src="'+exportFullres()+'"/>');
canvas.renderAll();
}
</script>
</div>
<div class="pasos paso3">
<h3>Validation</h3>
<ul class="numero-paso">
<li>1</li>
<li>2</li>
<li class="actual">3</li>
</ul>
<div class="box">
<p>Valide ta participation et tente de gagner 10 tirages photos de ton choix, imprimées et livrées directement chez toi!</p>
</div>
<form method="post" action="" onsubmit="muestraVentana(4);return false;">
<div class="wrapper-btn"><input type="submit" value="Valider" class="btn" /></div>
</form>
</div>
<footer>
<ul>
<li><a href="{{ path('reglamento') }}" title="Règlement">Règlement</a></li>
<li> - <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">Politique de confidentialité</a></li>
<li> - <a href="{{ path('contacto') }}" title="Contact">Contact</a></li>
</ul>
</footer>
</div>
<div class="ventana ventana-4 formulario">
<h1><a href="{{ path('program_campaigns') }}" title="">Entrez dans le club</a></h1>
<form id="participation-form" method="POST" action="{{ path('formulario_ok') }}">
<input type="hidden" name="base64Img" id="base64Img" value="" />
<div class="box">
<h2>Dernière étape</h2>
<p>Quelques informations à remplir pour obtenir ta récompense</p>
<label for="nombre">
<span>Prénom *</span>
<input type="text" name="nombre" id="nombre" required />
</label>
<label for="apellidos">
<span>Nom *</span>
<input type="text" name="apellidos" id="apellidos" required />
</label>
<label for="email">
<span>Email *</span>
<input type="email" name="email" id="email" required />
</label>
<label for="confirmemail">
<span>Confirmer Email *</span>
<input type="email" name="confirmemail" id="confirmemail" required />
</label>
<label for="fichero">
<span>Preuve d’achat *</span>
<input type="file" name="fichero" id="fichero" required />
</label>
<label class="recaptcha-wrapper">
<div id="recaptcha_container"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<span></span>
</label>
<label for="check2" class="checkbox">
<input type="checkbox" name="check2" id="check2" required /> <span>J’accepte le <a href="{{ path('reglamento') }}" title="Règlement">règlement</a></span>
</label>
<label for="check1" class="checkbox">
<input type="checkbox" name="check1" id="check1" required /> <span>J’accepte la <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">politique de confidentialité</a></span>
</label>
<label for="check3" class="checkbox">
<input type="checkbox" name="check3" id="check3" /> <span>Je souhaite recevoir de l'information commerciale</span>
</label>
</div>
<div class="wrapper-btn">
<input type="submit" value="Valider" class="btn" onclick="return onSubmit();" />
</div>
</form>
<footer>
<ul>
<li><a href="{{ path('reglamento') }}" title="Règlement">Règlement</a></li>
<li> - <a href="{{ path('confidencialidad') }}" title="Politique de confidentialité">Politique de confidentialité</a></li>
<li> - <a href="{{ path('contacto') }}" title="Contact">Contact</a></li>
</ul>
</footer>
<script>
let recaptched = false;
function onLoadedRecaptcha(response){
if (response){
recaptched = true;
var $recaptcha = $('#g-recaptcha-response');
if ($recaptcha.length > 0) {
$('#hiddenRecaptcha').valid();
$recaptcha.removeAttr('required');
}
onSubmit(false);
}
}
function onLoadRecaptcha(){
grecaptcha.render('recaptcha_container', {
sitekey: '6LeePFwiAAAAAL_hz7XBow_OlyZQ-CXLUtjO8YqA',
hl: '{{ app.request.locale }}',
callback: onLoadedRecaptcha
});
}
function onSubmit(submit = true) {
jQuery.validator.addMethod(
"regex",
function(value, element, regexp) {
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},"Error en expresión regular"
);
$("#participation-form").validate({
errorPlacement: function(error, element) {
error.insertAfter( element.parents("label").find("span") );
},
ignore: ".ignore",
rules: {
nombre : {
required: true
},
apellidos : {
required: true
},
email: {
required: true,
regex: /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}])|(([a-zA-Z\-0–9]+\.)+[a-zA-Z]{2,}))$/
},
confirmemail: {
required: true,
regex: /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}])|(([a-zA-Z\-0–9]+\.)+[a-zA-Z]{2,}))$/,
equalTo : "#email"
},
fichero: {
required: true,
},
check1: {
required: true,
},
check2: {
required: true,
},
hiddenRecaptcha: {
required: function () {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
},
messages : {
nombre: {
required: "Merci de bien vouloir introduire un prénom valide"
},
apellidos: {
required: "Merci de bien vouloir introduire un nom valide"
},
email: {
required: "Merci de bien vouloir introduire une email valide",
regex: "Merci de bien vouloir introduire une email valide"
},
confirmemail: {
required: "Merci de bien vouloir introduire une email valide",
regex: "Merci de bien vouloir introduire une email valide",
equalTo: "Les e-mails ne correspondent pas"
},
fichero: {
required: "Merci de bien vouloir télécharger un fichier valide",
},
check1: {
required: "Vous devez cocher la case",
},
check2: {
required: "Vous devez cocher la case",
},
hiddenRecaptcha: {
required: "Campo de preenchimento obrigatório",
}
},
errorClass: 'inp-error'
});
}
</script>
</div>
<div class="modal modal-aviso" id="modal-aviso-cookies">
<div class="modal-content">
<h2>INFORMATIONS IMPORTANTES SUR LES COOKIES</h2>
<p>Ce site utilise des cookies propres et tiers pour analyser votre navigation, afin de vous fournir un contenu personnalisé et conforme à vos intérêts. Pour un service de navigation optimal, veuillez accepter notre politique de cookies</p>
<p class="acciones">
<a href="#" title="J’accepte" class="close-modal btn" onclick="aceptarCookies();">J’accepte</a>
</p>
</div>
</div>
{% endblock %}
{% block externalsjs %}
<script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script>
{% endblock %}

templates/index.html.twig line 1