Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Opacity not updating on change #38

Open
Arikkusan opened this issue Apr 2, 2024 · 0 comments
Open

Opacity not updating on change #38

Arikkusan opened this issue Apr 2, 2024 · 0 comments

Comments

@Arikkusan
Copy link

Arikkusan commented Apr 2, 2024

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 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant