Sulla base di quanto detto nel precedente capitolo, l’implementazione del componente Scrollspy in Passweb dovrebbe essere estremamente semplice, nel senso che sarebbe sufficiente applicare l’attributo data-uk-scrollspy al componente interessato utilizzando l’apposito campo presente nella maschera di configurazione del componente stesso

In realtà procedendo in questo modo diventerebbe poi difficile gestire il sito all’interno del Live Editing di Passweb.

Il Componente cui viene applicato lo Scrollspy infatti, inizialmente non è visibile e le classi che attivano l’animazione che porta poi alla sua visualizzazione vengono applicate via javascript allo scroll della pagina.

Il problema in questo senso è che, come noto, il codice javascript di terze parti non viene eseguito lato Wizard per cui mentre sul front end del sito tutto funzionerebbe correttamente, all’interno del Live Editing il Componente cui è stato applicato lo Scrollspy non sarebbe più visibile e non avremmo quindi modo di gestirlo “normalmente”.

Per poter gestire al meglio il proprio sito Passweb utilizzando gli strumenti tradizionali offerti dal Live Editing e non rinunciare comunque all’utilizzo dello Scrollspy la soluzione potrebbe allora essere quella di assegnare agli elementi interessati l’attributo data-uk-scrollspy, con le diverse opzioni di configurazione, via javascript e quindi solo sul front end del sito.

Per poter far questo dovremo quindi:

• Assegnare ai Componenti cui dovrà essere applicato lo Scrollspy una classe personalizzata (es. .scrollspy) sfruttando l’apposito campo presente nella maschera di configurazione del Componente stesso.

• Inserire nel layout di pagina o meglio ancora in quello di Variante il seguente codice javascript:

$(document).ready(function() {

$('.scrollspy').attr("data-uk-scrollspy","{cls:'uk-animation-fade'}");

});

Queste semplici istruzioni non fanno altro che individuare, una volta caricata la pagina, tutti gli elementi di classe .scrollspy, e assegnargli l’attributo aggiuntivo data-uk-scrollspy="{cls:'uk-animation-fade'}" attivando, di fatto, lo scrollspy con le opzioni indicate.