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

    Fader-Plugin

    Das Fader-Plugin wird für das native Bakehouse-Fader-Element benötigt.

    Um das jQuery-Plugin und das zugehörige CSS  in eigenen Elementen oder in Extension-Templates zu verwenden, muss folgendes beachtet werden:

    CSS - folgende Klassen müssen verwendet werden

    • .fadeContainer – für den Außencontainer
    • .fadeContainerInner – für den Innencontainer
    • .fadeItem – für jedes einzelne Element innerhalb eines Containers

    HTML-Attribute für das Element mit der Klasse .fadeContainer

    • data-effect – ['fadeEffect','slideEffect']
    • data-rotations – [-1,0,1,2,...] – (-1 = unendlich, 0 = nie)
    • data-height – [int[px]] – Höhe des Containers und der einzelnen Elemente
    • data-duration – [int] – (Wert in Millisekunden) 

    Subplugins

    • cssFaderArrows() – initialisiert eine Navigation, um zwischen den Elementen zu wechseln
    • cssFaderMenuPoints() – initialisiert einen Verlaufsindikator, welcher üblicherweise die Anzahl der Folien als horizontale Punktreihe repräsentiert, wobei die aktive Folie hervorgehoben wird

    Beispiel:

    Javascript
    $(document).ready(function(){ // Aufrufen des Faders inkl. Subplugins $('.fadeContainer').cssFader({ items : '.fadeItem', view : '.fadeContainerInner' }).cssFaderArrows() .cssFaderMenuPoint({ items : '.fadeItem', view : '.fadeContainerInner' }); });

    Template:

    HTML
    <div id="MyNewsList"> <div class="fadeContainer" data-effect="slideEffect" data-rotations="0" data-height="350" > <div class="fadeContainerInner" > <f:for each="{items}" as="newsitem" > <div class="fadeItem"> <a class="newsbox" href='<f:uri.action action="detail" arguments="{item:newsitem}" />'> <div class="newsbox_headline"> {newsitem.headline} </div> <div class="newsbox_pic"> <f:image src="uploads/tx_bh/{newsitem.firstpicture.file}" alt="{newsitem.headline}" width="190c" height="110c" /> </div> <div class="newsbox_text"> <f:format.html><f:format.crop maxCharacters="140" append="...">{newsitem.text}</f:format.crop></f:format.html> </div> </a> </div> </f:for> </div> </div> </div>

    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)

    Die Auswahl eines Datum-Werts ist mit Datepicker-Widget von jQuery leicht möglich. Dabei muss nur die CSS-Klasse bh-datepicker auf den Container eines Input-Felds gelegt werden.

    HTML
    <div class="bh-form-field bh-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-doupletap 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(); });

    TinyMCE

    Das Editieren von Texten und Inhalten wird im Bakehouse mit dem WYSIWYG HTML Editor TinyMCE sichergestellt. Details zum Bakehouse Text-Editor findest du hier.