Contao Community Documentation - Benutzerbeiträge [de]

Akkordeons verschachteln

2011-06-25T23:23:50Z

Deerwood: /* Code der Verbesserung */ Bugfix

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das verschachtelte Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6).

Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt ''immer'' die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. Im Original Code war das ein ''entweder/oder'' ... das führte aber in manchen Fällen (siehe Bild) dazu, dass ein schlichtes <nowiki><b></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete. Der ursprüngliche Code ging offenbar davon aus, dass der Text innerhalb des div.toggler ''komplett'' von einem Tag (z.B. H1-7) umschlossen ist.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst eine aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass sein ''Absenden'' "voll in die Hose gegangen" ist.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-25 18:02:21.339125000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = $$('div.toggler')[0] ?
+ 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id') : 'acc_x';
+ var maybeScroll = Cookie.read(cookieBase + '_inner') ? 'inner' :
+ Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,39 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ var toggler = this.togglers[this.previous];
+ if (element && toggler && toggler.hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ if (maybeScroll == 'outer')
+ {
+ maybeScroll = false;
+
+ var wc = {top: window.getScroll().y, height: window.getSize().y};
+ var tc = toggler.getCoordinates();
+ var ec = element.getCoordinates();
+ var sc =
+ {
+ top: Math.max(0, tc.top - 20),
+ height: Math.min(tc.height + ec.height + 40, wc.height)
+ };
+ if (sc.top < wc.top)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top);
+ }
+ else if (sc.top + sc.height > wc.top + wc.height)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
+ }
+ }
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +102,33 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ var toggler = this.togglers[this.previous];
+ if (element && toggler && toggler.hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ if (maybeScroll == 'inner')
+ {
+ maybeScroll = false;
+
+ var wc = {top: window.getScroll().y, height: window.getSize().y};
+ var tc = toggler.getCoordinates();
+ var ec = element.getCoordinates();
+ var sc =
+ {
+ top: Math.max(0, tc.top - 20),
+ height: Math.min(tc.height + ec.height + 40, wc.height)
+ };
+ if (sc.top < wc.top)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top);
+ }
+ else if (sc.top + sc.height > wc.top + wc.height)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
+ }
+ }
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''maybeScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1 und das entsprechende Element wird geöffnet. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Das Cookie wird im Event ''onComplete'' gelöscht bzw. neu gesetzt, abhängig davon, ob das Element geöffnet ist (Toggler hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Schließlich wird im Block ''if (maybeScroll == 'xxx')'' geprüft, ob das Element bereits sichtbar ist und, falls nicht, wird das Element und sein Toggler (die Bereichsüberschrift im BE) weich/animiert in Sicht gerollt. Die länglichen Berechnungen sorgen dafür, dass das Element nur gerade eben sichtbar wird (+20px oben/unten). War es ganz oder teilweise unterhalb des sichtbaren Bereichs, dann kommt es von unten herein, bis seine Unterkante sichtbar wird. War es ganz oder teilweise oberhalb, kommt es von oben, bis seine Oberkante sichtbar wird. Ist das Element höher als die Höhe des sichtbaren Bereichs, dann wird jedenfalls die Oberkante sichtbar.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-25T16:40:09Z

Deerwood: /* Erläuterungen zur Verbesserung */ Weiches Scrolling nur falls nötig

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das verschachtelte Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6).

Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt ''immer'' die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. Im Original Code war das ein ''entweder/oder'' ... das führte aber in manchen Fällen (siehe Bild) dazu, dass ein schlichtes <nowiki><b></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete. Der ursprüngliche Code ging offenbar davon aus, dass der Text innerhalb des div.toggler ''komplett'' von einem Tag (z.B. H1-7) umschlossen ist.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst eine aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass sein ''Absenden'' "voll in die Hose gegangen" ist.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-25 18:02:21.339125000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var maybeScroll = Cookie.read(cookieBase + '_inner') ? 'inner' :
Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,39 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ var toggler = this.togglers[this.previous];
+ if (element && toggler && toggler.hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ if (maybeScroll == 'outer')
+ {
+ maybeScroll = false;
+
+ var wc = {top: window.getScroll().y, height: window.getSize().y};
+ var tc = toggler.getCoordinates();
+ var ec = element.getCoordinates();
+ var sc =
+ {
+ top: Math.max(0, tc.top - 20),
+ height: Math.min(tc.height + ec.height + 40, wc.height)
+ };
+ if (sc.top < wc.top)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top);
+ }
+ else if (sc.top + sc.height > wc.top + wc.height)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
+ }
+ }
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +102,33 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ var toggler = this.togglers[this.previous];
+ if (element && toggler && toggler.hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ if (maybeScroll == 'inner')
+ {
+ maybeScroll = false;
+
+ var wc = {top: window.getScroll().y, height: window.getSize().y};
+ var tc = toggler.getCoordinates();
+ var ec = element.getCoordinates();
+ var sc =
+ {
+ top: Math.max(0, tc.top - 20),
+ height: Math.min(tc.height + ec.height + 40, wc.height)
+ };
+ if (sc.top < wc.top)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top);
+ }
+ else if (sc.top + sc.height > wc.top + wc.height)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
+ }
+ }
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''maybeScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1 und das entsprechende Element wird geöffnet. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Das Cookie wird im Event ''onComplete'' gelöscht bzw. neu gesetzt, abhängig davon, ob das Element geöffnet ist (Toggler hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Schließlich wird im Block ''if (maybeScroll == 'xxx')'' geprüft, ob das Element bereits sichtbar ist und, falls nicht, wird das Element und sein Toggler (die Bereichsüberschrift im BE) weich/animiert in Sicht gerollt. Die länglichen Berechnungen sorgen dafür, dass das Element nur gerade eben sichtbar wird (+20px oben/unten). War es ganz oder teilweise unterhalb des sichtbaren Bereichs, dann kommt es von unten herein, bis seine Unterkante sichtbar wird. War es ganz oder teilweise oberhalb, kommt es von oben, bis seine Oberkante sichtbar wird. Ist das Element höher als die Höhe des sichtbaren Bereichs, dann wird jedenfalls die Oberkante sichtbar.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-25T16:11:47Z

Deerwood: /* Code der Verbesserung */ Weiches Scrolling nur falls nötig

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das verschachtelte Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6).

Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt ''immer'' die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. Im Original Code war das ein ''entweder/oder'' ... das führte aber in manchen Fällen (siehe Bild) dazu, dass ein schlichtes <nowiki><b></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete. Der ursprüngliche Code ging offenbar davon aus, dass der Text innerhalb des div.toggler ''komplett'' von einem Tag (z.B. H1-7) umschlossen ist.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst eine aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass sein ''Absenden'' "voll in die Hose gegangen" ist.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-25 18:02:21.339125000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var maybeScroll = Cookie.read(cookieBase + '_inner') ? 'inner' :
Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,39 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ var toggler = this.togglers[this.previous];
+ if (element && toggler && toggler.hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ if (maybeScroll == 'outer')
+ {
+ maybeScroll = false;
+
+ var wc = {top: window.getScroll().y, height: window.getSize().y};
+ var tc = toggler.getCoordinates();
+ var ec = element.getCoordinates();
+ var sc =
+ {
+ top: Math.max(0, tc.top - 20),
+ height: Math.min(tc.height + ec.height + 40, wc.height)
+ };
+ if (sc.top < wc.top)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top);
+ }
+ else if (sc.top + sc.height > wc.top + wc.height)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
+ }
+ }
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +102,33 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ var toggler = this.togglers[this.previous];
+ if (element && toggler && toggler.hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ if (maybeScroll == 'inner')
+ {
+ maybeScroll = false;
+
+ var wc = {top: window.getScroll().y, height: window.getSize().y};
+ var tc = toggler.getCoordinates();
+ var ec = element.getCoordinates();
+ var sc =
+ {
+ top: Math.max(0, tc.top - 20),
+ height: Math.min(tc.height + ec.height + 40, wc.height)
+ };
+ if (sc.top < wc.top)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top);
+ }
+ else if (sc.top + sc.height > wc.top + wc.height)
+ {
+ new Fx.Scroll($(document.body)).start(0, sc.top + sc.height - wc.height);
+ }
+ }
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''mustScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event ''onComplete'' gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Zusätzlich wird gescrollt, so dass das geöffnete Akkordeon-Element sichtbar ist (der Abzug von 30/50 Pixel vertikal zeigt ein wenig "drumherum oberhalb", so dass klar wird, dass es noch andere Akkordeon Elemente gibt) ... aber nur beim ersten Anzeigen der Seite. Dieser Teil des Codes ist noch ein wenig verbesserungswürdig:

