Skip to content

Threaded post support for NodeBB

Let's Build It
  • 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

  • @DownPW looks great.

  • 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

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

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

  • 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

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

  • @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);
    
  • @DownPW sorry, use this one.

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

    Replace any existing line


Related Topics
  • Spam spam spam

    Solved Configure
    6
    2 Votes
    6 Posts
    34 Views

    @Panda said in Spam spam spam:

    ok, yes Ive seen the queue, it shows IP, but doesnt have a field for comments from registrant.

    Itโ€™s not designed for that. It merely serves as a gateway between posts appearing on your form or not.

    @Panda said in Spam spam spam:

    It would be better if nodebb had this plugin included in ACP list, as not only then do you know its approved and should work, but many people cant or dont want to use CLI on the server

    Thatโ€™s a question for the NodeBB devs but in all honesty you canโ€™t not use the CLI when installing nodebb so to be this isnโ€™t a big deal.

  • NodeBB Twitter / X embeds

    Let's Build It
    31
    19 Votes
    31 Posts
    1k Views

    @OT I honestly am not able to replicate this. Can you PM me a link to a post on your forum with the specific issue so I can have a look?

  • Block Domain

    Solved Let's Build It
    26
    1 Votes
    26 Posts
    2k Views

    Yes ogproxy too is functionnal on dev

  • Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    299 Views

    @Panda said in Nodebb design:

    One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum.

    From recollection, Google and Bing have the capability to read and process JS, although itโ€™s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, itโ€™s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isnโ€™t something youโ€™ll likely lose sleep over.

    @Panda said in Nodebb design:

    The โ€œwrite apiโ€ is preferred for server-to-server interactions.

    This is mostly based around overall security - you wonโ€™t typically want a client machine changing database elements or altering data. This is why you have โ€œclient-sideโ€ which could be DOM manipulation etc, and โ€œserver-sideโ€ which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write.

    A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is โ€œfire and forgetโ€ and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be โ€œROโ€ (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase.

    You wouldnโ€™t do it (at least, I hope you wouldnโ€™t) and the same ethic applies to server-side rendering and the execution of commands.

  • Setup OGProxy for use in NodeBB

    Moved Let's Build It
    110
    21 Votes
    110 Posts
    12k Views

    @crazycells said in Setup OGProxy for use in NodeBB:

    are they cached for each user separately?

    No. Itโ€™s a shared cache

    @crazycells said in Setup OGProxy for use in NodeBB:

    additionally, this is also handling youtube videos etc, right?

    No. This is handled by nodebb-plugin-ns-embed

  • Want to use Sudonix themes ?

    Chitchat
    75
    33 Votes
    75 Posts
    3k Views

    @cagatay Not to my knowledge.

  • Rotating homepage icons, gifs?

    Solved Configure
    2
    3 Votes
    2 Posts
    247 Views

    @eveh Itโ€™s not a GIF, no. Itโ€™s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though ๐Ÿ™‚

    The CSS for that is as below

    @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } }

    Your milage may vary on the CSS below, as itโ€™s custom for Sudonix, but this is the class that is used to control the rotate

    .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • Detect if user is admin

    General
    2
    0 Votes
    2 Posts
    497 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