Inizializzazione dei component NON in eventi di load

[fenzad]

Comportamento atteso

I component implementati, se prevedono uno script di load, ossia un "data api implementation" che deve essere eseguito per inizializzare il component sugli elementi HTML, dovrebbero inserire questo script di inizializzazione all'interno di un evento di load. Questo è propedeutico per integrare bootstrap-italia in altri framework javascript come Angular.

Comportamento attuale

In alcuni plugin (come carousel) l'implementazione è corretta, in molti altri come: input-number, input-password,... ecc ecc non è così e l'inizializzazione avviene in-line nel caricamento dell' script.

Possibili soluzioni

Inserire l'inizializzazione del component all'interno dell'evento di load.

[astagi]

Buongiorno @fenzad e grazie della segnalazione.

Chiedo se può risultare conveniente in un contesto come Angular utilizzare l'import dei singoli componenti e la loro istanziazione, ad es. su un progetto Angular recente ho utilizzato proprio questo approccio.

import {InputSearchAutocomplete} from 'bootstrap-italia';

export class MyComponent implements OnInit {
  ngAfterViewInit(): void {
    new InputSearchAutocomplete(document.getElementById("ricerca-regioni"))
  }
}

[fenzad]

Buongiorno @astagi, grazie mille dell'interessamento! Sicuramente la tua può essere una soluzione per quanto riguarda Angular, ma secondo me introduce del codice aggiuntivo che poi dovrebbe essere sincronizzato e mantenuto con i successivi aggiornamenti di bootstrap italia.

Mentre la soluzione che sto confezionando io (e che in qualche modo ero riuscito a far funzionare nella versione <2 di bootstrap-italia) consiste dell'implementazione di:

• Una direttiva "bootstrapItalia" che lancia l'inizializzazione dei componenti ad ogni cambio della route
• Una o più direttive basata sulle css class di bootstrap (esempio form-control) che inizializzano i componenti Questa soluzione mira a non implementare un componente Angular per ogni componente Bootstrap, ma a mantenere una normalissima programmazione html con elementi html e classi bootstrap.

Ad ogni modo, in un caso o nell'altro, l'inizializzazione dei componenti attraverso javascript "inline" dovrebbe essere rimpiazzata (a mio avviso) da una più corretta inizializzazione in un evento di load.

Ad esempio per l'InputNumber vedo che la "data api implementation" prevede più passi di inizializzazione, in una soluzione come da te proposta si dovrebbe trasferire tutta questa porzione di codice nel costruttore del component. Sinceramente non so come sia lo standard per lo sviluppo di component bootstrap, ma a me sembra di vedere che tutti i component del bootstrap originale (https://github.com/twbs/bootstrap/tree/main/js/src) prevedono un EVENT_LOAD_DATA_API.

Attendo un vostro gentile aggiornamento sul caso!

[astagi]

Buongiorno @fenzad e scusa il ritardo nella risposta, sono stati giorni infuocati... in realtà la soluzione che stavo proponendo io è la seguente

1. Importare solo il modulo InputNumber

import { InputNumber } from 'bootstrap-italia'

2. Istanziare il componente

const inputNumber = new InputNumber(document.getElementById('inputNumber3'))

3. Creare il template html per tale input

    <div>
        <label for="inputNumber3" class="input-number-label">Currency</label>
        <span class="input-number input-number-currency">
            <input type="number" id="inputNumber3" name="inputNumber3" step="any" value="3.50" min="0" />
            <button class="input-number-add">
                <span class="visually-hidden">Aumenta valore Euro</span>
            </button>
            <button class="input-number-sub">
                <span class="visually-hidden">Diminuisci valore Euro</span>
            </button>
        </span>
    </div>

Il boilerplate in questo caso non ci serve, nel tuo caso Angular potresti istanziare i componenti direttamente all'interno del tuo componente, con questa modalità anche il bundle finale si riduce.

[fenzad]

Buongiorno @astagi Scusa per il ritardo, ma mi sono riservato un po' di tempo per fare qualche prova di implementazione... La tua soluzione è chiarissima, ma confermi che copre tutti i casi per tutti i vari components? Ad esempio per input-number nella "data api implementation" vedo che ci sono anche ragionamenti cercando "SELECTOR_WRAPPER + ' ' + SELECTOR_BTN"... In ogni caso, a mio parere, mantenere una linea di sviluppo come bootstrap originale che inserisce le "data api implementation" all'interno di un evento di load non sarebbe male.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.