3 * Attaches behaviors for Drupal's active link marking.
6 (function(Drupal, drupalSettings) {
8 * Append is-active class.
10 * The link is only active if its path corresponds to the current path, the
11 * language of the linked path is equal to the current language, and if the
12 * query parameters of the link equal those of the current request, since the
13 * same request with different query parameters may yield a different page
14 * (e.g. pagers, exposed View filters).
16 * Does not discriminate based on element type, so allows you to set the
17 * is-active class on any element: a, li…
19 * @type {Drupal~behavior}
21 Drupal.behaviors.activeLinks = {
23 // Start by finding all potentially active links.
24 const path = drupalSettings.path;
25 const queryString = JSON.stringify(path.currentQuery);
26 const querySelector = path.currentQuery
27 ? `[data-drupal-link-query='${queryString}']`
28 : ':not([data-drupal-link-query])';
29 const originalSelectors = [
30 `[data-drupal-link-system-path="${path.currentPath}"]`,
34 // If this is the front page, we have to check for the <front> path as
37 originalSelectors.push('[data-drupal-link-system-path="<front>"]');
40 // Add language filtering.
41 selectors = [].concat(
42 // Links without any hreflang attributes (most of them).
43 originalSelectors.map(selector => `${selector}:not([hreflang])`),
44 // Links with hreflang equals to the current language.
45 originalSelectors.map(
46 selector => `${selector}[hreflang="${path.currentLanguage}"]`,
50 // Add query string selector for pagers, exposed filters.
51 selectors = selectors.map(current => current + querySelector);
54 const activeLinks = context.querySelectorAll(selectors.join(','));
55 const il = activeLinks.length;
56 for (let i = 0; i < il; i++) {
57 activeLinks[i].classList.add('is-active');
60 detach(context, settings, trigger) {
61 if (trigger === 'unload') {
62 const activeLinks = context.querySelectorAll(
63 '[data-drupal-link-system-path].is-active',
65 const il = activeLinks.length;
66 for (let i = 0; i < il; i++) {
67 activeLinks[i].classList.remove('is-active');
72 })(Drupal, drupalSettings);