Skip to content

Opacity not updating on change #38

@Arikkusan

Description

@Arikkusan

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 !

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions