Typo3 rgsmoothgallery mit Mootools 1.21 (t3mootools) Teil 2

Lightbox
Die Lightbox in diesem Script ist die Slimbox von Christophe Beyls. Diese Box verfolgt den Ansatz ein möglichst kompaktes Script zu sein. In der Version 1.22 ist es noch nicht mootools 1.21 kompatibel, aber auch hier hat der Autor bereits einige Verbesserungen in das Script eingearbeitet und ist bei Version 1.7. Leider sind neuere Version nur noch als jquery Script zu erhalten, so dass keine Anpassungen an weitere mootools Generationen zu erwarten sind. Aber vielleicht werden doch beide Versionen weiter gepflegt.

Alles neu
Bei der Version 1.7 hat sich fast das komplette Script geändert, so dass hier nur die wichtigsten Änderungen beschrieben werden.
Die Box wird nun nicht mehr über den Funktionsaufruf erstellt, sondern wird direkt nach dem Aufruf der Seite (Event: domready) hinein geschrieben.
Die Möglichkeiten für das Speichern und Ausdrucken von Bildern wurden vom mir hinzugefügt (Listing 1). Für die Anzeige der Elemente wurde ein Save und Print Bild in den unteren Textbereich übernommen. Außerdem kommt die Beschreibungszeile aus typo3 für die Bildunterschrift hinzu (Listing 2). Zum Ein- und Ausblenden der Elemente "Speichern" und "Drucken" kommen noch die Einträge "showSave: true, showPrint: true," unter Options sowie vor der Initialisierung Listing 3 mit hinzu.

Listing 1:
function save() {
printOrSave("save");
}
function print() {
printOrSave("print");
}
function printOrSave(mode) {
options.psScriptPath = "typo3conf/ext/rgsmoothgallery/savefile.php";
if (options.psScriptPath) {
console.log(options.psScriptPath+'?mode='+mode+'&image='+activeURL);
var myRef = window.open(options.psScriptPath+'?mode='+mode+'&image='+activeURL,'printsave', 'left=0,top=0,width='+(parseInt(center.style.width))+',height='+ (parseInt(center.style.height)) +',toolbar=0,resizable=1');
}
return true;
}

Listing 2:
bottom = new Element("div", {id: "rglbBottom"}).injectInside(bottomContainer).adopt(
new Element("a", {id: "rglbCloseLink", href: "#", events: {click: close}}),

// save and print
save = new Element("a", {id: "rglbSaveLink", href: "#", events: {click: save}}),
print = new Element("a", {id: "rglbPrintLink", href: "#", events: {click: print}}),

number = new Element("div", {id: "rglbNumber"}),

// typo3
description = new Element("div", {id: "rglbDescription"}),

title = new Element("div", {id: "rglbTitle"}),
caption = new Element("div", {id: "rglbCaption"}),
new Element("div", {styles: {clear: "both"}})

Listing 3:
if (!options.showSave) save.setStyle("display", "none");
if (!options.showPrint) print.setStyle("display", "none");

Die Animation der Lightbox wurde umgeschrieben und die einzelnen Schritte zum Ablauf der Animation in Events aufgeteilt. Die Animation der Schrift wurde auf eine einzelne Funktion ausgelagert.

Code
Der komplette Code kann heruntergeladen werden.
rgsmoothtabs gallery
rgsmoothtabs lightbox

Typo3 rgsmoothgallery mit Mootools 1.21 (t3mootools)

Ähnlich wie bei rgtabs wurde bei rgsmoothgallery von Georg Ringer eine Bibliothek benutzt, die nicht kompatibel mit der neuen Version der mootools ist. Das Skript verwendet die Version 1.2 von JonDesign's SmoothGallery.

Neue Gallery
Die neue Version 2.1beta1 enthält die nötigen Änderungen. In der neuen Version wurde die Funktion populateData aufgeteilt und stark verbessert. Außerdem werden die Bilder auch in einem perloader vorgeneriert. Allerdings kommt die Bibliothek immer noch nicht damit zurecht, wenn ein Eintrag leer ist. Dazu muss das Listing 1 eingefügt werden.

Listing 1:
if ((options.showInfopane) (options.showCarousel)) {
// ADDED: title or subtitle empty
if (!el.getElement(options.titleSelector))
var temptitle = "";
else
var temptitle = el.getElement(options.titleSelector).innerHTML;
if (!el.getElement(options.subtitleSelector))
var tempsubtitle = "";
else
var tempsubtitle = el.getElement(options.subtitleSelector).innerHTML;
elementDict.extend({
title: temptitle,
description: tempsubtitle
/* original
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
*/
// PRONETWORK END
});
}


Lightbox aufrufen
Ebenso wurde in die Typo3-Version eine Lightbox integriert, die für die Großanzeige der Bilder benutzt wird. Sie ist an der Stelle "makeLink" eingebunden (Lisiting 2). Um komfortabel darauf zugreifen zu können, wird in den Optionen noch die Zeile "lightbox:false," hinzugefügt.

Lisiting 2:
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
// added for Lightbox
if (options.lightbox) {
this.currentLink.onclick = function () {
Slimbox.open(this.galleryData, num, {});
return false;
}.bind(this);
}
// added for Lightbox END
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!
this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},


Leere Titel
Auch das Listing 3 beschäftigt sich mit dem Problem, leere Titel anzufangen. Wie schon in Lising 1 ist das im Skript nicht vorhanden. Dieses Listing fängt die leeren Titel in der Slideshow ab.

Listing 3:
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.cancel();
element = this.slideInfoZone.element;
// mod ringerge.org
this.title = this.galleryData[this.currentIter].title;
this.description = this.galleryData[this.currentIter].description;
if (this.title!=' ' && this.title!='' ) {
// mod ringerge.org
element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
element.getElement('p').set('html', this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0,
this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
// mod ringerge.org
}
// mod ringerge.org
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},