* es sollte geprüft werden, ob das Element nicht sowieso schon sichtbar ist; dann braucht es kein Scroll
* der Scroll könnte weich/animiert erfolgen

Vorschläge bitte.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-24T04:00:14Z

Deerwood: /* Erläuterungen zur Verbesserung */ Noch mehr Erklärungen

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das verschachtelte Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6).

Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt ''immer'' die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. Im Original Code war das ein ''entweder/oder'' ... das führte aber in manchen Fällen (siehe Bild) dazu, dass ein schlichtes <nowiki><b></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete. Der ursprüngliche Code ging offenbar davon aus, dass der Text innerhalb des div.toggler ''komplett'' von einem Tag (z.B. H1-7) umschlossen ist.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst eine aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass sein ''Absenden'' "voll in die Hose gegangen" ist.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-24 03:18:05.261000000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var mustScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,22 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'outer')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 30);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,16 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'inner')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 50);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''mustScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event ''onComplete'' gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Zusätzlich wird gescrollt, so dass das geöffnete Akkordeon-Element sichtbar ist (der Abzug von 30/50 Pixel vertikal zeigt ein wenig "drumherum oberhalb", so dass klar wird, dass es noch andere Akkordeon Elemente gibt) ... aber nur beim ersten Anzeigen der Seite. Dieser Teil des Codes ist noch ein wenig verbesserungswürdig:

* es sollte geprüft werden, ob das Element nicht sowieso schon sichtbar ist; dann braucht es kein Scroll
* der Scroll könnte weich/animiert erfolgen

Vorschläge bitte.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-24T03:15:03Z

Deerwood: /* Erläuterungen zum Code */ Mehr Erklärungen

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das verschachtelte Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6).

Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt ''immer'' die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. Im Original Code war das ein ''entweder/oder'' ... das führte aber in manchen Fällen (siehe Bild) dazu, dass ein schlichtes <nowiki><b></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete. Der ursprüngliche Code ging offenbar davon aus, dass der Text innerhalb des div.toggler ''komplett'' von einem Tag (z.B. H1-7) umschlossen ist.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst eine aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass sein ''Absenden'' "voll in die Hose gegangen" ist.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-24 03:18:05.261000000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var mustScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,22 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'outer')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 30);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,16 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'inner')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 50);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''mustScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event ''onComplete'' gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Zusätzlich wird gescrollt, so dass das geöffnete Akkordeon-Element sichtbar ist ... aber nur beim ersten Anzeigen der Seite. Dieser Teil des Codes ist noch ein wenig verbesserungswürdig:

* es sollte geprüft werden, ob das Element nicht sowieso schon sichtbar ist; dann braucht es kein Scroll
* der Scroll könnte weich/animiert erfolgen

Vorschläge bitte.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-24T03:03:33Z

Deerwood: /* Code/Template */ Wort ergänzt

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das verschachtelte Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst eine aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass sein ''Absenden'' "voll in die Hose gegangen" ist.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-24 03:18:05.261000000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var mustScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,22 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'outer')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 30);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,16 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'inner')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 50);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''mustScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event ''onComplete'' gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Zusätzlich wird gescrollt, so dass das geöffnete Akkordeon-Element sichtbar ist ... aber nur beim ersten Anzeigen der Seite. Dieser Teil des Codes ist noch ein wenig verbesserungswürdig:

* es sollte geprüft werden, ob das Element nicht sowieso schon sichtbar ist; dann braucht es kein Scroll
* der Scroll könnte weich/animiert erfolgen

Vorschläge bitte.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-24T02:33:15Z

Deerwood: /* Verbesserung: Akkordeons geöffnet halten */ Text

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und ist die Eingabe des Besuchers nicht korrekt, dann wird die Seite erneut aufgerufen. Eigentlich, um die Fehler anzuzeigen; da aber das Akkordeon automatisch zuklappt bzw. irgend etwas anderes aufklappt, kann der Besucher die Meldungen nicht sehen und das andere Auf/Zuklappen signalisiert eher: "ist alles gut gegangen". Erst eine aktives wieder Aufklappen des Formulars durch den Besucher zeigt ihm, dass sein ''Absenden'' "voll in die Hose gegangen" ist.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-24 03:18:05.261000000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var mustScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,22 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'outer')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 30);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,16 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'inner')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 50);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''mustScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event ''onComplete'' gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Zusätzlich wird gescrollt, so dass das geöffnete Akkordeon-Element sichtbar ist ... aber nur beim ersten Anzeigen der Seite. Dieser Teil des Codes ist noch ein wenig verbesserungswürdig:

* es sollte geprüft werden, ob das Element nicht sowieso schon sichtbar ist; dann braucht es kein Scroll
* der Scroll könnte weich/animiert erfolgen

Vorschläge bitte.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-24T02:15:47Z

Deerwood: /* Erläuterungen zur Verbesserung */ article alias explained

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und validiert die Eingabe nicht, dann wird die Seite erneut aufgerufen, eigentlich um die Fehler anzuzeigen, da aber das Akkordeon zuklappt, kann der Besucher die Meldungen nicht sofort sehen und das Zuklappen signalisiert eher: "ist alles gut gegangen".

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-24 03:18:05.261000000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var mustScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,22 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'outer')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 30);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,16 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'inner')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 50);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase''). Diese ID ist (soweit ich sehen kann) immer gesetzt: es ist das Artikel-Alias.

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''mustScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event ''onComplete'' gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Zusätzlich wird gescrollt, so dass das geöffnete Akkordeon-Element sichtbar ist ... aber nur beim ersten Anzeigen der Seite. Dieser Teil des Codes ist noch ein wenig verbesserungswürdig:

