cong-min / TagCloud

☁️ 3D TagCloud.js rotating with mouse
https://cong-min.github.io/TagCloud/examples
MIT License
356 stars 91 forks source link

Opacity not updating on change #38

Open Arikkusan opened 4 months ago

Arikkusan commented 4 months ago

I'm trying to implement this TagCloud as a ImageCloud but I encountered a problem with the opacity / Zindex : image

I resolved it by adding an observer to every .tagcloud--item. I've not managed changed object class name but here is the code:

// Options for the observer (which mutations to observe)
const config = {attributes: true, attributeFilter: ['style']};

// Callback function to execute when mutations are observed
const changeOpacity = function (mutationsList, _) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            mutation.target.style.zIndex = 100 * (mutation.target.style.opacity);
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(changeOpacity);

const tags = document.querySelectorAll(.tagcloud--item);

for (const tag of tags) {
    // Start observing the target node for configured mutations
    observer.observe(tag, config);
}

Here is the final result 👍 image

Hope this helps !