MDL-33890 Make course blocks less theme dependant
[moodle.git] / lib / yui / blocks / blocks.js
CommitLineData
56838156
RK
1YUI.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',
56838156
RK
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
d2122443
RK
30 // Find all block regions on the page
31 var blockregionlist = Y.Node.all('div.'+CSS.BLOCKREGION);
56838156
RK
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 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
26992cf1 87 }).plug(Y.Plugin.DDWinScroll);
56838156
RK
88 }
89 }, this);
90 }, this);
91 },
92
93 get_block_id : function(node) {
94 return Number(node.get('id').replace(/inst/i, ''));
95 },
96
97 get_block_region : function(node) {
98 return node.ancestor('div.'+CSS.BLOCKREGION).get('id').replace(/region/i, 'side');
99 },
100
101 get_region_id : function(node) {
102 return node.get('id').replace(/region-/i, '');
103 },
104
105 drag_start : function(e) {
106 // Get our drag object
107 var drag = e.target;
108
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);
112
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 },
121
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');
126
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 }
132
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 }
138
d2122443
RK
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.
142
56838156
RK
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.
146
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 }
153
154 // Moving from empty region-content towards the opposite one,
d2122443 155 // hide empty one (only for region-pre, region-post areas at the moment).
56838156 156 regionname = this.get_region_id(drop.ancestor('div.'+CSS.BLOCKREGION));
d2122443 157 if (this.dragsourceregion.all('.'+CSS.BLOCK).size() == 0 && this.dragsourceregion.get('id').match(/(region-pre|region-post)/i)) {
56838156
RK
158 if (!documentbody.hasClass('side-'+regionname+'-only')) {
159 documentbody.addClass('side-'+regionname+'-only');
160 }
161 }
162 },
163
164 drop_end : function(e) {
165 // clear variables
166 this.skipnodetop = null;
167 this.skipnodebottom = null;
168 this.dragsourceregion = null;
169 },
170
243e9bf9
RK
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 },
177
56838156
RK
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');
183
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 }
196
197 // Add lightbox if it not there
198 var lightbox = M.util.add_lightbox(Y, dragnode);
199
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 };
210
211 if (this.get('cmid')) {
212 params.cmid = this.get('cmid');
213 }
214
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 }
218
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 });
266
267 M.core_blocks = M.core_blocks || {};
268 M.core_blocks.init_dragdrop = function(params) {
269 new DRAGBLOCK(params);
270 }
26992cf1 271}, '@VERSION@', {requires:['base', 'node', 'io', 'dom', 'dd', 'dd-scroll', 'moodle-core-dragdrop', 'moodle-enrol-notification']});
56838156 272