Add support for https://github.com/orestbida/cookieconsent v3

[meixger]

Add support for https://github.com/orestbida/cookieconsent v3

[OhMyGuus]

Sorry for the late response and thanks for the contribution & PR!
I totally missed the V3 part so was a bit confused, I now found the V3 version and tested it. It seems to work Only a bit scared of the downside of using cc-main since the id is a bit abstract and could break some websites.

I would rather have chosen for
.show--consent #cc-main
or
#cc-main .cm-wrapper (so it blocks cm-wrapper inside of cc-main)

But thanks a lot!

For later reference the demo for v3:
https://playground.cookieconsent.orestbida.com/

[meixger]

the downside of using cc-main since the id is a bit abstract and could break some websites

Yes, indeed. We should match on html.show--consent #cc-main.

---

But i missed that the option disablePageInteraction disables the vertical scroll bar:

html.disable--interaction.show--consent, html.disable--interaction.show--consent body {
    height: auto!important;
    overflow: hidden!important;
}

I found no way to override the cookieconsent !important styles. Do you have any guidance?

[OhMyGuus]

html.show--consent #cc-main

Looked in

the downside of using cc-main since the id is a bit abstract and could break some websites

Yes, indeed. We should match on html.show--consent #cc-main.

But i missed that the option disablePageInteraction disables the vertical scroll bar:

html.disable--interaction.show--consent, html.disable--interaction.show--consent body {
    height: auto!important;
    overflow: hidden!important;
}

I found no way to override the cookieconsent !important styles. Do you have any guidance?

mmh 🤔 it seems that there isn't a easy way for this at the moment, I think the best way at the moment is to add

.cm__btn[data-role=necessary],\

to the searchGroups in common.js with the css html.show--consent #cc-main which will hide the banner & reject it in the background which will remove the scrollbar.

edit: Found another way but idk which one is better in this case #126

[meixger]

.cm__btn[data-role=necessary],\

Unfortunately data-role=necessary is not reliable enough because it could be hidden by the web developer. (I'm guilty of such a use case 😳)
In such case the only possibility to exit the modal dialog would be the button with data-role=all.

window.CookieConsent.reset() would close the consent dialog without accepting anything.

[OhMyGuus]

Thanks 😄 took all the thoughts and it should work fine now. It will block the popup using
html.show--consent #cc-main
Then if disablePageInteraction is enabled it will click the button
.disable--interaction .cm__btn[data-role=necessary]'
and if the button doesn't exist it will fall back to the css rule which has been fixed by updating the priority :

html.disable--interaction.show--consent,
html.disable--interaction.show--consent body {
  overflow: unset !important;
}

I might create a custom Javascript hander later for things like window.CookieConsent.reset() but that was a bit too much work for the current release 👍