File: /var/www/vhost/disk-apps/teamdemo.sports-crowd.com/public/flash_ticket_builder/assets/js/script.js
document.addEventListener("alpine:init", () => {
let isResising = false;
window.onblur = function () {
isResising = false;
};
const playground = document.querySelector(".playground");
Alpine.data("tabs", () => ({
activeTab: "editor",
}));
Alpine.data("dragger", () => ({
draged: false,
editorWidth: 30,
previewWidth: 70,
startX: 0,
startEditorWidth: 0,
startPreviewWidth: 0,
startDrag(event) {
this.startX = event.clientX;
this.startEditorWidth = this.editorWidth;
this.startPreviewWidth = this.previewWidth;
isResising = true;
this.draged = false;
},
drag(event) {
if (isResising) {
this.draged = true;
const deltaX = event.clientX - this.startX;
const containerWidth = playground.offsetWidth - 0.3 * 16;
const deltaPercent = (deltaX / containerWidth) * 100;
this.editorWidth = this.startEditorWidth + deltaPercent;
this.previewWidth = this.startPreviewWidth - deltaPercent;
}
},
stopDrag() {
isResising = false;
},
reset() {
if (this.draged) {
return;
}
this.editorWidth = 30;
this.previewWidth = 70;
},
}));
Alpine.data("upload_image", () => ({
imgURL: null,
uploadFile(event, item) {
this.fileToDataUrl(event, (src) => {
this.imgURL = src;
if (item) {
item.imageUrl = src;
item.imageName = event.target.name;
}
});
},
fileToDataUrl(event, callback) {
if (!event.target.files.length) {
return callback(null);
};
const file = event.target.files[0],
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => callback(e.target.result);
},
}));
Alpine.data("accordion", (initAccordion) => ({
activeAccordion: initAccordion ?? null,
toggleAccordion(id) {
this.activeAccordion = this.activeAccordion === id ? null : id;
},
}));
Alpine.data("builder_sections", (initData, backgroundByDefault) => ({
backgroundByDefault: false,
sections: {
header: {
label: "Header",
help_text:
"Se recomienda usar una imágen con una proporción de 1710X90 px para desktop.",
proportion: { w: 1710, h: 90 },
proportionPhone: { w: 300, h: 90 },
visible: true,
settings: {
title: {
label: "Título",
help_text: "Título de la sección",
placeholder: "Título de la sección",
type: "text",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "24",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "100",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "center",
prop: "text-align",
},
],
},
backgroundColor: {
label: "Color de fondo",
help_text: "Color de fondo de la sección",
type: "color",
visible: true,
value: "#e7e7e7",
},
backgroundImage: {
label: "Imagen de fondo de escritorio",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 1710X90 px para desktop.",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
backgroundImagePhone: {
label: "Imagen de fondo de móvil",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 350X90 px para móvil.",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
info: {
label: "Información",
help_text: "Información prolongada de la sección",
placeholder: "Información de la sección",
type: "textarea",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "16",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "700",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "left",
prop: "text-align",
},
],
},
},
},
section1: {
label: "Sección 1",
help_text:
"Se recomienda usar una imágen con una proporción de 1710X540 px para desktop.",
proportion: { w: 1710, h: 540 },
proportionPhone: { w: 350, h: 540 },
visible: true,
settings: {
title: {
label: "Título",
help_text: "Título de la sección",
placeholder: "Título de la sección",
type: "text",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "24",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "100",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "center",
prop: "text-align",
},
],
},
backgroundColor: {
label: "Color de fondo",
help_text: "Color de fondo de la sección",
type: "color",
visible: true,
value: "#dfdfdf",
},
backgroundImage: {
label: "Imagen de fondo de escritorio",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 1710X540 px",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
backgroundImagePhone: {
label: "Imagen de fondo de móvil",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 350X540 px para móvil.",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
info: {
label: "Información",
help_text: "Información prolongada de la sección",
placeholder: "Información de la sección",
type: "textarea",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "16",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "700",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "left",
prop: "text-align",
},
],
},
},
},
section2: {
label: "Sección 2",
help_text:
"Se recomienda usar una imágen con una proporción de 1710X540 px para desktop.",
proportion: { w: 1710, h: 540 },
proportionPhone: { w: 350, h: 540 },
visible: true,
settings: {
title: {
label: "Título",
help_text: "Título de la sección",
placeholder: "Título de la sección",
type: "text",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "24",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "100",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "center",
prop: "text-align",
},
],
},
backgroundColor: {
label: "Color de fondo",
help_text: "Color de fondo de la sección",
type: "color",
visible: true,
value: "#d7d7d7",
},
backgroundImage: {
label: "Imagen de fondo de escritorio",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 1710X540 px para desktop",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
backgroundImagePhone: {
label: "Imagen de fondo de móvil",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 350X540 px para móvil.",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
info: {
label: "Información",
help_text: "Información prolongada de la sección",
placeholder: "Información de la sección",
type: "textarea",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "16",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "700",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "left",
prop: "text-align",
},
],
},
},
},
footer: {
label: "Pie de página",
help_text:
"Se recomienda usar una imágen con una proporción de 1710x300 px para desktop.",
proportion: { w: 1710, h: 300 },
proportionPhone: { w: 350, h: 300 },
visible: true,
settings: {
title: {
label: "Título",
help_text: "Título de la sección",
placeholder: "Título de la sección",
type: "text",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "24",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "100",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "center",
prop: "text-align",
},
],
},
backgroundColor: {
label: "Color de fondo",
help_text: "Color de fondo de la sección",
type: "color",
visible: true,
value: "#e2e2e2",
},
backgroundImage: {
label: "Imagen de fondo de escritorio",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 1710x300 px",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
backgroundImagePhone: {
label: "Imagen de fondo de móvil",
help_text:
"Imagen de fondo de la sección, se recomienda usar una imágen de 350X300 px para móvil.",
type: "image",
visible: true,
value: null,
imageUrl: null,
old: false,
},
info: {
label: "Información",
help_text: "Información prolongada de la sección",
placeholder: "Información de la sección",
type: "textarea",
visible: true,
value: "",
styles: [
{
label: "Color del texto",
type: "color",
value: "#000000",
prop: "color",
},
{
label: "Tamaño del texto",
type: "number",
value: "16",
prop: "font-size",
sufix: "px",
},
{
label: "Grosor del texto",
type: "select",
options: [
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
],
value: "700",
prop: "font-weight",
},
{
label: "Alinear el texto",
type: "select",
options: ["left", "center", "right"],
value: "left",
prop: "text-align",
},
],
},
},
},
},
makrStyles(item, aditionals = {}) {
aditionals = aditionals ?? {};
if (!item || !item.styles || item.styles.length == 0) {
return aditionals;
}
return item.styles.reduce((acc, style) => {
acc[style.prop] = style.value + (style.sufix ?? "");
return acc;
}, aditionals);
},
makeBackgrounds(bgColor, bgImg) {
const bstyles = {};
if (bgColor && bgColor.value && bgColor.visible) {
bstyles["background-color"] = bgColor.value;
}
if (bgImg && bgImg.imageUrl && bgImg.visible) {
bstyles["background-image"] = `url(${bgImg.imageUrl})`;
}
return bstyles;
},
makeBackgroundsVars(prefix,bgColor, bgImg, bgImgPhone, proportion, proportionPhone) {
const bstyles = {};
if (bgColor && bgColor.value && bgColor.visible) {
bstyles[`--${prefix}-bg-color`] = bgColor.value;
}
if (bgImg && bgImg.imageUrl && bgImg.visible) {
bstyles[`--${prefix}-bg-image--desktop`] = `url(${bgImg.imageUrl})`;
}
if (bgImgPhone && bgImgPhone.imageUrl && bgImgPhone.visible) {
bstyles[`--${prefix}-bg-image--mobile`] = `url(${bgImgPhone.imageUrl})`;
}
if (proportion ) {
bstyles[`--${prefix}-proportion--desktop`] = `${proportion.w}/${proportion.h}`;
}
if (proportionPhone && bgImgPhone && bgImgPhone.imageUrl && bgImgPhone.visible ) {
bstyles[`--${prefix}-proportion--mobile`] = `${proportionPhone.w}/${proportionPhone.h}`;
}
return bstyles;
},
saving: false,
savePersonalization() {
this.saving = true;
const token = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
const sectionsCopy = JSON.parse(JSON.stringify(this.sections));
const formData = new FormData();
const files = document.querySelectorAll("input[type=file]");
const filesWithData = [];
for (const file of files) {
if (file.files.length) {
const dataFile = { name: file.name, section: file.dataset.section, setting: file.dataset.setting };
sectionsCopy[file.dataset.section].settings[file.dataset.setting].imageUrl = "";
filesWithData.push(dataFile);
formData.append(file.name, file.files[0]);
}
}
formData.append("sections", JSON.stringify(sectionsCopy));
formData.append("dataFiles", JSON.stringify(filesWithData));
formData.append("backgroundByDefault", this.backgroundByDefault);
fetch('/web_ticketing_experience/create', {
method: 'POST', // or 'PUT'
headers: {
'X-CSRF-TOKEN': token
},
body: formData
})
.then(response => response.json())
.then(data => {
alert("Se ha guardado correctamente");
this.saving = false;
})
.catch((error) => {
console.error('Error:', error);
alert("Ups, algo salio mal");
this.saving = false;
});
},
init () {
let sanitizedData = initData.replace(/\\/g, '\\\\');
let initDataJson = JSON.parse(sanitizedData);
this.backgroundByDefault = backgroundByDefault;
console.log(this.backgroundByDefault, backgroundByDefault);
console.log(initDataJson);
let properties = Object.keys(initDataJson);
properties.forEach(property => {
let internalProperty = Object.keys(this.sections[property].settings);
internalProperty.forEach(setting => {
if (this.sections[property].settings[setting].type == "image") {
const imageUrl = initDataJson[property].settings[setting].imageUrl;
if (!imageUrl) {
return;
}
this.sections[property].settings[setting].imageUrl = imageUrl;
this.sections[property].settings[setting].visible = initDataJson[property].settings[setting].visible;
this.sections[property].settings[setting].old = true;
} else {
this.sections[property].settings[setting].value = initDataJson[property].settings[setting].value;
this.sections[property].settings[setting].styles = initDataJson[property].settings[setting].styles;
}
})
})
}
}));
});