File Manager in TinyMce per Contao 3.0

L'upgrade che tratto in questo articolo e già presente nella versione 3.1 di Contao, ma non è disponibile per la versione precedente (che io continuo a usare tuttora).
I motivi che mi hanno spinto a non fare l'upgrade dell'intero CMS, e fare piuttosto questo porting della funzionalità, sono due:

La versione 3.1 è ancora prematura secondo mio giudizio, molte estensioni interessanti non sono aggiornate, e per i miei utilizzi preferisco rimanere ancora alla 3.0.6.
La funzione del file manager è troppo utile, mi sono sempre lamentato di quel select caotico nel TinyMCE

Per mettersi all'opera servono le due versioni: Contao 3.0.6 (che presumo sia la versione installata per il vostro sito) e il pacchetto Contao 3.1 (dove sono presenti alcuni file da prelevare).

I file che hanno modificato tra le due versioni sono i seguenti (a leggere il change log):

assets/contao/js/core-uncompressed.js
assets/contao/js/core.js
assets/mootools/simplemodal/1.2/css/simplemodal-uncompressed.css
assets/mootools/simplemodal/1.2/css/simplemodal.css
assets/tinymce/plugins/typolinks/editor_plugin_src.js
assets/tinymce/plugins/typolinks/typobox.htm
assets/tinymce/plugins/typolinks/typolinks.php
assets/tinymce/plugins/typolinks/js/typolinks_src.js
system/config/tinyMCE.php
system/config/tinyNews.php

Però è da considerare che hanno cambiato anche molto altro in Contao oltre alle modifiche descritte in quel log. Mi sono subito accorto che non basta sostituire i file per far funzionare il TinyMCE a dovere. Ho quindi analizzato la situazione ed ho risolto con una via di mezzo: ho lasciato la versione vecchia per l'inserimento link (cioè link a pagine interne ed a file), mentre per l'inserimento immagini ho inserito la funzione nuova. Il risultato non mi sembra male.

Potete fare la modifica in soli 4 step (a fine articolo allego anche uno zip con i file):

Lasciare la cartella assets/tinymce/plugins/typolinks originale di Contao 3.0.6 e sostituire solo il file typobox.htm
Sostituire i 2 file tinyMCE.php e tinyNews.php in system/config
Sostituire i 2 file css in assets/mootools/simplemodal/1.2/css
Modificare il file core.js di Contao 3.0.6 come spiego di seguito, non è una sostituzione con il file della 3.1

File Core.js

Ho eliminato (potete tralasciarlo) il file core-uncompressed.js in quanto non viene utilizzato da Contao. Ho preso il file compresso core.js e l'ho riportato in forma leggibile, sfruttando la funzione di auto indentazione di Aptana Studio.
A questo punto bisogna fare modifiche che non sconvolgano troppo il codice: non posso cambiare la struttura del file manager, e nemmeno le varie parti del file core.js, perché sono cose usate in vari punti del CMS ed è meglio tenerle nella forma più vicina possibile al funzionamento della 3.0.6, la modifica che racconto in questo articolo non è troppo invasiva e si integra quasi naturalmente.

L'idea mi è venuta ispezionando la finestra modale che elenca i file, possiamo osservare come sono innestati nel DOM, qui di seguito c'è l'html di un elemento foto, ho tolto per chiarezza gli attributi insignificanti:

<div class="tl_listing_container tree_view" id="tl_listing">
	<ul class="tl_listing tree_view" id="singleSRC">
		<li style="" class="tl_file">
			<div class="tl_left">
				<img src="system/themes/default/images/iconTIF.gif">
				<label title="files/theme/albero.png" for="singleSRC_410">albero.png</label>
				<span class="tl_gray">(130.0 KiB, 570x570 px)</span>
				<br>
				<img src="assets/images/c/albero-71cfb85c.png">
			</div>
			<div class="tl_right">
				<input name="singleSRC" id="singleSRC_410" class="tl_tree_radio" value="410" onfocus="Backend.getScrollOffset()" type="radio">
			</div>
			<div style="clear:both"></div>
		</li>
	</ul>
</div>

Quindi, è chiaro che in 3.1 viene prelevato il value del campo input radio name="singleSRC" che ha valore "410" nell'esempio, sarebbe l'id dell'immagine salvata in database. Dobbiamo cambiare questa scelta affinché si selezioni invece l'attributo title del label corrispondente, cioè for="singleSRC_410" che ha valore "files/theme/albero.png". Il TinyMCE di Contao 3.0.6 vuole infatti il percorso completo del file. La funzinone che controlla il callback dalla finestra modale al TinyMCE è "fileBrowser" e si trova dentro a core.js.

