Javascript and Bootstrap 4

[schnuti]

Hi,
I didn't find an email so I ask here. I'm trying to implement Bootsrap 4 to Joomla 3.x on my personal site. What i don't know are the consequences for the Joomla built in Javascript. Is there a chance that it works as is?

As I understand you didn't solve the loading of javascript files. Joomla will load the files in a wrong order if an extension somewhere loads the bootstrap with JHtml::_('bootstrap.framework');
I made a dirty fix and added the theter.min.js code to jquery-noconflict.js to get this loaded before bootstrap. Needed for tooltips. The file overrides are in the templates js/ui directory.

I have come so far that one (1) page is showing almost correct. A modal is still malfunctioning.

What do you think?

[jwiesel]

Hi @schnuti,
Thanks for creating the first issue here :-)
We have created a plugin to avoid this conflict. You can find it here: https://github.com/sniggle/joomla-disable-jui-bootstrap
Just install and activate it. Then the internal jui bootstrap.js is not loaded anymore.
I will add this point to the documentation.
If you see other incompatibilities, just mention them in the issues section here. Then we can fix them.
Hope this helps!

[schnuti]

Hi,
I've used such a plugin in the past to remove all standard javascript loading and replace them with loading available CDN versions.
What I did now, is to use overrides to load the files from local server.

I do not know if your replacement is enough. Bootstrap 4 is officially using jQuery 3.1.1 - Joomla is on jQuery 1.12.4! Will the Joomla Javascripts run correct with the newer versions? I think some scripts use jQuery and some plain Javascript code. Some are also built on Bootstrap.

My wild guess is, that we have some problems with this. Overrides of Html code (generated by PHP) to replace used classes should be possible. One problem is though all form fields that generate old CSS classes. i.e. frontend editing of e.g. articles must probably still use a Bootstrap 2 template. (CSS classes are added in the forms XML files and hard to override as far as I know)

[jwiesel]

Hi,
the idea of the template and the plugin is to take care of everything to make bootstrap 4 work on your site.

Bootstrap 4 is compatible with the jQuery version shipped with Joomla 3. You can see the dependencies here: https://v4-alpha.getbootstrap.com/getting-started/javascript/#dependencies and here https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.5/bower.json. The minimal jQuery version required is 1.9.1. Therefore everything should just work if you install the template and plugin.

The template uses html overrides to make the Joomla frontend compatible to bootstrap 4. Right now we included overrides for different components and modules, (e.g. contact form). You can check them out here: https://github.com/sniggle/joomla-bootstrap4-template/tree/master/bootstrap4/html
If you are missing components, modules or other UI elements, which are not compatible with bootstrap 4, just let us know. We can then add them and provide a new version of the template.
Overriding form fields is difficult (as you described). Therefore we added a little piece of Javascript to add the missing classes for Boostrap 4: https://github.com/sniggle/joomla-bootstrap4-template/blob/master/bootstrap4/js/template.js

[schnuti]

Hi,
thanks for the detailed answer.
I'll try it with the older jQuery, maybe the modals then work. I don't think there is an example in Joomla core where a component frontend view is loaded into a Bootstrap modal. i.e. instead of using an iframe.

I can only use your template as a reference as I have my own overrides. e.g. instead of using the standard icons or fontawesome I'm experimenting with svg's. Easier to customize (modify) and a lot are available for free. Not yet possible to completely control with CSS as background images but I guess it will in near future.
example: I have a file including all svg icons with very compressed svg code, each with an id. See attached image.

For now I load the icons with something like this for the login module

<svg class="cb-icon">
<use xlink:href="<?php echo JUri::root(); ?>media/com_oejcb/images/svg/cb-icons.svg#cb-enter
</use>
</svg>

With classes like "cb-icon-enter cb-iconc-info" (or use of more specific CSS paths) I can control specific CSS and the color.

To enable the frontend article form to use Bootstrap 4 I'm sure, you'll need some a bit more complex Javascript.

I hope Joomla 4 comes soon or Joomla will loose a lot of interest.