# Javascript
DiviChild 5 introduce la gestione del JS attraverso i moduli ES6.
Tutte le vecchie funzioni sono state riscritte utilizzando appunto i moduli.
Nelle prime release, i vecchi file verranno comunque lasciati anche se di default non verranno caricati e rimane possibile disattivare il caricamento dei moduli e optare per la vecchia versione dei file
Attenzione!
Nella vecchia versione gli script per lo switch dello schema colore non sono disponibili, pertanto, se si sceglie questa modalità, tali script devono essere riportati nei vecchi file.
Questa opzione è sconsigliata!
# Struttura
Di seguito la struttura base della directory js:
├── child-theme.js --> deprecato
├── custom-child-theme.js --> deprecato
├── divi-child--main.js
├── main-child-theme.js --> deprecato
├── modules
│ ├── cookie-handler.js
│ ├── divi-child.js
│ ├── divi-child--color-scheme-switch.js
│ ├── divi-child--cookie-privacy.js
│ ├── divi-child--divi-forms-privacy.js
│ ├── divi-child--sticky-mobile-menu.js
├── libs
│ ├── vari file e directory
# Versione 5
# Come funziona
Il file principale del tema è divi-child--main.js.
Da qui dovrà partire tutto il progetto custom.
Per non rovinare il codice custom dei singoli progetti, questo file non verrà sovrascritto in fase di aggiornamento, ma è importante mantenere (se non si vogliono escludere le funzioni di default), le seguenti righe:
import { DiviChild } from './modules/divi-child.js';
new DiviChild();
In questo file è accessibile l'oggetto di opzioni diviChildOpts
# Moduli di default
Tutti i moduli di default sono contenuti nella cartella modules e hanno tutti il prefisso divi-child__. Il file principale, che contiene la classe principale del tema è divi-child.js. Questi file verranno sicuramente mpìodificati nelle prossime release, pertanto non devono essere né rimossi, né modificati!
# Versione 4
DEPRECATA!
Questa metodologia è deprecata! Questa parte di documentazione è stata lasciata solo per i vecchi progetti basati sulla versione 4.
Nei nuovi progetti, utilizzare la metodologia della versione 5!
# Come funziona
Il file child-theme.js contiene alcune funzioni necessarie al funzionamento delle built-In functions o altre opzioni attivabili o disattivabili dal file di configurazione.
Il file custom-child-theme.js è invece il file dove deve essere scritto il codice custom del progetto.
Il file main-child-theme.js è il risultato dell'accorpamento dei file ottenuto da un apposito task Grunt.
# Funzioni disponibili
formPrivacy()
Serve ad aggiungere l'accettazione della privacy al form di contatto nativo di Divi.
formNewsletterPrivacy()
Serve ad aggiungere l'accettazione della privacy al form di iscrizione alla newsletter nativo di Divi.
cookieBanner() Serve a gestire policy e banner utilizzando il plugin jQuery integrato. Questa funzione viene eseguita soltanto se il relativo parametro nel file di configurazione è attivo.
stickyMobileMenu
Attiva alcune funzioni relative alla feature che permette di integrare la barra menu sticky in momile non offerta dal tema parent Divi. Questa funzione viene eseguita soltanto se il relativo parametro nel file di configurazione è attivo.
# Grunt.js
Come avviene per SCSS, lo script Grunt, grazie a degli appositi task, provvede ad accorpare i file e lanciare il comando watch per eseguire il merge dei file ad ogni modifica dei file js. Se si lavora con i moduli questa feature sarebbe di fatto inutile e anche se continua a essere eseguita in background, non inficia il lavoro in esecuzione nei moduli.