blocks/recentlyaccesseditems/amd/src/main.js

  2. // This file is part of Moodle - http://moodle.org/
  3. //
  4. // Moodle is free software: you can redistribute it and/or modify
  5. // it under the terms of the GNU General Public License as published by
  6. // the Free Software Foundation, either version 3 of the License, or
  7. // (at your option) any later version.
  8. //
  9. // Moodle is distributed in the hope that it will be useful,
  10. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  11. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12. // GNU General Public License for more details.
  13. //
  14. // You should have received a copy of the GNU General Public License
  15. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  17. /**
  18.  * Javascript to initialise the Recently accessed items block.
  19.  *
  20.  * @module     block_recentlyaccesseditems/main
  21.  * @copyright  2018 Victor Deniz <victor@moodle.com>
  22.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  23.  */
  25. define(
  26.     [
  27.         'jquery',
  28.         'block_recentlyaccesseditems/repository',
  29.         'core/templates',
  30.         'core/notification'
  31.     ],
  32.     function(
  33.         $,
  34.         Repository,
  35.         Templates,
  36.         Notification
  37.     ) {
  39.         var NUM_ITEMS = 9;
  40.         // Maximum number of elements to display in the block initially.
  41.         var NUM_ITEMS_INIT = 3;
  43.         var SELECTORS = {
  44.             CARDDECK_CONTAINER: '[data-region="recentlyaccesseditems-view"]',
  45.             CARDDECK: '[data-region="recentlyaccesseditems-view-content"]',
  46.             SHOWMORE_LINK: '[data-region="recentlyaccesseditems-view"] [data-action="more-items"]',
  47.         };
  49.         /**
  50.          * Register event listeners.
  51.          */
  52.         const registerEventListeners = () => {
  53.             const showmoreLink = document.querySelector(SELECTORS.SHOWMORE_LINK);
  55.             // Hide "Show more" link and show additional items.
  56.             showmoreLink.addEventListener('click', () => {
  57.                 showmoreLink.classList.add('d-none');
  59.                 const hiddenItems = document.querySelector('[data-region="items-list"]').children;
  60.                 for (const hiddenItem of hiddenItems) {
  61.                     hiddenItem.style = "display: block";
  62.                 }
  63.             });
  64.         };
  66.         /**
  67.          * Get recent items from backend.
  68.          *
  69.          * @method getRecentItems
  70.          * @param {int} limit Only return this many results
  71.          * @return {array} Items user most recently has accessed
  72.          */
  73.         var getRecentItems = function(limit) {
  74.             return Repository.getRecentItems(limit);
  75.         };
  77.         /**
  78.          * Render the block content.
  79.          *
  80.          * @method renderItems
  81.          * @param {object} root The root element for the items view.
  82.          * @param {array} items containing array of returned items.
  83.          * @return {promise} Resolved with HTML and JS strings
  84.          */
  85.         var renderItems = function(root, items) {
  86.             if (items.length > 0) {
  87.                 let hasmoreitems = false;
  88.                 if (items.length > NUM_ITEMS_INIT) {
  89.                     hasmoreitems = true;
  90.                 }
  91.                 return Templates.render('block_recentlyaccesseditems/view-cards', {
  92.                     items: items,
  93.                     hasmoreitems: hasmoreitems
  94.                 });
  95.             } else {
  96.                 var noitemsimgurl = root.attr('data-noitemsimgurl');
  97.                 return Templates.render('block_recentlyaccesseditems/no-items', {
  98.                     noitemsimgurl: noitemsimgurl
  99.                 });
  100.             }
  101.         };
  103.         /**
  104.          * Get and show the recent items into the block.
  105.          *
  106.          * @param {object} root The root element for the items block.
  107.          */
  108.         var init = function(root) {
  109.             root = $(root);
  111.             var itemsContainer = root.find(SELECTORS.CARDDECK_CONTAINER);
  112.             var itemsContent = root.find(SELECTORS.CARDDECK);
  114.             var itemsPromise = getRecentItems(NUM_ITEMS);
  116.             itemsPromise.then(function(items) {
  117.                 var pageContentPromise = renderItems(itemsContainer, items);
  119.                 pageContentPromise.then(function(html, js) {
  120.                     Templates.replaceNodeContents(itemsContent, html, js);
  121.                     if (items.length > 3) {
  122.                         registerEventListeners();
  123.                     }
  124.                     return null;
  125.                 }).catch(Notification.exception);
  126.             }).catch(Notification.exception);
  127.         };
  129.         return {
  130.             init: init
  131.         };
  132.     });