Spritely: correzioni ed aggiustamenti

NOTA BENE: In Drupal 8 non è più possibile caricare librerie esterne con drupal_add_library(), drupal_add_css() and drupal_add_js(), per cui questo articolo realizzato in Drupal 7 non è più funzionante.

L'ho presentato come una risorsa interessante per il design del layout del proprio sito, ne ho mostrato un esempio pratico, funzionante nonostante un mio errore nel template della pagina del tema e con questo articolo, concludo la rassegna con un ulteriore metodo di inserimento ed il tentativo fallito di farlo funzionare in Drupal tramite modulo.

Dopo la pubblicazione di Spritely: esempio pratico in 4 passaggi ero convinto di aver sbagliato la tecnica di inserimento dell'animazione, perché in Drupal questa procedura (quasi accettabile in HTML) diventa molto laboriosa e richiede diversi approfondimenti. Quindi quando vedevo sullo schermo il testo finale dell'articolo, riproposto una seconda volta pensavo che fosse dovuto a spritely. In realtà ho scoperto che lo stesso tipo di errore si presentava anche in presenza delle pagine con i commenti e così ho dovuto indagarne l'origine.

Non è stato difficile, perché compariva in fondo alla pagina la scritta "Mio codice -->", un richiamo ad alcune pezze di codice che avevo mal commentato e lasciato nel template della pagina del mio tema (page.tpl.php). Nel caso specifico era la parte che istruisce Drupal a visualizzare la frase di benvenuto in prima pagina se non ci sono articoli in content. Una volta ripulito il file il problema è scomparso e l'animazione va che è un piacere.

Secondo metodo di inserimento

Ho provato lo stesso a cercare di implementare quanto descritto in HOWTO: Add a jQuery effect, ma il risultato finale presenta due inconvenienti:

1. la prima volta che si carica l'articolo compare questo simpatico avvertimento sotto il menu principale:
   
2. il blocco dei commenti perde la mascherina dell'editor WYSIWYG.
   

   commento standard	commento alterato

Questo è l'esempio con il relativo codice:

php drupal_add_js('http://rainnic.altervista.org/misc/jquery.js'); php drupal_add_js('http://rainnic.altervista.org/sites/all/themes/rainnic/js/jquery.spritely-0.6.js'); drupal_add_js ( '$(document).ready(function(){ $("#rainnic").sprite({fps: 1, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0}); }); ', 'inline');

<style type="text/css">
        #stage_rainnic {
            top: 0px;
            left: 0px;
        }
        .stage_rainnic {
            position: relative;
            top: 0px;
            left: 0px;
            width: 400px;
            min-width: 100px;
            height: 200px;
            overflow: hidden;
        }
        #rainnic {
            position: relative;
            top: 0px;
            left: 0px;                     
            
			width: 100px;
			height: 125px;
			
            background: transparent url(http://rainnic.altervista.org/sites/default/files/images/logo_spritely.png) 0 0 no-repeat;
        }
</style>

<?php drupal_add_js('http://rainnic.altervista.org/misc/jquery.js'); ?>
<?php drupal_add_js('http://rainnic.altervista.org/sites/all/themes/rainnic/js/jquery.spritely-0.6.js'); ?>

<?php
 drupal_add_js (
    '$(document).ready(function(){
     $("#rainnic").sprite({fps: 1, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0});
    }); ',
    'inline');
?>

<div align="center">
	<div id="stage_rainnic" class="stage_rainnic">
		<div id="rainnic" class="stage_rainnic"></div>
	</div>
</div>

Molto simile all'originale salvo per l'uso di codice PHP per il caricamento delle librerie e degli effetti javascript.

Spritely caricato come modulo

Tra i molteplici tentativi ho anche provato a caricare l'omonimo modulo per Drupal (ancora in fase di sviluppo e scaricabile da qui). Dopo aver copiato il file jquery.spritely-0.6.js in “sites/all/libraries/spritely/” rinominandolo in jquery.spritely.js pensavo di poter procedere con il mio metodo classico, ma ero fuori rotta! L'unico modo di adoperare spritely tramite modulo è quello di definire le istanze dalla pagina "admin/structure":

Ho fatto molti tentativi, come il seguente:

Ma non funziona un tubo! Ho anche editato il sorgente della pagina, ma del caricamento del plugin spritely non c'è alcun riferimento.

 

---

Conclusioni

Il plugin caricato manualmente funziona egregiamente (caso B dell'articolo Spezza la monotonia con spritely!) e pur presentando qualche forzatura l'esempio pratico presentato nell'omonimo articolo non da problemi e può essere facilmente integrato con gli esempi presenti nella documentazione del progetto. Ben vengano ulteriori commenti ed aggiornamenti!