Problem/Motivation

Footer content menu can have external links : those links must then have target="_blank" to display a special icon, and a title attribute to announce it will open in a new window (for accessibility).
Currently the footer_menu pattern doesn't handle this case.

Steps to reproduce

Populate the "footer content" menu with external links, or with internal links with attribute "target blank".
The expected icon or title aren't displayed.

Proposed resolution

Handle target and title in the Twig file of the pattern.

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

mh_nichts created an issue. See original summary.

mh_nichts’s picture

I've made a proposal (Twig changes & new preprocess, to test if the URL is external). The tricky part was handling both cases : a "real" Drupal menu link with attributes, and the "pattern preview" where the URL is a simple string.
I welcome any suggestion to make it better :)

mh_nichts’s picture

Status: Active » Needs review
pdureau’s picture

Assigned: Unassigned » pdureau

Hi @mh_nichts

Thanks a lot fo this MR.

I will have a look soon. I guess I will suggest you a solution without preprocess hook because we are targeting a front-friendly/PHP-free codebase.

mh_nichts’s picture

Thanks for your feedback.
I understand the roadmap to avoid preprocesses, but I'm wondering how we could do in this kind of cases (same as in link/button patterns), as we need to "check if URL is external" and this is currently done with Drupal functions. Except for this part, I thing the rest (change title according to target) could be handled easily in the Twig file.

pdureau’s picture

Assigned: pdureau » Unassigned
Status: Needs review » Needs work

Indeed, we need a preprocess because UrlHelper is not available in Twig template (and that's a good thing)

However, we can make it simpler:

1. item.target & item.title_attr doesn't exist in Drupal menu structure: https://api.drupal.org/api/drupal/core!modules!system!templates!menu.htm...

Can you stick with item.attributes instead of adding those 2 properties in the preprocess?

So, we can just do that in Twig:

<a{{ item.attributes.addClass("fr-footer__{{ variant }}-link").setAtttribute("href", item.url) }}>

(not 100% sure about my proposal because I don't know if item.attributes is suitable for A element instead of LI element)

2. Once it is done, this can be moved to the Twig template:

if (isset($item['target']) && $item['target'] === '_blank') {
 $item['title_attr'] = t('@title - new window', ['@title' => !empty($item['title_attr']) ? $item['title_attr'] : $item['title']]);
}

Something like that (non tested proposal):

{% set item_attributes = item.attributes %}
{% if item_attributes.hasAttribute('target') and item_attributes.offsetGet('target') == '_blank' %}
  {% set title = item_attributes.hasAttribute('title') ? item_attributes.offsetGet('title') : item.title %}
  {% set item_attributes = item_attributes.setAttribute('title", '@title - new window'||t({@title', title}) %}
{% endif %}
pdureau’s picture

Assigned: Unassigned » pdureau
Status: Needs work » Needs review

(not 100% sure about my proposal because I don't know if item.attributes is suitable for A element instead of LI element)

See how https://www.drupal.org/project/menu_link_attributes & the new setting type are doing that

pdureau’s picture

Assigned: pdureau » Unassigned
Status: Needs review » Needs work

Hi Marie,

In the soon-to-be-released "links" (previously "menu" but shared with breadcrumbs and pagers) setting type we have introduced an new property for item, link_attributes:

attributes: HTML attributes for the menu item.
below: The menu item child items.
title: The menu link title.
link_attributes: HTML attributes for the link
url: The menu link URL as string
localized_options: Menu link localized options.
is_expanded: TRUE if the link has visible children within the current menu tree.
is_collapsed: TRUE if the link has children within the current menu tree that are not currently visible.
in_active_trail: TRUE if the link is in the active trail.

#3345071: Add links setting type is not merged yet, so we are open to suggestion if you prefer to manage those attributes differently.

FYI, related issue: #3382940: [beta5] RE: Missing active trail inside side menu pattern (lvl.3)

mh_nichts’s picture

Just to fix the link : the related issue about link_attributes (new links setting type) is https://www.drupal.org/project/ui_patterns_settings/issues/3345071

mh_nichts’s picture

Status: Needs work » Needs review

I've handled link_attributes in the same way as the soon-to-come links setting, but the code will have to be deleted once it's available, so I let a "@TODO" for that in a comment.

The code is now simplified, and handles only the target in preprocess : title is handled in Twig.
It works with the preview links as well as a "real" Drupal menu.

pdureau’s picture

Title: Handle target/title in footer menu links » [beta5] Handle target/title in footer menu links
Status: Needs review » Fixed

Thats' great. Merged.

  • pdureau committed 520d5708 on 1.0.x authored by mh_nichts
    Issue #3381502 by mh_nichts: Handle target/title in footer menu links
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.