Leere Container
Außerdem wurden einige Änderungen von Georg Ringer durchgeführt, bei hideCarousel wird eine Exception abgefangen, falls der Karussel Container leer ist (Listing 4).

Listing 4:
hideCarousel: function () {
if (this.carouselContainer) {
(...)
}
}


Neue, alte Funktionen
Listing 5 und 6 zeigt ein Beispiel aus dem alten Skript, das auch im neuen Skript eine gute Funktion durchführen könnte. Deshalb habe ich diese Änderungen wieder ins neue Skript übernommen. Angeschaltet wird diese Funktion über die Option "showPlay", die unter options hinzugefügt werden muss.

Listing 5:
startStop: function() {
if (this.options.timed) {
$clear(this.timer);
this.options.timed = false;
this.startStopEl.toggleClass('pause');
} else {
this.startStopEl.toggleClass('pause');
this.options.timed = true;
this.timer = this.nextItem(this);
}
},

Listing 6:
createCarousel: function() {
(...)
// from old script
if (this.options.showPlay) {
this.startStopEl = new Element('a').addClass('play').addEvent(
'click',
this.startStop.bind(this)
).injectInside(carouselContainerElement);
}
// from old script END
(...)
}


Altes Event
Ebenso ist ein Event "onHideCarousel" eingebunden, dass über die Option "carouselAutohide" gesteuert wird. Eine weitere Funktion dafür ist nicht vorhanden (Listing 7). Das Listing wird am Ende der "goTo" Funktion eingebunden.

Listing 7:
if (this.options.carouselAutohide) {
this.fireEvent('onHideCarousel');
}


2. Teil
Im zweiten Teil dieses Artikels werde ich die Änderungen im Lightbox-Skript beschreiben, die notwendig sind, um diese ebenfalls mit den neuen mootools zu benutzen.

Typo3 rgtabs mit Mootools 1.21 (t3mootools)

Leider läßt sich rgtabs nicht so einfach mit den t3mootools zusammen benutzen. Dies liegt daran, dass bei den t3mootoools bereits die Version 1.21 von mootools eingesetzt wird.

T3MOOTOOLS
Die automatisch ausgewählten Anpassungen innerhalb des selbstgenerierten Skripts werden vollkommen korrekt bestimmt. Der Fehler liegt also nicht in der Selektion der richtigen Komponenten . Es ist ein reines Problem der neueren Version von mootools und muß mit einer Anpassung des Skripts gelöst werden.

RGTABS
Original Skript
Dazu müssen ein paar Anpassungen unter /typo3conf/ext/rgtabs/res/scripts/rgtabs.js eingefügt werden. Das geht relativ einfach, denn in rgtabs wird zurzeit die Version 1.0rc0 des "SimpleTabs - Unobtrusive Tabs with Ajax" Skripts von Harald Kirschner genutzt. Die neue Version 1.0 kann bereits mit der neuen mootools Version umgehen und hat die nötigen Änderungen einprogrammiert. Im Listing (siehe unten) sind diese Änderungen im Skript eingearbeitet.

Typo3 Änderungen
Der Autor von rgtabs, Georg Ringer, benutzt des weiteren ein paar spezifische Änderungen, wie die Möglichkeit zwischen den Tabs mit Pfeiltasten zu manövrieren. Um die Pfeiltasten einzublenden wird der Parameter "showMenuPrevNext" gesetzt. Das Menü kann sowohl oberhalb (default) als auch unterhalb angezeigt werden. Für das Menü ist der Parameter "showMenuBottom" zuständig.
Um diese Javascript Funktionen in typo3 nutzen zu können, müssen Sie am Ende der Funktion
function init($conf) in der Datei class.tx_rgtabs_pi1.php, die folgende Zeile ergänzen (Listing 1).

Listing 1:
$this->config['showMenuPrevNext'] = $this->conf['showMenuPrevNext'];


In der Funktion function getJs ($id,$count) ergänzt man noch das Listing 2.

Listing 2:
if ($this->config['showMenuBelow']==1) {
$js.= ', showMenuBelow:1';
}
// Zeilen eingefügt BEGIN
if ($this->config['showMenuPrevNext']==1) {
$js.= ', showMenuPrevNext:1';
}
// Zeilen eingefügt END

Tabs direkt aufrufen
Außerdem habe ich in der rgtabs.js noch die Funktion (Listing 3) hinzugefügt, so dass bestimmte Tabs aufgerufen werden können und für den Benutzer immer wieder das zuletzt aufgerufene Tab wieder erscheint. Diese Funktion ist auch auf der Seite von Harald Kirschner in den Kommentaren dokumentiert und im Listing bereits enthalten.

Listing 3:
Vor der Klasse werden diese beiden Zeilen hinzugefügt:
var selectedTab = Cookie.read('selectedTab');
if (!selectedTab) { selectedTab = 0; }

In der "options" Funktion wird die Zeile show: 0, durch
show: selectedTab,
ersetzt.

In der "select" Funktion wird die Zeile eingesetzt
var cookie = Cookie.write('selectedTab', index, {duration: 30});


Nun kann unter Typo3 mit dem Link (Listing 4) der dritte Tab ausgewählt werden.

Listing 4:
javascript: Cookie.write('selectedTab', 3, {duration: 30}); window.location.reload();


Ein vollständiges Listing der rgtabs.js kann bei ProNetwork heruntergeladen werden.

Bei uns sind Ihre Daten gut geschützt

Vor unserem Rechenzentrum parken seit kurzem viele Polizeifahrzeuge...