Using bootstrap components?

Ser5

I'm completely puzzled with working with built-in Bootstrap.

As I can see, Flarum already includes Bootstrap of version 3.4.1, one with JQuery.

But when I use

$('.foo').modal('show');

I get an error $(...).modal is not a function, despite $('.foo') does exist.

What is the correct way?

I also tried to add Bootstrap 5.3.3 to my package. But when I try to include it, existing jQuery breaks with error TypeError: No method named "destroy", as Bootstrap 5.3.3 eagerly injects itself into jQuery, and I can't figure out how to disable this.

clarkwinkelmann

Flarum only includes a subset of Bootstrap javascript. I'm not sure it's possible to include more without breaking things.

If you want to create modals, you should use the Flarum ModalManager API though.

Ser5

clarkwinkelmann I looked inside the jQuery element object, and weirdly it doesn't have any Bootstrap methods.

Ser5

clarkwinkelmann , Justoverclock Guys can you please look at https://discuss.flarum.org/d/36700-webpack-imported-module-2-defaulta-is-undefined , I'm totally stuck with modals. I can't figure out how to add custom html, nor use built-in Bootstrap, nor external Bootstrap, nor app.modal.

Justoverclock

and also, jquery will become deprecated very soon so you should avoid using it.

Ser5

Justoverclock Oh, jQuery isn't going to die, it's still popular. In regard to Flarum, it uses Bootstrap 3, which in turn uses jQuery, so I can't avoid it when dealing with Flarum.

Ser5

I have managed to connect external Bootstrap of version 5.3.3 into my extension. More or less.

extend.php:

<?php
// ...

return [
    (new Extend\Frontend('forum'))
        ->content(function (Document $document) use ($htmlParts) {
            $document->head = [
                '<link rel="stylesheet" href="/flarum/assets/css/lib/bootstrap/bootstrap.css">',
            ];
            $document->foot = [
                // Prevent Bootstrap to inject itself into jQuery.
                // Can't be written in <head>, as document.body isn't available there.
                "<script>document.body.dataset.bsNoJquery = '';</script>",
                // Bootstrap itself, can't be written in <head> because must be after setting data-bs-no-jquery
                '<script src="/flarum/assets/js/lib/bootstrap/bootstrap.bundle.min.js" defer></script>',
            ];
        }),
];

Alternative solution is to hack into bootstrap.bundle.js and comment out search for jQuery:

  const getjQuery = () => {
    //if (window.jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
    //  return window.jQuery;
    //}

    return null;
  };

Then Bootstrap can be included in the head, and without setting data-bs-no-jquery.

I put JS and CSS files directly into /assets/ folder. I tried to add the CSS via standard way:

(new Extend\Frontend('forum'))->css(__DIR__.'/css/lib/bootstrap.css'),

But didn't succeed, as I'm getting an error: error evaluating functionrgbacolor functions take numbers as parameters index. It's might be because of outdated LESS version of Flarum.

Before I could use bootstrap.css I had to tediously replace 5.3.3 CSS classes to prevent clashes with the existing styles, like converting classes from .modal to .bs-modal.

And finally I'm able to call:

let modal = new bootstrap.Modal('[data-js-foobar]');
modal.show();

Fortunately, this is not a public extension, it's for a local project, so I can kinda live with this loopy approach. Currently I don't know more correct soultions anyway.