Apro quindi il file core.js per fare un po' di manipolazione al DOM, dopo averlo riportato in forma leggibile, cerco alla fine il pezzo seguente:

var TinyCallback = {
	getScrollOffset : function(e) {
		tinymce.dom.Event.add(tinymce.isGecko ? e.getDoc() : e.getWin(), "focus", function() {
			Backend.getScrollOffset()
		})
	}
};

Lo sostituisco con il pezzo seguente, è ripreso dal file della versione 3.1, però ha alcune parti modificate da me.

var TinyCallback = {
	getScrollOffset : function(e) {
		tinymce.dom.Event.add(tinymce.isGecko ? e.getDoc() : e.getWin(), "focus", function() {
			Backend.getScrollOffset()
		})
	},
	fileBrowser : function(e, t, n, r) {
		var i = new SimpleModal({
			width : 765,
			btn_ok : Contao.lang.close,
			draggable : !1,
			overlayOpacity : .5,
			onShow : function() {
				document.body.setStyle("overflow", "hidden")
			},
			onHide : function() {
				document.body.setStyle("overflow", "auto")
			}
		});
		i.addButton(Contao.lang.close, "btn", function() {
			this.hide()
		}), i.addButton(Contao.lang.apply, "btn primary", function() {
			var t = window.frames, i, s, o;
			for (var u = 0; u < t.length; u++)
				if (t[u].name == "simple-modal-iframe") {
					i = t[u];
					break
				}
			if (i === null) {
				alert("Could not find the SimpleModal frame");
				return
			}
			/* --- 3.1 now MODIFIED by ZOD to work with Contao 3.0 --- */
			// in tiny n = image for images, n = file for links
			// in tiny e = src for images, e = href for links
			// in tiny iframe link is contao/file.php?table=tl_content&field=singleSRC
			var a = i.document.getElementById('tl_listing').getElementsByTagName('input');
			var zid;
			for (var u=0; u<a.length; u++) {
				if (a[u].checked && !a[u].id.match(/^reset_/)) {
					//s = a[u].get("value");
					zid = a[u].getAttribute("id");
				}
			}
			
			var zla = i.document.getElementById('tl_listing').getElementsByTagName('label');
			for (var u = 0; u < zla.length; u++){
				if(zla[u].htmlFor == zid ){
					// matched!
					s = zla[u].getAttribute("title");
					break;
				}
			}
			/* --- end ZOD --- */	
			if (n == "page")
				r.document.forms[0].elements[e].value = "", r.document.forms[0].elements.linktitle && (r.document.forms[0].elements.linktitle.value = "");
			else {
				r.document.forms[0].elements[e].value = s, r.document.forms[0].elements.linktitle && (r.document.forms[0].elements.linktitle.value = "");
				if ( o = r.document.getElementById("prev")) {
					var f = new URI(s);
					o.innerHTML = '<img id="previewImg" src="' + f.toAbsolute() + '" onload="ImageDialog.updateImageData(this)" border="0">'
				}
			}
			this.hide()
		}), i.show({
			title : r.document.title,
			contents : '<iframe src="contao/' + (n == "page" ? "page.php" : "file.php") + "?table=tl_content&field=singleSRC&value=" + (n == "page" ? t.replace("", "") : t) + '" name="simple-modal-iframe" width="100%" height="' + (window.getSize().y - 180).toInt() + '" frameborder="0"></iframe>',
			model : "modal"
		})
	}
};

In pratica la parte delimitata dai miei commenti ha sostituito questo pezzo:

var a=i.document.getElementById("tl_listing").getElementsByTagName("input");for(var u=0;u<a.length;u++)if(a[u].checked&&!a[u].id.match(/^reset_/)){s=a[u].get("value");break}

Ora bisogna andare in amministrazione di Contao, e sotto Sistema -> Manutenzione accendere l'opzione: Ripulisci la cache degli script (assets/js e assets/css). Pulire la cache.
Da ora in poi l'inserimento immagine degli editor TinyMCE sarà dotata di File Manager. La prima volta potrebbe sembrare che il bottone non funzioni, fate un aggiornamento della pagina (in Firefox basta fare così), oppure se non è sufficiente, pulite la cache del browser.

Così si conclude questo articolo, forse questa patch è solo una soluzione temporanea, fino a quando la Contao 3.1 sarà ben supportata dalla community. Però intanto questi mesi posso fare dei lavori con la 3.0.6. Per chi volesse fare come me, allego i file che ho specificato nei 4 step, con il mio core.js elaborato ed un txt di istruzioni.