* es sollte geprüft werden, ob das Element nicht sowieso schon sichtbar ist; dann braucht es kein Scroll
* der Scroll könnte weich/animiert erfolgen

Vorschläge bitte.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-24T02:01:41Z

Deerwood: /* Erläuterungen zur Verbesserung */ Code Änderungen erklärt

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und validiert die Eingabe nicht, dann wird die Seite erneut aufgerufen, eigentlich um die Fehler anzuzeigen, da aber das Akkordeon zuklappt, kann der Besucher die Meldungen nicht sofort sehen und das Zuklappen signalisiert eher: "ist alles gut gegangen".

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-24 03:18:05.261000000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var mustScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,22 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'outer')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 30);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,16 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'inner')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 50);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Direkt danach wird geprüft, ob/welche geöffnete Akkordeon-Ebene (durch Scroll) "in Sicht" sein soll. Der Scroll-Hinweis wird später aber nur beachtet, wenn die Seite neu angezeigt wid, nicht bei jedem Klick auf einen Toggler ('''var''' ''mustScroll''). Vorrang hat jedenfalls ein geöffnetes Akkordeon der inneren Ebene.

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event ''onComplete'' gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Zusätzlich wird gescrollt, so dass das geöffnete Akkordeon-Element sichtbar ist ... aber nur beim ersten Anzeigen der Seite. Dieser Teil des Codes ist noch ein wenig verbesserungswürdig:

* es sollte geprüft werden, ob das Element nicht sowieso schon sichtbar ist; dann braucht es kein Scroll
* der Scroll könnte weich/animiert erfolgen

Vorschläge bitte.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-24T01:25:59Z

Deerwood: /* Code der Verbesserung */ Rollen zum geöffneten Akkordeon ebenfalls implementiert

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und validiert die Eingabe nicht, dann wird die Seite erneut aufgerufen, eigentlich um die Fehler anzuzeigen, da aber das Akkordeon zuklappt, kann der Besucher die Meldungen nicht sofort sehen und das Zuklappen signalisiert eher: "ist alles gut gegangen".

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-24 03:18:05.261000000 +0200
@@ -3,10 +3,12 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');
+ var mustScroll = Cookie.read(cookieBase + '_inner') ? 'inner' : Cookie.read(cookieBase + '_outer') ? 'outer' : false;

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +39,22 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'outer')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 30);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,16 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ if (mustScroll == 'inner')
+ {
+ window.scrollTo(0, this.togglers[this.previous].getPosition().y - 50);
+ mustScroll = false;
+ }
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T23:23:05Z

Deerwood: /* Code der Verbesserung */ Security: niemals Userwerte ungeprüft verwenden

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und validiert die Eingabe nicht, dann wird die Seite erneut aufgerufen, eigentlich um die Fehler anzuzeigen, da aber das Akkordeon zuklappt, kann der Besucher die Meldungen nicht sofort sehen und das Zuklappen signalisiert eher: "ist alles gut gegangen".

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 21:17:55.073500000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? parseInt(Cookie.read(cookieBase + '_outer')) : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,17 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? parseInt(Cookie.read(cookieBase + '_inner')) : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +79,11 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T22:13:36Z

Deerwood: /* Code der Verbesserung */ Typo

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und validiert die Eingabe nicht, dann wird die Seite erneut aufgerufen, eigentlich um die Fehler anzuzeigen, da aber das Akkordeon zuklappt, kann der Besucher die Meldungen nicht sofort sehen und das Zuklappen signalisiert eher: "ist alles gut gegangen".

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 21:17:55.073500000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? Cookie.read(cookieBase + '_outer') : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,17 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_inner') ? Cookie.read(cookieBase + '_inner') : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +79,11 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T22:08:40Z

Deerwood: /* Verbesserung: Akkordeons geöffnet halten */ Weiteres Scenario

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt (auch mit Browser Back Button). Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Ein weiteres Scenario, in dem das Zuklappen höchst unfreundlich zum Besucher ist: hat man ein Formular in einem Akkordeon-Element und validiert die Eingabe nicht, dann wird die Seite erneut aufgerufen, eigentlich um die Fehler anzuzeigen, da aber das Akkordeon zuklappt, kann der Besucher die Meldungen nicht sofort sehen und das Zuklappen signalisiert eher: "ist alles gut gegangen".

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 21:17:55.073500000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? Cookie.read(cookieBase + '_outer') : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,17 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display : Cookie.read(cookieBase + '_inner') ? Cookie.read(cookieBase + '_inner') : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +79,11 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T19:25:09Z

Deerwood: /* Code der Verbesserung */ Code vereinfacht

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt. Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 21:17:55.073500000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? Cookie.read(cookieBase + '_outer') : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,17 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_outer');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display : Cookie.read(cookieBase + '_inner') ? Cookie.read(cookieBase + '_inner') : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +79,11 @@
{
element.setStyle('height', heightValue);
}
+ Cookie.dispose(cookieBase + '_inner');
+ if (this.previous >= 0 && this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T19:13:13Z

Deerwood: /* Verbesserung: Akkordeons geöffnet halten */ Typo

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt. Bei verschachtelten Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 18:27:35.651625000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? Cookie.read(cookieBase + '_outer') : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,23 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_outer');
+ }
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display : Cookie.read(cookieBase + '_inner') ? Cookie.read(cookieBase + '_inner') : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,17 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_inner');
+ }
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T19:10:58Z

Deerwood: /* Erläuterungen zur Verbesserung */ Typo

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt. Bei verschachteltetn Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 18:27:35.651625000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? Cookie.read(cookieBase + '_outer') : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,23 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_outer');
+ }
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display : Cookie.read(cookieBase + '_inner') ? Cookie.read(cookieBase + '_inner') : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,17 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_inner');
+ }
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet ist (hat die CSS-Klasse ''active'') oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T19:10:15Z

Deerwood: /* Code der Verbesserung */ Kein Anhang möglich

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt. Bei verschachteltetn Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff (leider erlaubt dies Wiki weder *.zip noch *.txt als Anhang).

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 18:27:35.651625000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? Cookie.read(cookieBase + '_outer') : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,23 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_outer');
+ }
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display : Cookie.read(cookieBase + '_inner') ? Cookie.read(cookieBase + '_inner') : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,17 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_inner');
+ }
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet (hat die CSS-Klasse ''active'') ist oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-23T17:51:30Z

Deerwood: /* Erläuterungen zum Code */ Code zur Verbesserung des Verhaltens

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

==Einleitung==
[[Datei:Nested_accordion.jpg|thumb|350px|Ein verschachteltes Akkorden]]

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte (siehe Forumsthread [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]). Auf diese Weise könnte man z.B. FAQ's mit Akkordeons realisieren:

Der im Forum gezeigte MooTools JavaScript Code hat unter bestimmten Umständen nicht funktioniert; auch war es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Der Diskussionsthread ist jedoch alt; MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

