lib/yui/blocks/blocks.js

   1 YUI.add('moodle-core-blocks', function(Y) {
   2
   3     var AJAXURL = '/lib/ajax/blocks.php',
   4     CSS = {
   5         BLOCK : 'block',
   6         BLOCKREGION : 'block-region',
   7         BLOCKADMINBLOCK : 'block_adminblock',
   8         EDITINGMOVE : 'editing_move',
   9         HEADER : 'header',
  10         LIGHTBOX : 'lightbox',
  11         REGIONCONTENT : 'region-content',
  12         SKIPBLOCK : 'skip-block',
  13         SKIPBLOCKTO : 'skip-block-to'
  14     }
  15
  16     var DRAGBLOCK = function() {
  17         DRAGBLOCK.superclass.constructor.apply(this, arguments);
  18     };
  19     Y.extend(DRAGBLOCK, M.core.dragdrop, {
  20         skipnodetop : null,
  21         skipnodebottom : null,
  22         dragsourceregion : null,
  23         initializer : function(params) {
  24             // Set group for parent class
  25             this.groups = ['block'];
  26             this.samenodeclass = CSS.BLOCK;
  27             this.parentnodeclass = CSS.REGIONCONTENT;
  28
  29             // Initialise blocks dragging
  30             // Find all block regions on the page
  31             var blockregionlist = Y.Node.all('div.'+CSS.BLOCKREGION);
  32
  33             if (blockregionlist.size() === 0) {
  34                 return false;
  35             }
  36
  37             // See if we are missing either of block regions,
  38             // if yes we need to add an empty one to use as target
  39             if (blockregionlist.size() != this.get('regions').length) {
  40                 var blockregion = Y.Node.create('<div></div>')
  41                     .addClass(CSS.BLOCKREGION);
  42                 var regioncontent = Y.Node.create('<div></div>')
  43                     .addClass(CSS.REGIONCONTENT);
  44                 blockregion.appendChild(regioncontent);
  45
  46                 var regionid = this.get_region_id(blockregionlist.item(0));
  47                 if (regionid === 'post') {
  48                     // pre block is missing, instert it before post
  49                     blockregion.setAttrs({id : 'region-pre'});
  50                     blockregionlist.item(0).insert(blockregion, 'before');
  51                     blockregionlist.unshift(blockregion);
  52                 } else {
  53                     // post block is missing, instert it after pre
  54                     blockregion.setAttrs({id : 'region-post'});
  55                     blockregionlist.item(0).insert(blockregion, 'after');
  56                     blockregionlist.push(blockregion);
  57                 }
  58             }
  59
  60             blockregionlist.each(function(blockregionnode) {
  61
  62                 // Setting blockregion as droptarget (the case when it is empty)
  63                 // The region-post (the right one)
  64                 // is very narrow, so add extra padding on the left to drop block on it.
  65                 var tar = new Y.DD.Drop({
  66                     node: blockregionnode.one('div.'+CSS.REGIONCONTENT),
  67                     groups: this.groups,
  68                     padding: '40 240 40 240'
  69                 });
  70
  71                 // Make each div element in the list of blocks draggable
  72                 var del = new Y.DD.Delegate({
  73                     container: blockregionnode,
  74                     nodes: '.'+CSS.BLOCK,
  75                     target: true,
  76                     handles: ['.'+CSS.HEADER],
  77                     invalid: '.block-hider-hide, .block-hider-show, .moveto',
  78                     dragConfig: {groups: this.groups}
  79                 });
  80                 del.dd.plug(Y.Plugin.DDProxy, {
  81                     // Don't move the node at the end of the drag
  82                     moveOnEnd: false
  83                 });
  84                 del.dd.plug(Y.Plugin.DDWinScroll);
  85
  86                 var blocklist = blockregionnode.all('.'+CSS.BLOCK);
  87                 blocklist.each(function(blocknode) {
  88                     var move = blocknode.one('a.'+CSS.EDITINGMOVE);
  89                     if (move) {
  90                         move.remove();
  91                         blocknode.one('.'+CSS.HEADER).setStyle('cursor', 'move');
  92                     }
  93                 }, this);
  94             }, this);
  95         },
  96
  97         get_block_id : function(node) {
  98             return Number(node.get('id').replace(/inst/i, ''));
  99         },
 100
 101         get_block_region : function(node) {
 102             var region = node.ancestor('div.'+CSS.BLOCKREGION).get('id').replace(/region-/i, '');
 103             if (Y.Array.indexOf(this.get('regions'), region) === -1) {
 104                 // Must be standard side-X
 105                 return 'side-' + region;
 106             }
 107             // Perhaps custom region
 108             return region;
 109         },
 110
 111         get_region_id : function(node) {
 112             return node.get('id').replace(/region-/i, '');
 113         },
 114
 115         drag_start : function(e) {
 116             // Get our drag object
 117             var drag = e.target;
 118
 119             // Store the parent node of original drag node (block)
 120             // we will need it later for show/hide empty regions
 121             this.dragsourceregion = drag.get('node').ancestor('div.'+CSS.BLOCKREGION);
 122
 123             // Determine skipnodes and store them
 124             if (drag.get('node').previous() && drag.get('node').previous().hasClass(CSS.SKIPBLOCK)) {
 125                 this.skipnodetop = drag.get('node').previous();
 126             }
 127             if (drag.get('node').next() && drag.get('node').next().hasClass(CSS.SKIPBLOCKTO)) {
 128                 this.skipnodebottom = drag.get('node').next();
 129             }
 130         },
 131
 132         drop_over : function(e) {
 133             // Get a reference to our drag and drop nodes
 134             var drag = e.drag.get('node');
 135             var drop = e.drop.get('node');
 136
 137             // We need to fix the case when parent drop over event has determined
 138             // 'goingup' and appended the drag node after admin-block.
 139             if (drop.hasClass(this.parentnodeclass) && drop.one('.'+CSS.BLOCKADMINBLOCK) && drop.one('.'+CSS.BLOCKADMINBLOCK).next('.'+CSS.BLOCK)) {
 140                 drop.prepend(drag);
 141             }
 142
 143             // Block is moved within the same region
 144             // stop here, no need to modify anything.
 145             if (this.dragsourceregion.contains(drop)) {
 146                 return false;
 147             }
 148
 149             // TODO: Hiding-displaying block region only works for base theme blocks
 150             // (region-pre, region-post) at the moment. It should be improved
 151             // to work with custom block regions as well.
 152
 153             // TODO: Fix this for the case when user drag block towards empty section,
 154             // then the section appears, then user chnages his mind and moving back to
 155             // original section. The opposite section remains opened and empty.
 156
 157             var documentbody = Y.one('body');
 158             // Moving block towards hidden region-content, display it
 159             var regionname = this.get_region_id(this.dragsourceregion);
 160             if (documentbody.hasClass('side-'+regionname+'-only')) {
 161                 documentbody.removeClass('side-'+regionname+'-only');
 162             }
 163
 164             // Moving from empty region-content towards the opposite one,
 165             // hide empty one (only for region-pre, region-post areas at the moment).
 166             regionname = this.get_region_id(drop.ancestor('div.'+CSS.BLOCKREGION));
 167             if (this.dragsourceregion.all('.'+CSS.BLOCK).size() == 0 && this.dragsourceregion.get('id').match(/(region-pre|region-post)/i)) {
 168                 if (!documentbody.hasClass('side-'+regionname+'-only')) {
 169                     documentbody.addClass('side-'+regionname+'-only');
 170                 }
 171             }
 172         },
 173
 174         drop_end : function(e) {
 175             // clear variables
 176             this.skipnodetop = null;
 177             this.skipnodebottom = null;
 178             this.dragsourceregion = null;
 179         },
 180
 181         drag_dropmiss : function(e) {
 182             // Missed the target, but we assume the user intended to drop it
 183             // on the last last ghost node location, e.drag and e.drop should be
 184             // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
 185             this.drop_hit(e);
 186         },
 187
 188         drop_hit : function(e) {
 189             var drag = e.drag;
 190             // Get a reference to our drag node
 191             var dragnode = drag.get('node');
 192             var dropnode = e.drop.get('node');
 193
 194             // Amend existing skipnodes
 195             if (dragnode.previous() && dragnode.previous().hasClass(CSS.SKIPBLOCK)) {
 196                 // the one that belongs to block below move below
 197                 dragnode.insert(dragnode.previous(), 'after');
 198             }
 199             // Move original skipnodes
 200             if (this.skipnodetop) {
 201                 dragnode.insert(this.skipnodetop, 'before');
 202             }
 203             if (this.skipnodebottom) {
 204                 dragnode.insert(this.skipnodebottom, 'after');
 205             }
 206
 207             // Add lightbox if it not there
 208             var lightbox = M.util.add_lightbox(Y, dragnode);
 209
 210             // Prepare request parameters
 211             var params = {
 212                 sesskey : M.cfg.sesskey,
 213                 courseid : this.get('courseid'),
 214                 pagelayout : this.get('pagelayout'),
 215                 pagetype : this.get('pagetype'),
 216                 subpage : this.get('subpage'),
 217                 action : 'move',
 218                 bui_moveid : this.get_block_id(dragnode),
 219                 bui_newregion : this.get_block_region(dropnode)
 220             };
 221
 222             if (this.get('cmid')) {
 223                 params.cmid = this.get('cmid');
 224             }
 225
 226             if (dragnode.next('.'+this.samenodeclass) && !dragnode.next('.'+this.samenodeclass).hasClass(CSS.BLOCKADMINBLOCK)) {
 227                 params.bui_beforeid = this.get_block_id(dragnode.next('.'+this.samenodeclass));
 228             }
 229
 230             // Do AJAX request
 231             Y.io(M.cfg.wwwroot+AJAXURL, {
 232                 method: 'POST',
 233                 data: params,
 234                 on: {
 235                     start : function(tid) {
 236                         lightbox.show();
 237                     },
 238                     success: function(tid, response) {
 239                         window.setTimeout(function(e) {
 240                             lightbox.hide();
 241                         }, 250);
 242                         try {
 243                             var responsetext = Y.JSON.parse(response.responseText);
 244                             if (responsetext.error) {
 245                                 new M.core.ajaxException(responsetext);
 246                             }
 247                         } catch (e) {}
 248                     },
 249                     failure: function(tid, response) {
 250                         this.ajax_failure(response);
 251                         lightbox.hide();
 252                     }
 253                 },
 254                 context:this
 255             });
 256         }
 257     }, {
 258         NAME : 'core-blocks-dragdrop',
 259         ATTRS : {
 260             courseid : {
 261                 value : null
 262             },
 263             cmid : {
 264                 value : null
 265             },
 266             pagelayout : {
 267                 value : null
 268             },
 269             pagetype : {
 270                 value : null
 271             },
 272             subpage : {
 273                 value : null
 274             },
 275             regions : {
 276                 value : null
 277             }
 278         }
 279     });
 280
 281     M.core_blocks = M.core_blocks || {};
 282     M.core_blocks.init_dragdrop = function(params) {
 283         new DRAGBLOCK(params);
 284     }
 285 }, '@VERSION@', {requires:['base', 'node', 'io', 'dom', 'dd', 'dd-scroll', 'moodle-core-dragdrop', 'moodle-core-notification']});
 286