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
  • Opening links in nodebb widget

    Solved Configure
    6
    4 Votes
    6 Posts
    221 Views

    A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below

    <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe>

    This works first time every time on your site as intended.

  • Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    1k Views

    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems.

    /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android }

    Once you’re in that rabbit hole, it’s impossible to get out of it.

  • Upgrade issues

    Solved Configure
    2
    2 Votes
    2 Posts
    188 Views

    Use this code

    git fetch # Grab the latest code from the NodeBB repository git checkout v3.x git reset --hard origin/v3.x

    And you will have the latest version without specifying it

    https://docs.nodebb.org/configuring/upgrade/

  • www. Infront stops website access?

    Solved Configure
    10
    1 Votes
    10 Posts
    443 Views

    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.

  • Where are widgets stored?

    Solved Configure
    3
    1 Votes
    3 Posts
    211 Views

    @phenomlab Thanks, have DMed you

  • Want to use Sudonix themes ?

    Chitchat
    67
    32 Votes
    67 Posts
    2k Views

    @cagatay In your CSS, locate the block starting

    .category-card .text-muted.timeago

    And remove

    margin-left: -180px;
  • Detect if user is admin

    General
    2
    0 Votes
    2 Posts
    479 Views

    @pwsincd I think you can use userData.isAdmin = isAdmin; if I’m not mistaken - see
    https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example

  • [NODEBB] Help for my custom CSS

    Solved Customisation
    193
    38 Votes
    193 Posts
    32k Views

    OMG make sense

    Thanks dude 🙂