Are the bootstrap scripts included so that collapse.js can be run for navbar collapse etc?
7sharp9 opened this issue · comments
I did not include the Bootstrap-related JS, because at that point you also need jQuery loaded, etc. I added it for styling only. If you want to interface with JS, it should be possible in Elm, but I don't have any experience with it -- see http://guide.elm-lang.org/interop/javascript.html
To include the above JS dependencies, I believe this will do it:
Add jQuery module to the project:
npm i jquery --save
Then, in src/index.js, before requiring Elm, add:
require( './styles/main.scss' );
var $ = jQuery = require( '../node_modules/jquery/dist/jquery.js' ); // <---
require( '../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js' ); // <---
Let me know how it goes!
I will give it a go, the bootstrap-sass webpack plugin advises to do this similarly too:
{ test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' }
Which imports jquery as a dependency then all the bootstrap scripts like collapse.js
@moarwick You don't need to interface with JS as such just place a few attributes on the div with the navbar-toggleclass. Then when the app is displayed on a mobile you can expand the menu rather than it being permanently closed :-)
Just to report back,
require( './styles/main.scss' );
var $ = jQuery = require( '../node_modules/jquery/dist/jquery.js' );
require( '../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js' );
Works a treat!
What I meant earlier is that if you had used https://github.com/shakacode/bootstrap-loader then including the JS is done with:
{ test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' }
Cool, but perhaps the loader method you suggest is a more "correct" solution? If you are interested in submitting a PR, I'm happy to merge your contribution into the next version :)
P.S. Curious if it's possible to explicitly trigger things like BS modals from within Elm..
@moarwick I tried but it didn't seem to work too well, far simpler just to add the two require statements.
I wonder if's worth trying out bootstrap4 too?
Updated the repo, now the JS is included. Wrt BS4, don't think it's officially out yet, still alpha? Anyway, will leave that one to you -- PRs welcome any time :)
BS4 is a little flaky I managed to hack it together but I don't think its PR worthy, probably better to wait until bootstrap-loader plugin works properly.
I tried to use purifycss etc to get my css size down a bit but only managed to squeeze a little. Same with js size cant seem to get it lower than ~250k.