Skip to content
Sudonix

Threaded post support for NodeBB

Let's Build It
146 5 76.0k 1
  • DownPWundefined DownPW

    sure :

    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);
                }
            }
            // 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');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<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="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});
    phenomlabundefined

    @DownPW Thanks. You should remove the threadedChat function and these lines

    $(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});

    That code is not functional yet and is very experimental 🙂

    I’ll have a look at your DEV environment to make the code recommendations.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined DownPW

    sure :

    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);
                }
            }
            // 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');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<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="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});
    phenomlabundefined

    @DownPW I changed your CSS as it was lacking the actual .threaded class which is the target we add and remove

    .page-topic .topic .posts.timeline [component="topic/event"].timeline-event, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event.threaded {
    background: transparent !important;
    margin-bottom: 10px !important;
}
.page-topic .topic .posts.timeline .threaded:last-child .timeline-event:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component="post/placeholder"]:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component=post]:last-child {
    margin-left: 0.5rem !important;
}

    Seems to work, but can you confirm?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

    phenomlabundefined

    @DownPW For clarity, I didn’t change all of the classes - only the two you posted last

    Threading off

    fe3562db-edee-4f63-a8aa-1eb59c1279ea-image.png

    Threading on

    a92e0031-cf0c-416e-a1f7-53a6cb3a6631-image.png

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • DownPWundefined DownPW

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    phenomlabundefined

    @DownPW That should make no difference?

    Just remove it from the class

    .page-topic .topic .posts.timeline .timeline-event, .page-topic .topic .posts.timeline > [component="post/placeholder"], .page-topic .topic .posts.timeline > [component=post] {
    border-left: none;
    transition: transform 0.3s ease !important;
    background: var(--bs-body-bg);
    /* background: var(--bs-body-navbar); */
    border-radius: var(--bs-border-radius);
}

    9871c5b3-1b9b-415b-b848-0f663341fc09-image.png

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    that makes all the difference 🙂

    Vanilla is like this:

    image.png

    PW and WS Spirit alive

    1
  • DownPWundefined DownPW

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    phenomlabundefined

    @DownPW said in Threading support for NodeBB:

    And if you seen topi event is not transparent like vanilla

    It is for me

    6d89cea9-6311-48d1-8eea-07b7b827eafd-image.png

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    nope for me

    image.png

    PW and WS Spirit alive

    0
  • DownPWundefined

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    PW and WS Spirit alive

    phenomlabundefined DownPWundefined 2 Replies
    0
  • DownPWundefined DownPW

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    phenomlabundefined

    @DownPW Because your CSS has not been altered dude.

    ebe21e6c-5409-498f-a5dd-605403c52622-image.png

    Try now. It works for me?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    phenomlabundefined

    @DownPW Isn’t that correct, or do you want --bs-body-navbar ?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined DownPW

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    DownPWundefined

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    phenomlabundefined

    @DownPW Right. Hold on.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  /* background: var(--bs-body-navbar); */
  border-radius: var(--bs-border-radius);
}

    THREAD ON

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"].threaded {
  border-left: none;
  transition: transform 0.3s ease !important;
  /* background: var(--bs-body-bg); */
  background: var(--bs-body-navbar);
  border-radius: var(--bs-border-radius);
}

    Same things for other modif like border radius

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  /* background: var(--bs-body-navbar); */
  border-radius: var(--bs-border-radius);
}

    THREAD ON

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"].threaded {
  border-left: none;
  transition: transform 0.3s ease !important;
  /* background: var(--bs-body-bg); */
  background: var(--bs-body-navbar);
  border-radius: var(--bs-border-radius);
}

    Same things for other modif like border radius

    phenomlabundefined

    @DownPW Try now.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    🙂

    One or 2 classes are missing in Thread ON mode but this is the logic I want.

    What have you done that I can understand and modify?

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    🙂

    One or 2 classes are missing in Thread ON mode but this is the logic I want.

    What have you done that I can understand and modify?

    phenomlabundefined

    @DownPW Good…

    Added

      li.pt-4.threaded {
    background: var(--bs-body-navbar) !important;
}

    Modified

      .page-topic .topic .posts.timeline .timeline-event,
  .page-topic .topic .posts.timeline > [component="post/placeholder"],
  .page-topic .topic .posts.timeline > [component="post"] {
    border-left: none;
    transition: transform 0.3s ease !important;
    background: var(--bs-body-bg); 
    border-radius: var(--bs-border-radius);
  }

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    hmm Ok
    For once I don’t understand the logic 🙂

    Just one thing I have added befor one Thread ON mode :

    image.png
    image.png

    PW and WS Spirit alive

    0
Log in to reply

Related Topics
  • JACundefined

    Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    2k Views
    JACundefined
    Thank you Mark, the changes look fantastic!!
  • phenomlabundefined

    Target the posts counter in categories using CSS and jQuery

    Let's Build It posts jquery css
    2
    5
    3 Votes
    2 Posts
    1k Views
    DownPWundefined
    Very great
  • phenomlabundefined

    NodeBB Twitter / X embeds

    Let's Build It twitter script
    34
    21 Votes
    34 Posts
    10k Views
    DownPWundefined
    @phenomlab said: @DownPW thanks for spotting (and fixing) this issue. I admittedly threw this together quickly for @jac some time ago, and it hasn’t had any love since. If OK with you, I’ll merge these changes into the github repository? No problem dude
  • Pandaundefined

    Following the API docs but its not clear ...

    Solved Customisation api nodebb
    8
    2 Votes
    8 Posts
    2k Views
    phenomlabundefined
    @Panda you’d be surprised. If you consider that you’d need to use the API to be able to populate a WordPress widget for example (which in turn would of course be PHP), taking this route is still immensely popular.
  • Pandaundefined

    Composer Zen icon?

    Solved Configure nodebb
    8
    1
    2 Votes
    8 Posts
    2k Views
    phenomlabundefined
    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used. If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!
  • Pandaundefined

    Smart Widgets

    Solved Configure nodebb
    9
    3 Votes
    9 Posts
    2k Views
    phenomlabundefined
    @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
  • DownPWundefined

    [NODEBB] Wallpapers BUG on Firefox Mobile ?

    Solved Customisation nodebb wallpaper firefox mobile
    9
    1
    0 Votes
    9 Posts
    2k Views
    phenomlabundefined
    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)
  • kurulumuNetundefined

    nodebb dropdown menu

    Solved Configure nodebb
    5
    1
    0 Votes
    5 Posts
    2k Views
    JACundefined
    @phenomlab said in nodebb dropdown menu: @kurulumu-net You set it like the below example taken from this site [image: 1637939951821-aae36790-3257-4bb2-ad5a-0d744309876a-image.png] Which presents this [image: 1637939983445-77f47260-2941-4afe-9614-8e17dcfc8c19-image.png] Very interesting… I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum. Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.