# Rimozione di Bootstrap JavaScript

## Motivazione

Bootstrap JavaScript è stato rimosso dal plugin Entourance per evitare **conflitti con i template WordPress** che utilizzano già Bootstrap. Avere due istanze di Bootstrap sulla stessa pagina può causare:

- Conflitti tra versioni diverse
- Comportamenti imprevisti dei componenti
- Duplicazione di eventi e listener
- Aumento del peso della pagina
- Problemi di compatibilità con temi e altri plugin

## Soluzione Implementata

È stata creata una **libreria JavaScript personalizzata** (`entourance-modals.js`) che implementa solo le funzionalità Bootstrap realmente utilizzate dal plugin, con API compatibili.

## File Creati

### 1. `/assets/js/entourance-modals.js`

Implementa le seguenti funzionalità:

#### **Modal**
- Apertura e chiusura modale
- Backdrop con click-to-close
- Chiusura con tasto ESC
- Focus trap per accessibilità
- Eventi personalizzati (`shown.ent.modal`, `hidden.ent.modal`)

#### **Carousel**
- Navigazione tra immagini (prev/next)
- Supporto indicatori cliccabili
- Supporto touch/swipe per mobile
- Supporto tastiera (frecce sinistra/destra)
- Animazioni smooth
- Eventi personalizzati (`slid.ent.carousel`)

### 2. `/assets/css/entourance-modals.css`

Stili CSS necessari per:
- Animazioni modal (fade in/out)
- Backdrop modale
- Transizioni carousel (slide)
- Prevenzione scroll quando modal è aperto
- Ottimizzazioni performance (will-change)

## Funzionalità Bootstrap Non Utilizzate

Le seguenti funzionalità Bootstrap **NON** sono state implementate perché non utilizzate dal plugin:

- Dropdown
- Tooltips
- Popovers
- Collapse
- Toast
- Offcanvas
- Scrollspy
- Button states

## API Pubblica

### Modal

```javascript
// Ottieni l'istanza di un modal
const modalInstance = EntouranceModal.getInstance('#myModal');

// Oppure crea/ottieni l'istanza
const modalInstance = EntouranceModal.getOrCreateInstance('#myModal');

// Mostra il modal
modalInstance.show();

// Nascondi il modal
modalInstance.hide();

// Eventi
const modal = document.getElementById('myModal');
modal.addEventListener('shown.ent.modal', function() {
    console.log('Modal mostrato');
});
modal.addEventListener('hidden.ent.modal', function() {
    console.log('Modal nascosto');
});
```

### Carousel

```javascript
// Ottieni l'istanza di un carousel
const carouselInstance = EntouranceCarousel.getInstance('#myCarousel');

// Naviga alle immagini
carouselInstance.next();     // Prossima immagine
carouselInstance.prev();     // Immagine precedente
carouselInstance.goTo(2);    // Vai all'immagine con indice 2

// Eventi
const carousel = document.getElementById('myCarousel');
carousel.addEventListener('slid.ent.carousel', function(e) {
    console.log('Slide attivo:', e.detail.index);
});
```

## Compatibilità con Template

### Attributi Data Compatibili

Il codice HTML esistente **NON richiede modifiche**. Gli attributi Bootstrap standard continuano a funzionare:

```html
<!-- Modal Trigger -->
<button data-bs-toggle="modal" data-bs-target="#myModal">
    Apri Modal
</button>

<!-- Modal Close -->
<button data-bs-dismiss="modal">Chiudi</button>

<!-- Carousel Controls -->
<button data-bs-slide="prev">Precedente</button>
<button data-bs-slide="next">Successivo</button>
<button data-bs-slide-to="0">Vai a slide 1</button>
```

### Tab Navigation

La navigazione tra tab è già gestita con funzioni custom e **non utilizza Bootstrap JS**, quindi non è stata modificata.

## Modifiche ai File

### `class-entouranceplugin.php`

**Prima:**
```php
wp_enqueue_script( 'entourance-bootstrap', plugins_url( '/assets/js/bootstrap-custom.min.js', __FILE__ ) );
wp_enqueue_script( 'entourance-common', plugins_url( '/assets/js/entourance-common.js', __FILE__ ), array('entourance-bootstrap'), ENTOURANCE_PLUGIN_VERSION, true );
```

**Dopo:**
```php
// Sostituito Bootstrap JS con funzioni custom per evitare conflitti con il template
// wp_enqueue_script( 'entourance-bootstrap', plugins_url( '/assets/js/bootstrap-custom.min.js', __FILE__ ) );
wp_enqueue_script( 'entourance-modals', plugins_url( '/assets/js/entourance-modals.js', __FILE__ ), array(), ENTOURANCE_PLUGIN_VERSION, true );
wp_enqueue_script( 'entourance-common', plugins_url( '/assets/js/entourance-common.js', __FILE__ ), array('entourance-modals'), ENTOURANCE_PLUGIN_VERSION, true );
```

### CSS Aggiunto

```php
wp_enqueue_style( 'entourance-modals', plugins_url( '/assets/css/entourance-modals.css', __FILE__ ), array('entourance-style'), ENTOURANCE_PLUGIN_VERSION );
```

