Memorizzazione tema e risoluzione dei relativi "bug"

[nettechslydev]

Salve a tutti!

Avrei due domande da porvi per questo codice, che, posizionato in una dropdown, contiene diversi temi per personalizzare l'esperienza utente.

                    <div id="myDropdown" class="dropdown-content">
                        <p class="little-resize pointer" onclick="past()">Past</p>
                        <script>
                            function past() {
                                var element = document.body;
                                element.classList.toggle("past-theme");
                            }
                        </script>
                        <p class="little-resize pointer" onclick="blank()">Blank</p>
                        <script>
                            function blank() {
                                var element = document.body;
                                element.classList.toggle("blank-theme");
                            }
                        </script>
                        <p class="little-resize pointer" onclick="apricot()">Apricot</p>
                        <script>
                            function apricot() {
                                var element = document.body;
                                element.classList.toggle("apricot-theme");
                            }
                        </script>
                        <p class="little-resize pointer" onclick="panorama()">Panorama</p>
                        <script>
                            function panorama() {
                                var element = document.body;
                                element.classList.toggle("panorama-theme");
                            }
                        </script>
                        <p class="little-resize pointer" onclick="transparent()">Transparent</p>
                        <script>
                            function transparent() {
                                var element = document.body;
                                element.classList.toggle("transparent-theme");
                            }
                        </script>
                        <p class="little-resize pointer" onclick="slimanoworld()">SlimanoWorld</p>
                        <script>
                            function slimanoworld() {
                                var element = document.body;
                                element.classList.toggle("slimanoworld-theme");
                            }
                        </script>
                    </div>

Mi sorgono due domande:
1) E' possibile memorizzare le preferenze di un determinato tema durante la navigazione delle diverse pagine del sito?
2) Supponiamo che al primo click si clicca il tema "Apricot" senza disattivarla cliccandola una seconda volta, supponiamo poi che ci sia un secondo click su "SlimanoWorld", così facendo il tema non cambia per "SlimanoWorld" fino a disattivare la "Apricot": dunque come posso fare per risolvere questo problema?

Grazie in anticipo della risposta
NewTechSlyDev_

[KillerWorm]

Ciao e bentrovato, a prescindere da ciò che chiedi, perdona la franchezza, vedo un codice alquanto "artigianale". Sebbene ciò che hai postato siano poche righe, 3/4 di queste sono di codice ridondante. Questo tipo di sviluppo a me confonde parecchio; personalmente andrei ad ottimizzarlo.

- Non ha molto senso suddividere lo script in millemila tag separati. Metti un unico tag <script> alla fine di quel blocco html e scrivi lì dentro tutto lo script.

- In modo simile, avere millemila funzioni che fondamentalmente fanno la stessa operazione è un anti-pattern. Crea un'unica funzione tipo scegliTema(), passale un parametro relativo al tema scelto, quindi usa questo per applicare la classe al tuo body in modo "dinamico".

- Infine, meglio mantenere separata l'azione dalla struttura. Per una migliore impostazione nella programmazione, è preferibile evitare (dove possibile) l'uso di eventi applicati direttamente sui tag html (vedi i tuoi onclick); meglio creare un ciclo via JavaScript è usare il metodo addEventListener() o similari. Il valore da passare alla funzione potresti definirlo come "data-" nei tag, elementi del dropdown.


Per rispondere alle tue domande:

1) Suppongo sia possibile ma bisogna capire meglio cosa intendi per "memorizzare".

E' possibile memorizzare un valore in un oggetto localStorage, per cui puoi recuperarlo nelle altre pagine del sito (a patto che siano nello stesso "dominio"). Questa memorizzazione resta a livello del client (quindi del browser); il sistema funziona fintanto che l'utente naviga o rientra su tale sito sempre con lo stesso browser.

Se invece vuoi memorizzare il dato in modo da poterlo recuperare ovunque, cioè anche quando l'utente naviga il sito dal suo smartphone piuttosto che dal tablet o dal pc, con diversi browser, allora la storia diventa un po' più complessa. Dovresti avere un sistema di accesso per gli utenti registrati, quindi memorizzare il dato lato server in un database.

Chiarisci questo punto.

2) Dovresti rimuovere la classe precedentememte applicata, prima di applicare quella nuova. Puoi risolvere in vari modi; ad esempio, quando applichi la classe, potresti memorizzare il suo nome in un attributo "data-" che vai ad applicare al body. Successivamente, nella funzione scegliTema, recuperi quel valore e rimuovi la classe relativa a tale nome.

Inoltre, forse più che usare il toggle sulla classe, potrebbe essere meglio inserire una voce cliccabile, tra quelle presenti, per impostare il tema di default (rimuovendo quindi qualsiasi classe theme dal body).

Qui la minestra pronta (senza il punto 1 che dovresti chiarire):

<div id="myDropdown" class="dropdown-content">
    <p class="little-resize pointer" data-tema="" >[ Default ]</p>
    <p class="little-resize pointer" data-tema="past" >Past</p>
    <p class="little-resize pointer" data-tema="blank" >Blank</p>
    <p class="little-resize pointer" data-tema="apricot" >Apricot</p>
    <p class="little-resize pointer" data-tema="panorama" >Panorama</p>
    <p class="little-resize pointer" data-tema="transparent" >Transparent</p>
    <p class="little-resize pointer" data-tema="slimanoworld" >SlimanoWorld</p>
</div>
<script>
    function scegliTema(tema) {
        const body = document.body;
        if (body.dataset.tema) body.classList.remove(body.dataset.tema);
        body.dataset.tema = tema;
        if (tema) body.classList.add(tema);
    }
    (()=>{
        const elementi = document.querySelectorAll('#myDropdown > p');
        for (let i = 0; i < elementi.length; ++i) {
            const el = elementi[i];
            const nomeTema = el.dataset.tema ? el.dataset.tema+'-theme' : '';
            elementi[i].addEventListener('click', function(){scegliTema(nomeTema)});
        }
    })();
