[2.x] Alternative layout, OR add ability for basic filtered text-HTML

This feature is something that we would be interested as well, are there any updates on this?

Also interested!

FYI: The larger plan for 2.x is to replace the React client by a Vue client: https://github.com/jfeltkamp/cookiesjsr-vue for many reasons (also license and technical). I think that should be done first, combined with other refactorings.

Joachim started the implementation already, as you can see, but there's a lot of work to be done in this module and our small 3 person DROWL team is super busy for the next months. Joachim and we invested many development weeks into this module, so anyone who's interested in the future of the COOKiES module should consider helping or sponsoring to put this on more shoulders.

Thank you!

Hi,

While the new VUE-based JS library is not available, we have implemented a small JS script that renders any HTML that is embedded in the banner. It is a completely provisional solution, but it can help those of us who have this need get through it. I'm only contributing it in case someone finds it useful, but it's still minimally tested.

(function (Drupal, once) {

  'use strict';

  Drupal.behaviors.myCustomCookies = {
    attach(context, settings) {
      once('myCustomCookies', 'body', context).forEach(function (element) {
        const observer = new MutationObserver((mutations, obs) => {
          const cookiesBannerText = document.getElementsByClassName('cookiesjsr-banner--text');
          if (cookiesBannerText[0]) {
            const parser = new DOMParser();
            const textarea = document.createElement('textarea');
            textarea.innerHTML = cookiesBannerText[0].innerHTML;
            const cookiesBannerHTML = parser.parseFromString(textarea.value, 'text/html');
            cookiesBannerText[0].innerHTML = cookiesBannerHTML.firstChild.innerHTML;
            obs.disconnect();
          }
        });
        observer.observe(document.body, { attributes: true, childList: true, subtree: true });
      });
    },
  };

}(Drupal, once));

In addition to this, it would be necessary to define the library and load it with the component.

Thanks!