Adding JS just before </body>

SierraKiloGulf

Is there a way to add JS to the body just before </body>?

What I am trying to do is add a simple page loader, however because the JS will not inject it just loops instead of loading the page- I have tried with both the built in feature to add HTML, script and css and the abandoned Custom Header ext, both resulting in the same thing. I can do so manually if someone can point me in the right direction on where I would be able to insert my scripts

clarkwinkelmann

I'm not sure what you mean by "page loader", but if everything else fails maybe you could try injecting that script with an extension ? Good thing is you can even bundle it with other Flarum JS files.

Ralkage

You talking about changing the default spinner? Or just the entire page?

SierraKiloGulf

Ralkage The entire page

On one of my clients websites I designed a pageloader or pre-loader that displays a logo with some spinning circles, and will continue to display this until the page is fully loaded, and then will fade out and show the normal page. With flarum, it currently displays the loader when using the built in cutom HTML/CSS, but does not display the page as normal once fully loaded, so it is not using the JS I am trying to include.

Pace for example, would be a pageloader or preloader. I have also tried to use their JS and CSS in place of my own with no luck with what I am trying to achieve.
http://github.hubspot.com/pace/docs/welcome/

I will try to bundle with other flarum JS, which one would you recommend do so to @clarkwinkelmann

clarkwinkelmann

SierraKiloGulf I will try to bundle with other flarum JS, which one would you recommend do so to

I understand you're asking how you need to bundle your script ? The official doc should get you started http://flarum.org/docs/extend/start/ . There are also a few tutorials around here.

I'm wondering how that page loader works... It's probable it's messing up with Flarum single-page app. Ideally you should trigger whatever "loaded" event is needed by the loader from within a Flarum extension listening for the web app events.

brian85

Hello, I've tried this to put a PWA js on my flarum but it doesn't seems to work as for head html tag...

(new Extend\Frontend('forum'))
        ->content(function (Document $document) {
            $document->body[] = '
            <script type="text/javascript" src="/assets/webapp.js"></script>
            ';
        }),

cmcjacob

brian85 oops - my earlier response was meant for OP, I was confused by the bump 🤔 If you are having issues putting JS in the footer, can you describe the issue / reason you insist on extending document instead but of just using footer ? Seems to me you aren't handling a proper lifecycle / config for your custom js

clarkwinkelmann

brian85 is your custom HTML not being included in the page or is it included but with your "PWA" script not working or not producing the expected output ?

If this is the latter, I'll split this discussion as it would have nothing to do with adding javascript to the body.

brian85

Oh ok it could work simply this way ?

cmcjacob

Describe "doesn't seem to work" for those us that aren't remote screen/mind readers?

That assertion almost always comes with an error, and giving the error will be much more helpful to all parties be involved than secluding it / being vague. Pro Debug Tip; if I was vaguely posting in support, anyone could have known something wasn't working for me. Nobody knows why something fails until I post logs/info/etc. any context ? ..

cmcjacob

🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️

brian85

It's ok simply addin the js link at the bottom of the custom footer ! Nice ! My flarum forum is now à PWA ! YEAAH ! Thank you guys !