Spletni dodatki in Web Components

Dobrodošli v sekciji Spletni dodatki, kjer teorijo spremenimo v praktične in uporabne gradnike. Od interaktivnih kalkulatorjev do naprednih elementov za spletne trgovine – tukaj najdete čisto in optimizirano kodo za vaše naslednje projekte.

PRIMER

                        <!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Pozdravljeni</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="primer-pro">
        <info-kartica 
            naslov="Dobrodošli v svet komponent!" 
            vsebina="To je začetek vaše poti v svet modularnih dodatkov. 
            Tukaj bova zgradila spletno trgovino in še več.">
        </info-kartica>
    </div>
    
    <script src="script.js" defer></script>
</body>
</html>
    
                    

                        if (!customElements.get('info-kartica')) {
    class InfoKartica extends HTMLElement {
        connectedCallback() {
            this.render();
            this.setupEvents();
        }

        static get observedAttributes() {
            return ['naslov', 'vsebina'];
        }

        attributeChangedCallback() {
            this.render();
            this.setupEvents();
        }

        setupEvents() {
            const gumb = this.shadowRoot.querySelector('.komponenta-gumb');
            const okno = this.shadowRoot.querySelector('.modalno-okno');
            const zapri = this.shadowRoot.querySelector('.zapri-gumb');

            if (gumb && okno && zapri) {
                gumb.addEventListener('click', () => {
                    okno.classList.add('prikazi');
                });

                zapri.addEventListener('click', () => {
                    okno.classList.remove('prikazi');
                });
            }
        }

        render() {
            if (!this.shadowRoot) {
                this.attachShadow({ mode: 'open' });
            }
            
            const naslov = this.getAttribute('naslov') || 'Brez naslova';
            const vsebina = this.getAttribute('vsebina') || 'Brez vsebine';
    
            this.shadowRoot.innerHTML = `
                <style>
                    .kartica-container {
                        padding: 20px;
                        border: 2px solid var(--accent, #007bff);
                        border-radius: 10px;
                        background: color-mix(in srgb, var(--fg) 5%, transparent);
                        margin: 10px 0;
                        position: relative;
                    }
                    h3 { color: var(--accent); margin-top: 0; }
                    p { line-height: 1.6; }
                    .badge {
                        display: inline-block;
                        padding: 5px 10px;
                        background: #28a745;
                        color: white;
                        border-radius: 4px;
                        font-size: 0.8em;
                        margin-bottom: 10px;
                    }
                    .komponenta-gumb {
                        display: inline-block;
                        padding: 8px 16px;
                        background: var(--accent, #007bff);
                        color: white;
                        border: none;
                        border-radius: 5px;
                        cursor: pointer;
                        font-weight: bold;
                        transition: background 0.2s;
                    }
                    .komponenta-gumb:hover {
                        filter: brightness(0.9);
                    }

                    .modalno-okno {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.6);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 9999;
                        opacity: 0;
                        pointer-events: none;
                        transition: opacity 0.3s ease;
                    }
                    .modalno-okno.prikazi {
                        opacity: 1;
                        pointer-events: auto;
                    }
                    .okno-vsebina {
                        background: var(--card, #ffffff);
                        color: var(--fg, #1e1e1e);
                        padding: 25px;
                        border-radius: 12px;
                        max-width: 400px;
                        width: 90%;
                        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
                        border: 3px solid #28a745;
                        text-align: center;
                        transform: scale(0.8);
                        transition: transform 0.3s ease;
                    }
                    .modalno-okno.prikazi .okno-vsebina {
                        transform: scale(1);
                    }
                    .zapri-gumb {
                        margin-top: 15px;
                        padding: 8px 20px;
                        background: #28a745;
                        color: white;
                        border: none;
                        border-radius: 5px;
                        cursor: pointer;
                        font-weight: bold;
                    }
                    .zapri-gumb:hover {
                        background: #218838;
                    }
                </style>

                <div class="kartica-container">
                    <span class="badge">WEB COMPONENT</span>
                    <h3>${naslov}</h3>
                    <p>${vsebina}</p>
                    <button class="komponenta-gumb">Preberi več</button>
                </div>

                <div class="modalno-okno">
                    <div class="okno-vsebina">
                        <h3 style="color: #28a745;">Podrobnosti komponente</h3>
                        <p>Uspešno ste odprli modalno okno, ki je v celoti izolirano znotraj spletne komponente!</p>
                        <button class="zapri-gumb">Zapri</button>
                    </div>
                </div>
            `;
        }
    }
    
    // Registracija značke
    customElements.define('info-kartica', InfoKartica);
}
                    

REZULTAT

Spletni dodatki (Web Components)

Vadnica.org

Povezave

Podpora