fm-lp-factory/factory/templates/template1/basic/floatingCard.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";


export default (component) => {
    const section = document.createElement('section');
    section.innerHTML = template;
    section.classList.add('fm-floating-card-section-banner');
    css();

    const container = document.querySelector("#fm-landing-page-content");
    const cardsWrapper = section.firstElementChild;

    if (Array.isArray(component.data)) {
        component.data.forEach((item, index) => {
            const cardItem = document.createElement('div');
            cardItem.className = 'fm-card-item';
            cardItem.innerHTML = templateCardItem
                .replaceAll("%image%", item.image)
                .replace("%title%", item.title || "");
            if (index === component.data.length - 1) {
                cardItem.classList.add('fm-card-dark');
            }
            cardsWrapper.append(cardItem);
        });
    } else {
        console.warn("Dados do componente não estão no formato esperado:", component);
        return;
    }

    // ✅ Só mostra o título se active === true
    if (component.active === true && component.title) {
        const titleElement = document.createElement('h2');
        titleElement.textContent = component.title;
        titleElement.style.textAlign = 'center';
        titleElement.style.marginBottom = '20px';
        section.prepend(titleElement);
    }

    container.appendChild(section);
};

const template = /*html*/ `
<div class="fm-card fm-flex-center fm-absolute-card fm-basic-floating-card"></div>
`;

const templateCardItem = /*html*/ `
    <img src="%image%" alt="%image%">
    <p>%title%</p>
`;

const css = () => {
    updateFmTemplateCss(/*css*/
        `
        .fm-absolute-card.fm-basic-floating-card {
            position: relative;
            margin: -40px auto 40px auto;
            width: 70%;
            box-shadow: 0px 3px 14px -3px rgba(0, 0, 0, 0.1);
            border-radius: var(--fm-base-border-radius);
            display: flex;
            flex-direction: row;
            background-color: white;
            justify-content: space-around;
            text-align: center;
        }
        @media screen and (min-width: 900px) {
            .fm-absolute-card.fm-basic-floating-card {
                max-height: 180px;
            }
        }

        @media screen and (max-width: 700px) {
            .fm-absolute-card.fm-basic-floating-card {
                flex-direction: column;
            }
            .fm-absolute-card.fm-basic-floating-card .fm-card-item.fm-card-dark{
                width: 100%;
            }

        }

        .fm-absolute-card.fm-basic-floating-card .fm-card-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: black;
        }

        .fm-absolute-card.fm-basic-floating-card .fm-card-item.fm-card-dark {
            background-color: var(--fm-secondary-color);
        }

        .fm-absolute-card.fm-basic-floating-card .fm-card-item.fm-card-dark{
            height: 203px;
        }

        .fm-absolute-card.fm-basic-floating-card .fm-card-item img {
            width: 60px;
        }
        `
    );
}