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💗

  • Further Widgets question

    Solved Configure
    4
    1 Votes
    4 Posts
    39 Views

    @Panda category is for a category in its own, so for example, “fruit” whereas categories is the page that contains all categories as a list.

  • Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    117 Views

    @Panda said in Email validation NodeBB:

    Did you configure that as a custom change to the usual quote icon. How do you do that?
    I notice on NodeBB site its a solid blue quotes

    Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.

  • 12 Votes
    9 Posts
    127 Views

    Such a pleasant surprise, thank you for all you do.I’m trying to deploy it to my site now!

  • 36 Votes
    55 Posts
    1k Views

    @DownPW I see why. The code relies on the existence of

    [component="topic/quickreply/container"]

    However, this by definition means that the below has to be enabled

    aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png

    It will then work

    7fb38631-e0f3-46ef-b652-00929d927b13-image.png

    For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component.

    The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on 🙂

  • Post Style View

    Solved Customisation
    67
    18 Votes
    67 Posts
    454 Views

    @cagatay

    Just add margin-left on the element like @phenomlab said to you :

    topic [component="post/parent"] { margin-left: 10px; }

    aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png

    Maybe @phenomlab have a better way

  • 1 Votes
    2 Posts
    240 Views

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • 5 Votes
    9 Posts
    374 Views

    is there any way to see whose reputation is changed by this plugin?

  • 0 Votes
    7 Posts
    322 Views

    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?