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