## Test da Effettuare

Dopo l'implementazione, verificare:

### ✅ Modal delle Immagini
1. Aprire una scheda prodotto
2. Cliccare su un'immagine nella galleria
3. Verificare che il modal si apra correttamente
4. Testare navigazione con frecce
5. Testare chiusura con ESC e click su backdrop
6. Testare swipe su mobile

### ✅ Modal dei Prezzi
1. Aprire una scheda prodotto con prezzi multipli
2. Cliccare su "Vedi tutti i prezzi"
3. Verificare che il modal si apra
4. Verificare chiusura con pulsante X

### ✅ Carousel
1. Nel modal immagini, verificare:
   - Pulsanti prev/next funzionanti
   - Indicatori cliccabili funzionanti
   - Animazioni smooth
   - Supporto tastiera (frecce)
   - Supporto touch su mobile

### ✅ Tab Navigation
1. Aprire una lista prodotti con tab (Lista/Mappa/Calendario)
2. Verificare che i tab cambiano correttamente
3. Verificare accessibilità da tastiera

## Vantaggi della Soluzione

### 🚀 Performance
- **Riduzione peso JS**: ~50KB in meno (Bootstrap + Popper.js)
- **Meno conflitti**: Una sola libreria invece di due
- **Caricamento più veloce**: Meno file da scaricare

### 🔧 Manutenibilità
- **Codice custom controllato**: Sappiamo esattamente cosa fa
- **Nessuna dipendenza esterna**: Non serve aggiornare Bootstrap
- **Più facile debug**: Codice leggibile e documentato

### ♿ Accessibilità
- **Focus trap nei modal**: Implementato correttamente
- **Supporto tastiera completo**: Frecce, ESC, Tab, Home, End
- **ARIA attributes**: Gestiti correttamente

### 🎨 Flessibilità
- **Facile personalizzazione**: Il codice è nostro
- **Nessun conflitto con temi**: Non interferisce con Bootstrap del template
- **Eventi personalizzati**: Namespace dedicato (`ent.modal`, `ent.carousel`)

## Compatibilità Browser

La soluzione è compatibile con tutti i browser moderni:

- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Opera 76+
- ✅ Mobile browsers (iOS Safari, Chrome Android)

### Fallback per Browser Vecchi

Per browser molto vecchi (IE11 e precedenti), il codice potrebbe non funzionare. Considerare:
- Aggiungere polyfill per `CustomEvent`
- Usare transpiler (Babel) se necessario

## Risoluzione Problemi

### Il modal non si apre

**Verifica:**
1. Console browser per errori JavaScript
2. Che `entourance-modals.js` sia caricato
3. Che l'attributo `data-bs-target` punti all'ID corretto del modal

### Il carousel non scorre

**Verifica:**
1. Che ci sia almeno un elemento con classe `active` tra i `.carousel-item`
2. Che i pulsanti abbiano gli attributi corretti (`data-bs-slide="prev"` / `"next"`)
3. Console browser per errori

### Conflitti con Bootstrap del tema

**Non dovrebbero** esserci conflitti perché:
- Gli eventi usano namespace dedicato (`ent.modal`, non `bs.modal`)
- Le classi CSS sono standard Bootstrap (già presenti nel tema)
- Non c'è conflitto tra listener di eventi

Se ci sono problemi:
1. Verificare che Bootstrap del tema non venga caricato due volte
2. Controllare che non ci siano override CSS che interferiscono
3. Verificare che `entourance-modals.js` sia caricato **dopo** jQuery (se usato)

## File da NON Eliminare

Anche se Bootstrap JS non viene più caricato, **NON eliminare** questi file:

- `/assets/js/bootstrap-custom.min.js` - Potrebbero esserci installazioni in cache
- `/lib/popper/` - Directory Popper.js (non fa male tenerla)

Possono essere rimossi in una futura versione major dopo aver verificato che tutti i siti siano stati aggiornati.

## Migration da Bootstrap JS

Se hai personalizzazioni che usano Bootstrap JS, ecco come migrare:

### Bootstrap Modal → Entourance Modal

```javascript
// Prima (Bootstrap)
var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

// Dopo (Entourance)
var myModal = EntouranceModal.getOrCreateInstance('#myModal');
myModal.show();
```

### Bootstrap Carousel → Entourance Carousel

```javascript
// Prima (Bootstrap)
var myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'));
myCarousel.next();

// Dopo (Entourance)
var myCarousel = EntouranceCarousel.getOrCreateInstance('#myCarousel');
myCarousel.next();
```

### Eventi

```javascript
// Prima (Bootstrap)
document.getElementById('myModal').addEventListener('shown.bs.modal', handler);

// Dopo (Entourance)
document.getElementById('myModal').addEventListener('shown.ent.modal', handler);
```

## Supporto e Contatti

Per problemi o domande relative a questa modifica, contattare il team di sviluppo Entourance.

## Changelog

- **3 Novembre 2025**: Implementazione iniziale
  - Creato `entourance-modals.js`
  - Creato `entourance-modals.css`
  - Rimosso caricamento di `bootstrap-custom.min.js`
  - Aggiornate le dipendenze degli script

## Data di Implementazione

3 Novembre 2025