Typo3 und Joomla, Schuster bleib bei deinen Leisten


Aufgeklapptes und geschlossenes Menu mit Foldout script

Die Besonderheit des Skriptes von Peter Klein besteht darin, dass das Menu/Script sich merkt , welche Navigationspunkte aufgeklappt sind und diese offen hält. Für eine normale gut strukturierte Seite ist diese Eigenschaft in der Regel überflüssig. Im vorliegenden Fall handelte es sich um eine Art Handbuch - und da bringt die Information über die bereits gelesenen Teile einen Informationsgewinn und erleichtert die Handhabung.

An dem Skript als solchen hat mir nicht so ganz gefallen, das die Icons vor den Links an sich ausgetauscht wurden. Ich fand es eleganter, einen span einzufügen und die Icons mittels wechselnder CSS - Klasse auszutauschen. Eine dahingehende Anpassung war leicht realisierbar.
Komplizierter war dann die richtige Formatierung mittles Typoscript. Nach einiger Zeit hat es dann alledings geklappt. Komfortabel war der Weg zu dieser Lösung jedoch ganz bestimmt nicht..

Nachdem ich fertig war, hat mich allerdings der Gedanke nicht losgelassen, das gleiche spaßeshalber einmal in Joomla zu intergrieren.
Dazu hatte ich nicht vor, das mod_mainmenu zu hacken, und ich wollte auch kein eigens Modul schreiben, aus diesem Grunde musste ich meine Änderungen in tmpl /default.php vornehmen und entsprechend in mein Template ausgliedern .

templates/beez/html/mod_mainmenu /default.php

Das Joomlamenu wird mit Hilfe der XML- Klasse simplexml konstruiert. Diese Klasse bietet wenige , aber dafür effektive Methoden, Menustrukturen aufzubauen. In meinen Falle war es nötig vor jeden Link, der Kindelemente hat, folgenden Code einzufügen, um das Script von Peter Klein anzusprechen:

Dabei ist MyID eine eindeutig Variable, die aus der ID des entsprechenden Menupunktes kommt.Das Joomlamenu an sich gibt jedem Listenelment (li), das Kindelemente hat, die Klasse "parent".Dies ermöglicht ein einfaches Auffinden der jeweiligen Elternelmente.

$node->attributes('class') liefert den Klassnamen des aktuellen Elements - damit kann ich dann relativ einfach die aktuelle Klasse abfragen:

if ($node->attributes('class')=='parent')

und entsprechend handeln.

Da das Listenelment jedoch mehr als eine Klasse aufweisen kann, musste ich die einzelnen Elemente erst einmal von einander trennen:

$teile = explode(" ", $node->attributes('class'));

Parent ist immer das erste Ergebnis von $teile , da die parent- Klasse immer vor den anderen erscheint und somit konnte ich folgenden Code verwenden:

if( $teile[0] =='parent')

{ füge meine Code hinzu }

Mittels $node->addChild () kann ich nun dem aktuellen Node Kindelemente und mit $node->->addAttribute auch Atribute wie class, id, oder ein href hinzufügen. Zum Einfügen eines Strings steht die Funktion setData() zu Verfügung.

$teile = explode(" ", $node->attributes('class'));

if( $teile[0] =='parent')

Das ganze sieht dann folgendermaßen aus:"
{

$node->addAttribute('id', 'current');
$x2=$node->addChild('a');
$x2->addAttribute('onmousedown','foldoutMenu.foldMenu(\'foldoutMenu-'.$id.'\');return false');
$x2->addAttribute('href','javascript:;');
$x2->addAttribute('class','icon');
$newChild =& array_pop($node->_children);
$x1=$newChild->addChild('span');
$x1->addAttribute('class','zu');
$x1->addAttribute('id','foldoutMenu-'.$id.'-0');
$x1->setData(' ');

……….

Soweit so gut. Nun stellte sich allerdings das Problem, dass meine Elemente an der falschen Stelle eingefügt werden. Hinter und nicht vor dem Linktext. Hier hilft array_unshift , es fügt die neuen Elemente am Anfang von meinem bestehendem Array ein.
...
array_unshift($node->_children, $newChild);
……

Das Script von Peter benötigt zusätzlich eine eindeutige ID der Kind-ul, die der des umgebenden Li's entsprechen muss. Dazu schauen wir uns die Kinder des aktuellen Elements an und fügen, dann wenn es sich um ein Ul handelt , die aktuelle ID des Elternelements hinzu:

...

$try=$node->children();
foreach ($node->children() as $child)
{
if ($child->name() == 'ul') {
$child->addAttribute('id','foldoutMenu-'.$id);
}
}

}

Hier noch mal die Schritte im Einzelnen

  1. Ermittle den node
  2. füge ein a und ein span hinzu
  3. Setze es an die richtige Stelle
  4. Kennzeichne die Klasse der Kind Ul

Das wars !
Zum Schluss bleibt nur das Javascript in unser Template zu intergrieren.

Abschließend lässt sich sagen, dass mir die Integration des Scripts in Joomla deutlich leichter gefallen ist, als in Typo. Der benötige Code ist weniger umfangreich und die XML-basierte Lösung erscheint mir weitaus eleganter.