How to Style Badge Corners Based on Position and Center Toolbar Alignment in GrapesJS

[fredrickreuben]

"First, I would like to style my badge so that when it is positioned at the top, the top-left and top-right corners are rounded. When the badge is positioned at the bottom of the component, the bottom-left and bottom-right corners should be rounded. Additionally, I want to center the toolbar so that it is aligned in the middle. How can I achieve this?"

[glaprida]

To center the toolbar you can add these styles

.gjs-toolbar{
    left: 50%; // you might need to add !important
    translate: -50% 0;
}

the rounding of the badge seems more complicated... css-wise its just a .gjs-badge{ border-radius: [your values] }, but to style it differently when its shown on top than when its shown at the bottom, that's the hard part, I guess. (I'm not sure how hard, but it's not just CSS... there's definitely JS involved)

[fredrickreuben]

thanks for your answer, !important does not work because of this inline rule element.style {
pointer-events: all;
top: 100px;
left: 936px;
}

[glaprida]

!important should work (it works for me on dev tools)

in fact, !important is the only way to override inline styles (unless they are marked as !important too, then you just cannot override them) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[fredrickreuben]

I've managed to center the toolbar, but for the badge, I want to adjust the badge container. I'm considering how to add an attribute or class to the body element within the gjs-tools class, indicating whether the position is currently at the top or bottom. This way, I can apply corresponding styles. Any suggestions on how to achieve this?

[fredrickreuben]

Also, i would like the badge of the selected model to be hidden.

[fredrickreuben]

const onToolbarStyleChange = useCallback(() => {
const el = document.getElementById('gjs-tools');

    if (!el) return;

    const handleStyleChanges = (mutationsList: any) => {
        for (let mutation of mutationsList) {
            if (
                mutation.type === 'attributes' &&
                mutation.attributeName === 'style'
            ) {
                if (
                    mutation.type === 'attributes' &&
                    mutation.attributeName === 'style'
                ) {
                    const target = mutation.target as HTMLElement;
                    const badge = target.querySelector('.gjs-toolbar');
                    if (!badge) return;
                    const { style } = badge as HTMLElement;
                    const topValue = parseInt(style.top || '0', 10);
                    if (topValue < 0) {
                        badge.classList.add('gjs-toolbar-top');
                        badge.classList.remove('gjs-toolbar-bottom');
                    } else {
                        badge.classList.add('gjs-toolbar-bottom');
                        badge.classList.remove('gjs-toolbar-top');
                    }
                }
            }
        }
    };

    const observer = new MutationObserver(handleStyleChanges);

    const config = {
        attributes: true,
        attributeFilter: ['style'],
    };

    observer.observe(el, config);

}, []);

const onBadgeStyleChange = useCallback(() => {
    const el = document.getElementById('gjs-cv-tools');
    const toolsOnly = el?.querySelectorAll('.gjs-tools:not(.gjs-tools-gl)');

    const handleStyleChanges = (mutationsList: any) => {
        for (let mutation of mutationsList) {
            if (
                mutation.type === 'attributes' &&
                mutation.attributeName === 'style'
            ) {
                if (
                    mutation.type === 'attributes' &&
                    mutation.attributeName === 'style'
                ) {
                    const target = mutation.target as HTMLElement;
                    const badge = target.querySelector('.gjs-badge');
                    if (!badge) return;
                    const { style } = badge as HTMLElement;
                    const topValue = parseInt(style.top || '0', 10);
                    if (topValue < 0) {
                        badge.classList.add('gjs-top-rounded');
                        badge.classList.remove('gjs-bottom-rounded');
                    } else {
                        badge.classList.add('gjs-bottom-rounded');
                        badge.classList.remove('gjs-top-rounded');
                    }
                }
            }
        }
    };

    const observer = new MutationObserver(handleStyleChanges);

    const config = {
        attributes: true,
        attributeFilter: ['style'],
    };

    toolsOnly?.forEach((tool) => {
        observer.observe(tool, config);
    });
}, []);

useEffect(() => {
    if (ready) {
        onBadgeStyleChange();
        onToolbarStyleChange()
    }
}, [ready]);

[fredrickreuben]

This what i came up with, please rate it for me?