orestbida / cookieconsent

:cookie: Simple cross-browser cookie-consent plugin written in vanilla js
https://playground.cookieconsent.orestbida.com/
MIT License
4k stars 410 forks source link

Custom classes support #219

Closed n3t closed 2 years ago

n3t commented 2 years ago

Hi,

it would be nice to have option to specify custom CSS class for each block. something like

cookieconsent.run({
    // ...,
    languages: {
        'en': {
            // ...,
            settings_modal: {
                blocks: [
                    {
                        title: 'First block title ...',
                        description: 'First block description ...',
                        custom_class: 'my-block-class'
                    }
                ]
            }
        }
    }
});

Also for dynamic systems, where configuration of cookie consent could change by PHP generator, also custom class for main container would be nice, something like

cookieconsent.run({
    custom_class: 'my-styling-class',
    // ...,
});

Thanks for consideration...

orestbida commented 2 years ago

Mhm, I'd like to avoid this because with v3 I want to keep the configuration settings separated from the translation (as much as possible).

What about a "predictable" class instead of a custom one?

For example, if you wanted to stylize the "analytics" block category, I could dynamically set the category itself as a class for the current block (or as a custom attribute).

n3t commented 2 years ago

Sure, it would solve the issue for me also, thanks. Separating language and settings is also great improvement :)

n3t commented 2 years ago

Sorry, just realized that description-only blocks does not have an category defined... I need this mainly for additional description blocks, so solution with category will not work :(

orestbida commented 2 years ago

Sorry, I'd like to avoid this. I'll leave the issue open for now

orestbida commented 2 years ago

I thought about this more but couldn't come up with a solution which respects the:

I want to keep the configuration settings separated from the translation (as much as possible).

A "stupid" solution would be to just create an empty span element with an id, class, or custom attribute, for each section. Then you could retrieve the block-parent of that span using .closest():

var block1 = document.getElementById("span1").closest(".c-bl");