Hello, I’m trying to make the background change when the card is expanded, this works only for the first card, apparently in the other cards it doesn’t detect the event of opening/closing the card.
here is the code:
<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar" style="background-color: #2f2e5c;">
<div class="navbar-inner" style="background-color: #2f2e5c;">
<div class="left text-color-white" style="padding-right: 10px;">
<a href="#" class="link back text-color-white" style="padding-left: 5px;">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content" style="background: rgb(154,199,43);
background: linear-gradient(0deg, rgba(154,199,43,1) 0%, rgba(38,95,42,1) 42%, rgba(47,46,92,1) 75%);">
${loading ? $h`
<div class="card card-expandable elevation-0 skeleton-effect-wave" style="background: rgb(154,199,43);
background: linear-gradient(0deg, rgba(154,199,43,1) 0%, rgba(38,95,42,1) 42%, rgba(47,46,92,1) 75%);"
data-card="0">
<div class="card-content">
<div
style="height: 300px; background-image: url(); background-position-x: center; background-repeat: no-repeat;">
<a href="#" class="link card-close card-opened-fade-in color-white"
style="position: absolute; right: 15px; top: 80px">
<i class="icon f7-icons">xmark_circle_fill</i>
</a>
</div>
<div class="card-content-padding text-color-white">
<p>Nombre</p>
<p>Descripcion</p>
</div>
</div>
</div>
` : $h`
${datos.map((item, i) => $h`
<div class="card card-expandable elevation-0 card-${datos[i].id}" style="background: transparent;"
data-card="card-${datos[i].id}" >
<div class="card-content">
<div
style="height: 300px; background-image: url(${datos[i].img}); background-position-x: center; background-repeat: no-repeat; background-size: 350px;"
class="lazy-fade-in">
<a href="#" class="link card-close card-opened-fade-in color-black"
style="position: absolute; right: 15px; top: 15px">
<i class="icon f7-icons text-color-white" style="padding-top: 25px;" >xmark_circle_fill</i>
</a>
</div>
<div class="card-content-padding text-color-white" style="background-color: linear-gradient(0deg, rgba(154,199,43,1) 0%, rgba(38,95,42,1) 42%, rgba(47,46,92,1) 75%);">
<p class="text-color-white" style="font-weight: bold;">${datos[i].nombre}</p>
<p>${datos[i].cargo}</p>
<p>${datos[i].empresa}</p>
<div class="block accordion-list custom-accordion" style="padding-top: 10px;">
<div class="accordion-item">
<div class="accordion-item-toggle">
<i class="icon icon-plus">+</i>
<i class="icon icon-minus">-</i>
<span>PONENCIA</span>
</div>
<div class="accordion-item-content">
<p>
${datos[i].ponencia || "Pendiente de asignar"}
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle">
<i class="icon icon-plus">+</i>
<i class="icon icon-minus">-</i>
<span>CV</span>
</div>
<div class="accordion-item-content">
<p>
Cv
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle">
<i class="icon icon-plus">+</i>
<i class="icon icon-minus">-</i>
<span>REDES SOCIALES</span>
</div>
<div class="accordion-item-content">
${datos[i].facebook && $h`
<div class="row">
<div class="col">
<a href="${datos[i].facebook}" class="link external text-color-white" target="_blank">
<i class="icon f7-icons">logo_facebook</i>
<span> ${datos[i].empresa} </span>
</a>
</div>
</div>
`}
${datos[i].web && $h`
<div class="row" style="padding-top: 20px;">
<div class="col">
<a href="${datos[i].web}" class="link external text-color-white" target="_blank">
<i class="icon f7-icons">logo_google</i>
<span> ${datos[i].empresa} </span>
</a>
</div>
</div>
`}
</div>
</div>
</div>
</div>
</div>
</div>
`)}
`}
</div>
</div>
</template>
<script>
export default function (props, { $f7, $on, $, $onMounted, $update }) {
let datos = []
let loading = false;
$on("pageAfterIn", () => {
$(".card").on( "card:open", function (e) {
$('.navbar').hide()
let id = `.${e.target.dataset.card}`
console.log("se abrio: " + id);
$(id).css({background: "linear-gradient(0deg, rgba(154,199,43,1) 0%, rgba(38,95,42,1) 42%, rgba(47,46,92,1) 75%)"})
})
$(".card").on("card:closed", function (e, prevent) {
let id = `.${e.target.dataset.card}`
console.log("se cerro: " + id);
$('.navbar').show()
$(id).css({background: "transparent"})
})
})
$on("pageInit", (e, page) => {
loading = true;
$update()
// Opciones de la petición (valores por defecto)
const options = {
method: "GET"
};
// Petición HTTP
fetch("https://killerbees.henet.mx/api/conferencistas2.php", options)
.then(response => response.json())
.then(data => {
/** Procesar los datos **/
let { items } = data
items.forEach((conferencista, i) => {
datos.push({ id: conferencista.id, img: conferencista.img, nombre: conferencista.nombre, cargo: conferencista.cargo, empresa: conferencista.empresa, fecha: conferencista.fecha, hora: conferencista.hora, sala: conferencista.sala, redes: conferencista.redes, ponencia: conferencista.ponencia, cv: conferencista.cv, facebook: conferencista.facebook, web: conferencista.web })
});
loading = false
$update()
}).catch((e)=>{
console.log(e);
})
})
return $render;
}
</script>