Happy Holidays - Christmas hats for all users

---

Hoekstra_VFZ wrote:

For instance on the GroupHubPage there is some DOM event listener from Khoros that removes all nodes inside the node of the avatar img. So the hats are removed. I had to make a timer to run the function again after the removal event. Does anyone know why Khoros does this??

---

I see you are using a DOMContentLoaded listener, but for JS like this, try using the liaAddScript macro, which should place your JS at the bottom of the body and also help to ensure it runs after other late page setup work.

A performance concern: the MutationObserver on document.body is firing when any element is added to the body without className === "vfz-hat", which could happen thousands of times on some pages. Each time, it does a fair amount of work and does not detect the hat(s) previously added, so it adds another hat. In my test on a profile page, I saw 70 img.vfz-hat for 10 user icons. These overlapping hats and the work to manage them could cause some performance issues for many users. I suggest to place breakpoints & logging in placeHatOnCLass to ensure it is only being called on those images that do not already have a hat displayed.

As community DOM is very complex and varied across pages, and it can also be very dynamic, this is a case where rigid structure assumptions (parentNode, className instead of classList, indexed access like [0]) can be brittle, and using the built-in jQuery instance can be a lifesaver. For example, this check will determine if an element or any parent has the vfz-hat class:

if ($(element).closest('.vfz-hat').length)

For figuring out which images need hats, you can bake the whole search into the initial selector (even without jQuery) :

// The current implementation loops over all querySelectorAll(".lia-user-info-group .lia-link-navigation") and then over getElementsByTagName("img") and then looks around for ".vfz-hat" which it can't find because the class is on a sibling of an ancestor. This one-liner finds them all:

// jQuery
$(".lia-user-info-group .lia-link-navigation img:not(.vfz-hat + * img)")

// DOM
document.querySelectorAll(".lia-user-info-group .lia-link-navigation img:not(.vfz-hat + * img)")