It would be absolutly great if we could introduce an alternative layout. We did this manually by
- adding two extra fields (Banner Title + Banner Intro) to JS and Drupal module
- Change the order of the fields in the JS

Output is a modal dialog (see screenshot attached)

Would it be possible to add the 2 extra fields to library and Drupal module + add a config setting to switch between layouts (change field order in rendered output)?

OR Alternativ improvement:

Add the ability to enter basic html to textarea fields in the text-config, to insert and style headings, sub-title and achieve basic markup dependend stylings. (<h2-h6 class>, <p class>, br, <span class>, strong, b, <a href class rel>)

Issue fork cookies-3198875

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

vistree created an issue. See original summary.

jfeltkamp’s picture

Title: Alternative layout » Alternative layout, OR add ability for basic filtered text-HTML
Issue summary: View changes
Status: Active » Postponed (maintainer needs more info)

Your design looks nice. But I'm sorry, the feature is too project specific.

But I could fix one point: It should be possible to integrate some basic html to the text area fields. So at least you can style headings and subtitles and spans (may be custom links with option for button classes).

If you are ok with that, we could change the ticket subject. But this task has potential for 1-2 days of work. (CKEditor integration, save filter solution for backend and frontend, ...) So, this could take some time.

If you like to share and contribute your design as alternative skin, we could talk about that.

jfeltkamp’s picture

Issue summary: View changes
vistree’s picture

I would be happy to share our design. I don't know how we should this best?!
I can provide the patch I created to add the extra fields to our layout + change the order of the fields. Of course you can't use the patch directly, because it breaks the standard format of cookies dialog. I can also share the CSS rules I created.

vistree’s picture

How do you want me to share my alternative layout? PM?

jfeltkamp’s picture

Hi @vistree
I sent you a personal message for that.

ericdsd’s picture

Enabling filtered text in the modal would be great.

zlem’s picture

An option to add HTML tags to banner text would be great!

Are there any ohter options to add at least line breaks (<br/>) right now?

geek-merlin’s picture

Imho such custumizations should go into a Twig template or a (JS) Drupa.theme function.

basvredeling made their first commit to this issue’s fork.

basvredeling’s picture

Added a MR that changes the cookie text configuration text-area into a full html field. It's draft, also needs implementation in the client-side lib I believe where HTML is being interpreted as text.

At the very least it would be useful to add "rich text" before the buttons, and an extra text-area after.

basvredeling’s picture

Status: Postponed (maintainer needs more info) » Needs review
vistree’s picture

The diff from #13 enables html on input field. But this is currently formatted as plain text with visible html tags in the frontend!

vistree’s picture

I agree with the text field config described in #12 adding an extra text field below the buttons

anybody’s picture

Version: 1.0.7 » 1.0.x-dev
Status: Needs review » Needs work

Back to NW, see my comment in GitLab.

Also we have to ensure this doesn't break anything for existing installations. Patch / MR should be against latest .dev version!

gilmord’s picture

Tried to implement this one and faced the issue:
- cookiesjsr inserts markup as a plain text, and I could not find a way to pass anything to the library to be rendered as markup.

steveoriol’s picture

StatusFileSize
new48.38 KB

Like @gilmord, it's OK on the administration side, but on the public side, it's rendered as plain text.
Screenshot

anybody’s picture

Title: Alternative layout, OR add ability for basic filtered text-HTML » [2.x] Alternative layout, OR add ability for basic filtered text-HTML
Version: 1.0.x-dev » 1.1.x-dev

Possible 2.x feature.

anybody’s picture

Version: 1.1.x-dev » 2.x-dev

Hey ho, let's go! 2.x branch was recently created. Please help to implement this or if you're not a developer, please sponsor some development hours.

nkaramicha’s picture

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

chucksimply’s picture

Also interested!

anybody’s picture

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!

cbccharlie’s picture

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!

jfeltkamp’s picture

Assigned: Unassigned » jfeltkamp

Will be fixed in version 2.x.

anybody’s picture

@jfeltkamp is this already fixed? Could you give us an update on the status or plan? Should this be a blocker for stable 2.0.0?

jfeltkamp’s picture

From the side of the JS-library it is fixed.
But now I want to add HTML editors for the fields in the Drupal config forms, so that this would work out of the box.

anybody’s picture

Nice, thank you @jfeltkamp! :) Looking forward to that! Should you need assistance, feel free to ping us.