[Summary view] [Print] [Text view]

   1  // This file is part of Moodle - http://moodle.org/
   2  //
   3  // Moodle is free software: you can redistribute it and/or modify
   4  // it under the terms of the GNU General Public License as published by
   5  // the Free Software Foundation, either version 3 of the License, or
   6  // (at your option) any later version.
   7  //
   8  // Moodle is distributed in the hope that it will be useful,
   9  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11  // GNU General Public License for more details.
  12  //
  13  // You should have received a copy of the GNU General Public License
  14  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15  
  16  /**
  17   * Provide global helper code to enhance page elements.
  18   *
  19   * @module     core/page_global
  20   * @copyright  2018 Ryan Wyllie <ryan@moodle.com>
  21   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22   */
  23  define(
  24  [
  25      'jquery',
  26      'core/custom_interaction_events',
  27      'core/str',
  28      'core/network'
  29  ],
  30  function(
  31      $,
  32      CustomEvents,
  33      Str,
  34      Network
  35  ) {
  36  
  37      /**
  38       * Add an event handler for dropdown menus that wish to show their active item
  39       * in the dropdown toggle element.
  40       *
  41       * By default the handler will add the "active" class to the selected dropdown
  42       * item and set it's text as the HTML for the dropdown toggle.
  43       *
  44       * The behaviour of this handler is controlled by adding data attributes to
  45       * the HTML and requires the typically Bootstrap dropdown markup.
  46       *
  47       * data-show-active-item - Add to the .dropdown-menu element to enable default
  48       *                         functionality.
  49       * data-skip-active-class - Add to the .dropdown-menu to prevent this code from
  50       *                          adding the active class to the dropdown items
  51       * data-active-item-text - Add to an element within the data-toggle="dropdown" element
  52       *                         to use it as the active option text placeholder otherwise the
  53       *                         data-toggle="dropdown" element itself will be used.
  54       * data-active-item-button-aria-label-components - String components to set the aria
  55       *                         lable on the dropdown button. The string will be given the
  56       *                         active item text.
  57       */
  58      var initActionOptionDropdownHandler = function() {
  59          var body = $('body');
  60  
  61          CustomEvents.define(body, [CustomEvents.events.activate]);
  62          body.on(CustomEvents.events.activate, '[data-show-active-item]', function(e) {
  63              // The dropdown item that the user clicked on.
  64              var option = $(e.target).closest('.dropdown-item');
  65              // The dropdown menu element.
  66              var menuContainer = option.closest('[data-show-active-item]');
  67  
  68              if (!option.hasClass('dropdown-item')) {
  69                  // Ignore non Bootstrap dropdowns.
  70                  return;
  71              }
  72  
  73              if (option.hasClass('active')) {
  74                  // If it's already active then we don't need to do anything.
  75                  return;
  76              }
  77  
  78              // Clear the active class from all other options.
  79              var dropdownItems = menuContainer.find('.dropdown-item');
  80              dropdownItems.removeClass('active');
  81              dropdownItems.removeAttr('aria-current');
  82  
  83              if (!menuContainer.attr('data-skip-active-class')) {
  84                  // Make this option active unless configured to ignore it.
  85                  // Some code, for example the Bootstrap tabs, may want to handle
  86                  // adding the active class itself.
  87                  option.addClass('active');
  88              }
  89  
  90              // Update aria attribute for active item.
  91              option.attr('aria-current', true);
  92  
  93              var activeOptionText = option.text();
  94              var dropdownToggle = menuContainer.parent().find('[data-toggle="dropdown"]');
  95              var dropdownToggleText = dropdownToggle.find('[data-active-item-text]');
  96  
  97              if (dropdownToggleText.length) {
  98                  // We have a specific placeholder for the active item text so
  99                  // use that.
 100                  dropdownToggleText.html(activeOptionText);
 101              } else {
 102                  // Otherwise just replace all of the toggle text with the active item.
 103                  dropdownToggle.html(activeOptionText);
 104              }
 105  
 106              var activeItemAriaLabelComponent = menuContainer.attr('data-active-item-button-aria-label-components');
 107              if (activeItemAriaLabelComponent) {
 108                  // If we have string components for the aria label then load the string
 109                  // and set the label on the dropdown toggle.
 110                  var strParams = activeItemAriaLabelComponent.split(',');
 111                  strParams.push(activeOptionText);
 112  
 113                  Str.get_string(strParams[0].trim(), strParams[1].trim(), strParams[2].trim())
 114                      .then(function(string) {
 115                          dropdownToggle.attr('aria-label', string);
 116                          return string;
 117                      })
 118                      .catch(function() {
 119                          // Silently ignore that we couldn't load the string.
 120                          return false;
 121                      });
 122              }
 123          });
 124      };
 125  
 126      /**
 127       * Initialise the global helper functions.
 128       */
 129      var init = function() {
 130          initActionOptionDropdownHandler();
 131          Network.init();
 132      };
 133  
 134      return {
 135          init: init
 136      };
 137  });