[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   * Javascript to manage the paging dropdown control.
  18   *
  19   * @module     core/paged_content_paging_dropdown
  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/paged_content_events',
  28          'core/pubsub'
  29      ],
  30      function(
  31          $,
  32          CustomEvents,
  33          PagedContentEvents,
  34          PubSub
  35      ) {
  36  
  37      var SELECTORS = {
  38          ROOT: '[data-region="paging-dropdown-container"]',
  39          DROPDOWN_ITEM: '[data-region="dropdown-item"]',
  40          DROPDOWN_TOGGLE: '[data-region="dropdown-toggle"]',
  41          ACTIVE_DROPDOWN_ITEM: '[data-region="dropdown-item"].active',
  42          CARET: '[data-region="caret"]'
  43      };
  44  
  45      /**
  46       * Get the page number.
  47       *
  48       * @param {jquery} item The dropdown item.
  49       * @returns {Number}
  50       */
  51      var getPageNumber = function(item) {
  52          return parseInt(item.attr('data-page-number'), 10);
  53      };
  54  
  55      /**
  56       * Get all paging dropdown items.
  57       *
  58       * @param {jquery} root The root element.
  59       * @returns {jquery} A jquery object with all items.
  60       */
  61      var getAllItems = function(root) {
  62          return root.find(SELECTORS.DROPDOWN_ITEM);
  63      };
  64  
  65      /**
  66       * Get all paging dropdown items with lower page numbers than the given
  67       * dropdown item.
  68       *
  69       * @param {jquery} root The root element.
  70       * @param {jquery} item The dropdown item.
  71       * @returns {jquery} A jquery object with all items.
  72       */
  73      var getPreviousItems = function(root, item) {
  74          var pageNumber = getPageNumber(item);
  75          return getAllItems(root).filter(function(index, element) {
  76              return getPageNumber($(element)) < pageNumber;
  77          });
  78      };
  79  
  80      /**
  81       * Get the number of items to be loaded for the dropdown item.
  82       *
  83       * @param {jquery} item The dropdown item.
  84       * @returns {Number}
  85       */
  86      var getLimit = function(item) {
  87          return parseInt(item.attr('data-item-count'), 10);
  88      };
  89  
  90      /**
  91       * Get the offset of items from the start of the itemset for the given
  92       * dropdown item.
  93       *
  94       * @param {jquery} root The root element.
  95       * @param {jquery} item The dropdown item.
  96       * @returns {Number}
  97       */
  98      var getOffset = function(root, item) {
  99          if (item.attr('data-offset') != undefined) {
 100              return parseInt(item.attr('data-offset'), 10);
 101          }
 102  
 103          var offset = 0;
 104  
 105          getPreviousItems(root, item).each(function(index, prevItem) {
 106              prevItem = $(prevItem);
 107              offset += getLimit(prevItem);
 108          });
 109  
 110          item.attr('data-offset', offset);
 111          return offset;
 112      };
 113  
 114      /**
 115       * Get the active dropdown item.
 116       *
 117       * @param {jquery} root The root element.
 118       * @returns {jquery} The active dropdown item.
 119       */
 120      var getActiveItem = function(root) {
 121          return root.find(SELECTORS.ACTIVE_DROPDOWN_ITEM);
 122      };
 123  
 124      /**
 125       * Create the event payload for the list of dropdown items. The event payload
 126       * is an array of objects with one object per dropdown item.
 127       *
 128       * Each payload object contains the page number, limit, and offset for the
 129       * corresponding dropdown item.
 130       *
 131       * For example: If we had 3 dropdown items with incrementing page numbers loading
 132       * 25 items per page then the generated payload would look like:
 133       * [
 134       *      {
 135       *          pageNumber: 1,
 136       *          limit: 25,
 137       *          offset: 0
 138       *      },
 139       *      {
 140       *          pageNumber: 2,
 141       *          limit: 25,
 142       *          offset: 25
 143       *      },
 144       *      {
 145       *          pageNumber: 3,
 146       *          limit: 25,
 147       *          offset: 50
 148       *      }
 149       * ]
 150       *
 151       * @param {jquery} root The root element.
 152       * @param {jquery} items The dropdown items.
 153       * @returns {object[]} The payload for the event.
 154       */
 155      var generateEventPayload = function(root, items) {
 156          return items.map(function(index, item) {
 157              item = $(item);
 158              return {
 159                  pageNumber: getPageNumber(item),
 160                  limit: getLimit(item),
 161                  offset: getOffset(root, item),
 162              };
 163          }).get();
 164      };
 165  
 166      /**
 167       * Add page number attributes to each of the given items. The page numbers
 168       * start at 1 and increment by 1 for each item, e.g. 1, 2, 3 etc.
 169       *
 170       * @param {jquery} items The dropdown items.
 171       */
 172      var generatePageNumbers = function(items) {
 173          items.each(function(index, item) {
 174              item = $(item);
 175              item.attr('data-page-number', index + 1);
 176          });
 177      };
 178  
 179      /**
 180       * Make the given item active by setting the active class on it and firing
 181       * the SHOW_PAGES event for the paged content to show the appropriate
 182       * pages.
 183       *
 184       * @param {jquery} root The root element.
 185       * @param {jquery} item The dropdown item.
 186       * @param {string} id A unique id for this instance.
 187       */
 188      var setActiveItem = function(root, item, id) {
 189          var prevItems = getPreviousItems(root, item);
 190          var allItems = prevItems.add(item);
 191          var eventPayload = generateEventPayload(root, allItems);
 192          var toggle = root.find(SELECTORS.DROPDOWN_TOGGLE);
 193          var caret = toggle.find(SELECTORS.CARET);
 194  
 195          getActiveItem(root).removeClass('active');
 196          item.addClass('active');
 197  
 198          // Update the dropdown toggle to show which item is selected.
 199          toggle.html(item.text());
 200          // Bootstrap 2 compatibility.
 201          toggle.append(caret);
 202          // Fire the event to tell the content to update.
 203          PubSub.publish(id + PagedContentEvents.SHOW_PAGES, eventPayload);
 204      };
 205  
 206      /**
 207       * Initialise the module by firing the SHOW_PAGES event for an existing
 208       * active page found and setting up the event listener for the user to select
 209       * new pages.
 210       *
 211       * @param {object} root The root element.
 212       * @param {string} id A unique id for this instance.
 213       */
 214      var init = function(root, id) {
 215          root = $(root);
 216          var items = getAllItems(root);
 217          generatePageNumbers(items);
 218  
 219          var activeItem = getActiveItem(root);
 220          if (activeItem.length) {
 221              // Fire the first event for the content to make sure it's visible.
 222              setActiveItem(root, activeItem, id);
 223          }
 224  
 225          CustomEvents.define(root, [
 226              CustomEvents.events.activate
 227          ]);
 228  
 229          root.on(CustomEvents.events.activate, SELECTORS.DROPDOWN_ITEM, function(e, data) {
 230              var item = $(e.target).closest(SELECTORS.DROPDOWN_ITEM);
 231              setActiveItem(root, item, id);
 232  
 233              data.originalEvent.preventDefault();
 234          });
 235      };
 236  
 237      return {
 238          init: init,
 239          rootSelector: SELECTORS.ROOT,
 240      };
 241  });