active-link.es6.js 2.4 KB

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