blocks/course_overview/module.js

   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