Ho fatto un widget =)

Ok, ma questo javascript modifica il DOM della pagina che sto visualizzando. Quindi va a cercare delle immagini che si trovano nel mio assets =(.

Potrei risolvere il problema mettendo il percorso relativamente all’estensione: /protected/extensions/lyyightbox/images/immagine.jpg ma mi sembra poco elegante =(.

LightBox (lo script originale) scrive questo:




    // Code inserts html at the bottom of the page that looks similar to this:

        //

        //  <div id="overlay"></div>

        //  <div id="lightbox">

        //      <div id="outerImageContainer">

        //          <div id="imageContainer">

        //              <img id="lightboxImage">

        //              <div style="" id="hoverNav">

        //                  <a href="#" id="prevLink"></a>

        //                  <a href="#" id="nextLink"></a>

        //              </div>

        //              <div id="loading">

        //                  <a href="#" id="loadingLink">

        //                      <img src="images/loading.gif">

        //                  </a>

        //              </div>

        //          </div>

        //      </div>

        //      <div id="imageDataContainer">

        //          <div id="imageData">

        //              <div id="imageDetails">

        //                  <span id="caption"></span>

        //                  <span id="numberDisplay"></span>

        //              </div>

        //              <div id="bottomNav">

        //                  <a href="#" id="bottomNavClose">

        //                      <img src="images/close.gif">

        //                  </a>

        //              </div>

        //          </div>

        //      </div>

        //  </div>



Non devo fare in modo che si generi una cosa come questa?




    // Code inserts html at the bottom of the page that looks similar to this:

        //

        //  <div id="overlay"></div>

        //  <div id="lightbox">

        //      <div id="outerImageContainer">

        //          <div id="imageContainer">

        //              <img id="lightboxImage">

        //              <div style="" id="hoverNav">

        //                  <a href="#" id="prevLink"></a>

        //                  <a href="#" id="nextLink"></a>

        //              </div>

        //              <div id="loading">

        //                  <a href="#" id="loadingLink">

        //                      <img src="assets/lyiightbox/images/loading.gif">

        //                  </a>

        //              </div>

        //          </div>

        //      </div>

        //      <div id="imageDataContainer">

        //          <div id="imageData">

        //              <div id="imageDetails">

        //                  <span id="caption"></span>

        //                  <span id="numberDisplay"></span>

        //              </div>

        //              <div id="bottomNav">

        //                  <a href="#" id="bottomNavClose">

        //                      <img src="assets/lyiightbox/images/close.gif">

        //                  </a>

        //              </div>

        //          </div>

        //      </div>

        //  </div>



L’alternativa, è modificare LightBox, inserire una classe, e fare tutto nel CSS.

Ho proprio guardato nel source del lightbox.js

il codice per aggiungere l’IMG e questo


Builder.node('img', {src: LightboxOptions.fileLoadingImage})

e se cerci fileLoadingImage… troverai:


LightboxOptions = Object.extend({

	fileLoadingImage:    	'../../images/lyiightbox2images/loading.gif',

	fileBottomNavCloseImage: '../../images/lyiightbox2images/closelabel.gif',

...

edit: pensavo di metter qui il path relativo… pero non funzionerebbe… la versione CSS sarebbe migliore

Ok, ma quel codice, verrà scritto nell’HTML. Non posso fare come per il Css.

Anche questa pagina utilizza lightbox. Ed anche in questa pagina si fa riferimento ad una cartella presente in questo sito, non in un assets.

Ce l’ho fatta!!!

Questa è la classe PHP: in posizione POS_HEAD sistemo una variabile javascript con il percorso del mio asset.


    private function loadAllJsScript() {

        $this->populateJsarrayScripts();


        Yii::app()->getClientScript()

                ->registerScript('_', 'assetUrl = "' . (Yii::app()->getAssetManager()->publish($this->assetsFolder)) . '";', CClientScript::POS_HEAD);


        foreach ($this->scripts as $filename)

            Yii::app()->getClientScript()

                    ->registerScriptFile($this->baseUrl . $filename, CClientScript::POS_END);

    }

Ed il mio file lightbox.js legge al suo interno questa variabile.




    fileLoadingImage:        assetUrl + '/lyiightbox2images/loading.gif',

    fileBottomNavCloseImage: assetUrl + '/lyiightbox2images/closelabel.gif',

Così posso utilizzare le immagini presenti nell’asset e non c’è più bisogno di costringere nessuno a copiare la cartella delle immagini. Ti piace?

Cool… bella idea… mi piace ;)

Ha i suoi pro ed i suoi contro.

PRO: risolve il problema

CONTRO:

sporca il codice

Ci sono diversi modi in cui renderei questo tipo di soluzioni migliore:

Per esempio, quando registro uno script dovrei poter assegnare un id allo script: <script id="mioscript" src="script.js?pippo=pluto"></script>

Questo mi permetterebbe di raggiungere lo script così: http://feather.elektrum.org/book/src.html

Eviterei anche di dover aggiungere del codice "sparso".

La mia soluzione funziona, ma che cosa succede se viene usata da un altro widget simile? E’ un caso raro, ma se entrambi dovessero usare la stessa variabile? Per convenzione, potrei dare a questa variabile il nome del widget. Insomma, sarebbe interessante arricchire Yii di strumenti per fare quello che ho fatto in modo standard. Che ne pensi?

I’ve right now write a wiki page:

Send assets folder path to a javascript of a widget

Yii e perfetto a tutti perche e semplice ed ha il minimo necessario… Per questo in Yii ci vano soltanto cose che si usano per la magior parte… questo problema non e cosi frequente… perquesto non ha posto nel “core”… e si puo solvere in diversi modi… il piu elegante e questo che hai fatto da te ;)

il problema con javascript he ce non he cosi facile mandare parametri ad un js file ho meglio detto… non he cosi facile ad ottenere i parametri e i valori dei stessi quando si mandano ad un script come "esempio1.js?xx=123"…

Il miglior modo da mandare un valore da PHP a JS e tramitte il riciamo di un methodo o una funzione… come




jsfunction(<?php echo $assetsPath; ?>);



Io cerco sempre di ottenere questa seconda versione… pero per fare questo non si possono usare tanti JS plugins senza modificarli…