Skip to content

Smart Widgets

Solved Configure
  • 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?

  • @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

  • 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?

  • Pandaundefined Panda has marked this topic as solved on
  • @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);
    
  • @Panda said in Smart Widgets:

    definitely dont want to use Jquery!

    Any specific reason for this?

  • 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?

  • @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.

    https://community.nodebb.org/topic/17117/what-s-next-after-v3/17?_=1685522832798

  • 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?

  • @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 🙂


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics