[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   * Parse the response from the navblock ajax page and render the correct DOM
  18   * structure for the tree from it.
  19   *
  20   * @module     block_navigation/ajax_response_renderer
  21   * @package    core
  22   * @copyright  2015 John Okely <john@moodle.com>
  23   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  24   */
  25  define(['jquery'], function($) {
  26  
  27      // Mappings for the different types of nodes coming from the navigation.
  28      // Copied from lib/navigationlib.php navigation_node constants.
  29      var NODETYPE = {
  30          // @type int Activity (course module) = 40.
  31          ACTIVITY: 40,
  32          // @type int Resource (course module = 50.
  33          RESOURCE: 50,
  34      };
  35  
  36      /**
  37       * Build DOM.
  38       *
  39       * @method buildDOM
  40       * @param {Object} rootElement the root element of DOM.
  41       * @param {object} nodes jquery object representing the nodes to be build.
  42       */
  43      function buildDOM(rootElement, nodes) {
  44          var ul = $('<ul></ul>');
  45          ul.attr('role', 'group');
  46          ul.attr('aria-hidden', true);
  47  
  48          $.each(nodes, function(index, node) {
  49              if (typeof node !== 'object') {
  50                  return;
  51              }
  52  
  53              var li = $('<li></li>');
  54              var p = $('<p></p>');
  55              var id = node.id || node.key + '_tree_item';
  56              var icon = null;
  57              var isBranch = (node.expandable || node.haschildren) ? true : false;
  58  
  59              p.addClass('tree_item');
  60              p.attr('id', id);
  61              p.attr('role', 'treeitem');
  62              // Negative tab index to allow it to receive focus.
  63              p.attr('tabindex', '-1');
  64  
  65              if (node.requiresajaxloading) {
  66                  p.attr('data-requires-ajax', true);
  67                  p.attr('data-node-id', node.id);
  68                  p.attr('data-node-key', node.key);
  69                  p.attr('data-node-type', node.type);
  70              }
  71  
  72              if (isBranch) {
  73                  li.addClass('collapsed contains_branch');
  74                  p.attr('aria-expanded', false);
  75                  p.addClass('branch');
  76              }
  77  
  78              if (node.icon && (!isBranch || node.type === NODETYPE.ACTIVITY || node.type === NODETYPE.RESOURCE)) {
  79                  li.addClass('item_with_icon');
  80                  p.addClass('hasicon');
  81  
  82                  icon = $('<img/>');
  83                  icon.attr('alt', node.icon.alt);
  84                  icon.attr('title', node.icon.title);
  85                  icon.attr('src', M.util.image_url(node.icon.pix, node.icon.component));
  86                  $.each(node.icon.classes, function(index, className) {
  87                      icon.addClass(className);
  88                  });
  89              }
  90  
  91              if (node.link) {
  92                  var link = $('<a title="' + node.title + '" href="' + node.link + '"></a>');
  93  
  94                  if (icon) {
  95                      link.append(icon);
  96                      link.append('<span class="item-content-wrap">' + node.name + '</span>');
  97                  } else {
  98                      link.append(node.name);
  99                  }
 100  
 101                  if (node.hidden) {
 102                      link.addClass('dimmed');
 103                  }
 104  
 105                  p.append(link);
 106              } else {
 107                  var span = $('<span></span>');
 108  
 109                  if (icon) {
 110                      span.append(icon);
 111                      span.append('<span class="item-content-wrap">' + node.name + '</span>');
 112                  } else {
 113                      span.append(node.name);
 114                  }
 115  
 116                  if (node.hidden) {
 117                      span.addClass('dimmed');
 118                  }
 119  
 120                  p.append(span);
 121              }
 122  
 123              li.append(p);
 124              ul.append(li);
 125  
 126              if (node.children && node.children.length) {
 127                  buildDOM(p, node.children);
 128              } else if (isBranch && !node.requiresajaxloading) {
 129                  li.removeClass('contains_branch');
 130                  p.addClass('emptybranch');
 131              }
 132          });
 133  
 134          rootElement.parent().append(ul);
 135          var id = rootElement.attr('id') + '_group';
 136          ul.attr('id', id);
 137          rootElement.attr('aria-owns', id);
 138          rootElement.attr('role', 'treeitem');
 139      }
 140  
 141      return {
 142          render: function(element, nodes) {
 143              // The first element of the response is the existing node so we start with processing the children.
 144              if (nodes.children && nodes.children.length) {
 145                  buildDOM(element, nodes.children);
 146  
 147                  var item = element.children("[role='treeitem']").first();
 148                  var group = element.find('#' + item.attr('aria-owns'));
 149  
 150                  item.attr('aria-expanded', true);
 151                  group.attr('aria-hidden', false);
 152              } else {
 153                  if (element.parent().hasClass('contains_branch')) {
 154                      element.parent().removeClass('contains_branch');
 155                      element.addClass('emptybranch');
 156                  }
 157              }
 158          }
 159      };
 160  });