Nova Translatable

Nova Translatable

Ho creato un package per gestire le traduzioni, basate su astrotomic/laravel-translatable, in Laravel Nova. E comprende anche un editor HTML WYSIWYG: CKEditor.

Questo articolo è stato scritto molto tempo fa. Potrebbe essere stato superato dalla tecnologia.

In questi giorni ho lavorato alla creazione di un custom field per Laravel Nova che potesse gestire, tra le altre cose, un editor WYSIWYG legato ad un campo tradotto su model con astrotomic/laravel-translatable.

Perchè non usare un pacchetto già esistente?

Bella domanda. Sfortunatamente il progetto per il quale dovevo gestire un campo HTML in Nova è un progetto legacy, con le traduzioni basate su di un package non molto diffuso fra la community di Nova: astrotomic/laravel-translatable (migrato in precedenza da dimsav/laravel-translatable). In aggiunta, sembra che la necessità di usare un editor WYSIWYG non sia molto condivisa. E quindi che fare?

Per prima cosa ho provato un po’ di package già esistenti ma, per un motivo o per un altro, non soddisfavano le mie necessità e quindi ho adottato il vecchio adagio: chi fa da sè, fa per tre. E, visto che dalla comunità open source attingo a piene mani tutti i giorni, il minimo che potessi fare era condividerlo pubblicamente sotto licenza MIT, sperando di ricevere contributi di ottimizzazione del codice e di nuove funzionalità ma soprattutto che torni utile a qualcun’altro. E quindi ecco a voi rslanzi/nova-translatable.

Qual era la necessità?

Grazie ad astrotomic/laravel-translatable, le traduzioni nel progetto vengono salvate su una tabella aggiuntiva (model_translations) e collegata al model tramite una chiave univoca formata da model_id e locale.
I campi di default di Nova gestiscono le relazioni in maniera diversa, ovvero con risorse separate mentre io volevo che si potessero gestire le traduzioni direttamente nella risorsa “padre”.

Cosa fa quindi il package rslanzi/nova-translatable?

Laravel Nova Translatable - Schermata di esempio
Il package permette quindi di gestire le traduzioni, passando da una lingua ad un’altra tramite un link. Sia in formato riga singola che come textarea.
Vediamo il codice:

NovaTranslatable::make('Title')->singleLine()

NovaTranslatable::make('Metadescription')->hideFromIndex()

Come puoi vedere, permette di gestire anche le opzioni standard di Nova, come il metodo hideFromIndex().

Già che c’ero, ho aggiunto un componente (counted) per calcolare i caratteri digitati. In aggiunta si può inserire una soglia limite (che fa diventare rosso il counter se superato) ed una soglia di prossimità al limite che lo fa diventare arancione.

Ecco il codice:

NovaTranslatable::make('Title')
    ->hideFromIndex()
    ->singleLine()
    ->counted()
    ->maxChars(60)
    ->warningAt(55),

Ma non era questa la necessità primaria. Mi serviva un editor WYSIWYG per i campi in HTML. Ed ecco che, tramite CKEditor ora possiamo gestire anche questa tipologia di dato.

Laravel Nova Translatable - Editor HTML

E questo è il codice che ce lo permette:

NovaTranslatable::make('Text')
    ->ckeditor()
    ->hideFromIndex(),

Nel mio progetto poi, avevo altri campi particolari da gestire nelle traduzioni. Come lo slug:

Laravel Nova Translatable - Gestione slug

Ed ecco il codice:

NovaTranslatable::make('Title')
    ->hideFromIndex()
    ->counted()
    ->maxChars(60)
    ->warningAt(55)
    ->sluggable(),

NovaTranslatableSlug::make('Slug')
    ->hideFromIndex(),

Altro campo particolare, riguarda i dati json salvati nelle traduzioni. Laravel Nova prevede il campo Code che ho modificato per gestire i valori delle traduzioni:

Laravel Nova Translatable - Campi JSON

NovaTranslatable::make('Sections')->json()

Oltre ai campi json, permette di gestire anche altri diversi tipi di “codice”: dockerfile, javascript, markdown, nginx, php, ruby, sass, shell, vue, xml e yaml.

Laravel Nova Translatable - Campi di codice

Ecco il codice:

NovaTranslatable::make('Sections')
    ->code()
    ->language('yaml')

Ecco, questi i miei 2 cents alla comunità di Laravel Nova. Se hai un progetto e/o vuoi contribuire, sei il benvenuto.
Nelle prossime release vorrei fare un po’ di refactoring del codice, dopo aver realizzato una test suite degna di questo nome. La versione (secondo lo schema SemVer) infatti è ancora la 0, quindi usatelo pure ma con un po’ di accortezza.
Per maggiori informazioni, ti rimando al README del package.

Ultima modifica: domenica 19 febbraio 2023

Ancora nessun commento presente

Che ne dici di essere il primo?

Aggiungi il tuo commento

Iscriviti alla mia newsletter

Resterai informato sugli ultimi post, appena verranno pubblicati