Accordion: 4 Feature für Contao 4 - scroll, open, track
Update 16.08.2022
Slashes '/' in Hashes '#' werden jetzt maskiert. Post#18
Contao 3 Template entfernt.
Hier mal ein Template für's jQuery Accordion mit diesen 4 Features.
1. Tracking des Öffnens eines Accordions mit Matomo (Piwik). (deaktiviert)
2. Scrolle das geöffnete Accordion nach oben. Der Abstand von oben kann noch justiert werden, wenn man z.B. einen fixierten Header hat. Die Höhe eines einzelnen geschlossenen Accordions ist schon mit dazugegeben, sodass nicht ganz nach oben gescrollt wird, sondern ein geschlossenes Accordion darüber noch angezeigt wird.
Code:
...$('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);...
Zusätzlich die Höhe eines Headers abziehen ginge in etwa so
Code:
...
var
...,
headerHeight = $('#header').height() || 0
;
... previousAccordionMarginBottom - 5 - headerHeight}, 300);
...
3. Öffnen eines Accordions wenn die Seite geladen wird. Wenn ein Accordion selber (SECTION) oder ein Child eine ID besitzt, welche dem Hash der URL entspricht, wird dieses Accordion geöffnet und nach oben gescrollt.
Code:
Example URL:
https://example.org/foo.html#idWithinAccordion
4. Suche nach Links auf der Seite, welche ein bestimmtes Accordion öffnen können. Funktioniert so wie bei Punkt 3.
HTML-Code:
<a href="foo.html#idWithinAccordion">Open accordion with ID "idWithinAccordion"</a>
Die Feature sind einzelne Blöcke, welche ins originale Template an den entsprechenden Stellen eingefügt wurden (siehe Kommentare im Template).
Contao 4.9 und 4.13
HTML-Code:
<!-- Contao 4.9 und 4.13 j_accordion.html5 -->
<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
jQuery(function($) {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: '.toggler',
collapsible: true,
create: function(event, ui) {
ui.header.addClass('active');
$('.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('.toggler').attr('tabindex', 0);
/** Matomo (Piwik) accordion tracking *
//console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
if(ui.newHeader.length > 0) {
_paq.push(['trackEvent', 'Akkordeon', ui.newHeader[0].innerText]);
}
/** Matomo (Piwik) accordion tracking - END */
/** Scroll active accordion to top */
if(ui.newHeader.length > 0) {
var
previousTogglerHeight = ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').find('.toggler').outerHeight() || 0,
previousAccordionMarginBottom = parseInt(ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').css('margin-bottom')) || 0
;
if(previousTogglerHeight)
{
$('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
}
}
/** Scroll active accordion to top - END */
}
});
/**
* On page load
*
* Scroll to an accordion and open it if URL hash matches an ID within an accordion
*/
var targetToggler = $(document.location.hash.replace(/\//gi, '\\/')).closest('.ce_accordion').find('.toggler');
if(targetToggler.length) {
$(document).accordion('option', 'active', $('.toggler').index(targetToggler));
}
/** On page load - END */
/**
* On link click
*
* Scroll to an accordion and open it if a link hash matches an ID within an accordion
*/
$('a').each(function() {
var hash = $(this).prop('hash').replace(/\//gi, '\\/');
if(hash) {
var targetToggler = $(hash).closest('.ce_accordion').find('.toggler');
if(targetToggler.length) {
$(this).click(function() {
$(document).accordion('option', 'active', $('.toggler').index(targetToggler));
});
}
}
});
/** On link click - END */
});
</script>
ps Leider gibt es keinen passenden Syntax-Highlighter hier im Forum. Mit nem guten Highlighting ist das Template übersichtlicher. Deswegen hier nochmal ne einzelne Auflistung zur besseren Analyse.
Originales Template:
PHP-Code:
<!-- Contao 4.9 und 4.13 j_accordion.html5 -->
<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
jQuery(function($) {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: '.toggler',
collapsible: true,
create: function(event, ui) {
ui.header.addClass('active');
$('.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('.toggler').attr('tabindex', 0);
Matomo (Piwik):
PHP-Code:
/** Matomo (Piwik) accordion tracking */
//console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
if(ui.newHeader.length > 0) {
_paq.push(['trackEvent', 'Akkordeon', ui.newHeader[0].innerText]);
}
/** Matomo (Piwik) accordion tracking - END */
Scroll:
PHP-Code:
/** Scroll active accordion to top */
if(ui.newHeader.length > 0) {
var
previousTogglerHeight = ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').find('.toggler').outerHeight() || 0,
previousAccordionMarginBottom = parseInt(ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').css('margin-bottom')) || 0
;
if(previousTogglerHeight)
{
$('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
}
}
/** Scroll active accordion to top - END */
Originales Template:
Page load:
PHP-Code:
/**
* On page load
*
* Scroll to an accordion and open it if URL hash matches an ID within an accordion
*/
var targetToggler = $(document.location.hash.replace(/\//gi, '\\/')).closest('.ce_accordion').find('.toggler');
if(targetToggler.length) {
$(document).accordion('option', 'active', $('.toggler').index(targetToggler));
}
/** On page load - END */
On link click:
PHP-Code:
/**
* On link click
*
* Scroll to an accordion and open it if a link hash matches an ID within an accordion
*/
$('a').each(function() {
var hash = $(this).prop('hash').replace(/\//gi, '\\/');
if(hash) {
var targetToggler = $(hash).closest('.ce_accordion').find('.toggler');
if(targetToggler.length) {
$(this).click(function() {
$(document).accordion('option', 'active', $('.toggler').index(targetToggler));
});
}
}
});
/** On link click - END */
Originales Template:
ps Wenn ihr alle 4 Blöcke in euer Template einfügt, könnt ihr die einzelnen Blöcke auch deaktivieren indem ihr jeweils im ersten Kommentar-Block den letzten Slash entfernt. Siehe z.B. im kompletten Template, dort ist Matomo deaktiviert.
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
hpt
Link_Seite_Akkordeon#ui-id-1 -> Link auf Toggler (Einstieg auf das Akkordeon Element 1, inkl. Haeder)
Link_Seite_Akkordeon#ui-id-2 -> Link auf Acc (Direkteinstieg auf das Akkordeon 1)
Link_Seite_Akkordeon#ui-id-3 -> Link auf Toggler (Einstieg auf das Akkordeon Element 2, inkl. Header)
Link_Seite_Akkordeon#ui-id-4 -> Link auf Acc (Direkteinstieg auf das Akkordeon 2)
Link_Seite_Akkordeon#ui-id-5 -> Link auf Toggler (Einstieg auf das Akkordeon Element 3, inkl. Haeder)
Link_Seite_Akkordeon#ui-id-6 -> Link auf Acc (Direkteinstieg auf das Akkordeon 3)
Das habe ich wieder nicht verstanden, aber egal. Wo in einem Accordion sich die ID befindet ist egal, im SECTION, im header oder im Inhalt.
Die ID kannst du direkt im Inhaltselement eintragen. Am besten einfach mal die Augen aufmachen, sorry :D
Anhang 25223
