What would be the easiest way to add JS?

hrvoje_hr

I tried to search the forums but didn't find anything helpful.

I would like to hide a few simple elements of the BYOBU extension with JS to get it closer with this suggestion, but failing to do that. I know I can easily hide elements with CSS, but I want to hide them only on specific page. Normally I would put it in the head, but that doesn't work with Flarum. Although my JS solution works via console.

Is there any simple solution without editing or creating a new extension to add Java Script to edit modify any part of Flarum?

[deleted]

hrvoje_hr Have a look at leveraging extend.php in the flarum root folder.

hrvoje_hr

[deleted] if you did it can you give me an example of yours? I tried with that file but can't get it to work.

[deleted]

hrvoje_hr Have a look at this - I don't modify java, but you should be able to gain some insight

<?php
use Flarum\Extend;
use Flarum\Frontend\Document;

return [
    (new Extend\Frontend('forum'))
        ->content(function (Document $document) {
        $document->meta['theme-color'] = '#12171a';
    })
];

extend.php

UntrustableRus

It’s way easier than doing the above.
You can add a <script> in the header or footer and write javascript in there.

hrvoje_hr

UntrustableRus, unfortunately, that doesn't work for me for some reason.

[deleted]

UntrustableRus Yes, but that doesn't work in most cases as it's issued after <head>

hrvoje_hr

Can someone help with this and show some kind of example of how to add simple javascript to Flarum? I'm stuck. Can't/don't know how to accomplish it trough extend.php

Let's just try with the simple code below for an example.

$("nav.IndexPage-nav.sideNav").css("display","none");

How can we accomplish it?

clarkwinkelmann

hrvoje_hr in this case it's probably not so simple, because you likely need to run this code after the IndexPage component is rendered. Which means using the extension API to extend the component itself and add something to its config method.

Can't you achieve that just via CSS ?

For more complex logic that needs to run after a component was rendered, something like this can be used in an extension javascript:

import { extend } from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';

app.initializers.add('your-extension-namespace', () => {
    extend(IndexPage.prototype, 'config', function (isInitialized) {
        if (isInitialized) {
            return;
        }

        // Do your thing
    });
});

I have shared how to run that same code without pre-compilation somewhere, but I can't find the link again. It's somewhere on the forum though. It sacrifices readability but can be injected in the footer.

hrvoje_hr

clarkwinkelmann Can't you achieve that just via CSS ?

I can, but it was just an example, not something I want really to do. I appreciate your help, but it seems too complicated for me.

I found that I can include any JS in /public/assets/forum-(some-num-lett).js file and it works.

In my case, that's forum-5062aaf8.js file. Is that some kind of a randomly generated file that changes over time?

clarkwinkelmann

hrvoje_hr this file will be re-created each time you or an extension clears the cache, as well as anytime you enable or disable an extension.

There shouldn't be any functional difference between adding code to the js file or adding it in the footer in a script tag. With the difference being that the script tag won't be overwritten by Flarum.