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

   1 /**
   2  * @file
   3  * Attaches behaviors for Drupal's active link marking.
   4  */
   5
   6 (function (Drupal, drupalSettings) {
   7
   8   'use strict';
   9
  10   /**
  11    * Append is-active class.
  12    *
  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).
  18    *
  19    * Does not discriminate based on element type, so allows you to set the
  20    * is-active class on any element: a, li…
  21    *
  22    * @type {Drupal~behavior}
  23    */
  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 + '"]'];
  31       var selectors;
  32
  33       // If this is the front page, we have to check for the <front> path as
  34       // well.
  35       if (path.isFront) {
  36         originalSelectors.push('[data-drupal-link-system-path="<front>"]');
  37       }
  38
  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 + '"]'; })
  45       );
  46
  47       // Add query string selector for pagers, exposed filters.
  48       selectors = selectors.map(function (current) { return current + querySelector; });
  49
  50       // Query the DOM.
  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');
  55       }
  56     },
  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');
  63         }
  64       }
  65     }
  66   };
  67
  68 })(Drupal, drupalSettings);