Necro function - DOM changes

[phenomlab]

Hi,

I noticed that the Necro messages are added to the DOM after page load. Is there a hook that can be used to target them? The issue I have is that I cannot target something that isn't in the DOM, but loaded afterwards via another process. Essentially, I want to add a class to [component="topic/necro-post"] on page load

Thanks

[baris]

I don't see action:topic.loaded. action:topics.loaded is a different hook that fires on the topic list.

[baris]

Are they not in the DOM when action:topic.loaded and action:posts.loaded fires?

[phenomlab]

@baris I expect them to be, but if you load the page and watch the elements, you'll see that [component="post"] is there, but [component="topic/necro-post"] is being added shortly after which (from what I can see) is after the action has completed.

[baris]

I tested the topic.loaded hook and it prints the necros posts for me.

$(window).on('action:topic.loaded', function (ev, data) {
  console.log($('[component="topic/necro-post"]').length);
});

[phenomlab]

@baris That's odd.

I have this specific function

function material() {
    $(document).ready(function () {
        // Check if the screen width is 460px or more
        if ($(window).width() >= 360) {
            // Check if the custom thread view button already exists
            if ($('#materialThreadViewButton').length === 0) {
                // Create the button for custom thread view mode with custom IDs
                var threadViewButton = $('<div class="material-threads-wrapper"><form class="form"><div class="form-check form-switch material-threads-wrapper"> \
                    <input class="form-check-input" id="materialThreadViewButton" type="checkbox" data-field="materialThreadView"> \
                    <label class=" d-none d-md-inline fw-semibold" for="materialThreadViewButton"></label> \
                </div></form></div>');
                
                // Append the button to the right sidebar
                $('[component="sidebar/right"]').append(threadViewButton);
            }
            
            // Check if there's a stored state for the checkbox and update it
            var storedState = localStorage.getItem('materialThreadViewState');
            if (storedState === 'true') {
                $('#materialThreadViewButton').prop('checked', true);
            }
            
            // Toggle the class 'material' on or off when the checkbox changes state
            $('#materialThreadViewButton').on('change', function () {
                var isChecked = $(this).is(':checked');
                var theTooltip = isChecked ? "Material View Off" : "Material View On"; // Update tooltip message
                
                // Toggle CSS rules when the button is turned on or off
                if (isChecked) {
                    console.log('Material Thread view is active.');
                    // Apply your CSS rules here
                    $('[component="category/topic"]').addClass('material'); 
                    $('li[component="category/topic"]').addClass('material'); 
                    $('[component="categories/category"]').addClass('material');
                    
                    $('.posts-container').addClass('material')
                    $('ul[component="topic"]').addClass('material')
                    $('.post-container').addClass('material')
                    $('.timeline-event').addClass('material')
                    $('[component="post/footer"]').addClass('material')
                    $('li.pt-4.deleted').addClass('material') 
                    
                    $('.page-topic .topic .posts.timeline .timeline-event > div:first-of-type, .page-topic .topic .posts.timeline > [component="post/placeholder"] > div:first-of-type, .page-topic .topic .posts.timeline > [component=post] > div:first-of-type').addClass('material');

                    $('[component="post"]').each(function () {
                        // Add the 'material' class to matching elements
                        if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                            $(this).addClass('material');
                            $('[component="sidebar/right"]').addClass('material');
                        }
                    });
                    $('[component="topic/necro-post"]').each(function () {
                        // Add the 'material' class to matching elements
                        if ($(this).hasClass('timeline-event')) {
                            $(this).addClass('material');
                        }
                    });

                } else {
                    console.log('Material Thread view is inactive.');
                    // Remove the CSS rules here
                    $('[component="category/topic"]').removeClass('material');
                    $('li[component="category/topic"]').removeClass('material');
                    $('[component="categories/category"]').removeClass('material');
                    
                    $('[component="post"]').removeClass('material');
                    $('ul[component="topic"]').removeClass('material');
                    $('.posts-container').removeClass('material')
                    $('ul[component="topic"]').removeClass('material')
                    $('.post-container').removeClass('material')
                    $('.timeline-event').removeClass('material')
                    $('[component="post/footer"]').removeClass('material');
                    $('li.pt-4.deleted').removeClass('material'); 
                   
                    $('.page-topic .topic .posts.timeline .timeline-event > div:first-of-type, .page-topic .topic .posts.timeline > [component="post/placeholder"] > div:first-of-type, .page-topic .topic .posts.timeline > [component=post] > div:first-of-type').removeClass('material'); 

                    $('[component="sidebar/right"]').removeClass('material');
                    
                }
                
                // Store the checkbox state in localStorage
                localStorage.setItem('materialThreadViewState', isChecked);
                
                // Update the tooltip title
                $(this).attr('data-original-title', theTooltip).tooltip('dispose').tooltip({
                    placement: 'bottom',
                    title: theTooltip,
                    trigger: 'hover'
                });
            });

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

This is then called with

// Attach the material function to relevant events
$(window).on('action:ajaxify.end', function (data) {
    material();
});

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

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

$(window).on('action:topics.loaded', function (data) {
    material();
});

There is a loop that checks each [component="topic/necro-posts"] and should add an additional class if pt4 is present (using this). The [component="post"] fires and work, but not the other

[baris]

I don't see action:topic.loaded. action:topics.loaded is a different hook that fires on the topic list.

[phenomlab]

@baris Good spot - that works!

Thanks