Syllotips Iframe Component

Una web component in Stencil.js che incorpora il sito Syllotips in un iframe sicuro e personalizzabile.

🚀 Caratteristiche

• Sicura: Utilizza l'attributo sandbox per limitare le capacità dell'iframe
• Responsive: Si adatta automaticamente alle dimensioni del contenitore
• Accessibile: Include attributi per l'accessibilità
• Personalizzabile: Permette di modificare dimensioni, URL e titolo
• Moderno: Stili CSS per un aspetto professionale

📦 Installazione

# Clona il repository
git clone <repository-url>
cd eolo-component

# Installa le dipendenze
npm install

# Avvia il server di sviluppo
npm start

🛠️ Comandi disponibili

# Sviluppo
npm start          # Avvia il server di sviluppo
npm run build      # Build per produzione
npm test           # Esegue i test
npm run test.watch # Esegue i test in modalità watch

📖 Utilizzo

Utilizzo base

<syllotips-iframe></syllotips-iframe>

Con dimensioni personalizzate

<syllotips-iframe width="800px" height="400px"></syllotips-iframe>

Con titolo personalizzato

<syllotips-iframe iframe-title="Applicazione Syllotips"></syllotips-iframe>

Con URL personalizzato

<syllotips-iframe url="https://example.com"></syllotips-iframe>

🔧 Proprietà

| Proprietà | Attributo | Descrizione | Tipo | Default | |-----------|-----------|-------------|------|---------| | height | height | Altezza dell'iframe | string | '600px' | | iframeTitle | iframe-title | Titolo dell'iframe per accessibilità | string | 'Syllotips Application' | | sandbox | sandbox | Attributi sandbox per l'iframe | string | 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox' | | url | url | URL del sito da caricare nell'iframe | string | 'https://syllotips-production.firebaseapp.com/#/sybil' | | width | width | Larghezza dell'iframe | string | '100%' |

🔒 Sicurezza

La component utilizza l'attributo sandbox per limitare le capacità dell'iframe, permettendo solo:

• Esecuzione di script
• Accesso alla stessa origine
• Invio di form
• Apertura di popup
• Escape dei popup dalla sandbox

Questo garantisce un livello di sicurezza appropriato per l'incorporamento di contenuti esterni.

🧪 Test

# Esegue tutti i test
npm test

# Test unitari
npm run test.spec

# Test end-to-end
npm run test.e2e

📁 Struttura del progetto

src/
├── components/
│   └── syllotips-iframe/
│       ├── syllotips-iframe.tsx      # Component principale
│       ├── syllotips-iframe.css      # Stili
│       ├── syllotips-iframe.spec.ts  # Test unitari
│       ├── syllotips-iframe.e2e.ts   # Test e2e
│       └── readme.md                 # Documentazione component
├── index.html                        # Pagina di test
└── components.d.ts                   # Definizioni TypeScript

🌐 Test della component

1. Avvia il server di sviluppo: npm start
2. Apri il browser su http://localhost:3333
3. Oppure apri il file test-example.html per una demo completa

📝 Note

• La component è compatibile con tutti i browser moderni
• Utilizza Shadow DOM per l'isolamento degli stili
• Supporta il lazy loading degli iframe
• Include gestione degli errori di rete

🤝 Contributi

1. Fork del repository
2. Crea un branch per la feature (git checkout -b feature/amazing-feature)
3. Commit delle modifiche (git commit -m 'Add amazing feature')
4. Push al branch (git push origin feature/amazing-feature)
5. Apri una Pull Request

📄 Licenza

Questo progetto è distribuito sotto la licenza MIT. Vedi il file LICENSE per maggiori informazioni.