JavaScript-Bibliotheken

    Das Bakehouse integriert standardmäßig mehrere JavaScript-Bibliotheken, um eine effizientere Programmierung zu ermöglichen.

    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.

    Mehr zum neuen Bakehouse Datepicker

    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(); });

    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="uploads/tx_bh/{item.firstpicture.file}" 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. Das Observer-Objekt kann im JavaScript mit Bh.plugins.intersectionObserver aufgerufen/bearbeitet 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.