123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- /**
- * @file
- * Attaches behaviors for Drupal's active link marking.
- */
- (function(Drupal, drupalSettings) {
- /**
- * Append is-active class.
- *
- * The link is only active if its path corresponds to the current path, the
- * language of the linked path is equal to the current language, and if the
- * query parameters of the link equal those of the current request, since the
- * same request with different query parameters may yield a different page
- * (e.g. pagers, exposed View filters).
- *
- * Does not discriminate based on element type, so allows you to set the
- * is-active class on any element: a, li…
- *
- * @type {Drupal~behavior}
- */
- Drupal.behaviors.activeLinks = {
- attach(context) {
- // Start by finding all potentially active links.
- const path = drupalSettings.path;
- const queryString = JSON.stringify(path.currentQuery);
- const querySelector = path.currentQuery
- ? `[data-drupal-link-query='${queryString}']`
- : ':not([data-drupal-link-query])';
- const originalSelectors = [
- `[data-drupal-link-system-path="${path.currentPath}"]`,
- ];
- let selectors;
- // If this is the front page, we have to check for the <front> path as
- // well.
- if (path.isFront) {
- originalSelectors.push('[data-drupal-link-system-path="<front>"]');
- }
- // Add language filtering.
- selectors = [].concat(
- // Links without any hreflang attributes (most of them).
- originalSelectors.map(selector => `${selector}:not([hreflang])`),
- // Links with hreflang equals to the current language.
- originalSelectors.map(
- selector => `${selector}[hreflang="${path.currentLanguage}"]`,
- ),
- );
- // Add query string selector for pagers, exposed filters.
- selectors = selectors.map(current => current + querySelector);
- // Query the DOM.
- const activeLinks = context.querySelectorAll(selectors.join(','));
- const il = activeLinks.length;
- for (let i = 0; i < il; i++) {
- activeLinks[i].classList.add('is-active');
- }
- },
- detach(context, settings, trigger) {
- if (trigger === 'unload') {
- const activeLinks = context.querySelectorAll(
- '[data-drupal-link-system-path].is-active',
- );
- const il = activeLinks.length;
- for (let i = 0; i < il; i++) {
- activeLinks[i].classList.remove('is-active');
- }
- }
- },
- };
- })(Drupal, drupalSettings);
|