JavaScript-Bibliotheken
jQuery
Das Bakehouse liefert jQuery inklusive eigener und externer Plugins mit, die einerseits bereits für bestehende Content-Elemente verwendet werden, jedoch auch für eigene Elemente oder Extension-Templates zur Verfügung stehen.
Plugin Callback-Stack
In der page Datei EXT:bh/Resources/Public/Js/base.js befindet sich ein Callback-Stack. Darin werden gängige JavaScript-Plugins für Bakehouse-Content-Elemente aufgerufen. Der Callback-Stack stellt sicher, das Bakehouse-Features wie etwa Fader, Mediabox oder Accordion nicht nur nach einem Seiten-Refresh, sondern bereits bei der Erstellung im Front-End durch den Benutzer sofort initialisieren.
Mit dem Callback-Stack ist auch die Möglichkeit gegeben, andere jQuery-Plugins oder JavaScripts für Elemente zu verwenden:
Wird ein Projekt nicht vollresponsive umgesetzt, sondern greift rein auf die Bakehouse Mobilversion zurück, steht der Callback-Stack nicht zur Verfügung. Es empfiehlt sich daher vorher zu prüfen, ob die Funktion zur Verfügung steht (im Beispiel unten angegeben).
Javascript
// my local script
// Bsp.: Eigenes Accordion-Verhalten für Accordion-Elemente verwenden
Bh.plugins.callbackStack.accordeon = function(){
$('.bhAccordeonItem').myAccordeonPlugin();
}
// Bsp.: Eigene Mediabox für Bilder verwenden
Bh.plugins.callbackStack.mediabox = function(){
$('a[target="lightbox"]').otherMediaboxPlugin();
}
// Bsp.: jQuery-Datepicker deaktivieren
Bh.plugins.callbackStack.datepicker = function(){};
// Prüfung ob der Callback-Stack verfügbar ist.
// Wenn dies nicht der Fall ist, im else aufrufen
$(document).ready(function(){
if( Bh.plugins && Bh.plugins.callbackStack ){
Bh.plugins.callbackStack.myFunction = function () {
// Funktion
}
} else {
// Funktion
}
});
Swiper API
Um im Bakehouse Swiper zu realisieren, wird auf die bewährte swiper.js-Bibliothek zurückgegriffen. Eine zeitsparende und zuverlässige Anwendung erreicht man mittels dem bh:swiper-Viewhelper.
Accordion-Plugin
Verwendung für eigene Elemente oder Extension-Templates
Plugin-Settings
- speed – [int] – Geschwindigkeit der Öffnungs-Animation
- startAnimation – [true,false] – Animation beim Initialisieren
- item – [selector]
- toggler – [selector]
- element – [selector]
- inner – [selector]
- active – [CSS-class] (ohne Punkt)
- forceOpen – [true,false] – stellt sicher, dass immer minimum ein Element geöffnet ist
- multiOpen – [true,false] – mehrere Elemente dürfen geöffnet sein
- firstOpen – [true,false] – öffnet beim Initialisieren das erste Element
Beispiel 1:
Javascript
//my local script
$(document).ready(function(){
$('.myAccordeonContainer').accordion({
item : '.myAccordeonItem',
toggler : '.my-accordion-toggler',
element : '.my-accordion-element',
inner : '.my-accordion-element-inner',
active : 'my-accordion-active',
});
});
Beispiel 2:
Verhalten des Bakehouse-Accordion-Elements manipulieren
Javascript
//my local script
Bh.plugins.callbackStack.accordion = function(){
$('.bhContainer:has(.bhAccordeonItem)').accordion({
speed : 1000,
forceOpen : false,
multiOpen : true
});
};
Datepicker-Plugin (deprecated)
Achtung
Neuer Datepicker-ViewHelper verfügbar!
Der JQuery-Datepicker wird nicht mehr unterstützt. Als neue Alternative kann der bh:form.datepicker-ViewHelper verwendet werden.
Die Auswahl eines Datum-Werts ist mit Datepicker-Widget von jQuery leicht möglich. Dabei muss nur die CSS-Klasse bh-deprecated-datepicker auf den Container eines Input-Felds gelegt werden.
HTML
<div class="bh-form-field bh-deprecated-datepicker">
<f:form.textfield id="input-anreise" name="anreise" value="{request.anreise}" />
</div>
doubleTapToGo-Plugin
Projekte besitzen mitunter Navigationsstrukturen und Interaktions-Elemente mit :hover Funktionalität. Für Touch-Geräte wird diese Hover-Funktion mit der Klasse bh-doubletap simuliert. Wird der Container einer Navigation mit dieser Klasse belegt, werden auf Touch-Geräten bei der ersten Berührung Klassen mit :hover angezeigt.
Wird diese Funktion außerhalb von Navigationen benötigt, wird folgendes JavaScript angewendet, um direkt die DoubleTapToGo.js anzusprechen:
Javascript
$(document).ready(function() {
$('.meineKlasse').doubleTapToGo();
});
Lightbox-Plugin
Das Bakehouse liefert werksseitig die JavaScript-Lightbox-Library fancybox aus. Im Standardverhalten werden alle Elemente mit dem a-Tag-Attribut target="lightbox" in der Navigation der geöffneten Lightbox berücksichtigt. Alternativ können Elemente innerhalb von Lightbox-Gruppen zusammengefasst werden. Dadurch wird nur durch Elemente geschalten, die sich innerhalb der Klasse lightboxgroup befinden.
HTML
<a href="{item.firstpicture.relativeFile}" target="lightbox">
<bh:image.background file="{item.firstpicture}">
</bh:image.background>
</a>
Inview-Plugin und Observer
Inview-Plugin (deprecated)
Durch das Inview-Plugin wir das inview-Event hinzugefügt. Dieses Plugin wird vom Bakehouse mitgeliefert, aber nicht automatisch eingebunden. Für den Aufruf kann folgender TypoScript-Code verwendet werden:
Typoscript
page.includeJS.inview = EXT:bh/Resources/Public/Js/inview.min.js
Beispiel für Implementierung:
Javascript
/* ----- INVIEW CHECK ----- */
$(function () {
$("[class*='fade-']").on('inview', function(event, visible, visiblePart, visiblePartY) {
if ( visible && ( visiblePartY == "both" || visiblePartY == "top") ) {
$(this).addClass('inviewactive');
} else {
if ($(this).hasClass('inviewstay')) {
} else {
$(this).removeClass('inviewactive');
}
}
});
})
/* ----- INVIEW CALLBACKSTACK ----- */
Bh.plugins.callbackStack.inview = function(){
$("[class*='fade-']").off('inview').on('inview', function(event, visible, visiblePartX, visiblePartY) {
if ( visible && ( visiblePartY == "both" || visiblePartY == "top") ) {
$(this).addClass('inviewactive');
} else {
if ($(this).hasClass('inviewstay')) {
} else {
$(this).removeClass('inviewactive');
}
}
});
}
Als moderne Alternative zum Inview-Plugin stellt das Bakehouse ein IntersectionObserver-Script bereit, welches mit der CSS-Klasse bh-js-inview verwendet werden kann. Sobald ein DOM-Element mit dieser Klasse in den angezeigten Bereich der Seite scrolled, wird das data-bh-inview-Attribut auf true gesetzt und das bh-inview-Event ausgelöst. Beim ersten Erscheinen wird auch noch zusätzlich das bh-inview-once-Event getriggert. Das Observer-Objekt kann im JavaScript mit Bh.plugins.intersectionObserver aufgerufen werden.
Das (dynamische) Verändern der options ist zurzeit durch die API aber leider nicht möglich. Der im Bakehouse mitgelieferte IntersectionObserver kann mit der disconnect() Methode gestoppt werden.
Die CSS-Konfiguration für den Fade-In-Effekt aus verschiedenen Richtungen könnte wie folgt aussehen:
CSS
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-top,
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-right,
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-bottom,
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-left,
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-zoom {
opacity: 0;
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-top {
top: -100px;
}
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-right {
left: 100px;
}
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-bottom {
top: 100px;
}
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-left {
left: -100px;
}
body:not(.bhe-state-editing) .bh-js-inview.bh-animation-zoom {
transform: scale(0.8);
}
body:not(.bhe-state-editing) .bh-js-inview[data-bh-inview="true"] {
opacity: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale(1);
}
Werden IntersectionObserver vom verwendeten Browser nicht unterstützt, wird das data-bh-inview bei allen Elementen auf true gesetzt und die Klasse bh-js-inview--not-supported auf den <body> gelegt.