Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
/**
2
 * This file contains the drag and drop manager class.
3
 *
4
 * Provides drag and drop functionality for blocks.
5
 *
6
 * @module moodle-core-blockdraganddrop
7
 */
8
 
9
/**
10
 * Constructs a new Block drag and drop manager.
11
 *
12
 * @namespace M.core.blockdraganddrop
13
 * @class Manager
14
 * @constructor
15
 * @extends M.core.dragdrop
16
 */
17
MANAGER = function() {
18
    MANAGER.superclass.constructor.apply(this, arguments);
19
};
20
MANAGER.prototype = {
21
 
22
    /**
23
     * The skip block link from above the block being dragged while a drag is in progress.
24
     * Required by the M.core.dragdrop from whom this class extends.
25
     * @private
26
     * @property skipnodetop
27
     * @type Node
28
     * @default null
29
     */
30
    skipnodetop: null,
31
 
32
    /**
33
     * The skip block link from below the block being dragged while a drag is in progress.
34
     * Required by the M.core.dragdrop from whom this class extends.
35
     * @private
36
     * @property skipnodebottom
37
     * @type Node
38
     * @default null
39
     */
40
    skipnodebottom: null,
41
 
42
    /**
43
     * An associative object of regions and the
44
     * @property regionobjects
45
     * @type {Object} Primitive object mocking an associative array.
46
     * @type {BLOCKREGION} [regionname]* Each item uses the region name as the key with the value being
47
     *      an instance of the BLOCKREGION class.
48
     */
49
    regionobjects: {},
50
 
51
    /**
52
     * Called during the initialisation process of the object.
53
     * @method initializer
54
     */
55
    initializer: function() {
56
        Y.log('Initialising drag and drop for blocks.', 'info');
57
        var regionnames = this.get('regions');
58
        var i = 0;
59
        var dragContainer;
60
        var dragdelegation;
61
        var region;
62
        var regionContainer;
63
        var regionname;
64
 
65
        // Evil required by M.core.dragdrop.
66
        this.groups = ['block'];
67
        this.samenodeclass = CSS.BLOCK;
68
        this.parentnodeclass = CSS.BLOCKREGION;
69
        // Detect the direction of travel.
70
        this.detectkeyboarddirection = true;
71
 
72
        // Add relevant classes and ID to 'content' block region on Dashboard page.
73
        var myhomecontent = Y.Node.all('body#' + CSS.MYINDEX + ' #' + CSS.REGIONMAIN + ' > .' + CSS.REGIONCONTENT);
74
        if (myhomecontent.size() > 0) {
75
            var contentregion = myhomecontent.item(0);
76
            contentregion.addClass(CSS.BLOCKREGION);
77
            contentregion.set('id', CSS.REGIONCONTENT);
78
            contentregion.one('div').addClass(CSS.REGIONCONTENT);
79
        }
80
 
81
        for (i in regionnames) {
82
            regionname = regionnames[i];
83
            regionContainer = Y.one('#block-region-' + regionname);
84
            region = new BLOCKREGION({
85
                manager: this,
86
                region: regionname,
87
                node: regionContainer,
88
            });
89
            this.regionobjects[regionname] = region;
90
 
91
            // Setting blockregion as droptarget (the case when it is empty)
92
            // The region-post (the right one)
93
            // is very narrow, so add extra padding on the left to drop block on it.
94
            new Y.DD.Drop({
95
                node: region.get_droptarget(),
96
                groups: this.groups,
97
                padding: '40 240 40 240'
98
            });
99
 
100
            // Make each div element in the list of blocks draggable
101
            dragdelegation = new Y.DD.Delegate({
102
                container: region.get_droptarget(),
103
                nodes: '.' + CSS.BLOCK,
104
                target: true,
105
                handles: [SELECTOR.DRAGHANDLE],
106
                invalid: '.block-hider-hide, .block-hider-show, .moveto, .block_fake',
107
                dragConfig: {groups: this.groups}
108
            });
109
 
110
            dragdelegation.dd.plug(Y.Plugin.DDProxy, {
111
                // Don't move the node at the end of the drag
112
                moveOnEnd: false
113
            });
114
 
115
            if (regionContainer === null) {
116
                dragdelegation.dd.plug(Y.Plugin.DDWinScroll);
117
            } else {
118
                dragContainer = regionContainer.ancestor('.drag-container', true);
119
                if (dragContainer) {
120
                    dragdelegation.dd.plug(Y.Plugin.DDNodeScroll, {
121
                        node: dragContainer,
122
                    });
123
                } else {
124
                    dragdelegation.dd.plug(Y.Plugin.DDWinScroll);
125
                }
126
            }
127
 
128
            // On the DD Manager start operation, we enable all block regions so that they can be drop targets. This
129
            // must be done *before* drag:start but after dragging has been initialised.
130
            Y.DD.DDM.on('ddm:start', this.enable_all_regions, this);
131
 
132
            region.change_block_move_icons(this);
133
        }
134
        Y.log('Initialisation of drag and drop for blocks complete.', 'info');
135
    },
136
 
137
    /**
138
     * Returns the ID of the block the given node represents.
139
     * @method get_block_id
140
     * @param {Node} node
141
     * @return {int} The blocks ID in the database.
142
     */
143
    get_block_id: function(node) {
144
        return Number(node.get('id').replace(/inst/i, ''));
145
    },
146
 
147
    /**
148
     * Returns the block region that the node is part of or belonging to.
149
     * @method get_block_region
150
     * @param {Y.Node} node
151
     * @return {string} The region name.
152
     */
153
    get_block_region: function(node) {
154
        if (!node.test('[data-blockregion]')) {
155
            node = node.ancestor('[data-blockregion]');
156
        }
157
        return node.getData('blockregion');
158
    },
159
 
160
    /**
161
     * Returns the BLOCKREGION instance that represents the block region the given node is part of.
162
     * @method get_region_object
163
     * @param {Y.Node} node
164
     * @return {BLOCKREGION}
165
     */
166
    get_region_object: function(node) {
167
        return this.regionobjects[this.get_block_region(node)];
168
    },
169
 
170
    /**
171
     * Enables all fo the regions so that they are all visible while dragging is occuring.
172
     *
173
     * @method enable_all_regions
174
     */
175
    enable_all_regions: function() {
176
        var groups = Y.DD.DDM.activeDrag.get('groups');
177
 
178
        // As we're called by Y.DD.DDM, we can't be certain that the call
179
        // relates specifically to a block drag/drop operation. Test
180
        // whether the relevant group applies here.
181
        if (!groups || Y.Array.indexOf(groups, 'block') === -1) {
182
            return;
183
        }
184
 
185
        var i;
186
        for (i in this.regionobjects) {
187
            if (!this.regionobjects.hasOwnProperty(i)) {
188
                continue;
189
            }
190
            this.regionobjects[i].enable();
191
        }
192
    },
193
 
194
    /**
195
     * Disables enabled regions if they contain no blocks.
196
     * @method disable_regions_if_required
197
     */
198
    disable_regions_if_required: function() {
199
        var i = 0;
200
        for (i in this.regionobjects) {
201
            this.regionobjects[i].disable_if_required();
202
        }
203
    },
204
 
205
    /**
206
     * Called by M.core.dragdrop.global_drag_start when dragging starts.
207
     * @method drag_start
208
     * @param {Event} e
209
     */
210
    drag_start: function(e) {
211
        // Get our drag object
212
        var drag = e.target;
213
 
214
        // Store the parent node of original drag node (block)
215
        // we will need it later for show/hide empty regions
216
 
217
        // Determine skipnodes and store them
218
        if (drag.get('node').previous() && drag.get('node').previous().hasClass(CSS.SKIPBLOCK)) {
219
            this.skipnodetop = drag.get('node').previous();
220
        }
221
        if (drag.get('node').next() && drag.get('node').next().hasClass(CSS.SKIPBLOCKTO)) {
222
            this.skipnodebottom = drag.get('node').next();
223
        }
224
    },
225
 
226
    dragOver: function(e) {
227
        var nearestRegion = e.drop.get('node').ancestor('.drag-container', true);
228
        if (nearestRegion) {
229
            if (e.drag[Y.Plugin.DDNodeScroll]) {
230
                if (e.drag[Y.Plugin.DDNodeScroll].get('node') === nearestRegion) {
231
                    // Do not bother resetting the region - it has not changed.
232
                    return;
233
                } else {
234
                    e.drag.unplug(Y.Plugin.DDNodeScroll);
235
                }
236
            }
237
            e.drag.plug(Y.Plugin.DDNodeScroll, {
238
                node: nearestRegion,
239
            });
240
        }
241
    },
242
 
243
    /**
244
     * Called by M.core.dragdrop.global_drop_over when something is dragged over a drop target.
245
     * @method drop_over
246
     * @param {Event} e
247
     */
248
    drop_over: function(e) {
249
        // Get a reference to our drag and drop nodes
250
        var drag = e.drag.get('node');
251
        var drop = e.drop.get('node');
252
 
253
        // We need to fix the case when parent drop over event has determined
254
        // 'goingup' and appended the drag node after admin-block.
255
        if (drop.hasClass(CSS.REGIONCONTENT) &&
256
                drop.one('.' + CSS.BLOCKADMINBLOCK) &&
257
                drop.one('.' + CSS.BLOCKADMINBLOCK).next('.' + CSS.BLOCK)) {
258
            drop.prepend(drag);
259
        }
260
    },
261
 
262
    /**
263
     * Called by M.core.dragdrop.global_drop_end when a drop has been completed.
264
     * @method drop_end
265
     */
266
    drop_end: function() {
267
        // Clear variables.
268
        this.skipnodetop = null;
269
        this.skipnodebottom = null;
270
        this.disable_regions_if_required();
271
    },
272
 
273
    /**
274
     * Called by M.core.dragdrop.global_drag_dropmiss when something has been dropped on a node that isn't contained by
275
     * a drop target.
276
     *
277
     * @method drag_dropmiss
278
     * @param {Event} e
279
     */
280
    drag_dropmiss: function(e) {
281
        // Missed the target, but we assume the user intended to drop it
282
        // on the last ghost node location, e.drag and e.drop should be
283
        // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
284
        this.drop_hit(e);
285
    },
286
 
287
    /**
288
     * Called by M.core.dragdrop.global_drag_hit when something has been dropped on a drop target.
289
     * @method drop_hit
290
     * @param {Event} e
291
     */
292
    drop_hit: function(e) {
293
        // Get a reference to our drag node
294
        var dragnode = e.drag.get('node');
295
        var dropnode = e.drop.get('node');
296
 
297
        // Amend existing skipnodes
298
        if (dragnode.previous() && dragnode.previous().hasClass(CSS.SKIPBLOCK)) {
299
            // the one that belongs to block below move below
300
            dragnode.insert(dragnode.previous(), 'after');
301
        }
302
        // Move original skipnodes
303
        if (this.skipnodetop) {
304
            dragnode.insert(this.skipnodetop, 'before');
305
        }
306
        if (this.skipnodebottom) {
307
            dragnode.insert(this.skipnodebottom, 'after');
308
        }
309
 
310
        // Add lightbox if it not there
311
        var lightbox = M.util.add_lightbox(Y, dragnode);
312
 
313
        // Prepare request parameters
314
        var params = {
315
            sesskey: M.cfg.sesskey,
316
            pagehash: this.get('pagehash'),
317
            action: 'move',
318
            bui_moveid: this.get_block_id(dragnode),
319
            bui_newregion: this.get_block_region(dropnode)
320
        };
321
 
322
        if (this.get('cmid')) {
323
            params.cmid = this.get('cmid');
324
        }
325
 
326
        if (dragnode.next('.' + CSS.BLOCK) && !dragnode.next('.' + CSS.BLOCK).hasClass(CSS.BLOCKADMINBLOCK)) {
327
            params.bui_beforeid = this.get_block_id(dragnode.next('.' + CSS.BLOCK));
328
        }
329
 
330
        // Do AJAX request
331
        Y.io(M.cfg.wwwroot + AJAXURL, {
332
            method: 'POST',
333
            data: params,
334
            on: {
335
                start: function() {
336
                    lightbox.show();
337
                },
338
                success: function(tid, response) {
339
                    window.setTimeout(function() {
340
                        lightbox.hide();
341
                    }, 250);
342
                    try {
343
                        var responsetext = Y.JSON.parse(response.responseText);
344
                        if (responsetext.error) {
345
                            new M.core.ajaxException(responsetext);
346
                        }
347
                    } catch (e) {
348
                        // Ignore.
349
                    }
350
                },
351
                failure: function(tid, response) {
352
                    this.ajax_failure(response);
353
                    lightbox.hide();
354
                },
355
                complete: function() {
356
                    this.disable_regions_if_required();
357
                }
358
            },
359
            context: this
360
        });
361
    }
362
};
363
Y.extend(MANAGER, M.core.dragdrop, MANAGER.prototype, {
364
    NAME: 'core-blocks-dragdrop-manager',
365
    ATTRS: {
366
        /**
367
         * The page identifier.
368
         * @attribute pagehash
369
         * @type string|null
370
         * @default null
371
         */
372
        pagehash: {
373
            value: null
374
        },
375
 
376
        /**
377
         * An array of block regions that are present on the page.
378
         * @attribute regions
379
         * @type array|null
380
         * @default Array[]
381
         */
382
        regions: {
383
            value: []
384
        }
385
    }
386
});