www.aleph1.co.uk Git - yaffs-website/blob - web/core/misc/active-link.es6.js

   1 /**
   2  * @file
   3  * Attaches behaviors for Drupal's active link marking.
   4  */
   5
   6 (function(Drupal, drupalSettings) {
   7   /**
   8    * Append is-active class.
   9    *
  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).
  15    *
  16    * Does not discriminate based on element type, so allows you to set the
  17    * is-active class on any element: a, li…
  18    *
  19    * @type {Drupal~behavior}
  20    */
  21   Drupal.behaviors.activeLinks = {
  22     attach(context) {
  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}"]`,
  31       ];
  32       let selectors;
  33
  34       // If this is the front page, we have to check for the <front> path as
  35       // well.
  36       if (path.isFront) {
  37         originalSelectors.push('[data-drupal-link-system-path="<front>"]');
  38       }
  39
  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}"]`,
  47         ),
  48       );
  49
  50       // Add query string selector for pagers, exposed filters.
  51       selectors = selectors.map(current => current + querySelector);
  52
  53       // Query the DOM.
  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');
  58       }
  59     },
  60     detach(context, settings, trigger) {
  61       if (trigger === 'unload') {
  62         const activeLinks = context.querySelectorAll(
  63           '[data-drupal-link-system-path].is-active',
  64         );
  65         const il = activeLinks.length;
  66         for (let i = 0; i < il; i++) {
  67           activeLinks[i].classList.remove('is-active');
  68         }
  69       }
  70     },
  71   };
  72 })(Drupal, drupalSettings);