Changing public/src/widgets.js

[shri]

I would like to change the behavior of public/src/widgets.js slightly ...

In particular, I want to change the column sizes. I prefer col-lg-8 on the content and col-lg-4 on the sidebar to allow us to use an appropriate sized banner.

Any ideas if this can be done with a plugin / hook or some sort of override?

if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) {
    $('#content > *').wrapAll($('<div class="row"><div class="col-lg-9 col-xs-12"></div><div widget-area="sidebar" class="col-lg-3 col-xs-12"></div></div></div>'));
}

[rbeer]

Well, I'd say: just do it.
As far as I can tell, it's not one of those files that are replaced on startup. Just make your changes.

Yep; I tested it. Any changes to the file (I assume all files in public/src/) are permanent. Of course, once you pull from the git-repository or do an npm update/rebuild/install, it might be updated with a newer version - given there is one.

[shri]

But does this mean that it becomes impossible to upgrade automatically with a git pull?

Was honestly hoping that the answer was creating a magical theme specific override ...

[rbeer]

Well, not impossible. But you would have to change the file again, afterwards.

You can get all hacky about it, though. Since all plugin JavaScript is compiled into the nodebb.min.js and then sent to the client, you can simply create a plugin, that's replacing the initial values.

(Not tested!)

if (location === 'sidebar' && $('#content [widget-area="sidebar"]').length) {
    $('#content [widget-area="sidebar"]').removeClass('col-lg-3').addClass('col-lg-4');
    $('#content [widget-area="sidebar"]').closest( '.col-lg-9' ).removeClass('col-lg-9').addClass('col-lg-8');
}

I'm not much of a jQuery fan, hence I'm absolutely not sure if all of this is correct. I'm off to work now, but can take a closer look later if you need help.

On a second thought: This might also be possible with custom CSS. I really haven't looked much into the client side of NodeBB.

[julian]

If you change the file, and then we change the file, if you git pull, git will complain and not do anything.

But that's git for you

Modify your workflow instead to be

$ git stash # temporarily undo your changes
$ git pull # ... etc etc
$ git stash pop # redo changes

[rbeer]

↑ What he said ↑

Loading yet another plugin for just those few lines seems like breaking a fly on a wheel.

[shri]

@rbeer and @julian thank you so much for the tips. Have ended up modifying the widget.js code.

[alfazaz]

Sorry for necromancy but I have exactly the same problem as @shri to change sidebar bootstrap properties...

With the latest nodebb version, do I need to do the same hack modifying directly the widget.js code ?