Inline-Javascript und -CSS in Typo3-Extensions

Um eine möglichst strikte Trennung von Layout und Applikationslogik zu erreichen, wie ich es von der Arbeit mit Webframeworks wie Django gewöhnt bin, folge ich beim Entwickeln von Typo3-Extensions vom Typ Frontend-Plugin stets diesem Paradigma: alles HTML-Markup, das zu der Extension gehört, soweit wie möglich und sinnvoll im Typoscript-Setup der Extension als Typoscript-Objekte anzulegen. Sind diesem Markup nun noch weitere Daten hinzuzufügen — beispielsweise solche, die Ergebnis aufwendiger Berechnungen sind —, bietet es sich an, die Typoscript-Objekte im PHP-Code des Frontend-Plugins zu manipulieren oder zu ergänzen.

Nun tauchte die Frage auf, wie im PHP-Code des Frontend-Plugins eigentlich Inline-Javascript und -CSS erzeugt werden kann. Das heißt, wie kann Typo3 dazu veranlaßt werden, temporäre Dateien anzulegen, die Javascript- oder CSS-Code enthalten, und diese dann schön sauber im Header der Seite einzubinden? In Typoscript gibt es zwar page.CSS_inlineStyle, aber das nützt hier nichts, weil das page-Objekt im PHP-Code nicht verändert werden kann. Außerdem hat Typoscript für Javascript nichts adäquates.

Dann stellt Typo3 die halbwegs dokumentierten PHP-Methoden $GLOBALS['TSFE']->setCSS und $GLOBALS['TSFE']->setJS für die Verwendung in PHP zur Verfügung, siehe z.B. hier. Aber leider schreiben diese beiden den Javascript- oder CSS-Code direkt in den Header, ohne temporäre Dateien anzulegen und diese dann einzubinden. Also auch keine elegante Lösung.

Ein wenig Herumsuchen im Code des Typo3-Core findet aber rasch die richtigen Methoden, die hinter page.CSS_inlineStyle stehen:

$ cd typo3/sysext/cms/tslib
$ find . -exec grep "inline" '{}' /dev/null \; -print
./class.tslib_pagegen.php: $style.=trim($GLOBALS['TSFE']->pSetup['CSS_inlineStyle']).chr(10);
./class.tslib_pagegen.php: if ($GLOBALS['TSFE']->config['config']['inlineStyle2TempFile'])    {
./class.tslib_pagegen.php: $GLOBALS['TSFE']->content.=TSpagegen::inline2TempFile($style, 'css');
./class.tslib_pagegen.php: $GLOBALS['TSFE']->content.= TSpagegen::inline2TempFile($_scriptCode, 'js');

Alles klar, die statische Methode TSpagegen::inline2TempFile ist also unser Freund. Um nun die temporären Dateien in einer einzelnen Zeile PHP-Code erstellen und im Header einbinden zu lassen, wird auch noch $GLOBALS['TSFE']->additionalHeaderData gebraucht. Im Frontend-Plugin, d.h. in der Datei mit einem Namen ähnlich wie z.B. class.tx_meineextension_pi2.php, wird das ganze dann folgendermaßen angewendet:

function main($content, $conf) {
    // ...
    $javascript = 'alert(\'Hallo Javascript\');';
    $GLOBALS['TSFE']->additionalHeaderData[$this->extKey] = TSpagegen::inline2TempFile($javascript, 'js');
    $css = 'body {background-color: blue;}';
    $GLOBALS['TSFE']->additionalHeaderData[$this->extKey] = TSpagegen::inline2TempFile($css, 'css');
}

Und voilá, im Header der Seite steht der ersehnte Inline-Code:

<script type="text/javascript" src="typo3temp/javascript_69a7e892e0.js"></script>
<script type="text/css" src="typo3temp/css_7d70e89168.css"></script>
Add post to: Delicious Reddit Slashdot Digg Technorati Google
(already: 14) Comment post

Comments

No comments for this post

Required. 30 chars of fewer.

Required.

captcha image Please, enter symbols, which you see on the image