</script>

Non sono stato lì a commentare il codice ma se hai domande chiedi pure.

[nettechslydev]

Buongiorno,

comprendo il fatto che il mio codice sia confusionario, il fatto è che io con JS non ho molta esperienza, sto solo iniziando e chiedo ad ogni modo scusa se vi ha stancato il mio codice.
Ad ogni modo nel punto 1 intendo per entrambi gli ambiti se possibile: ho già pronta una tabella 'iscritti'.

Grazie in anticipo della risposta
NewTechSlyDev_

[KillerWorm]

chiedo ad ogni modo scusa se vi ha stancato il mio codice

Figurati, non era questo il punto
Gran parte degli utenti di questo forum non sono che principianti; per cui, il mio intento è solo quello di dare dei consigli (spero utili) anche su come impostare meglio il tutto, a prescindere dall'oggetto della richiesta.

nel punto 1 intendo per entrambi gli ambiti se possibile

Sì, è possibile ma quale pensi sia il vantaggio di avere due sistemi che fondamentalmente fanno la stessa cosa?

Secondo te potrebbero coesistere senza creare conflitti tra loro?

Dovresti organizzarli in modo che un metodo abbia priorità sull'altro perché, alla fine, entrambi devono applicare una classe precedentemente memorizzata (o in locale o sul server) e questa, in determinati casi, potrebbe anche non coincidere tra i due metodi. Capisci quale sia il problema?

Il localStorage agisce memorizzando e recuperando il dato (nome della classe) in locale; va da sé che questo sistema funziona anche se momentaneamente l'utente naviga senza essere connesso; in tal caso però non potrà ovviamente avvenire la memorizzazione sul server, dove sarà quindi mantenuto l'ultimo dato che era stato memorizzato in precedenza, finché l'utente era connesso.

Avresti quindi una discrepanza tra i due dati. Nel momento in cui l'utente torna a navigare connesso, e ad esempio apre una nuova pagina del sito, quale classe deve essere applicata al body? Quella locale o quella recuperata dal server?

Forse sarebbe meglio quella locale; ma sarebbe un problema se lo stesso utente utilizzasse diversi browser/dispositivi, perché potrebbe aver impostato, e quindi trovare, un diverso tema accedendo da browser piuttosto che da un altro.
Forse quella dal server; ma allora memorizzarla in locale non avrebbe senso.

A mio parere se il sito funziona con l'accesso di utenti registrati, dovresti memorizzare i dati sul server e qualora si stia navigando disconnessi dovresti avvertire l'utente che per certe funzionalità è necessario essere connessi; o semplicemente impedirne la navigazione.

A meno che il sito non sia accessibile anche da utenti non registrati (ospiti), per cui avrebbe senso avere il sistema di memorizzazione sul server per gli utenti registrati e quello locale per gli utenti ospiti. Ma i due sistemi dovrebbero funzionare in modo distinto l'uno dall'altro.

In qualunque caso per memorizzare il dato puoi inserire opportuno script all'interno della funzione scegliTema().
A grandi linee, se devi memorizzarlo in locale puoi usare localStorage come già accennato, mentre se devi memorizzarlo sul server puoi effettuare una chiamata AJAX ad un tuo file lato server che si occuperà di registrarlo nel database.

[nettechslydev]

Ah, in questo caso allora meglio è la locale, così va bene per chi è registrato e per chi non.
Sapresti offrirmi parte del codice per fare ciò per favore?

Grazie in anticipo della risposta
NewTechSlyDev_

[KillerWorm]

Parte del codice te l'ho già fornita come base su cui lavorare. Magari fai tu stesso qualche prova e se trovi difficoltà se ne può discutere.

Vedi la documentazione che ho linkato per il localStorage, trovi i metodi per scrivere e leggere i dati.

Nella funzione scegliTema puoi quindi usare localStorage per scrivere il dato.

Imposta poi un listener per gestire l'evento di caricamento della pagina dove recuperare il dato.
Vedi documentazione che ho linkato per addEventListener() e magari usa l'evento DOMContentLoaded

Fai sapere

[nettechslydev]

Buonasera,

ho provato svariate volte ad adattare un codice della localStorage da cui stavo prendendo spunto ai temi in mio possesso. Ahimè nervoso eliminai quello che avevo fatto. Chiedo un aiuto da parte vostra per favore in modo che riusciate ad adattarlo. Il codice da cui stavo prendendo spunto in allegato.

var themeSwitch = document.getElementById('themeSwitch');if(themeSwitch) {
  initTheme(); // on page load, if user has already selected a specific theme -> apply it


  themeSwitch.addEventListener('change', function(event){
    resetTheme(); // update color theme
  });


  function initTheme() {
    var darkThemeSelected = (localStorage.getItem('themeSwitch') !== null && localStorage.getItem('themeSwitch') === 'dark');
    // update checkbox
    themeSwitch.checked = darkThemeSelected;
    // update body data-theme attribute
    darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme');
  };


  function resetTheme() {
    if(themeSwitch.checked) { // dark theme has been selected
      document.body.setAttribute('data-theme', 'dark');
      localStorage.setItem('themeSwitch', 'dark'); // save theme selection 
    } else {
      document.body.removeAttribute('data-theme');
      localStorage.removeItem('themeSwitch'); // reset theme selection 
    } 
  };
}

So di chiedere troppo, ma faccio fatica a comprendere quello che avevo sbagliato.

Grazie in anticipo della risposta
NewTechSlyDev_