[Summary view] [Print] [Text view]

   1  M.block_course_overview = {}
   2  
   3  M.block_course_overview.add_handles = function(Y) {
   4      M.block_course_overview.Y = Y;
   5      var MOVEICON = {
   6          pix: "i/move_2d",
   7          component: 'moodle'
   8      };
   9  
  10      YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', 'dd-plugin', function(Y) {
  11          //Static Vars
  12          var goingUp = false, lastY = 0;
  13  
  14          var list = Y.Node.all('.course_list .coursebox');
  15          list.each(function(v, k) {
  16              // Replace move link and image with move_2d image.
  17              var imagenode = v.one('.course_title .move a img');
  18              imagenode.setAttribute('src', M.util.image_url(MOVEICON.pix, MOVEICON.component));
  19              imagenode.addClass('cursor');
  20              v.one('.course_title .move a').replace(imagenode);
  21  
  22              var dd = new Y.DD.Drag({
  23                  node: v,
  24                  target: {
  25                      padding: '0 0 0 20'
  26                  }
  27              }).plug(Y.Plugin.DDProxy, {
  28                  moveOnEnd: false
  29              }).plug(Y.Plugin.DDConstrained, {
  30                  constrain2node: '.course_list'
  31              });
  32              dd.addHandle('.course_title .move');
  33          });
  34  
  35          Y.DD.DDM.on('drag:start', function(e) {
  36              //Get our drag object
  37              var drag = e.target;
  38              //Set some styles here
  39              drag.get('node').setStyle('opacity', '.25');
  40              drag.get('dragNode').addClass('block_course_overview');
  41              drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
  42              drag.get('dragNode').setStyles({
  43                  opacity: '.5',
  44                  borderColor: drag.get('node').getStyle('borderColor'),
  45                  backgroundColor: drag.get('node').getStyle('backgroundColor')
  46              });
  47          });
  48  
  49          Y.DD.DDM.on('drag:end', function(e) {
  50              var drag = e.target;
  51              //Put our styles back
  52              drag.get('node').setStyles({
  53                  visibility: '',
  54                  opacity: '1'
  55              });
  56              M.block_course_overview.save(Y);
  57          });
  58  
  59          Y.DD.DDM.on('drag:drag', function(e) {
  60              //Get the last y point
  61              var y = e.target.lastXY[1];
  62              //is it greater than the lastY var?
  63              if (y < lastY) {
  64                  //We are going up
  65                  goingUp = true;
  66              } else {
  67                  //We are going down.
  68                  goingUp = false;
  69              }
  70              //Cache for next check
  71              lastY = y;
  72          });
  73  
  74          Y.DD.DDM.on('drop:over', function(e) {
  75              //Get a reference to our drag and drop nodes
  76              var drag = e.drag.get('node'),
  77                  drop = e.drop.get('node');
  78  
  79              //Are we dropping on a li node?
  80              if (drop.hasClass('coursebox')) {
  81                  //Are we not going up?
  82                  if (!goingUp) {
  83                      drop = drop.get('nextSibling');
  84                  }
  85                  //Add the node to this list
  86                  e.drop.get('node').get('parentNode').insertBefore(drag, drop);
  87                  //Resize this nodes shim, so we can drop on it later.
  88                  e.drop.sizeShim();
  89              }
  90          });
  91  
  92          Y.DD.DDM.on('drag:drophit', function(e) {
  93              var drop = e.drop.get('node'),
  94                  drag = e.drag.get('node');
  95  
  96              //if we are not on an li, we must have been dropped on a ul
  97              if (!drop.hasClass('coursebox')) {
  98                  if (!drop.contains(drag)) {
  99                      drop.appendChild(drag);
 100                  }
 101              }
 102          });
 103      });
 104  }
 105  
 106  M.block_course_overview.save = function() {
 107      var Y = M.block_course_overview.Y;
 108      var sortorder = Y.one('.course_list').get('children').getAttribute('id');
 109      for (var i = 0; i < sortorder.length; i++) {
 110          sortorder[i] = sortorder[i].substring(7);
 111      }
 112      var params = {
 113          sesskey : M.cfg.sesskey,
 114          sortorder : sortorder
 115      };
 116      Y.io(M.cfg.wwwroot+'/blocks/course_overview/save.php', {
 117          method: 'POST',
 118          data: build_querystring(params),
 119          context: this
 120      });
 121  }
 122  
 123  /**
 124   * Init a collapsible region, see print_collapsible_region in weblib.php
 125   * @param {YUI} Y YUI3 instance with all libraries loaded
 126   * @param {String} id the HTML id for the div.
 127   * @param {String} userpref the user preference that records the state of this box. false if none.
 128   * @param {String} strtooltip
 129   */
 130  M.block_course_overview.collapsible = function(Y, id, userpref, strtooltip) {
 131      if (userpref) {
 132          M.block_course_overview.userpref = true;
 133      }
 134      Y.use('anim', function(Y) {
 135          new M.block_course_overview.CollapsibleRegion(Y, id, userpref, strtooltip);
 136      });
 137  };
 138  
 139  /**
 140   * Object to handle a collapsible region : instantiate and forget styled object
 141   *
 142   * @class
 143   * @constructor
 144   * @param {YUI} Y YUI3 instance with all libraries loaded
 145   * @param {String} id The HTML id for the div.
 146   * @param {String} userpref The user preference that records the state of this box. false if none.
 147   * @param {String} strtooltip
 148   */
 149  M.block_course_overview.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
 150      // Record the pref name
 151      this.userpref = userpref;
 152  
 153      // Find the divs in the document.
 154      this.div = Y.one('#'+id);
 155  
 156      // Get the caption for the collapsible region
 157      var caption = this.div.one('#'+id + '_caption');
 158      caption.setAttribute('title', strtooltip);
 159  
 160      // Create a link
 161      var a = Y.Node.create('<a href="#"></a>');
 162      // Create a local scoped lamba function to move nodes to a new link
 163      var movenode = function(node){
 164          node.remove();
 165          a.append(node);
 166      };
 167      // Apply the lamba function on each of the captions child nodes
 168      caption.get('children').each(movenode, this);
 169      caption.prepend(a);
 170  
 171      // Get the height of the div at this point before we shrink it if required
 172      var height = this.div.get('offsetHeight');
 173      if (this.div.hasClass('collapsed')) {
 174          // Shrink the div as it is collapsed by default
 175          this.div.setStyle('height', caption.get('offsetHeight')+'px');
 176      }
 177  
 178      // Create the animation.
 179      var animation = new Y.Anim({
 180          node: this.div,
 181          duration: 0.3,
 182          easing: Y.Easing.easeBoth,
 183          to: {height:caption.get('offsetHeight')},
 184          from: {height:height}
 185      });
 186  
 187      // Handler for the animation finishing.
 188      animation.on('end', function() {
 189          this.div.toggleClass('collapsed');
 190      }, this);
 191  
 192      // Hook up the event handler.
 193      caption.on('click', function(e, animation) {
 194          e.preventDefault();
 195          // Animate to the appropriate size.
 196          if (animation.get('running')) {
 197              animation.stop();
 198          }
 199          animation.set('reverse', this.div.hasClass('collapsed'));
 200          // Update the user preference.
 201          if (this.userpref) {
 202              M.util.set_user_preference(this.userpref, !this.div.hasClass('collapsed'));
 203          }
 204          animation.run();
 205      }, this, animation);
 206  };
 207  
 208  M.block_course_overview.userpref = false;
 209  
 210  /**
 211   * The user preference that stores the state of this box.
 212   * @property userpref
 213   * @type String
 214   */
 215  M.block_course_overview.CollapsibleRegion.prototype.userpref = null;
 216  
 217  /**
 218   * The key divs that make up this
 219   * @property div
 220   * @type Y.Node
 221   */
 222  M.block_course_overview.CollapsibleRegion.prototype.div = null;
 223  
 224  /**
 225   * The key divs that make up this
 226   * @property icon
 227   * @type Y.Node
 228   */
 229  M.block_course_overview.CollapsibleRegion.prototype.icon = null;
 230