Smart Widgets

[Panda]

I have an idea for a smart Widget,

1. Without getting into the details of that yet, here is a more basic widget idea as an example.
   Lets say my html /js widget says
   ctx.fillText(“Hello”)
   Is there a global variable that the js can access to get say, current logged in name?
   So in this example, you could put
   ctx.fillText(“Hello”+userName) in the widget code.

2. I notice Sudonix has a Yellow box widget ‘Looks like your connection was lost…’
   What js command is used in the Widget to pick up when connection drops?

[phenomlab]

@Panda said in Smart Widgets:

Is there a global variable that the js can access to get say, current logged in name?
So in this example, you could put
ctx.fillText(“Hello”+userName) in the widget code.

Yes, if you visit this site on a desktop, you’ll see that there is a footer bar that uses this exact function to display the logged in username.

More detail here
https://sudonix.org/topic/314/bottom-footer-navbar-button-extend/17?_=1685477223864

I notice Sudonix has a Yellow box widget ‘Looks like your connection was lost…’
What js command is used in the Widget to pick up when connection drops

It’s a command from NodeBB core that uses socket.io

[Panda]

Thanks, I read through those posts. I tend to do more in js on canvas than CSS etc, and definitely dont want to use Jquery!
So in my simple ctx.fillText(‘name=’+ …
example what variable holds the username? Or is it more complicated than that?

[phenomlab]

@Panda said in Smart Widgets:

So in my simple ctx.fillText(‘name=’+ …
example what variable holds the username? Or is it more complicated than that?

You could expose it this way

    function updateUsername() {
        $('.getUsername .username').text(app.user.username);
        $('.topicUsername').text(app.user.username);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', updateUsername);
    } else {
        updateUsername();
    }

So in your use case, it would be

ctx.fillText('name='+app.user.username);

[phenomlab]

@Panda said in Smart Widgets:

definitely dont want to use Jquery!

Any specific reason for this?

[Panda]

I like to do things Vanilla unless there is real need for a library.
Thats what I most disliked about Nextjs, even a basic project starts with a directory full of autogenerated files, and I had so many times when nothing was working.
What would be the non-JQ way of doing this please?
$(‘.getUsername .username’).text(app.user.username);

chatgpt tells me
document.querySelector(‘.getUsername.username’).textContent=app.user.username

So that seems just as easy, so why use JQ?

[phenomlab]

@Panda said in Smart Widgets:

So that seems just as easy, so why use JQ?

Because the library is already loaded in NodeBB, and forms a major part of the platform.

What's next after v3?

@eeeee Hate to break it to you, but yes, jQuery is used in NodeBB. When we started NodeBB, the hard work to standardise and improve the JS ecosystem w...(more)

NodeBB Community

[Panda]

Thanks. it worked. Actually It turned out
ct1.fillText(app.user.username … etc
worked without even running that function to ‘expose it’
So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object?

[phenomlab]

@Panda said in Smart Widgets:

So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object?

It is, yes, but not if you are using it outside of a widget. The function I wrote is also historical and comes from the 2.x train