Hinweis: für eine FAQ als verschachteltes Akkordeon gibt es inzwischen die Erweiterung [http://www.contao.org/erweiterungsliste/view/faqaccordion.10000009.de.html faqaccordion].

==Editieren im Backend==
[[Datei:Nested_accordion_be.jpg|thumb|350px|Eingabe der Klassen 1. Ebene im BE]]
In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Inhaltselement ''Akkordeon'' in Betriebsart ''Umschlag Anfang'' [### ACCORDION WRAPPER START ###] bzw. Betriebsart ''Umschlag Ende'' [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene (zwischen den äußeren Umschlag-Elementen) wird ganz normal mit weiteren Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Betriebsart ''Einzelnes Element'') oder ebenfalls ''Umschlag Anfang/Ende'', wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

==Code/Template==
Damit das Akkordeon richtig funktioniert, muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu [[Templates_bearbeiten|erzeugt]] man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dies neue Template '''anstatt''' des Core "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

==Erläuterungen zum Code==

Die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. [http://websites-erstellen-mit-contao.de/ Peter Müllers Buch] Kapitel 10.2.6). Allerdings wurde eine Unschönheit beseitigt: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active". Gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in manchen Fällen (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden, besonders im Fall, dass beide Ebenen völlig zugeklappt und dann wieder geöffnet werden. Gefunden in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Der JS Code oben klappt initial beide Akkordeon-Ebenen zu und erlaubt auch aktives Zuklappen durch den Besucher. Will man das anders haben, dann kann man die beiden Optionen "display:" bzw. "alwaysHide:" verändern:

* '''display''': Vorgabe ist ''-1'' => alles zugeklappt. Ändern auf ''0'', ''1'', ''2'' ... um das 1., 2., 3. ... Akkordeon von vornherein aufzuklappen. Sinnvoll wäre etwa ''display: 0'' oben (toggler_outer/accordion_outer) um das erste Element der äußeren Ebene zu öffnen und die zweite Ebene geschlossen zu halten.
* '''alwaysHide''': Vorgabe ist ''true'' => erlaubt das aktive Zuklappen. Ändern auf ''false'', um das aktive Zuklappen zu verhindern.

Getestet wurde das in allen gängigen Browsern:
*Opera 11.11 (XP, W7)
*FireFox 3.6.17 (XP)
*FireFox 4.0.1 (W7)
*Safari 5.0.5 (XP, W7)
*Chrome 11.0.696.77 (XP, W7)
*IE 8.0.6001.18702 (XP)
*IE 9.0.8112.16421 (W7)
*Mac (diverse Browser, Liste folgt)
Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

==Verbesserung: Akkordeons geöffnet halten==

Ein generelles Problem mit Akkordeons ist, dass sie immmer in der Voreinstellung (z.B. alles zugeklappt) erscheinen, wenn man die Seite kurz verläßt, etwa um einem Link im Akkordeontext zu folgen, und wieder zurückkehrt. Bei verschachteltetn Akkoredeons ist das besonders nervig, weil die Gefahr besteht, dass der Besucher nicht mehr genau weiss, wo er war, als er dem Link folgte. Dann muss er mühsam mit mehreren Klicks seinen Kontext wieder finden ... sehr frustrierend.

Um die Akkordeons einer Seite wieder so zu öffnen, wie der Besucher sie verlassen hat, ist es nötig, den Zustand irgenwo zu speichern. Dazu bieten sich, wie oft, Cookies an.

==Code der Verbesserung==

Gezeigt wird hier nur das diff, das komplette Template ist im Anhang.

<source lang=diff">
--- moo_accordion_act_nested.tpl 2011-06-14 18:55:54.735250000 +0200
+++ moo_accordion_act_nested_cookie.tpl 2011-06-23 18:27:35.651625000 +0200
@@ -3,10 +3,11 @@
window.addEvent('domready', function()
{
var heightValue = window.ie6 ? '100%' : '';
+ var cookieBase = 'acc_' + $$('div.toggler')[0].getParent('div.mod_article').getProperty('id');

this.accordion_outer = new Accordion($$('div.toggler_outer'), $$('div.accordion_outer'),
{
- display: -1,
+ display: Cookie.read(cookieBase + '_outer') ? Cookie.read(cookieBase + '_outer') : -1,
alwaysHide: true,
opacity: false,

@@ -37,12 +38,23 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_outer', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_outer');
+ }
+ }
}
});

this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
{
- display: -1,
+ display : Cookie.read(cookieBase + '_inner') ? Cookie.read(cookieBase + '_inner') : -1,
alwaysHide: true,
opacity: false,

@@ -73,6 +85,17 @@
{
element.setStyle('height', heightValue);
}
+ if (this.previous >= 0)
+ {
+ if (this.togglers[this.previous].hasClass('active'))
+ {
+ Cookie.write(cookieBase + '_inner', this.previous);
+ }
+ else
+ {
+ Cookie.dispose(cookieBase + '_inner');
+ }
+ }
}
});
});
</source>

==Erläuterungen zur Verbesserung==

Da man auf verschiedenen Seiten des Auftritts Akkordeons haben kann, muss dafür gesorgt werden, dass jede dieser Seiten eigene Cookies erhält. Dazu wird ganz am Anfang die CSS ID des Artikel-DIVs herangezogen, in dem sich das Akkordeon befindet ('''var''' ''cookieBase'').

Die Option ''display:'' wird ergänzt, so dass zunächst geprüft wird, ob ein Cookie für das betreffende Akkordeon gesetzt ist. Der Wert des Cookies ist eine Integerzahl 0 bis Anzahl Elemente - 1. Nur wenn das Cookie nicht gesetzt ist, wird die Vorgabe verwendet (hier -1 für zugeklappt). Das Cookie ist nicht gesetzt beim ersten Besuch oder wenn das Akkordeon aktiv zugeklappt wurde.

Schließlich wird das Cookie im Event onComplete gesetzt oder gelöscht, abhängig davon, ob das Element geöffnet (hat die CSS-Klasse ''active'') ist oder nicht. Dabei werden für äußere und innere Akkordeon-Elemente unterschiedliche (Session-)Cookies gesetzt.

Auch die Verbesserung funktioniert sowohl mit einfachen, wie auch mit verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 19:51, 23. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-16T15:17:58Z

Deerwood: /* Code/Template */ Nur 1 moo_accordeon Template zur Zeit

Akkordeons verschachteln

2011-06-16T00:28:45Z

Deerwood: /* Erläuterungen zum Code */ Typo

Akkordeons verschachteln

2011-06-16T00:27:42Z

Deerwood: /* Erläuterungen zum Code */ Weitere Hinweise

Akkordeons verschachteln

2011-06-15T23:45:53Z

Deerwood: /* Editieren im Backend */ Lesbarkeit weiter verbessert.

Akkordeons verschachteln

2011-06-15T14:55:44Z

Deerwood: /* Einleitung */ Hinweis auf Erweiterung

Akkordeons verschachteln

2011-06-14T21:22:23Z

Deerwood: hat „Verschachteltes Akkordeon“ nach „Akkordeons verschachteln“ verschoben: Umbenennung gemäß Diskussionsseite

Diskussion:Akkordeons verschachteln

2011-06-14T21:22:23Z

Deerwood: hat „Diskussion:Verschachteltes Akkordeon“ nach „Diskussion:Akkordeons verschachteln“ verschoben: Umbenennung gemäß Diskussionsseite

Vorschlag: Umbennen in Akkordeon, verschachtelt und verschieben nach A.
Vorteil: alle Akkordeon Artikel wäre unter A gelistet (soweit ich gesehen habe)
----
Hi

