Check to ensure auto-indicators are still working on Bootstrap carousels

[chrisblakley]

The auto-indicators don't appear to be working anymore: https://nebula.gearside.com/examples/bootstrap-carousel/

But also add the code to the documentation page itself if feasible.

[chrisblakley]

This was because the initBootstrapFunctions() was getting called before Bootstrap was defined, so it never actually initialized any of the Nebula Bootstrap helpers.

So, the only solution I could think of tonight is a terrible monstrosity...

nebula.js DOM Ready:

//This seems so hacky... but need to wait until Bootstrap JS is ready, and has to be in DOM ready
if ( typeof bootstrap !== 'undefined' ){
    nebula.initBootstrapFunctions(); //Must be in DOM ready
} else {
    setTimeout(function(){ //This is the hacky part...
        nebula.initBootstrapFunctions(); //Must be in DOM ready
    }, 1000);
}

I scoured the Bootstrap JS to see if it dispatched an event that I could listen for when it was ready, but I don't see one...

Open to ideas on this...

[chrisblakley]

Found a great solution here- even better than we were originally doing it.

Bootstrap JS was always conditionally loaded– only if the page contained an element that required Bootstrap JS (otherwise it never loaded the asset). Using Nebula's loadJS() function, I added a callback parameter (instead of messing with the trigger handle names) which now calls the initBootstrapFunctions().

Here's how that looks now:

if ( jQuery('.offcanvas, .accordion, .alert, .carousel, .collapse, .dropdown-menu, .modal, .nav-tabs, .nav-pills, [data-bs-toggle]').length ){
    nebula.loadJS(nebula.site.resources.scripts['nebula_bootstrap'], false, function(){
        nebula.initBootstrapFunctions(); //Initialize Nebula Bootstrap helper functionality
    }); //Load Bootstrap JS
}

So the above hack has been removed and this is never called from nebula.js anymore.