Threaded post support for NodeBB

DownPW

@phenomlab said in Threading support for NodeBB:

EDIT 2 - I just noticed on your DEV box that you have (thanks to me - sorry) a ton of JS code you don’t need. You should probably clean that up.

no I need it

@phenomlab said in Threading support for NodeBB:

@DownPW said in Threading support for NodeBB:

Can we do the same thing but without expanding the topic toolbar on header ?

Yes, but then you’ll have elements that are wider than the sticky bar which looks odd on scroll.

Could you still explain to me how to obtain this result so that I can see what I prefer?

phenomlab

@DownPW said in Threading support for NodeBB:

Could you still explain to me how to obtain this result so that I can see what I prefer?

Yes, of course. Locate the below block in the CSS, and comment out margin-left: -8%;

  .topic .threaded.sticky-tools { 
     margin-left: -8%; 
     margin-top: 0px; 
     margin-bottom: 0px; 
     transition: margin-left 0.3s ease, margin-right 0.3s ease; 
   }

DownPW

Great, thank you Mark !

–> I also have a little suggestion to add a tooltip on the button mouse hover like "Thread view On and thread View Off depending on the state or maybe just one?

What do you think about it ?

phenomlab

@DownPW said in Threading support for NodeBB:

What do you think about it ?

Great idea. I’ll add that.

DownPW

maybe with an HTML SPAN class like this ?

<span class="title-tooltip top" tooltip-text="Thread View On">

phenomlab

@DownPW yes, that should work, although probably better to use one tooltip with on/off text.

DownPW

Small specific request.

I try to adapt the code to my environment.

I modified the background of the following classes:

.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);
}

.post-container.threaded {
  background: var(--bs-body-bg) !important;
  background: var(--bs-body-navbar)!important;
}

li.pt-4.self-post:not(.self-post .topic-owner-post).threaded {
  transform: translateX(0px) !important;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  background: var(--bs-body-navbar)!important;
  padding-right: 30px;
}

and other code, for example :

.page-topic .topic .posts.timeline [component="topic/event"].timeline-event, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event {
    background: transparent;
}

.page-topic .topic .posts.timeline .timeline-event:last-child, .page-topic .topic .posts.timeline>[component="post/placeholder"]:last-child, .page-topic .topic .posts.timeline>[component=post]:last-child {
    margin-left: 0.5rem;
}

When I activate mode it works without problem but it does not disappear when I deactivate the mode. (Return to vanilla)

I think I understand by reading the code that it is necessary to specify the classes chnaged in the function.js (with add .threaded) but I don’t really see how to add more

phenomlab

@DownPW any reason as to why you’ve defined background twice ?

See

background: var(--bs-body-bg);
background: var(--bs-body navbar)!important;

DownPW

I have just forget to delete the first but this nothing change.

phenomlab

@DownPW just curious 🤭

The second would override the first anyway.

I’m in transit currently and not in front of a pc but will review this as soon as I can.

cagatay

i have a problem with my codes

phenomlab

@cagatay see https://sudonix.org/topic/569/threading-support-for-nodebb/38

cagatay

@phenomlab thank you Mark i did not read this one.

phenomlab

@cagatay no problems. Easily missed!!

phenomlab

@DownPW said in Threading support for NodeBB:

I think I understand by reading the code that it is necessary to specify the classes chnaged in the function.js (with add .threaded) but I don’t really see how to add more

Can you post the current function code you have?

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();
});

phenomlab

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

phenomlab

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

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 :

phenomlab

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

Threading off

Threading on

Threaded post support for NodeBB

Related Topics

NodeBB Twitter / X embeds

Material View Support for Stock NodeBB

Threaded chat support for NodeBB

Removing blue 'moved' tag from post

Setup OGProxy for use in NodeBB

nodebb loading emojis

NodeBB 1.19.3

Adjusting the size of boxes in posts-list class

Threaded post support for NodeBB

Related Topics

Individual Categories