Hätte ich eh gemacht, wenn ich den Artikel durchsehe / aufbereite.<br />
Titel hätte ich "Akkordions verschachteln" gewählt.<br />

PS: Heisst es eigentlich jetzt Akkordion oder Akkordeon?? (In den anderen Artikel wird es mit i geschrieben.)

--[[Benutzer:Manitougs|Manitougs]] 13:08, 10. Jun. 2011 (CEST)

----
Benennt das gerne um (ich weiß gerade nicht, wie das geht). Im Deutschen heißt es "Akkordeon", im Englischen "accordion".

--[[Benutzer:Deerwood|Deerwood]] 03:00, 11. Jun. 2011 (CEST)

Diskussion:Akkordeons verschachteln

2011-06-11T01:00:12Z

Deerwood:

Akkordeons verschachteln

2011-06-09T22:50:28Z

Deerwood: Überschriften, weiteres Bild

Datei:Nested accordion be.jpg

2011-06-09T22:46:34Z

Deerwood: Screenshot selbst erstellt

Screenshot selbst erstellt

Akkordeons verschachteln

2011-06-09T16:16:34Z

Deerwood: Artikel fertig gestellt

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

Gelegentlich wäre es schön, wenn man in einem äußeren Akkordeon als Inhaltselemente auch innere Akkordeons haben könnte. Siehe Forum [http://www.contao-community.de/showthread.php?1910 Akkordeons im Akkordeon]. Z.B. könnte man sowas wie eine elegante FAQ realisieren:

[[Datei:Nested_accordion.jpg|Ein verschachteltes Akkorden]]

Der im Forum gezeigte MooTools JavaScript Code hat für mich nicht funktioniert; auch fand ich es unbefriedigend, die inneren Akkordeon Elemente via HTML Inhalts-Elementen eingeben zu müssen. Die Diskussion ist ja alt, MooTools und TypoLight/Contao haben sich seither weiter entwickelt. Dennoch Dank an Max und Sebastian für ihre Hinweise/Tips.

In Contao 2.9.5 sind verschachtelte Akkordeons (2 Ebenen) recht einfach, wenn man so vorgeht:

* die erste Akkordeon-Ebene wird (unbedingt/selbstverständlich) als "Klammer" angelegt (Umschlag Anfang [### ACCORDION WRAPPER START ###] / Umschlag Ende [### ACCORDION WRAPPER END ###])
* in beiden Klammer-Elementen werden die Akkordeon-Klassen "toggler_outer" und "accordion_outer" eingetragen
* die zweite Akkordeon-Ebene wird ganz normal mit Akkordeons eingegeben, die die Standard-Klassen "toggler" und "accordion" bekommen (Klassenfelder leer lassen). Das dürfen normale Akkordeons sein (Einzelnes Element) oder ebenfalls Umschlag Anfang/Ende, wenn man dazwischen mehrere Inhaltselemente benötigt.

Der Zusatzaufwand der speziellen Klassen ist also nur bei der ersten Ebene erforderlich, deren Anzahl ja typisch viel geringer ist als die Anzahl der Akkordeons in der zweiten Ebene. Der Hauptteil der Arbeit ist also ganz normal zu bewerkstelligen.

Damit das Akkordeon richtig funktioniert muss man MooTools nun noch die beiden neuen Akkordeon-Klassen beibringen. Dazu erzeugt man im Template-Verzeichnis eine Datei "moo_accordion_nested.tpl" und wählt im Seitenlayout dieses Template statt "moo_accordion.tpl". Der Code des neuen Templates:

<source lang="javascript">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</source>

Erläuterungen zum Code:

die beiden Hauptabteilungen sind weitgehend identisch, nur die Resultate und Parameter für ''new Accordion(...)'' unterscheiden sich. Der Code für die Events ''onActive'' und ''onBackground'' ist im Prinzip bekannt von "moo_accordion_active.tpl" (von xchs im Forum bzw. Peter Müllers Buch Kapitel 10.2.6). Allerdings habe ich mir die Freiheit genommen, eine Unschönheit zu beseitigen: die ''div.toggler'' bekommen jetzt immer die Klassen "in/active", gibt es ein HTML Element innerhalb des div, dann bekommt es diese Klassen ebenfalls/zusätzlich. In xchs Original Code war das ein entweder/oder ... das führte aber in meinem Fall (siehe Bild) dazu, dass das <nowiki><strong></nowiki> die Klassen bekam und das +/- Symbol des div.toggler nicht umschaltete.

Der Event ''onComplete'' ist nötig, damit die Akkordeons zuverlässig in korrekter Höhe angezeigt werden. Gefunden habe ich das in [http://blog.medianotions.de/en/articles/2008/mootools-nested-accordion diesem Blog].

Für mich funktioniert das in allen gängigen Browsern: Opera 11.11 (XP, W7); FireFox 3.6.17 (XP); FireFox 4.0.1 (W7); Safari 5.0.5 (XP, W7); Chrome 11.0.696.77 (XP, W7); IE 8.0.6001.18702 (XP); IE 9.0.8112.16421 (W7) und unter Mac ebenfalls. Auch einfache, unverschachtelte Akkordions sind weiterhin möglich, der zusätzliche ''onComplete'' Event richtet keinen Schaden an. Man benötigt also kein spezielles Seitenlayout für die verschachtelten Akkordeons.

--[[Benutzer:Deerwood|Deerwood]] 18:16, 9. Jun. 2011 (CEST)

Akkordeons verschachteln

2011-06-09T02:25:14Z

Deerwood: Artikel angefangen ... muss ins Bett

Datei:Nested accordion.jpg

2011-06-09T01:51:10Z

Deerwood:

Video galerie

2011-06-06T00:08:58Z

Deerwood: added to admin howtos

[[Category:Admin HOWTOS]]
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

Die normale Galerie des Contao-Core kann bereits für (externe) Videos genutzt werden. Dazu legt man für jedes anzuzeigende Video ein Screenshot-Bild ab (z.B. in ".../tl_files/videos/gallery_01/") und erzeugt eine Datei "meta.txt" im gleichen Verzeichnis, die, neben alternativem Text und Bildunterschrift, auch die URL zum Video enthält:

<source lang="php">
dateiname.endung = Alternativer Text | URL | Bildunterschrift
The_Police_-_Roxanne_live_1979.jpg = The Police - Roxanne, live 1979 | http://www.youtube.com/watch?v=-wpX6drarrs | <p>The (very young) Police at Pinkpop 1979</p>
Brazil.jpg = Brazil - Terry Gilliam (1985) | http://video.google.com/videoplay?docid=5752843086186063624# | <p>Brazil - Google Video (2:16:49)</p>
</source>

Erzeugt man daraus eine Galerie und aktiviert im Backend die Checkbox "Großansicht/Neues Fenster", dann wird bei einem Klick auf einen Galerie-Screenshot die angegebene URL in einem neuen Browser-Fenster geöffnet und das Video darin abgespielt.

Schön und gut ... allerdings will man oft die Besucher auf der eigenen Seite halten und ihnen dennoch das Abspielen der Videos gestatten. Peter Müller hat in seinem excellenten Buch "Websites erstellen mit CONTAO" gezeigt, wie man Videos per Link im Text in einer Media/LightBox öffnen kann (Kapitel 10.3.1 "Inhaltselement Text: Ein Link in einer Mediabox"). Das sollte doch auch mit einer Gallerie funktionieren?

Na klar! In weiser Voraussicht bietet Contao für das Inhalts-Element "Galerie" eine Auswahl des Templates im Backend an. Dort wird normalerweise nur "gallery_default" angeboten ... also muss man eine Kopie dieses Templates im Verzeichnis ".../templates" erzeugen, umbenennen und modifizieren.

Die Änderungen betreffen nur wenige Zeilen, deshalb hier nur das diff:

<source lang="diff">
--- gallery_default.tpl Fr 27. Mai 23:57:03 2011
+++ gallery_videos.tpl Sa 28. Mai 02:51:13 2011
@@ -1,6 +1,7 @@

-<table cellspacing="0" cellpadding="0" summary="Image gallery">
+<table class="videos" cellspacing="0" cellpadding="0" summary="Video gallery">
<tbody>
+<?php $lightbox_id = rand(10000, 99999); ?>
<?php foreach ($this->body as $class=>$row): ?>
<tr class="<?php echo $class; ?>">
<?php foreach ($row as $col): ?>
@@ -10,7 +11,7 @@
<td class="<?php echo $col->class; ?>" style="width:<?php echo $col->colWidth; ?>;">
<div class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
<?php if ($col->href): ?>
- <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
+ <a href="<?php echo $col->href; ?>" rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]" title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
<?php else: ?>
<img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
</source>

Ganz am Anfang bekommt die Tabelle eine zusätzliche Klasse (optional) und ein angepasstes Attribut "summary".

Direkt danach wird eine Pseudo-ID erzeugt, die weiter unten im "rel" Attribut verwendet wird. Der Sinn: hat man mehrere Video-Galerien auf einer Seite, dann soll man in der Mediabox zwar von Video zu Video in EINER Galerie schalten, aber nicht zwischen Galerien wechseln können.

Die wichtigste Änderung gegen Ende:
* "'''<?php echo $col->attributes; ?>'''" wird ersetzt durch
* "''' rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]"'''"

Damit wird der JavaScript Code von $col->attributes (window.open...) weggeworfen und stattdessen die Mediabox angefordert. Diese erhält, neben der oben erwähnten ID, auch eine Angabe für Breite und Höhe ... das ist die Größe des Original-Bildes, das für die Galerie verwendet wurde (auch wenn das nie gezeigt wird), nicht die Größe des Thumbnails!

Im Backend muß man nun nur noch das neue Template "gallery_videos" wählen und die Videos erscheinen in einer Mediabox auf der eigenen Seite; man kann von Video zu Video innerhalb einer Galerie schalten und die (streaming) Videos damit "anteasern"; die Größe der Mediabox passt sich an das Video an (indirekt über die Größe des Original-Bildes); schaltet man zwischen den Videos hin und her oder schließt die Mediabox, hält das Abspielen automatisch an. Je nach Video-Lieferant kann das Video auch Fullscreen abgespielt werden (YouTube: ja, Google: nein).

Video galerie

2011-05-31T03:34:30Z

Deerwood: Artikel neu angelegt

[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
{{AppliesTo
|Version=ab 2.9
}}

Die normale Galerie des Contao-Core kann bereits für (externe) Videos genutzt werden. Dazu legt man für jedes anzuzeigende Video ein Screenshot-Bild ab (z.B. in ".../tl_files/videos/gallery_01/") und erzeugt eine Datei "meta.txt" im gleichen Verzeichnis, die, neben alternativem Text und Bildunterschrift, auch die URL zum Video enthält:

<source lang="php">
dateiname.endung = Alternativer Text | URL | Bildunterschrift
The_Police_-_Roxanne_live_1979.jpg = The Police - Roxanne, live 1979 | http://www.youtube.com/watch?v=-wpX6drarrs | <p>The (very young) Police at Pinkpop 1979</p>
Brazil.jpg = Brazil - Terry Gilliam (1985) | http://video.google.com/videoplay?docid=5752843086186063624# | <p>Brazil - Google Video (2:16:49)</p>
</source>

Erzeugt man daraus eine Galerie und aktiviert im Backend die Checkbox "Großansicht/Neues Fenster", dann wird bei einem Klick auf einen Galerie-Screenshot die angegebene URL in einem neuen Browser-Fenster geöffnet und das Video darin abgespielt.

Schön und gut ... allerdings will man oft die Besucher auf der eigenen Seite halten und ihnen dennoch das Abspielen der Videos gestatten. Peter Müller hat in seinem excellenten Buch "Websites erstellen mit CONTAO" gezeigt, wie man Videos per Link im Text in einer Media/LightBox öffnen kann (Kapitel 10.3.1 "Inhaltselement Text: Ein Link in einer Mediabox"). Das sollte doch auch mit einer Gallerie funktionieren?

Na klar! In weiser Voraussicht bietet Contao für das Inhalts-Element "Galerie" eine Auswahl des Templates im Backend an. Dort wird normalerweise nur "gallery_default" angeboten ... also muss man eine Kopie dieses Templates im Verzeichnis ".../templates" erzeugen, umbenennen und modifizieren.

Die Änderungen betreffen nur wenige Zeilen, deshalb hier nur das diff:

<source lang="diff">
--- gallery_default.tpl Fr 27. Mai 23:57:03 2011
+++ gallery_videos.tpl Sa 28. Mai 02:51:13 2011
@@ -1,6 +1,7 @@

-<table cellspacing="0" cellpadding="0" summary="Image gallery">
+<table class="videos" cellspacing="0" cellpadding="0" summary="Video gallery">
<tbody>
+<?php $lightbox_id = rand(10000, 99999); ?>
<?php foreach ($this->body as $class=>$row): ?>
<tr class="<?php echo $class; ?>">
<?php foreach ($row as $col): ?>
@@ -10,7 +11,7 @@
<td class="<?php echo $col->class; ?>" style="width:<?php echo $col->colWidth; ?>;">
<div class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
<?php if ($col->href): ?>
- <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
+ <a href="<?php echo $col->href; ?>" rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]" title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
<?php else: ?>
<img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
<?php endif; ?>
</source>

Ganz am Anfang bekommt die Tabelle eine zusätzliche Klasse (optional) und ein angepasstes Attribut "summary".

Direkt danach wird eine Pseudo-ID erzeugt, die weiter unten im "rel" Attribut verwendet wird. Der Sinn: hat man mehrere Video-Galerien auf einer Seite, dann soll man in der Mediabox zwar von Video zu Video in EINER Galerie schalten, aber nicht zwischen Galerien wechseln können.

Die wichtigste Änderung gegen Ende:
* "'''<?php echo $col->attributes; ?>'''" wird ersetzt durch
* "''' rel="lightbox[lbv<?php echo $lightbox_id; ?> <?php echo $col->width; ?> <?php echo $col->height; ?>]"'''"

Damit wird der JavaScript Code von $col->attributes (window.open...) weggeworfen und stattdessen die Mediabox angefordert. Diese erhält, neben der oben erwähnten ID, auch eine Angabe für Breite und Höhe ... das ist die Größe des Original-Bildes, das für die Galerie verwendet wurde (auch wenn das nie gezeigt wird), nicht die Größe des Thumbnails!

Im Backend muß man nun nur noch das neue Template "gallery_videos" wählen und die Videos erscheinen in einer Mediabox auf der eigenen Seite; man kann von Video zu Video innerhalb einer Galerie schalten und die (streaming) Videos damit "anteasern"; die Größe der Mediabox passt sich an das Video an (indirekt über die Größe des Original-Bildes); schaltet man zwischen den Videos hin und her oder schließt die Mediabox, hält das Abspielen automatisch an. Je nach Video-Lieferant kann das Video auch Fullscreen abgespielt werden (YouTube: ja, Google: nein).

Code Styleguide

2011-05-31T01:25:41Z

Deerwood: /* Klammerung, Leerzeichen und Kommata */

{{stub}}
[[en:Code_Styleguide]]

Diese Seite soll einen allgemeinen Styleguide für Entwicklung von Contao Extensions darstellen.
Die hier gemachten Angaben entstanden aus der Auswertung des Contao Core, erheben jedoch keinen Anspruch auf Vollständigkeit, Richtigkeit oder gar Übereinstimmung mit den Ansichten des Core Entwicklers Leo Feyer.

==Dateien==
===Dateinamen===
In jeder Datei sollte nur eine Klasse enthalten sein. Ausgenommen sind Hilfsklassen, die nur von der einen Klasse aufgerufen werden, oder deren Aufruf die Einbindung der einen Klasse voraussetzt (siehe [[Database]], [[Database_Statement]], [[Database_Result]]).

Der Dateiname muss, damit die Klasse automatisch geladen werden kann (siehe [[Autoloader]]), gleich wie der Klassenname sein. Gross- und Kleinschreibung muss beachtet werden, da ansonsten auf Unix-/Linux-Servern die Klasse nicht gefunden werden kann.

Der Klassenname sollte, sofern er aus mehreren Worten besteht, in lower [[w:de:CamelCase|CamelCase]] geschrieben werden.

===Header===
In jeder Datei sollte oben ein Header enthalten sein, welcher mindestens folgende Informationen beinhalten sollte:
* die Lizenz, unter deren der Code veröffentlicht wurde.
* der Name des Autors.
* ggf. der Name der Firma, für welche der Code geschrieben wurde und deren geistiges Eigentum er somit ist.
* das Paket, zu welchem die Datei gehört.

Diese Informationen sollten bestenfalls in [[w:de:PhpDocumentor|PhpDocumentor Notation]] vorgenommen werden.
Beispiel:

<source lang="php">
/**
* Contao Open Source CMS
* Copyright (C) 2005-2010 Leo Feyer
*
* Formerly known as TYPOlight Open Source CMS.
*
* This program is free software: you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation, either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this program. If not, please visit the Free
* Software Foundation website at <http://www.gnu.org/licenses/>.
*
* PHP version 5
* @copyright Some Company 2010
* @author Max Mustercoder <mustercoder@somedomain.tld>
* @package RealCoolExtension
* @license http://opensource.org/licenses/lgpl-3.0.html
*/
</source>

==Code==

===Einrückung===
In Contao werden zum Einrücken von Code in der Regel normale TABulatoren (ASCII 0x09) und keine Leerzeichen verwendet. Eine Ausnahme hiervon stellen Einrückungen von zwei bis drei Leerzeichen dar, welche zur Formatierung von beispielsweise Datenbankabfragen eingefügt werden können.

===Klammerung, Leerzeichen und Kommata===
In Contao werden geschweifte Klammern grundsätzlich auf eine neue Zeile geschoben. Nach öffnenden und vor schließenden runden Klammern wird kein Leerzeichen geschrieben. Nach einem Komma und Schleifen-Schlüsselwörtern (if, while, for, foreach) wird ein Leerzeichen eingefügt.

Beispiel:

<source lang="php">
public function somefunction($param)
{
if ($param=='foo')
{
// do something
}
else
{
// do something else
}
}
</source>

===Leerzeilen===
Leerzeilen sollten verwendet werden um logische Codeabschnitte zu gruppieren. Leerzeilen sollten von allen Tabulator- und Leerzeichen bereinigt werden und wirkliche Leerzeilen sein.

Nach einer Funktion (bzw. Methode) sollten zwei Leerzeilen folgen, nach einer Objekt-Variable jeweils eine Leerzeile.

===Zeilenlänge===
Abweichend vom Contao Core sollte Code in Erweiterungen so geschrieben werden, dass er möglichst auf einen Blick sichtbar und damit wartbar ist, insbesondere sollte es nur in Ausnahmefällen nötig sein, horizontal zu rollen. Eine feste Maximal-Breite kann nicht sinnvoll definiert werden, weil das von zu vielen Dingen abhängt (verfügbare Pixel des Bildschirms, Größe der Schrift, Komplexität und Einrücktiefe des Codes). Dennoch kann man sich an der Lesbarkeit/Erfassbarkeit für Menschen orientieren (60-80 Zeichen/Zeile). Das ist verflixt wenig ... und kann nicht immer eingehalten werden. Jedoch erlauben sowohl PHP wie auch SQL Zeilen-Umbrüche, so dass man z.B. ein komplexes IF Statement auf mehrere kurze Zeilen verteilen kann (Beispiel folgt). Bei SQL Statements (im Core durchgängig auf einer Zeile mit teilweise mehreren hundert Zeichen) kann man den Query-String ohne weiteres auf mehrere Zeilen verteilen und damit erheblich leichter verständlich machen ... die Klasse "Database" bzw. die DB räumt überflüssige Leerzeichen automatisch auf. Beispiel:

<source lang="sql">
SELECT exp.*,
cty.city AS city_name
FROM tl_immo_expose AS exp,
tl_immo_city AS cty
WHERE exp.city = cty.id
AND object_category = ?
AND object_status = ?
AND object_type LIKE ?
AND cty.city LIKE ?
ORDER BY rooms ASC,
stories ASC
</source>

ist lesbar und halbwegs nachvollziehbar, jedoch das gleiche Statement auf einer einzigen Zeile (mit mehr als 220 Zeichen) ist nicht mehr wartbar:

<source lang="sql">
SELECT exp.*,cty.city AS city_name FROM tl_immo_expose AS exp,tl_immo_city AS cty WHERE exp.city = cty.id AND object_category = ? AND object_status = ? AND object_type LIKE ? AND cty.city LIKE ? ORDER BY rooms ASC,stories ASC
</source>

Wartungsmodus mit exclusiven Zugriff

2011-05-31T00:59:10Z

Deerwood: PHP Code vor jede Ausgabe verschoben, weil ein Cookie Header sendet. Andere Kleinigkeiten.

[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]{{AppliesTo
|TLVersion=ab 2.7
|Version=ab 2.9
}}
Diese Anleitung beschreibt, wie man einen Wartungsmodus erstellt und trotzdem Kunden und sich selbst Zugang zur Seite bietet.

Befindet sich eine Seite online im Aufbau und ein Kunde soll sich Anpassungen anschauen können, jedoch normale Besucher und Suchmaschinen nicht, ist es durch diese kleinen Anpassungen möglich, dies zu verwirklichen.

Aufbau einer geheimen Landingpage, die ein Cookie im Browser setzt. Diese kann zusätzlich noch via htaccess-Passwort geschützt werden.

<source lang="php">
<?php setcookie('gesicherteSeite', 'halloWelt'); ?>
<html>

Ihr <a href="http://example.com">Zugang zu example.com</a> wurde gewaehrt!
Sobald Sie Ihren Browser schliessen, sind Sie wieder abgemeldet.

</html>
</source>

Man kann dem Kunden nun diesen Link mitteilen. Wird diese Seite dann aufgerufen, wird ein Cookie im Browser gesetzt.

Jetzt nur noch in der fe_page.tpl eine kleine Anpassung in der ersten Zeile:

<source lang="php">
<?php if ($_COOKIE["gesicherteSeite"] != "halloWelt") $this->redirect("http://www.contao.org"); ?>
</source>

Somit wird beim Aufruf der eigentlichen Webseite (des Frontends) kontrolliert, ob das Cookie gesetzt ist. Wenn ja, geht alles normal weiter und der Kunde kann die normale Webseite sehen. Ist das Cookie nicht vorhanden, wird direkt auf eine andere Seite umgeleitet, in diesem Falle auf contao.org. Das Backend ist unbetroffen ... bis man die Frontend-Vorschau aufruft, dann muß ebenfalls das Cookie gesetzt sein.

{{msgInfo|Das Cookie sollte auch noch die Domain enthalten (damit das Cookie garantiert nur an die zu schützende Domain example.com geliefert wird) und es könnte auch eine Verfallszeit haben. Dies ist hier nicht gezeigt. Nachzulesen hier : http://php.net/manual/de/function.setcookie.php}}

Code Styleguide

2010-06-21T04:13:40Z

Deerwood: Abschnitt zur Zeilenlänge begonnen

{{stub}}

Diese Seite soll einen allgemeinen Styleguide für Entwicklung von Contao Extensions darstellen.
Die hier gemachten Angaben entstanden aus der Auswertung des Contao Core, erheben jedoch keinen Anspruch auf Vollständigkeit, Richtigkeit oder gar Übereinstimmung mit den Ansichten des Core Entwicklers Leo Feyer.

==Dateien==
===Dateinamen===
In jeder Datei sollte nur eine Klasse enthalten sein. Ausgenommen sind Hilfsklassen, die nur von der einen Klasse aufgerufen werden, oder deren Aufruf die Einbindung der einen Klasse voraussetzt (siehe [[Database]], [[Database_Statement]], [[Database_Result]]).

Der Dateiname muss, damit die Klasse automatisch geladen werden kann (siehe [[Autoloader]]), gleich wie der Klassenname sein. Gross- und Kleinschreibung muss beachtet werden, da ansonsten auf Unix-/Linux-Servern die Klasse nicht gefunden werden kann.

Der Klassenname sollte, sofern er aus mehreren Worten besteht, in lower [[w:de:CamelCase|CamelCase]] geschrieben werden.

===Header===
In jeder Datei sollte oben ein Header enthalten sein, welcher mindestens folgende Informationen beinhalten sollte:
* die Lizenz, unter deren der Code veröffentlicht wurde.
* der Name des Autors.
* ggf. der Name der Firma, für welche der Code geschrieben wurde und deren geistiges Eigentum er somit ist.
* das Paket, zu welchem die Datei gehört.

Diese Informationen sollten bestenfalls in [[w:de:PhpDocumentor|PhpDocumentor Notation]] vorgenommen werden.
Beispiel:
/**
* Contao Open Source CMS
* Copyright (C) 2005-2010 Leo Feyer
*
* This program is free software: you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation, either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this program. If not, please visit the Free
* Software Foundation website at <http://www.gnu.org/licenses/>.
*
* PHP version 5
* @copyright Some Company 2010
* @author Max Mustercoder <mustercoder@somedomain.tld>
* @package RealCoolExtension
* @license LGPL
* @filesource
*/

==Code==

===Einrückung===
In Contao werden zum Einrücken von Code in der Regel normale TABulatoren (ASCII 0x09) und keine Leerzeichen verwendet. Eine Ausnahme hiervon stellen Einrückungen von zwei bis drei Leerzeichen dar, welche zur Formatierung von beispielsweise Datenbankabfragen eingefügt werden können.

===Klammerung, Leerzeichen und Kommata===
In Contao werden geschweifte Klammern grundsätzlich auf eine neue Zeile geschoben. Nach öffnenden und schließenden runden Klammern wird kein Leerzeichen geschrieben. Nach einem Komma und Schleifen-Schlüsselwörtern (if, while, for, foreach) wird ein Leerzeichen eingefügt.

Beispiel:
public function somefunction($param)
{
if ($param=='foo')
{
// do something
}
else
{
// do something else
}
}

===Leerzeilen===
Leerzeilen sollten verwendet werden um logische Codeabschnitte zu gruppieren. Leerzeilen sollten von allen Tabulator- und Leerzeichen bereinigt werden und wirkliche Leerzeilen sein.

Nach einer Funktion (bzw. Methode) sollte mindestens eine Leerzeile folgen.

===Zeilenlänge===
Abweichend vom Contao Core sollte Code in Erweiterungen so geschrieben werden, dass er möglichst auf einen Blick sichtbar und damit wartbar ist, insbesondere sollte es nur in Ausnahmefällen nötig sein, horizontal zu rollen. Eine feste Maximal-Breite kann nicht sinnvoll definiert werden, weil das von zu vielen Dingen abhängt (verfügbare Pixel des Bildschirms, Größe der Schrift, Komplexität und Einrücktiefe des Codes). Dennoch kann man sich an der Lesbarkeit/Erfassbarkeit für Menschen orientieren (60-80 Zeichen/Zeile). Das ist verflixt wenig ... und kann nicht immer eingehalten werden. Jedoch erlauben sowohl PHP wie auch SQL Zeilen-Umbrüche, so dass man z.B. ein komplexes IF Statement auf mehrere kurze Zeilen verteilen kann (Beispiel folgt). Bei SQL Statements (im Core durchgängig auf einer Zeile mit teilweise mehreren hundert Zeichen) kann man den Query-String ohne weiteres auf mehrere Zeilen verteilen und damit erheblich leichter verständlich machen ... die Klasse "Database" bzw. die DB räumt überflüssige Leerzeichen automatisch auf. Beispiel:

SELECT exp.*,
cty.city AS city_name
FROM tl_immo_expose AS exp,
tl_immo_city AS cty
WHERE exp.city = cty.id
AND object_category = ?
AND object_status = ?
AND object_type LIKE ?
AND cty.city LIKE ?
ORDER BY rooms ASC,
stories ASC

ist lesbar und halbwegs nachvollziehbar, jedoch das gleiche Statement auf einer einzigen Zeile (mit mehr als 220 Zeichen) ist nicht mehr wartbar:

SELECT exp.*,cty.city AS city_name FROM tl_immo_expose AS exp,tl_immo_city AS cty WHERE exp.city = cty.id AND object_category = ? AND object_status = ? AND object_type LIKE ? AND cty.city LIKE ? ORDER BY rooms ASC,stories ASC