Content als Lightbox - Modalbox mit TYPO3

Content als Lightbox oder vielmehr wie man statt einer ganzen Seite nur ein bestimmtes Inhaltselement über eine Modalbox ausgibt.

Dieser Post ist eine Ergänzung zu http://typo3-4-newbies.blogspot.de/2014/03/content-als-lightbox-modalbox-mit-typo3.html und soll als Antwort auf die Frage einer Lesering gelten.

Um ein bestimmtes Inhaltselement in TYPO3 zu verlinken, klickt man einfach im Seitenbaum bei der Link-Auswahl auf den kleinen roten Pfeil rechts neben dem Seitennamen. Dann erhält man eine Liste aller Inhaltselemente der Seite. Klickt man auf eines, so baut TYPO3 automatisch einen Anker (mit '#' + Content id, z.B. c123) hinter die URL. Dadurch würde die Seite, ohne Modalbox, direkt zum Inhalt springen.


Anpassungen

Grundlegend sind die bisherigen Skripte der oben genannten Seite (die Werte sind jedoch leicht angepasst, da es so in meinen Augen besser nachvollziehbar ist). Nachfolgend soll ein neues JavaScript und ein angepasstes TypoScript vorgestellt werden.

Fangen wir mit dem JS an:

(function(window, document, $) {

	"use strict"
	
	// Wir starten mit einem normalen Click-Event auf die Klasse open-in-lightbox
	$('a.open-in-lightbox').on('click', function(event) {

		event.preventDefault();

		// erstmal alle bisherigen Modalboxes entfernen
		$('#modal').remove();

		var uri = [];
			
		// aus dem Link-Attribut die benötigten Daten auslesen
		// hierbei wird ein Array erzeugt und zwar mit den Werten vor und nach dem '#'
		// dadurch kann man sehr einfach bestimmte Zustände ansprechen
		uri = $(this).attr('href').split('#');

		// Damit nur ein bestimmtes Inhaltselement ausgegeben wird, schauen wir, ob es einen Teil nach dem Anker gibt
		if (uri[1]) {
			
			// Da TYPO3 die eigentliche ID mit einem String-Präfix versieht (z.B. ein c für content)
			// entfernen wir alle Strings und lassen nur die Zahl übrig, von der wir wissen, 
			// dass es sich um die gesuchte Content-Id handelt
			var cid = uri[1].replace(/[a-z]/gi, '');

			$.get(uri[0], {cid: cid, type: 123}, function(data, status) {
				appendToBody(data, status);
			});

			return true;

		}

		// Und sollte es keine Referenz auf ein Content-Element geben, geben wir einfach die gesamte Seite aus
		$.get(uri[0], {type: 123}, function(data, status) {
			appendToBody(data, status);
		});


	});

	// Damit wir die Modalbox nicht jedesmal neu bauen, schreiben wir uns noch eine kleine Helper-Funktion
	function appendToBody(data, status) {

		if (status !== 'success') {
			throw Error('Error getting the content');
		}
		
		$('<div>', {
			id: 'modal',
			css: {
				position: 'absolute',
				zIndex: 99,
				top: '125px',
				left: '50%',
				width: '50%',
				marginTop: -125/2,
				marginLeft: '-25%',
				padding: 25,
				background: 'white',
				boxShadow: '0 0 40px rgba(0,0,0,0.5)',
				borderRadius: 10
			}
		}).html(data).appendTo('body');		
	}

})(window, document, jQuery);

Anschließend folgt noch eine kleine Anpassung des TypoScripts:

modal = PAGE
modal {
  // der Seiten-Typ: s.o. {type: 123}
  // dieser Wert kann natürlich nach belieben angepasst werden, muss jedoch eine Zahl sein
  typeNum = 123
  
  // die ergebnisseite sollte nicht gecacht werden, da wir sonst bei einem erneuten Request den gleichen Inhalt bekämen
  config {
    no_cache = 1
    disableAllHeaderCode = 1
    disablePrefixComment = 1
  }
  
  10 < styles.content.get
  10 {
    select {
    
      // die im JS voregegeben cid entspricht der Content-ID
      andWhere.data = GP:cid
      // Übergabe absichern und nur Ganzzahlen zulassen
      // danke für den Hinweis Peter Linzenkirchner
      andWhere.intval = 1
      
      // und damit der stdWrap (andWhere) nur ausgeführt wird, wenn wir auch wirklich eine Content-ID abfragen
      // bauen wir eine kleine Überprüfung ein
      andWhere.if.isTrue.data = GP:cid
      
      // zu guter Letzt wird der stdWrap (andWhere) zusammengebaut
      andWhere.wrap = uid=|
    
    }
  }
}


Fazit:

Nur durch eine kleine Anpassung des JS und TS erreichen wir eine weitgehende Flexibilität bei der Erstellung von Modalboxen. So könnte man eine Seite mit Standard Modal-Inhalten erstellen, auf die man dann entsprechend referenzieren kann.


Resourcen:

Den Code findet ihr auch unter https://gist.github.com/ahoffmeyer/c53a8145166e6421dfd6