JavaScript

Mit der Version 5 wurde jQuery aus den Abhängigkeiten von Bootstrap entfernt!

 

Die EXT:t3sbootstrap benötigt ab Version 5, zum größten Teil nur Vanilla-JS.
Bei der Nutzung Bootstrap fremder Komponenten, wird jedoch weiterhin jQuery benötigt!

Hier ist  auf folgenden Seiten jQuery im Einsatz:

Ab v5.1.0 ist jQuery standardmäßig deaktiviert!
Mit folgender Konstante, kannst du jQuery für einzelne Seiten aktivieren:

[page["uid"] in [32,53,82,104,145]]
bootstrap.disable.jquery = 0
[END]

 

Es ist wichtig, Javascript Funktionen erst zu laden, wenn das DOM (Document Object Model) vollständig geladen ist.

Hierfür gibt es die Document-ready-Funktion:

// für jQuery
$(function() {
  /* ... */
  });

// für Vanilla JS
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
  }
ready(() => {
  /* ... */
  });

 

Wenn du z.B. ein Fluid-Template ausgelagert hast und hier zusätzlichen Code benötigst, kannst du mit dem Asset ViewHelpers JavaScript und CSS inline oder als externe Datei einbinden:

// für jQuery
<f:asset.script identifier="custom-script">
  /* ... */
</f:asset.script>

// für Vanilla JS
<f:asset.script identifier="vanilla_custom-script">
  /* ... */
</f:asset.script>

Entscheidend ist der Identifier für Vanilla JS:
... identifier="vanilla_custom-script"

Somit wird dein Code automatisch in die entsprechende Document-ready-Funktion eingebunden!

Introduce AssetCollector