Skip to content

Threaded post support for NodeBB

Let's Build It
146 5 53.2k 1
  • Here I am again Mark @phenomlab 😉

    I am contributing to this code to add a tooltip to the button.

    The position can be changed according to your wishes.
    For my part, I prefer to put it at the bottom because if we put it at the top it can be annoying.

    Tell me what you think about it ?

    function threaded() {
        $(document).ready(function () {
            // Check if the screen width is 1200px or more
            if ($(window).width() >= 1200) {
                // Check if the dropdown already exists
                if ($('#enableThreading').length === 0) {
                    var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                        <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                        <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                    </div></form></div>');
                    $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                    // Check if there's a stored state for the checkbox and update it
                    var storedState = localStorage.getItem('enableThreadingState');
                    if (storedState === 'true') {
                        $('#enableThreading').prop('checked', true);
                    }
                }
                
                // Add a tooltip to the button
                $('#enableThreading').tooltip({
                    title: 'Thread View On/Off', // Replace with your tooltip text
                    placement: 'Bottom', // Adjust the placement as needed
                    trigger: 'hover', // Show tooltip on hover
                });
                
                // Toggle the class 'threaded' on or off when the checkbox changes state
                $('#enableThreading').on('change', function () {
                    var isChecked = $(this).is(':checked');
                    if (isChecked) {
                        console.log('Thread view is active.');
                        $('ul[component="topic"]').addClass('threaded');
                        $('.posts-container').addClass('threaded');
                        $('ul[component="topic"]').addClass('threaded');
                        $('.post-container').addClass('threaded');
                        $('.timeline-event').addClass('threaded');
                        $('[component="post/footer"]').addClass('threaded');
                        $('[component="post"]').each(function () {
                            // Add the 'threaded' class to matching elements
                            if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                                $(this).addClass('threaded');
                                $('.topic .sticky-tools').addClass('threaded');
                            }
                        });
                    } else {
                        console.log('Thread view is inactive.');
                        $('[component="post"]').removeClass('threaded');
                        $('ul[component="topic"]').removeClass('threaded');
                        $('.posts-container').removeClass('threaded');
                        $('ul[component="topic"]').removeClass('threaded');
                        $('.post-container').removeClass('threaded');
                        $('.timeline-event').removeClass('threaded');
                        $('[component="post/footer"]').removeClass('threaded');
                        $('.topic .sticky-tools').removeClass('threaded');
                    }
                    // Store the checkbox state in localStorage
                    localStorage.setItem('enableThreadingState', isChecked);
                });
                // Check for changes in the checkbox state when the page loads
                $('#enableThreading').trigger('change');
            }
        });
    }
    
    $(window).on('action:ajaxify.end', function (data) {
        threaded();
    });
    
    $(window).on('action:posts.edited', function (data) {
        threaded();
    });
    
    $(window).on('action:posts.loaded', function (data) {
        threaded();
    });
    

    CYA my friend

    @DownPW looks good to me 😀 I started to write this a few days ago, but got sidetracked and never finished it.

    Good job.

  • I forgot the screen 🙂

    image.png

  • I forgot the screen 🙂

    image.png

    @DownPW looks great.

  • And just modified this for better display (centered)

    .threads-wrapper {
        display: flex;
        position: relative;
        /* top: -2px; */
        top: 1px;
    }
    
  • And just modified this for better display (centered)

    .threads-wrapper {
        display: flex;
        position: relative;
        /* top: -2px; */
        top: 1px;
    }
    

    @DownPW yes, it was styled for this site because it uses heavily modified css.

  • @phenomlab

    I note, however, that here on Sudonix, our own posts and those of other users are not shifted (to the left). Only those of the author of the topics are.

    In the code you provide on Github, the author’s posts and those of others are shifted (to the left), only our own posts are not.

    I do not know if it’s normal.

    It actually seems logical to me that only our own posts are not shifted to just better identify our own posts

  • @phenomlab

    I note, however, that here on Sudonix, our own posts and those of other users are not shifted (to the left). Only those of the author of the topics are.

    In the code you provide on Github, the author’s posts and those of others are shifted (to the left), only our own posts are not.

    I do not know if it’s normal.

    It actually seems logical to me that only our own posts are not shifted to just better identify our own posts

    @DownPW Correct. The design in DEV and the code on Git reflects the points you raised, which is why it was developed from scratch in DEV and was not a copy of PROD. It’s a matter of personal taste 🙂 You can fairly easily change the cosmetic behavior to suit your needs - it’s not set in stone.

  • Here I am again Mark @phenomlab 😉

    I am contributing to this code to add a tooltip to the button.

    The position can be changed according to your wishes.
    For my part, I prefer to put it at the bottom because if we put it at the top it can be annoying.

    Tell me what you think about it ?

    function threaded() {
        $(document).ready(function () {
            // Check if the screen width is 1200px or more
            if ($(window).width() >= 1200) {
                // Check if the dropdown already exists
                if ($('#enableThreading').length === 0) {
                    var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                        <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                        <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                    </div></form></div>');
                    $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                    // Check if there's a stored state for the checkbox and update it
                    var storedState = localStorage.getItem('enableThreadingState');
                    if (storedState === 'true') {
                        $('#enableThreading').prop('checked', true);
                    }
                }
                
                // Add a tooltip to the button
                $('#enableThreading').tooltip({
                    title: 'Thread View On/Off', // Replace with your tooltip text
                    placement: 'Bottom', // Adjust the placement as needed
                    trigger: 'hover', // Show tooltip on hover
                });
                
                // Toggle the class 'threaded' on or off when the checkbox changes state
                $('#enableThreading').on('change', function () {
                    var isChecked = $(this).is(':checked');
                    if (isChecked) {
                        console.log('Thread view is active.');
                        $('ul[component="topic"]').addClass('threaded');
                        $('.posts-container').addClass('threaded');
                        $('ul[component="topic"]').addClass('threaded');
                        $('.post-container').addClass('threaded');
                        $('.timeline-event').addClass('threaded');
                        $('[component="post/footer"]').addClass('threaded');
                        $('[component="post"]').each(function () {
                            // Add the 'threaded' class to matching elements
                            if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                                $(this).addClass('threaded');
                                $('.topic .sticky-tools').addClass('threaded');
                            }
                        });
                    } else {
                        console.log('Thread view is inactive.');
                        $('[component="post"]').removeClass('threaded');
                        $('ul[component="topic"]').removeClass('threaded');
                        $('.posts-container').removeClass('threaded');
                        $('ul[component="topic"]').removeClass('threaded');
                        $('.post-container').removeClass('threaded');
                        $('.timeline-event').removeClass('threaded');
                        $('[component="post/footer"]').removeClass('threaded');
                        $('.topic .sticky-tools').removeClass('threaded');
                    }
                    // Store the checkbox state in localStorage
                    localStorage.setItem('enableThreadingState', isChecked);
                });
                // Check for changes in the checkbox state when the page loads
                $('#enableThreading').trigger('change');
            }
        });
    }
    
    $(window).on('action:ajaxify.end', function (data) {
        threaded();
    });
    
    $(window).on('action:posts.edited', function (data) {
        threaded();
    });
    
    $(window).on('action:posts.loaded', function (data) {
        threaded();
    });
    

    CYA my friend

    @DownPW Maybe go one better perhaps, and toggle the on/off state depending on the switch selection (I’m doing that here)

    https://github.com/phenomlab/nodebb-harmony-threading/blob/main/functions%2Cjs

    Enabled

    9a9261ae-7730-4212-a650-04bf1d6807ba-image.png

    Disabled

    ce2cb828-32a9-4c95-905a-4b8f84a24bd0-image.png

  • it’s cool too ^^

  • it’s cool too ^^

  • this code does not work for me. No button

    EDIT:

    The code on github is OK, not the last share above

  • this code does not work for me. No button

    EDIT:

    The code on github is OK, not the last share above

    @DownPW said in Threading support for NodeBB:

    The code on github is OK, not the last share above

    Sorry - changed that to the Git link

  • Just don’t forget to comment out lines for browsing-users plugin

    I’m got screwed 😉

    Good work my friend

  • Just don’t forget to comment out lines for browsing-users plugin

    I’m got screwed 😉

    Good work my friend

    @DownPW This part?

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    // If you have browsing users plugin, comment out the above line and uncomment the one below
    //$('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
    

    Yes, I need to fix that! Thanks for the reminder.

  • For anyone else browsing here who has tried the code in git but wants it to look exactly like Sudonix, please note that this code is not public because it is heavily adapted to match the layout of this site. There are some Sudonix “clones” around so you can actually have this code if you really want it, but it comes with some conditions;

    1. You should consider buying me a coffee - see “Buy me a Coffee” link
    2. You have to provide a backlink to this site from your own - it needs to be visible and cannot be hidden - obviously, I can’t (and won’t) make you do this, but it’s courteous to recognize the original author - particularly when hundreds of hours were spent creating all of this eye candy 🙂
  • Hello @phenomlab

    I see this, when someone composes, it is displayed via the plugin like this (To the left of the Thread View button.). I do not know if it’s normal or if it is better to put it on the right like the others ?

    image.png

    or myself for example :

    33a99e14-13e5-4e67-beaa-25d02b39bb59-image.png

  • Hello @phenomlab

    I see this, when someone composes, it is displayed via the plugin like this (To the left of the Thread View button.). I do not know if it’s normal or if it is better to put it on the right like the others ?

    image.png

    or myself for example :

    33a99e14-13e5-4e67-beaa-25d02b39bb59-image.png

    @DownPW Mmmm - I thought that this would happen. In your js function, can you locate this line

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    

    Replace it with

    $('.topic .sticky-tools ul.list-unstyled').append(threadView);
    

    51179c3a-e0cf-4f1f-a36b-79beb1655e88-image.png

    The issue here is that the hidden-xs class is being manipulated by js which forces the position and does not use relative. This new code should hopefully work around that. It will change the placement of the threaded toggle, but for the better I think. If this works, I’ll commit the code to git

  • @phenomlab

    I don’t use this line, I commented out this line as stipulated in the script

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    

    But use this line :

    $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
    

    image.png

    maybe change for this ?

    $('.topic .sticky-tools ul.list-unstyled [component="topic/browsing-users"]:last-of-type').append(threadView);
    
  • @phenomlab

    I don’t use this line, I commented out this line as stipulated in the script

    $('.topic .sticky-tools ul .hidden-xs').append(threadView);
    

    But use this line :

    $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
    

    image.png

    maybe change for this ?

    $('.topic .sticky-tools ul.list-unstyled [component="topic/browsing-users"]:last-of-type').append(threadView);
    

    @DownPW sorry, use this one.

    $('.topic .sticky-tools ul.list-unstyled').append(threadView);
    

    Replace any existing line

  • image.png

    With this code the entire plugin is now displayed to the left of the Thread View button. I even think I prefer the way it was before.
    I find it more logical that all users are displayed to the right of the button and not to the left.


Related Topics
  • Threaded chat support for NodeBB

    Let's Build It threaded chat code
    35
    1
    19 Votes
    35 Posts
    7k Views
    @DownPW said in Threaded chat support for NodeBB: Better like this : add shadow and border-left on self answer Of course - you style to your own requirements and taste I’ll commit that CSS we discussed yesterday also
  • www. Infront stops website access?

    Solved Configure nodebb
    10
    1 Votes
    10 Posts
    1k 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.
  • SEO and Nodebb

    Performance nodebb seo
    2
    2 Votes
    2 Posts
    782 Views
    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1 However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365 And also https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164 It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”. Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    3k Views
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • NodeBB v3 Android Problem

    Solved Configure nodebb android
    4
    4 Votes
    4 Posts
    881 Views
    thank you fixed.
  • Detect if user is admin

    General nodebb javascript code
    2
    0 Votes
    2 Posts
    1k 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
  • Dark Theme Upper Padding

    Solved Customisation nodebb
    7
    1
    6 Votes
    7 Posts
    1k Views
    @DownPW great! thanks a lot… this code solves my problem.
  • 5 Votes
    9 Posts
    2k Views
    is there any way to see whose reputation is changed by this plugin?