Threaded post support for NodeBB

[phenomlab]

@DownPW hmm. Not sure why I copied all of that code, but will change asap. I also have a fix for the browsing users plugin issue but didn’t include it because others might not be using it.

I’ll get to this as soon as I can.

EDIT - Done
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.

[phenomlab]

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

[phenomlab]

@DownPW said in Threading support for NodeBB:

Do you know where it could come from?

Yes, just fixed it in your dev environment. I assumed (probably incorrectly) that people may not have this installed, so omitted it. I fixed it in prod because I do have it there, but wanted to keep DEV as vanilla as possible.

I’ll need to write a function that checks for the existence of this plugin then determines where to inject the toggle switch

For now, see the below

$('.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);

Result (might need some position tweaking…)

[DownPW]

Good, thanks!!!
Test asap, i’m on intervention AT work

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