How to declare js trigger and element id for component behaviour?

[nigelwhite]

I want to use ui_patterns to provide components with Bootstrap 5 behaviour (eg accordion, modal). When a user clicks, the behaviour should trigger. The modal_name displays fine so I know my modal is working. The preview modal in /patterns also works fine.

My pattern-modal.html.twig is

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#{{modal_name|replace({' ': ''}) }}">
	{{ modal_name }}
</button>

<!-- Modal -->
<div class="modal fade" id="{{modal_name|replace({' ': ''}) }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">{{ modal_name }}</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				{{ modal_description }}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

I have tried various things in the 'data-bs-target' and 'id' slots. The above example uses the twig replace filter which gives an error of its own = 'Warning: strtr() expects parameter 1 to be string,'. I tried testing with a 3rd field in my content type, where I typed in a js-friendly string. Same result.

Whatever I try the output in the DOM has no data.

data-bs-target="#"

and

id=""

I am using a display suite view mode, consumed by a view which outputs a block on the page. The block renders the component buttons correctly, but of course clicking does nothing.

Could someone please explain the correct way of specifying these trigger and target id items in a pattern?

Many thanks

[christianwiedemann]

Hi, is modal_name a field? if yes you have to render it first? modal_name|render|striptags|replace({' ': ''}) . What you can alternative do is

{% modal_id = uuid() %}

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#{{ modal_id }}">
	{{ modal_name }}
</button>

<!-- Modal -->
<div class="modal fade" id="{{ modal_id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">{{ modal_name }}</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				{{ modal_description }}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

[nigelwhite]

Thanks for this which looks like a really elegant solution. However, it's not working for me. I get

Twig\Error\SyntaxError: Unknown "modal_id" tag. in Twig\Parser->subparse() (line 1 of .......

This error is in the browser at /patterns and also at /test-modals which is the node where I should see several modal buttons displayed.

My yml is

modal:
  label: "Modal"
  description: A single modal item.
  # variants: ...
  fields:
    modal_name:
      type: text
      label: modal_name
      preview: "Term name"
    modal_description:
      type: text
      label: modal_description
      preview: "All about this term"
    modal_id:
      type: text
      label: dynamic_id
      preview: "myFoot"

[nigelwhite]

I think we were missing a 'set'. When I use {% set modal_id = uuid() %} I get 'Twig\Error\SyntaxError: Unknown "uuid" function'. So the uuid function is not available in Drupal or Twig Tweak, which I'm also using.

It seems like id="{{ loop.index }}" should work but it doesn't. Does ui_patterns provide a for loop at a higher level than our own twig?

Is it even within the scope of ui_patterns to provide repeated iterations of the same pattern, on the same web page? In my case I want several modals on one web page as a way of displaying multiple taxonomy terms and their descriptions.

From googling around it seems there are several avenues to investigate, but nothing I've read says "This is how to provide a dynamic id to your components". Some candidates are -

• nesting a twig template using extends
• an accompanying js file to generate ids
• using a theme preprocess file

It seems like anyone who uses multiple instances of the same component behaviour, on the same page, will have already tackled this.

Could anyone point me in the right direction?

[nigelwhite]

Ah, this works ...

id="{% spaceless %}{{modal_name|render|striptags|replace({' ': ''}) }}{% endspaceless %}

[FlorentTorregrosa]

Hi,

Regarding last comment, is the problem solved? Can we close the issue?

[nigelwhite]

Yes, thanks. Could we put it in the documentation somewhere. Probably a common use case......