Scripte und/oder CSS in den Seitenheader einfügen in MODx

von Thomas Jakobi am Dienstag, 18. Dezember 2007 um 15:52 Uhr.

Manchmal ist es sinnvoll nur auf einzelnen Seiten ein Javascript oder CSS-Code vor dem Ende des <head>-Abschnittes bzw. des <body>-Abschnittes einzufügen. Dies lässt sich ohne das Bearbeiten des Seitentemplates mit folgendem kleinen Snippet erreichen.

Das Snippet benutzt die MODX API Funktionen regClientStartupScript, regClientScript und regClientCSS um die Javascripte und CSS-Anweisungen an den entsprechenden Stellen der ausgegebenen Seite einzubauen.

Das Snippet erwartet den Parameter &addcode. Dieser enthält entweder den Namen eines Chunks (in diesem steht das JavaScript bzw. das CSS umgeben von einem script- bzw. style-Tag) oder den Pfad auf eine externe Javascript- bzw. CSS-Datei. Mehrere Chunk-/Pfadangaben können per Semikolon voneinander abgetrennt werden. Ein Teil-Chunk kann wiederum auf einen Chunk verweisen (rekursiv). Weiterhin kann ein Javascript mit der Angabe '|end' auch am Ende der Seite vor dem schließenden Body-Tag eingefügt werden und einem style-Tag ein Media-Attribut z.B. per '|print' mitgegeben werden.

Beispiele

Direkter Aufruf:

AddHeaderfiles.example1
Speichern
[!AddHeaderfiles? &addcode=`/manager/media/script/mootools/mootools.js;/assets/js/slimbox.js|end;/assets/css/slimbox.css;/assets/css/test.css|print`!]

erzeugt:

AddHeaderfiles.result1
Speichern
<script type="text/javascript"
src="/manager/media/script/mootools/mootools.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/slimbox.css" media="screen, tv, projection" />
<link rel="stylesheet" type="text/css" href="/assets/css/test.css" media="print" />
</head>
...
<script type="text/javascript" src="/assets/js/slimbox.js"></script>
</body>

Chunk Aufruf:

Zunächst wird folgender Chunk im Backend angelegt

headerSlimbox.chunk
Speichern
/manager/media/script/mootools/mootools.js;/assets/js/slimbox.js|end;/assets/css/slimbox.css;/assets/css/test.css|print

und im Snippet aufgerufen

AddHeaderfiles.example2
Speichern
[!AddHeaderfiles? &addcode=`headerSlimbox`!]

Der Snippetcode von Version 0.4 folgt hier. Bugfixes und Bugtracking gibt es auf github.

AddHeaderfiles.snippet.php
Speichern
<?php
/*
 * AddHeaderfiles
 * Adds CSS or JS in a document (at the end of the head or the end of the body)
 * License GPL
 * Based upon: http://www.partout.info/css_modx.html
 * Version 0.4 (27. July 2011)
 * Authors: Jako and Mithrandir
 * See http://www.modxcms.de/forum/comments.php?DiscussionID=926&page=1#Item_4
 * and following posts for details
 *
 * Parameters:
 * &addcode - name(s) of external file(s) or chunkname(s) separated by semicolon
              these external files can have a position setting or media type 
              separated by pipe
 * &sep -     separator for files/chunknames
 * &sepmed -  seperator for media type or script position
 */
 
// Options - change default media for css here:
$mediadefault = 'screen, tv, projection';
 
// Check Parameters and set them to default values
$sep = (isset($sep)) ? $sep : ';';
$sepmed = (isset($sepmed)) ? $sepmed : '|';
$addcode = (isset($addcode)) ? $addcode : '';
 
if (!function_exists('AddHeaderfiles')) {
    function AddHeaderfiles($addcode, $sep, $sepmed, $mediadefault)
    {
        global $modx;
 
        if ((strpos(strtolower($addcode), '<script') !== false) || (strpos(strtolower($addcode), '<style') !== false)) {
            return $addcode;
        } else {
            $parts = explode($sep, $addcode);
        }
        foreach ($parts as $part) {
            $part = explode($sepmed, $part, 2);
            if ($chunk = $modx->getChunk($part[0])) {
                // part of the parameterchain is a chunkname
                $part[0] = AddHeaderfiles($chunk, $sep, $sepmed, $mediadefault);
                if (strpos(strtolower($part[0]), '<style') !== false) {
                    $modx->regClientCSS($part[0]);
                } else {
                    if ($part[1] != 'end') {
                        $modx->regClientStartupScript($part[0]);
                    } else {
                        $modx->regClientScript($part[0]);
                    }
                }
            } else {
                // otherwhise it is treated as a filename
                if (substr($part[0], -4) == '.css') {
                    $modx->regClientCSS($part[0], (isset($part[1]) ? $part[1] : $mediadefault));
                } else {
                    if ($part[1] != 'end') {
                        $modx->regClientStartupScript($part[0]);
                    } else {
                        $modx->regClientScript($part[0]);
                    }
                }
            }
        }
    }
}
 
if ($addcode != '') {
    $addcode = AddHeaderfiles($addcode, $sep, $sepmed, $mediadefault);
    if (strpos(strtolower($addcode), '<style') !== false) {
        $modx->regClientCSS($addcode);
    } else {
        $modx->regClientStartupScript($addcode);
    }
}
return '';