The preview popup implementation will be used in other modules
N/A
There is a new preview pop-up for medium teasers on Open Social, this is what we need to do to implement it
1 - First of all, we need to create a new view mode, for preview. It should be called preview, with id preview. - For example - core.entity_view_mode.group.preview.yml
2 - For this view mode, we need to create a view_display config, this is where we will add the fields that will be displayed on the popup - For example - core.entity_view_display.group.flexible_group.preview.yml
3 - Then, we should create a route. It should be a dynamic route that accepts the id of the entity, the fields of which should be displayed in the popup. For example, the route might look like this:
my_module_preview.canonical:
path: '/group/{group}/preview'
defaults:
_entity_view: 'group.preview'
_title: 'Group preview'
requirements:
group: \d+
_permission: 'permission for viewing'
options:
parameters:
airline:
type: 'entity:group'
- path: '/group/{group}/preview' - path to viewing popup - {group} it's argument of id of the `group `
- _entity_view: 'group.preview' - this means that this route will show the entity using `preview view mode`
- _permission: 'permission for viewing' - permission for viewing of popup
4 - Then you should create the twig template for preview view mode, and put there your fields, which you want to render in the popup
5 - Then you need to decide, on hovering over which element exactly and where, a popup should appear
6 - For example, I want to see the popup after hover on the image in medium teaser view mode
7 - I go to the template of medium teaser view mode, I should see image element which I want to hover over, then I should wrap this image in a link. It should be like this:
<a
href="#"
class="profile-preview-link"
aria-label="{{ 'Open preview popup'|t }}"
data-preview-url="{{ data_preview_url }}"
data-preview-id="{{ data_preview_id }}">
{% if content.logo|render|striptags('<img>') is not empty %}
{{ content.logo }}
{% else %}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>{% trans %}Group{% endtrans %}</title>
<g id="Icon">
<path id="Union" d=""/>
</g>
</svg>
{% endif %}
</a>
8 - Pay attention to the data-preview-url and data-preview-id attributes in the link. This is the most important thing, without these attributes our popup will not work
We should add these attributes on the preprocess (maybe there is a better way)
For example:
function my_module_preprocess_group(array &$variables): void {
$group = $variables['group'];
if ($group->bundle() === 'flexible_group' && in_array($variables['view_mode'], ['medium_teaser'])) {
$preview_url = Url::fromRoute('my_module_preview.canonical', [
'group' => $group->id(),
])->toString();
$variables['data_preview_url'] = $preview_url;
$variables['data_preview_id'] = $group->id();
}
}
9 - Attach this library to a page where you want the popup to work
We passed these attributes from the hook_preprocess, received these attributes in the twig template, and added them to our link that wrapped the image. This is necessary so that in js we can do some manipulations with these attributes, and with the help of them, open a specific preview, a specific entity, for this we need to have the entity_id and url
N/A
Create a preview popup library
N/A
N/A
Fixed
12.2
Front-End
Automatically closed - issue fixed for 2 weeks with no activity.