MDL-33890 Make course blocks less theme dependant
[moodle.git] / lib / yui / blocks / blocks.js
1 YUI.add('moodle-core-blocks', function(Y) {
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     }
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;
29             // Initialise blocks dragging
30             // Find all block regions on the page
31             var blockregionlist = Y.Node.all('div.'+CSS.BLOCKREGION);
33             if (blockregionlist.size() === 0) {
34                 return false;
35             }
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);
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             }
60             blockregionlist.each(function(blockregionnode) {
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                 });
71                 var blocklist = blockregionnode.all('.'+CSS.BLOCK);
72                 blocklist.each(function(blocknode) {
73                     var move = blocknode.one('a.'+CSS.EDITINGMOVE);
74                     if (move) {
75                         move.remove();
76                         blocknode.one('.'+CSS.HEADER).setStyle('cursor', 'move');
77                         // Make each div element in the list of blocks draggable
78                         var dd = new Y.DD.Drag({
79                             node: blocknode,
80                             groups: this.groups,
81                             // Make each div a Drop target too
82                             target: true,
83                             handles: ['.'+CSS.HEADER]
84                         }).plug(Y.Plugin.DDProxy, {
85                             // Don't move the node at the end of the drag
86                             moveOnEnd: false
87                         }).plug(Y.Plugin.DDWinScroll);
88                     }
89                 }, this);
90             }, this);
91         },
93         get_block_id : function(node) {
94             return Number(node.get('id').replace(/inst/i, ''));
95         },
97         get_block_region : function(node) {
98             return node.ancestor('div.'+CSS.BLOCKREGION).get('id').replace(/region/i, 'side');
99         },
101         get_region_id : function(node) {
102             return node.get('id').replace(/region-/i, '');
103         },
105         drag_start : function(e) {
106             // Get our drag object
107             var drag = e.target;
109             // Store the parent node of original drag node (block)
110             // we will need it later for show/hide empty regions
111             this.dragsourceregion = drag.get('node').ancestor('div.'+CSS.BLOCKREGION);
113             // Determine skipnodes and store them
114             if (drag.get('node').previous() && drag.get('node').previous().hasClass(CSS.SKIPBLOCK)) {
115                 this.skipnodetop = drag.get('node').previous();
116             }
117             if (drag.get('node').next() && drag.get('node').next().hasClass(CSS.SKIPBLOCKTO)) {
118                 this.skipnodebottom = drag.get('node').next();
119             }
120         },
122         drop_over : function(e) {
123             // Get a reference to our drag and drop nodes
124             var drag = e.drag.get('node');
125             var drop = e.drop.get('node');
127             // We need to fix the case when parent drop over event has determined
128             // 'goingup' and appended the drag node after admin-block.
129             if (drop.hasClass(this.parentnodeclass) && drop.one('.'+CSS.BLOCKADMINBLOCK) && drop.one('.'+CSS.BLOCKADMINBLOCK).next('.'+CSS.BLOCK)) {
130                 drop.prepend(drag);
131             }
133             // Block is moved within the same region
134             // stop here, no need to modify anything.
135             if (this.dragsourceregion.contains(drop)) {
136                 return false;
137             }
139             // TODO: Hiding-displaying block region only works for base theme blocks
140             // (region-pre, region-post) at the moment. It should be improved
141             // to work with custom block regions as well.
143             // TODO: Fix this for the case when user drag block towards empty section,
144             // then the section appears, then user chnages his mind and moving back to
145             // original section. The opposite section remains opened and empty.
147             var documentbody = Y.one('body');
148             // Moving block towards hidden region-content, display it
149             var regionname = this.get_region_id(this.dragsourceregion);
150             if (documentbody.hasClass('side-'+regionname+'-only')) {
151                 documentbody.removeClass('side-'+regionname+'-only');
152             }
154             // Moving from empty region-content towards the opposite one,
155             // hide empty one (only for region-pre, region-post areas at the moment).
156             regionname = this.get_region_id(drop.ancestor('div.'+CSS.BLOCKREGION));
157             if (this.dragsourceregion.all('.'+CSS.BLOCK).size() == 0 && this.dragsourceregion.get('id').match(/(region-pre|region-post)/i)) {
158                 if (!documentbody.hasClass('side-'+regionname+'-only')) {
159                     documentbody.addClass('side-'+regionname+'-only');
160                 }
161             }
162         },
164         drop_end : function(e) {
165             // clear variables
166             this.skipnodetop = null;
167             this.skipnodebottom = null;
168             this.dragsourceregion = null;
169         },
171         drag_dropmiss : function(e) {
172             // Missed the target, but we assume the user intended to drop it
173             // on the last last ghost node location, e.drag and e.drop should be
174             // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
175             this.drop_hit(e);
176         },
178         drop_hit : function(e) {
179             var drag = e.drag;
180             // Get a reference to our drag node
181             var dragnode = drag.get('node');
182             var dropnode = e.drop.get('node');
184             // Amend existing skipnodes
185             if (dragnode.previous() && dragnode.previous().hasClass(CSS.SKIPBLOCK)) {
186                 // the one that belongs to block below move below
187                 dragnode.insert(dragnode.previous(), 'after');
188             }
189             // Move original skipnodes
190             if (this.skipnodetop) {
191                 dragnode.insert(this.skipnodetop, 'before');
192             }
193             if (this.skipnodebottom) {
194                 dragnode.insert(this.skipnodebottom, 'after');
195             }
197             // Add lightbox if it not there
198             var lightbox = M.util.add_lightbox(Y, dragnode);
200             // Prepare request parameters
201             var params = {
202                 sesskey : M.cfg.sesskey,
203                 courseid : this.get('courseid'),
204                 pagelayout : this.get('pagelayout'),
205                 pagetype : this.get('pagetype'),
206                 action : 'move',
207                 bui_moveid : this.get_block_id(dragnode),
208                 bui_newregion : this.get_block_region(dropnode)
209             };
211             if (this.get('cmid')) {
212                 params.cmid = this.get('cmid');
213             }
215             if (dragnode.next('.'+this.samenodeclass) && !dragnode.next('.'+this.samenodeclass).hasClass(CSS.BLOCKADMINBLOCK)) {
216                 params.bui_beforeid = this.get_block_id(dragnode.next('.'+this.samenodeclass));
217             }
219             // Do AJAX request
220             Y.io(M.cfg.wwwroot+AJAXURL, {
221                 method: 'POST',
222                 data: params,
223                 on: {
224                     start : function(tid) {
225                         lightbox.show();
226                     },
227                     success: function(tid, response) {
228                         window.setTimeout(function(e) {
229                             lightbox.hide();
230                         }, 250);
231                         try {
232                             var responsetext = Y.JSON.parse(response.responseText);
233                             if (responsetext.error) {
234                                 new M.core.ajaxException(responsetext);
235                             }
236                         } catch (e) {}
237                     },
238                     failure: function(tid, response) {
239                         this.ajax_failure(response);
240                         lightbox.hide();
241                     }
242                 },
243                 context:this
244             });
245         }
246     }, {
247         NAME : 'core-blocks-dragdrop',
248         ATTRS : {
249             courseid : {
250                 value : null
251             },
252             cmid : {
253                 value : null
254             },
255             pagelayout : {
256                 value : null
257             },
258             pagetype : {
259                 value : null
260             },
261             regions : {
262                 value : null
263             }
264         }
265     });
267     M.core_blocks = M.core_blocks || {};
268     M.core_blocks.init_dragdrop = function(params) {
269         new DRAGBLOCK(params);
270     }
271 }, '@VERSION@', {requires:['base', 'node', 'io', 'dom', 'dd', 'dd-scroll', 'moodle-core-dragdrop', 'moodle-enrol-notification']});