Hooks nutzen

Ich will Euch hier noch nicht genaustens erklären, was ein Hook ist, aber es sei gesagt, dass ein Hook eine "Unterbrechung" des normalen Codes ist, um eigenen Code einzufügen. Heißt: Wenn Ihr einen Hook verwenden wollt, dann muss dieser bereits im Quelltext vorhanden sein.

Meine Extension sfjquery hat deshalb zwei Hooks, weil die Verwendung von page.includeJS und includeCSS die Dateien meist früher als meine Extension im Header einfügt. Dadurch entstehen JavaScript-Fehler. Mit Hilfe dieser beiden Hooks werden die jQuery-Plugins NACH den Core-Files eingefügt und die Fehlermeldungen sollten verschwinden.

Um nun Euren eigenen Code dort einzuschleusen benötigt Ihr auf jeden Fall eine eigene kleine Miniextension. Dazu installieren wir über den Extensionmanager die Extension "kickstarter" (siehe Bild).

Kickstarter: General Informations

Nachdem Ihr die Extension installiert habt. Erhaltet Ihr im Extensionmanager im obersten DropDown-Feld einen neuen Eintrag "Create new Extension". Wenn Ihr diesen auswählt, erhaltet Ihr nun ein Bild wie hier. Gebt der Extension einen eindeutigen Namen und tragt ähnliche Daten ein wie ich es hier getan habe. Als "Category" habe ich "Frontend" gewählt, weil wir unsere Extension ja nicht als Content-Element auf der Webseite einfügen wollen. Das übernimmt ja schon die Extension sfjquery.

Kickstarter: View Results

Nachdem Ihr die Daten eingetragen habt klickt Ihr auf "View Results" und erhaltet eine Seite ähnlich dieser hier (siehe Bild). Hier werden Euch die zu schreibenden Dateien genaustens aufgelistet. Die Haken hinter jeder Datei lasst Ihr bitte drin. Ohne Haken wird die ausgewählte Datei nicht auf den Server geschrieben. Das hat den Vorteil, wenn Ihr später mal einige Dateien manuell angepasst habt und nicht wollt, dass Eure Änderungen durch die Originaldateien des kickstarter wieder überschrieben werden.

Klickt in diesem Fenster also einfach nur auf "Write".

Kickstarter: Installiere Extension

Nachdem klick auf "Write" erhaltet Ihr eine Bestätigung darüber, dass die gewünschten Dateien in das Extensionverzeichnis geschrieben wurden.

Unter dieser Meldung gibt es einen Link mit dem Ihr die neu erzeugt Extension installieren könnt und landet daraufhin wieder in der Übersicht des Extensionmanagers.

Eure Extension ist nun installiert und wir können uns mit der Anpassung/erweiterung der Extension beschäftigen.

Plugin aussuchen

Ich hab mal ein bissl im Pluginrepository von jQuery gewühlt und folgende Erweiterung gefunden: Font Effect. Wir werden also in den nächsten Steps versuchen diese jQuery-Erweiterung mit Hilfe eines Hooks in die Extension sfjquery implementieren.

ext_localconf.php

Um auf einen Hook zugreifen zu können benötigen wir die Datei ext_localconf.php im Rootverzeichnis unserer Extension. Legt diese bitte mit Hilfe der Extension t3quixplorer an oder ladet sie per FTP hoch. Der Inhalt meiner ext_localconf.php schaut so aus: 

<?php
if (!defined('TYPO3_MODE')) {
 die ('Access denied.');
}

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sfjquery']['otherJS'][] = 'EXT:sfplugin/hook/class.tx_sfplugin_otherjs.php:tx_sfplugin_otherjs->addPlugin';
?>

Links vom Gleichheitszeichen befindet sich der zu verwendende Hook, um weitere JS-Dateien einzubinden und rechts vom Gleichheitszeichen findet Ihr welche Methode von welchem Objekt welcher Datei geladen werden soll:

[Dateipfad]:[Objekt]->[Methode]

Hinweis

Einige jQuery-Plugins verwenden gerne eigene Grafiken und beinhalten somit unteranderem auch eine eigene CSS-Datei. Diese CSS-Dateien könnt Ihr nicht mit diesem Hook einbinden. Extra für solche Fälle habe ich noch einen zweiten Hook implementiert mit dem Namen "otherCSS". Wenn Euer Plugin also noch eine zusätzliche CSS-Datei benötigt, dann müsst Ihr eine weitere Zeile der ext_localconf.php hinzufügen: 

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sfjquery']['otherCSS'][] = 'EXT:sfplugin/hook/class.tx_sfplugin_othercss.php:tx_sfplugin_othercss->addCssFile';

Ich persönlich lege für jeden zu verwendenden Hook eine eigene Datei an...ist irgendwie übersichtlicher...

Die Methode für den Hook

Wie in der ext_localconf.php angegeben, wird nun im Verzeichnis "hook" nach einer Datei mit dem Namen class.tx_sfplugin_otherjs.php gesucht. Dieses Verzeichnis und diese Datei müsst Ihr erstmal anlegen. Auf diesem Wege würde ich auch gleich noch das Verzeichnis "res" im Rootverzeichnis der Extension erstellen. Dieses Verzeichnis steht für Ressource und auch im TYPO3-Quellcode ist dieses Verzeichnis nicht unbekannt. Ihr müsst diese ganzen Ordner nicht anlegen, aber es gehört zum Guten Ton von TYPO3 eine gewisse Ordnerstruktur beizubehalten.

Also: In diesen Ordner "res" legt Ihr nun die jquery-fonteffect-1.0.0.min.js-Datei und die Lizenzdatei aus dem ZIP des Plugins "Font-Effect" ab.

Den Dateinamen merken, den brauchen wir nun für unsere Datei class.tx_sfplugin_otherjs.php: 

<?php
class tx_sfplugin_otherjs {
	public function addPlugin() {
		return t3lib_extMgm::siteRelPath('sfplugin').'res/jquery-fonteffect-1.0.0.min.js';
	}
}
?>

 

Fertig

Überall wo Ihr die Extension sfjquery nun als Plugin einfügt dort wird auch die zusätzliche JS-Datei mit eingefügt.

Der Effekttest

Mahlzeit

 

sfjquery-Einstellungen

jQuery domready

$("#beispieltext").FontEffect();

HTML

<div id="beispieltext">Mahlzeit</div>

CSS

#beispieltext {
    font-family: Impact;
    color: #FFFFFF;
    font-size: 24pt;
}