bdd8d17c4ea5ba50a449e4c6e9b53008952f47b7
[moodle.git] / question / type / ddimageortext / amd / src / question.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /*
17  * JavaScript to allow dragging options to slots (using mouse down or touch) or tab through slots using keyboard.
18  *
19  * @module     qtype_ddimageortext/question
20  * @package    qtype_ddimageortext
21  * @copyright  2018 The Open University
22  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23  */
24 define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys) {
26     "use strict";
28     /**
29      * Initialise one drag-drop onto image question.
30      *
31      * @param {String} containerId id of the outer div for this question.
32      * @param {boolean} readOnly whether the question is being displayed read-only.
33      * @param {Array} places Information about the drop places.
34      * @constructor
35      */
36     function DragDropOntoImageQuestion(containerId, readOnly, places) {
37         this.containerId = containerId;
38         M.util.js_pending('qtype_ddimageortext-init-' + this.containerId);
39         this.places = places;
40         this.allImagesLoaded = false;
41         this.imageLoadingTimeoutId = null;
42         this.isPrinting = false;
43         if (readOnly) {
44             this.getRoot().addClass('qtype_ddimageortext-readonly');
45         }
47         var thisQ = this;
48         this.getNotYetLoadedImages().one('load', function() {
49             thisQ.waitForAllImagesToBeLoaded();
50         });
51         this.waitForAllImagesToBeLoaded();
52     }
54     /**
55      * Waits until all images are loaded before calling setupQuestion().
56      *
57      * This function is called from the onLoad of each image, and also polls with
58      * a time-out, because image on-loads are allegedly unreliable.
59      */
60     DragDropOntoImageQuestion.prototype.waitForAllImagesToBeLoaded = function() {
61         var thisQ = this;
63         // This method may get called multiple times (via image on-loads or timeouts.
64         // If we are already done, don't do it again.
65         if (this.allImagesLoaded) {
66             return;
67         }
69         // Clear any current timeout, if set.
70         if (this.imageLoadingTimeoutId !== null) {
71             clearTimeout(this.imageLoadingTimeoutId);
72         }
74         // If we have not yet loaded all images, set a timeout to
75         // call ourselves again, since apparently images on-load
76         // events are flakey.
77         if (this.getNotYetLoadedImages().length > 0) {
78             this.imageLoadingTimeoutId = setTimeout(function() {
79                 thisQ.waitForAllImagesToBeLoaded();
80             }, 100);
81             return;
82         }
84         // We now have all images. Carry on, but only after giving the layout a chance to settle down.
85         this.allImagesLoaded = true;
86         thisQ.setupQuestion();
87     };
89     /**
90      * Get any of the images in the drag-drop area that are not yet fully loaded.
91      *
92      * @returns {jQuery} those images.
93      */
94     DragDropOntoImageQuestion.prototype.getNotYetLoadedImages = function() {
95         var thisQ = this;
96         return this.getRoot().find('.ddarea img').not(function(i, imgNode) {
97             return thisQ.imageIsLoaded(imgNode);
98         });
99     };
101     /**
102      * Check if an image has loaded without errors.
103      *
104      * @param {HTMLImageElement} imgElement an image.
105      * @returns {boolean} true if this image has loaded without errors.
106      */
107     DragDropOntoImageQuestion.prototype.imageIsLoaded = function(imgElement) {
108         return imgElement.complete && imgElement.naturalHeight !== 0;
109     };
111     /**
112      * Set up the question, once all images have been loaded.
113      */
114     DragDropOntoImageQuestion.prototype.setupQuestion = function() {
115         this.resizeAllDragsAndDrops();
116         this.cloneDrags();
117         this.positionDragsAndDrops();
118         M.util.js_complete('qtype_ddimageortext-init-' + this.containerId);
119     };
121     /**
122      * In each group, resize all the items to be the same size.
123      */
124     DragDropOntoImageQuestion.prototype.resizeAllDragsAndDrops = function() {
125         var thisQ = this;
126         this.getRoot().find('.draghomes > div').each(function(i, node) {
127             thisQ.resizeAllDragsAndDropsInGroup(
128                     thisQ.getClassnameNumericSuffix($(node), 'dragitemgroup'));
129         });
130     };
132     /**
133      * In a given group, set all the drags and drops to be the same size.
134      *
135      * @param {int} group the group number.
136      */
137     DragDropOntoImageQuestion.prototype.resizeAllDragsAndDropsInGroup = function(group) {
138         var root = this.getRoot(),
139             dragHomes = root.find('.dragitemgroup' + group + ' .draghome'),
140             maxWidth = 0,
141             maxHeight = 0;
143         // Find the maximum size of any drag in this groups.
144         dragHomes.each(function(i, drag) {
145             maxWidth = Math.max(maxWidth, Math.ceil(drag.offsetWidth));
146             maxHeight = Math.max(maxHeight, Math.ceil(drag.offsetHeight));
147         });
149         // The size we will want to set is a bit bigger than this.
150         maxWidth += 10;
151         maxHeight += 10;
153         // Set each drag home to that size.
154         dragHomes.each(function(i, drag) {
155             var left = Math.round((maxWidth - drag.offsetWidth) / 2),
156                 top = Math.floor((maxHeight - drag.offsetHeight) / 2);
157             // Set top and left padding so the item is centred.
158             $(drag).css({
159                 'padding-left': left + 'px',
160                 'padding-right': (maxWidth - drag.offsetWidth - left) + 'px',
161                 'padding-top': top + 'px',
162                 'padding-bottom': (maxHeight - drag.offsetHeight - top) + 'px'
163             });
164         });
166         // Create the drops and make them the right size.
167         for (var i in this.places) {
168             if (!this.places.hasOwnProperty((i))) {
169                 continue;
170             }
171             var place = this.places[i],
172                 label = place.text;
173             if (parseInt(place.group) !== group) {
174                 continue;
175             }
176             if (label === '') {
177                 label = M.util.get_string('blank', 'qtype_ddimageortext');
178             }
179             root.find('.dropzones').append('<div class="dropzone active group' + place.group +
180                             ' place' + i + '" tabindex="0">' +
181                     '<span class="accesshide">' + label + '</span>&nbsp;</div>');
182             root.find('.dropzone.place' + i).width(maxWidth - 2).height(maxHeight - 2);
183         }
184     };
186     /**
187      * Invisible 'drag homes' are output by the renderer. These have the same properties
188      * as the drag items but are invisible. We clone these invisible elements to make the
189      * actual drag items.
190      */
191     DragDropOntoImageQuestion.prototype.cloneDrags = function() {
192         var thisQ = this;
193         thisQ.getRoot().find('.draghome').each(function(index, dragHome) {
194             var drag = $(dragHome);
195             var placeHolder = drag.clone();
196             placeHolder.removeClass();
197             placeHolder.addClass('draghome choice' +
198                 thisQ.getChoice(drag) + ' group' +
199                 thisQ.getGroup(drag) + ' dragplaceholder');
200             drag.before(placeHolder);
201         });
202     };
204     /**
205      * Clone drag item for one choice.
206      *
207      * @param {jQuery} dragHome the drag home to clone.
208      */
209     DragDropOntoImageQuestion.prototype.cloneDragsForOneChoice = function(dragHome) {
210         if (dragHome.hasClass('infinite')) {
211             var noOfDrags = this.noOfDropsInGroup(this.getGroup(dragHome));
212             for (var i = 0; i < noOfDrags; i++) {
213                 this.cloneDrag(dragHome);
214             }
215         } else {
216             this.cloneDrag(dragHome);
217         }
218     };
220     /**
221      * Clone drag item.
222      *
223      * @param {jQuery} dragHome
224      */
225     DragDropOntoImageQuestion.prototype.cloneDrag = function(dragHome) {
226         var drag = dragHome.clone();
227         drag.removeClass('draghome')
228             .addClass('drag unplaced moodle-has-zindex')
229             .offset(dragHome.offset());
230         this.getRoot().find('.dragitems').append(drag);
231     };
233     /**
234      * Update the position of drags.
235      */
236     DragDropOntoImageQuestion.prototype.positionDragsAndDrops = function() {
237         var thisQ = this,
238             root = this.getRoot(),
239             bgRatio = this.bgRatio();
241         // Move the drops into position.
242         root.find('.ddarea .dropzone').each(function(i, dropNode) {
243             var drop = $(dropNode),
244                 place = thisQ.places[thisQ.getPlace(drop)];
245             // The xy values come from PHP as strings, so we need parseInt to stop JS doing string concatenation.
246             drop.css('left', parseInt(place.xy[0]) * bgRatio)
247                 .css('top', parseInt(place.xy[1]) * bgRatio);
248             drop.data('originX', parseInt(place.xy[0]))
249                 .data('originY', parseInt(place.xy[1]));
250             thisQ.handleElementScale(drop, 'left top');
251         });
253         // First move all items back home.
254         root.find('.draghome').not('.dragplaceholder').each(function(i, dragNode) {
255             var drag = $(dragNode),
256                 currentPlace = thisQ.getClassnameNumericSuffix(drag, 'inplace');
257             drag.addClass('unplaced')
258                 .removeClass('placed');
259             drag.removeAttr('tabindex');
260             if (currentPlace !== null) {
261                 drag.removeClass('inplace' + currentPlace);
262             }
263         });
265         // Then place the ones that should be placed.
266         root.find('input.placeinput').each(function(i, inputNode) {
267             var input = $(inputNode),
268                 choice = input.val();
269             if (choice.length === 0 || (choice.length > 0 && choice === '0')) {
270                 // No item in this place.
271                 return;
272             }
274             var place = thisQ.getPlace(input);
275             // Get the unplaced drag.
276             var unplacedDrag = thisQ.getUnplacedChoice(thisQ.getGroup(input), choice);
277             // Get the clone of the drag.
278             var hiddenDrag = thisQ.getDragClone(unplacedDrag);
279             if (hiddenDrag.length) {
280                 if (unplacedDrag.hasClass('infinite')) {
281                     var noOfDrags = thisQ.noOfDropsInGroup(thisQ.getGroup(unplacedDrag));
282                     var cloneDrags = thisQ.getInfiniteDragClones(unplacedDrag, false);
283                     if (cloneDrags.length < noOfDrags) {
284                         var cloneDrag = unplacedDrag.clone();
285                         cloneDrag.removeClass('beingdragged');
286                         cloneDrag.removeAttr('tabindex');
287                         hiddenDrag.after(cloneDrag);
288                     } else {
289                         hiddenDrag.addClass('active');
290                     }
291                 } else {
292                     hiddenDrag.addClass('active');
293                 }
294             }
296             // Send the drag to drop.
297             var drop = root.find('.dropzone.place' + place);
298             thisQ.sendDragToDrop(unplacedDrag, drop);
299         });
300     };
302     /**
303      * Handles the start of dragging an item.
304      *
305      * @param {Event} e the touch start or mouse down event.
306      */
307     DragDropOntoImageQuestion.prototype.handleDragStart = function(e) {
308         var thisQ = this,
309             drag = $(e.target).closest('.draghome'),
310             currentIndex = this.calculateZIndex(),
311             newIndex = currentIndex + 2;
313         var info = dragDrop.prepare(e);
314         if (!info.start) {
315             return;
316         }
318         drag.addClass('beingdragged').css('transform', '').css('z-index', newIndex);
319         var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');
320         if (currentPlace !== null) {
321             this.setInputValue(currentPlace, 0);
322             drag.removeClass('inplace' + currentPlace);
323             var hiddenDrop = thisQ.getDrop(drag, currentPlace);
324             if (hiddenDrop.length) {
325                 hiddenDrop.addClass('active');
326                 drag.offset(hiddenDrop.offset());
327             }
328         } else {
329             var hiddenDrag = thisQ.getDragClone(drag);
330             if (hiddenDrag.length) {
331                 if (drag.hasClass('infinite')) {
332                     var noOfDrags = this.noOfDropsInGroup(thisQ.getGroup(drag));
333                     var cloneDrags = this.getInfiniteDragClones(drag, false);
334                     if (cloneDrags.length < noOfDrags) {
335                         var cloneDrag = drag.clone();
336                         cloneDrag.removeClass('beingdragged');
337                         cloneDrag.removeAttr('tabindex');
338                         hiddenDrag.after(cloneDrag);
339                         questionManager.addEventHandlersToDrag(cloneDrag);
340                         drag.offset(cloneDrag.offset());
341                     } else {
342                         hiddenDrag.addClass('active');
343                         drag.offset(hiddenDrag.offset());
344                     }
345                 } else {
346                     hiddenDrag.addClass('active');
347                     drag.offset(hiddenDrag.offset());
348                 }
349             }
350         }
352         dragDrop.start(e, drag, function(x, y, drag) {
353             thisQ.dragMove(x, y, drag);
354         }, function(x, y, drag) {
355             thisQ.dragEnd(x, y, drag);
356         });
357     };
359     /**
360      * Called whenever the currently dragged items moves.
361      *
362      * @param {Number} pageX the x position.
363      * @param {Number} pageY the y position.
364      * @param {jQuery} drag the item being moved.
365      */
366     DragDropOntoImageQuestion.prototype.dragMove = function(pageX, pageY, drag) {
367         var thisQ = this,
368             highlighted = false;
369         this.getRoot().find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {
370             var drop = $(dropNode);
371             if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted) {
372                 highlighted = true;
373                 drop.addClass('valid-drag-over-drop');
374             } else {
375                 drop.removeClass('valid-drag-over-drop');
376             }
377         });
378         this.getRoot().find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, dropNode) {
379             var drop = $(dropNode);
380             if (thisQ.isPointInDrop(pageX, pageY, drop) && !highlighted) {
381                 highlighted = true;
382                 drop.addClass('valid-drag-over-drop');
383             } else {
384                 drop.removeClass('valid-drag-over-drop');
385             }
386         });
387     };
389     /**
390      * Called when user drops a drag item.
391      *
392      * @param {Number} pageX the x position.
393      * @param {Number} pageY the y position.
394      * @param {jQuery} drag the item being moved.
395      */
396     DragDropOntoImageQuestion.prototype.dragEnd = function(pageX, pageY, drag) {
397         var thisQ = this,
398             root = this.getRoot(),
399             placed = false;
401         // Looking for drag that was dropped on a dropzone.
402         root.find('.dropzone.group' + this.getGroup(drag)).each(function(i, dropNode) {
403             var drop = $(dropNode);
404             if (!thisQ.isPointInDrop(pageX, pageY, drop)) {
405                 // Not this drop.
406                 return true;
407             }
409             // Now put this drag into the drop.
410             drop.removeClass('valid-drag-over-drop');
411             thisQ.sendDragToDrop(drag, drop);
412             placed = true;
413             return false; // Stop the each() here.
414         });
416         if (!placed) {
417             // Looking for drag that was dropped on a placed drag.
418             root.find('.draghome.placed.group' + this.getGroup(drag)).not('.beingdragged').each(function(i, placedNode) {
419                 var placedDrag = $(placedNode);
420                 if (!thisQ.isPointInDrop(pageX, pageY, placedDrag)) {
421                     // Not this placed drag.
422                     return true;
423                 }
425                 // Now put this drag into the drop.
426                 placedDrag.removeClass('valid-drag-over-drop');
427                 var currentPlace = thisQ.getClassnameNumericSuffix(placedDrag, 'inplace');
428                 var drop = thisQ.getDrop(drag, currentPlace);
429                 thisQ.sendDragToDrop(drag, drop);
430                 placed = true;
431                 return false; // Stop the each() here.
432             });
433         }
435         if (!placed) {
436             this.sendDragHome(drag);
437         }
438     };
440     /**
441      * Animate a drag item into a given place (or back home).
442      *
443      * @param {jQuery|null} drag the item to place. If null, clear the place.
444      * @param {jQuery} drop the place to put it.
445      */
446     DragDropOntoImageQuestion.prototype.sendDragToDrop = function(drag, drop) {
447         // Is there already a drag in this drop? if so, evict it.
448         var oldDrag = this.getCurrentDragInPlace(this.getPlace(drop));
449         if (oldDrag.length !== 0) {
450             oldDrag.addClass('beingdragged');
451             oldDrag.offset(oldDrag.offset());
452             var currentPlace = this.getClassnameNumericSuffix(oldDrag, 'inplace');
453             var hiddenDrop = this.getDrop(oldDrag, currentPlace);
454             hiddenDrop.addClass('active');
455             this.sendDragHome(oldDrag);
456         }
458         if (drag.length === 0) {
459             this.setInputValue(this.getPlace(drop), 0);
460             if (drop.data('isfocus')) {
461                 drop.focus();
462             }
463         } else {
464             this.setInputValue(this.getPlace(drop), this.getChoice(drag));
465             drag.removeClass('unplaced')
466                 .addClass('placed inplace' + this.getPlace(drop));
467             drag.attr('tabindex', 0);
468             this.animateTo(drag, drop);
469         }
470     };
472     /**
473      * Animate a drag back to its home.
474      *
475      * @param {jQuery} drag the item being moved.
476      */
477     DragDropOntoImageQuestion.prototype.sendDragHome = function(drag) {
478         var currentPlace = this.getClassnameNumericSuffix(drag, 'inplace');
479         if (currentPlace !== null) {
480             drag.removeClass('inplace' + currentPlace);
481         }
482         drag.data('unplaced', true);
484         this.animateTo(drag, this.getDragHome(this.getGroup(drag), this.getChoice(drag)));
485     };
487     /**
488      * Handles keyboard events on drops.
489      *
490      * Drops are focusable. Once focused, right/down/space switches to the next choice, and
491      * left/up switches to the previous. Escape clear.
492      *
493      * @param {KeyboardEvent} e
494      */
495     DragDropOntoImageQuestion.prototype.handleKeyPress = function(e) {
496         var drop = $(e.target).closest('.dropzone');
497         if (drop.length === 0) {
498             var placedDrag = $(e.target);
499             var currentPlace = this.getClassnameNumericSuffix(placedDrag, 'inplace');
500             if (currentPlace !== null) {
501                 drop = this.getDrop(placedDrag, currentPlace);
502             }
503         }
504         var currentDrag = this.getCurrentDragInPlace(this.getPlace(drop)),
505             nextDrag = $();
507         switch (e.keyCode) {
508             case keys.space:
509             case keys.arrowRight:
510             case keys.arrowDown:
511                 nextDrag = this.getNextDrag(this.getGroup(drop), currentDrag);
512                 break;
514             case keys.arrowLeft:
515             case keys.arrowUp:
516                 nextDrag = this.getPreviousDrag(this.getGroup(drop), currentDrag);
517                 break;
519             case keys.escape:
520                 questionManager.isKeyboardNavigation = false;
521                 break;
523             default:
524                 questionManager.isKeyboardNavigation = false;
525                 return; // To avoid the preventDefault below.
526         }
528         if (nextDrag.length) {
529             nextDrag.data('isfocus', true);
530             nextDrag.addClass('beingdragged');
531             var hiddenDrag = this.getDragClone(nextDrag);
532             if (hiddenDrag.length) {
533                 if (nextDrag.hasClass('infinite')) {
534                     var noOfDrags = this.noOfDropsInGroup(this.getGroup(nextDrag));
535                     var cloneDrags = this.getInfiniteDragClones(nextDrag, false);
536                     if (cloneDrags.length < noOfDrags) {
537                         var cloneDrag = nextDrag.clone();
538                         cloneDrag.removeClass('beingdragged');
539                         cloneDrag.removeAttr('tabindex');
540                         hiddenDrag.after(cloneDrag);
541                         questionManager.addEventHandlersToDrag(cloneDrag);
542                         nextDrag.offset(cloneDrag.offset());
543                     } else {
544                         hiddenDrag.addClass('active');
545                         nextDrag.offset(hiddenDrag.offset());
546                     }
547                 } else {
548                     hiddenDrag.addClass('active');
549                     nextDrag.offset(hiddenDrag.offset());
550                 }
551             }
552         } else {
553             drop.data('isfocus', true);
554         }
556         e.preventDefault();
557         this.sendDragToDrop(nextDrag, drop);
558     };
560     /**
561      * Choose the next drag in a group.
562      *
563      * @param {int} group which group.
564      * @param {jQuery} drag current choice (empty jQuery if there isn't one).
565      * @return {jQuery} the next drag in that group, or null if there wasn't one.
566      */
567     DragDropOntoImageQuestion.prototype.getNextDrag = function(group, drag) {
568         var choice,
569             numChoices = this.noOfChoicesInGroup(group);
571         if (drag.length === 0) {
572             choice = 1; // Was empty, so we want to select the first choice.
573         } else {
574             choice = this.getChoice(drag) + 1;
575         }
577         var next = this.getUnplacedChoice(group, choice);
578         while (next.length === 0 && choice < numChoices) {
579             choice++;
580             next = this.getUnplacedChoice(group, choice);
581         }
583         return next;
584     };
586     /**
587      * Choose the previous drag in a group.
588      *
589      * @param {int} group which group.
590      * @param {jQuery} drag current choice (empty jQuery if there isn't one).
591      * @return {jQuery} the next drag in that group, or null if there wasn't one.
592      */
593     DragDropOntoImageQuestion.prototype.getPreviousDrag = function(group, drag) {
594         var choice;
596         if (drag.length === 0) {
597             choice = this.noOfChoicesInGroup(group);
598         } else {
599             choice = this.getChoice(drag) - 1;
600         }
602         var previous = this.getUnplacedChoice(group, choice);
603         while (previous.length === 0 && choice > 1) {
604             choice--;
605             previous = this.getUnplacedChoice(group, choice);
606         }
608         // Does this choice exist?
609         return previous;
610     };
612     /**
613      * Animate an object to the given destination.
614      *
615      * @param {jQuery} drag the element to be animated.
616      * @param {jQuery} target element marking the place to move it to.
617      */
618     DragDropOntoImageQuestion.prototype.animateTo = function(drag, target) {
619         var currentPos = drag.offset(),
620             targetPos = target.offset(),
621             thisQ = this;
623         M.util.js_pending('qtype_ddimageortext-animate-' + thisQ.containerId);
624         // Animate works in terms of CSS position, whereas locating an object
625         // on the page works best with jQuery offset() function. So, to get
626         // the right target position, we work out the required change in
627         // offset() and then add that to the current CSS position.
628         drag.animate(
629             {
630                 left: parseInt(drag.css('left')) + targetPos.left - currentPos.left,
631                 top: parseInt(drag.css('top')) + targetPos.top - currentPos.top
632             },
633             {
634                 duration: 'fast',
635                 done: function() {
636                     $('body').trigger('qtype_ddimageortext-dragmoved', [drag, target, thisQ]);
637                     M.util.js_complete('qtype_ddimageortext-animate-' + thisQ.containerId);
638                 }
639             }
640         );
641     };
643     /**
644      * Detect if a point is inside a given DOM node.
645      *
646      * @param {Number} pageX the x position.
647      * @param {Number} pageY the y position.
648      * @param {jQuery} drop the node to check (typically a drop).
649      * @return {boolean} whether the point is inside the node.
650      */
651     DragDropOntoImageQuestion.prototype.isPointInDrop = function(pageX, pageY, drop) {
652         var position = drop.offset();
653         if (drop.hasClass('draghome')) {
654             return pageX >= position.left && pageX < position.left + drop.outerWidth()
655                 && pageY >= position.top && pageY < position.top + drop.outerHeight();
656         }
657         return pageX >= position.left && pageX < position.left + drop.width()
658             && pageY >= position.top && pageY < position.top + drop.height();
659     };
661     /**
662      * Set the value of the hidden input for a place, to record what is currently there.
663      *
664      * @param {int} place which place to set the input value for.
665      * @param {int} choice the value to set.
666      */
667     DragDropOntoImageQuestion.prototype.setInputValue = function(place, choice) {
668         this.getRoot().find('input.placeinput.place' + place).val(choice);
669     };
671     /**
672      * Get the outer div for this question.
673      *
674      * @returns {jQuery} containing that div.
675      */
676     DragDropOntoImageQuestion.prototype.getRoot = function() {
677         return $(document.getElementById(this.containerId));
678     };
680     /**
681      * Get the img that is the background image.
682      * @returns {jQuery} containing that img.
683      */
684     DragDropOntoImageQuestion.prototype.bgImage = function() {
685         return this.getRoot().find('img.dropbackground');
686     };
688     /**
689      * Get drag home for a given choice.
690      *
691      * @param {int} group the group.
692      * @param {int} choice the choice number.
693      * @returns {jQuery} containing that div.
694      */
695     DragDropOntoImageQuestion.prototype.getDragHome = function(group, choice) {
696         if (!this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice).is(':visible')) {
697             return this.getRoot().find('.dragitemgroup' + group +
698                 ' .draghome.infinite' +
699                 '.choice' + choice +
700                 '.group' + group);
701         }
702         return this.getRoot().find('.draghome.dragplaceholder.group' + group + '.choice' + choice);
703     };
705     /**
706      * Get an unplaced choice for a particular group.
707      *
708      * @param {int} group the group.
709      * @param {int} choice the choice number.
710      * @returns {jQuery} jQuery wrapping the unplaced choice. If there isn't one, the jQuery will be empty.
711      */
712     DragDropOntoImageQuestion.prototype.getUnplacedChoice = function(group, choice) {
713         return this.getRoot().find('.ddarea .draghome.group' + group + '.choice' + choice + '.unplaced').slice(0, 1);
714     };
716     /**
717      * Get the drag that is currently in a given place.
718      *
719      * @param {int} place the place number.
720      * @return {jQuery} the current drag (or an empty jQuery if none).
721      */
722     DragDropOntoImageQuestion.prototype.getCurrentDragInPlace = function(place) {
723         return this.getRoot().find('.ddarea .draghome.inplace' + place);
724     };
726     /**
727      * Return the number of blanks in a given group.
728      *
729      * @param {int} group the group number.
730      * @returns {int} the number of drops.
731      */
732     DragDropOntoImageQuestion.prototype.noOfDropsInGroup = function(group) {
733         return this.getRoot().find('.dropzone.group' + group).length;
734     };
736     /**
737      * Return the number of choices in a given group.
738      *
739      * @param {int} group the group number.
740      * @returns {int} the number of choices.
741      */
742     DragDropOntoImageQuestion.prototype.noOfChoicesInGroup = function(group) {
743         return this.getRoot().find('.dragitemgroup' + group + ' .draghome').length;
744     };
746     /**
747      * Return the number at the end of the CSS class name with the given prefix.
748      *
749      * @param {jQuery} node
750      * @param {String} prefix name prefix
751      * @returns {Number|null} the suffix if found, else null.
752      */
753     DragDropOntoImageQuestion.prototype.getClassnameNumericSuffix = function(node, prefix) {
754         var classes = node.attr('class');
755         if (classes !== '') {
756             var classesArr = classes.split(' ');
757             for (var index = 0; index < classesArr.length; index++) {
758                 var patt1 = new RegExp('^' + prefix + '([0-9])+$');
759                 if (patt1.test(classesArr[index])) {
760                     var patt2 = new RegExp('([0-9])+$');
761                     var match = patt2.exec(classesArr[index]);
762                     return Number(match[0]);
763                 }
764             }
765         }
766         return null;
767     };
769     /**
770      * Get the choice number of a drag.
771      *
772      * @param {jQuery} drag the drag.
773      * @returns {Number} the choice number.
774      */
775     DragDropOntoImageQuestion.prototype.getChoice = function(drag) {
776         return this.getClassnameNumericSuffix(drag, 'choice');
777     };
779     /**
780      * Given a DOM node that is significant to this question
781      * (drag, drop, ...) get the group it belongs to.
782      *
783      * @param {jQuery} node a DOM node.
784      * @returns {Number} the group it belongs to.
785      */
786     DragDropOntoImageQuestion.prototype.getGroup = function(node) {
787         return this.getClassnameNumericSuffix(node, 'group');
788     };
790     /**
791      * Get the place number of a drop, or its corresponding hidden input.
792      *
793      * @param {jQuery} node the DOM node.
794      * @returns {Number} the place number.
795      */
796     DragDropOntoImageQuestion.prototype.getPlace = function(node) {
797         return this.getClassnameNumericSuffix(node, 'place');
798     };
800     /**
801      * Get drag clone for a given drag.
802      *
803      * @param {jQuery} drag the drag.
804      * @returns {jQuery} the drag's clone.
805      */
806     DragDropOntoImageQuestion.prototype.getDragClone = function(drag) {
807         return this.getRoot().find('.dragitemgroup' +
808             this.getGroup(drag) +
809             ' .draghome' +
810             '.choice' + this.getChoice(drag) +
811             '.group' + this.getGroup(drag) +
812             '.dragplaceholder');
813     };
815     /**
816      * Get infinite drag clones for given drag.
817      *
818      * @param {jQuery} drag the drag.
819      * @param {Boolean} inHome in the home area or not.
820      * @returns {jQuery} the drag's clones.
821      */
822     DragDropOntoImageQuestion.prototype.getInfiniteDragClones = function(drag, inHome) {
823         if (inHome) {
824             return this.getRoot().find('.dragitemgroup' +
825                 this.getGroup(drag) +
826                 ' .draghome' +
827                 '.choice' + this.getChoice(drag) +
828                 '.group' + this.getGroup(drag) +
829                 '.infinite').not('.dragplaceholder');
830         }
831         return this.getRoot().find('.draghome' +
832             '.choice' + this.getChoice(drag) +
833             '.group' + this.getGroup(drag) +
834             '.infinite').not('.dragplaceholder');
835     };
837     /**
838      * Get drop for a given drag and place.
839      *
840      * @param {jQuery} drag the drag.
841      * @param {Integer} currentPlace the current place of drag.
842      * @returns {jQuery} the drop's clone.
843      */
844     DragDropOntoImageQuestion.prototype.getDrop = function(drag, currentPlace) {
845         return this.getRoot().find('.dropzone.group' + this.getGroup(drag) + '.place' + currentPlace);
846     };
848     /**
849      * Handle when the window is resized.
850      */
851     DragDropOntoImageQuestion.prototype.handleResize = function() {
852         var thisQ = this,
853             bgRatio = this.bgRatio();
854         if (this.isPrinting) {
855             bgRatio = 1;
856         }
858         this.getRoot().find('.ddarea .dropzone').each(function(i, dropNode) {
859             $(dropNode)
860                 .css('left', parseInt($(dropNode).data('originX')) * parseFloat(bgRatio))
861                 .css('top', parseInt($(dropNode).data('originY')) * parseFloat(bgRatio));
862             thisQ.handleElementScale(dropNode, 'left top');
863         });
865         this.getRoot().find('div.droparea .draghome').not('.beingdragged').each(function(key, drag) {
866             $(drag)
867                 .css('left', parseFloat($(drag).data('originX')) * parseFloat(bgRatio))
868                 .css('top', parseFloat($(drag).data('originY')) * parseFloat(bgRatio));
869             thisQ.handleElementScale(drag, 'left top');
870         });
871     };
873     /**
874      * Return the background ratio.
875      *
876      * @returns {number} Background ratio.
877      */
878     DragDropOntoImageQuestion.prototype.bgRatio = function() {
879         var bgImg = this.bgImage();
880         var bgImgNaturalWidth = bgImg.get(0).naturalWidth;
881         var bgImgClientWidth = bgImg.width();
883         return bgImgClientWidth / bgImgNaturalWidth;
884     };
886     /**
887      * Scale the drag if needed.
888      *
889      * @param {jQuery} element the item to place.
890      * @param {String} type scaling type
891      */
892     DragDropOntoImageQuestion.prototype.handleElementScale = function(element, type) {
893         var bgRatio = parseFloat(this.bgRatio());
894         if (this.isPrinting) {
895             bgRatio = 1;
896         }
897         $(element).css({
898             '-webkit-transform': 'scale(' + bgRatio + ')',
899             '-moz-transform': 'scale(' + bgRatio + ')',
900             '-ms-transform': 'scale(' + bgRatio + ')',
901             '-o-transform': 'scale(' + bgRatio + ')',
902             'transform': 'scale(' + bgRatio + ')',
903             'transform-origin': type
904         });
905     };
907     /**
908      * Calculate z-index value.
909      *
910      * @returns {number} z-index value
911      */
912     DragDropOntoImageQuestion.prototype.calculateZIndex = function() {
913         var zIndex = 0;
914         this.getRoot().find('.ddarea .dropzone, div.droparea .draghome').each(function(i, dropNode) {
915             dropNode = $(dropNode);
916             // Note that webkit browsers won't return the z-index value from the CSS stylesheet
917             // if the element doesn't have a position specified. Instead it'll return "auto".
918             var itemZIndex = dropNode.css('z-index') ? parseInt(dropNode.css('z-index')) : 0;
920             if (itemZIndex > zIndex) {
921                 zIndex = itemZIndex;
922             }
923         });
925         return zIndex;
926     };
928     /**
929      * Singleton object that handles all the DragDropOntoImageQuestions
930      * on the page, and deals with event dispatching.
931      * @type {Object}
932      */
933     var questionManager = {
935         /**
936          * {boolean} ensures that the event handlers are only initialised once per page.
937          */
938         eventHandlersInitialised: false,
940         /**
941          * {boolean} is printing or not.
942          */
943         isPrinting: false,
945         /**
946          * {boolean} is keyboard navigation or not.
947          */
948         isKeyboardNavigation: false,
950         /**
951          * {Object} all the questions on this page, indexed by containerId (id on the .que div).
952          */
953         questions: {}, // An object containing all the information about each question on the page.
955         /**
956          * Initialise one question.
957          *
958          * @param {String} containerId the id of the div.que that contains this question.
959          * @param {boolean} readOnly whether the question is read-only.
960          * @param {Array} places data.
961          */
962         init: function(containerId, readOnly, places) {
963             questionManager.questions[containerId] =
964                 new DragDropOntoImageQuestion(containerId, readOnly, places);
965             if (!questionManager.eventHandlersInitialised) {
966                 questionManager.setupEventHandlers();
967                 questionManager.eventHandlersInitialised = true;
968             }
969         },
971         /**
972          * Set up the event handlers that make this question type work. (Done once per page.)
973          */
974         setupEventHandlers: function() {
975             // We do not use the body event here to prevent the other event on Mobile device, such as scroll event.
976             questionManager.addEventHandlersToDrag($('.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome'));
977             $('body')
978                 .on('keydown',
979                     '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .dropzones .dropzone',
980                     questionManager.handleKeyPress)
981                 .on('keydown',
982                     '.que.ddimageortext:not(.qtype_ddimageortext-readonly) .draghome.placed:not(.beingdragged)',
983                     questionManager.handleKeyPress)
984                 .on('qtype_ddimageortext-dragmoved', questionManager.handleDragMoved);
985             $(window).on('resize', function() {
986                 questionManager.handleWindowResize(false);
987             });
988             window.addEventListener('beforeprint', function() {
989                 questionManager.isPrinting = true;
990                 questionManager.handleWindowResize(questionManager.isPrinting);
991             });
992             window.addEventListener('afterprint', function() {
993                 questionManager.isPrinting = false;
994                 questionManager.handleWindowResize(questionManager.isPrinting);
995             });
996             setTimeout(function() {
997                 questionManager.fixLayoutIfThingsMoved();
998             }, 100);
999         },
1001         /**
1002          * Binding the drag/touch event again for newly created element.
1003          *
1004          * @param {jQuery} element Element to bind the event
1005          */
1006         addEventHandlersToDrag: function(element) {
1007             element.on('mousedown touchstart', questionManager.handleDragStart);
1008         },
1010         /**
1011          * Handle mouse down / touch start events on drags.
1012          * @param {Event} e the DOM event.
1013          */
1014         handleDragStart: function(e) {
1015             e.preventDefault();
1016             var question = questionManager.getQuestionForEvent(e);
1017             if (question) {
1018                 question.handleDragStart(e);
1019             }
1020         },
1022         /**
1023          * Handle key down / press events on drags.
1024          * @param {KeyboardEvent} e
1025          */
1026         handleKeyPress: function(e) {
1027             if (questionManager.isKeyboardNavigation) {
1028                 return;
1029             }
1030             questionManager.isKeyboardNavigation = true;
1031             var question = questionManager.getQuestionForEvent(e);
1032             if (question) {
1033                 question.handleKeyPress(e);
1034             }
1035         },
1037         /**
1038          * Handle when the window is resized.
1039          * @param {boolean} isPrinting
1040          */
1041         handleWindowResize: function(isPrinting) {
1042             for (var containerId in questionManager.questions) {
1043                 if (questionManager.questions.hasOwnProperty(containerId)) {
1044                     questionManager.questions[containerId].isPrinting = isPrinting;
1045                     questionManager.questions[containerId].handleResize();
1046                 }
1047             }
1048         },
1050         /**
1051          * Sometimes, despite our best efforts, things change in a way that cannot
1052          * be specifically caught (e.g. dock expanding or collapsing in Boost).
1053          * Therefore, we need to periodically check everything is in the right position.
1054          */
1055         fixLayoutIfThingsMoved: function() {
1056             this.handleWindowResize(questionManager.isPrinting);
1057             // We use setTimeout after finishing work, rather than setInterval,
1058             // in case positioning things is slow. We want 100 ms gap
1059             // between executions, not what setInterval does.
1060             setTimeout(function() {
1061                 questionManager.fixLayoutIfThingsMoved(questionManager.isPrinting);
1062             }, 100);
1063         },
1065         /**
1066          * Handle when drag moved.
1067          *
1068          * @param {Event} e the event.
1069          * @param {jQuery} drag the drag
1070          * @param {jQuery} target the target
1071          * @param {DragDropOntoImageQuestion} thisQ the question.
1072          */
1073         handleDragMoved: function(e, drag, target, thisQ) {
1074             drag.removeClass('beingdragged').css('z-index', '');
1075             drag.css('top', target.position().top).css('left', target.position().left);
1076             target.after(drag);
1077             target.removeClass('active');
1078             if (typeof drag.data('unplaced') !== 'undefined' && drag.data('unplaced') === true) {
1079                 drag.removeClass('placed').addClass('unplaced');
1080                 drag.removeAttr('tabindex');
1081                 drag.removeData('unplaced');
1082                 drag.css('top', '')
1083                     .css('left', '')
1084                     .css('transform', '');
1085                 if (drag.hasClass('infinite') && thisQ.getInfiniteDragClones(drag, true).length > 1) {
1086                     thisQ.getInfiniteDragClones(drag, true).first().remove();
1087                 }
1088             } else {
1089                 drag.data('originX', target.data('originX')).data('originY', target.data('originY'));
1090                 thisQ.handleElementScale(drag, 'left top');
1091             }
1092             if (typeof drag.data('isfocus') !== 'undefined' && drag.data('isfocus') === true) {
1093                 drag.focus();
1094                 drag.removeData('isfocus');
1095             }
1096             if (typeof target.data('isfocus') !== 'undefined' && target.data('isfocus') === true) {
1097                 target.removeData('isfocus');
1098             }
1099             if (questionManager.isKeyboardNavigation) {
1100                 questionManager.isKeyboardNavigation = false;
1101             }
1102         },
1104         /**
1105          * Given an event, work out which question it effects.
1106          * @param {Event} e the event.
1107          * @returns {DragDropOntoImageQuestion|undefined} The question, or undefined.
1108          */
1109         getQuestionForEvent: function(e) {
1110             var containerId = $(e.currentTarget).closest('.que.ddimageortext').attr('id');
1111             return questionManager.questions[containerId];
1112         }
1113     };
1115     /**
1116      * @alias module:qtype_ddimageortext/question
1117      */
1118     return {
1119         /**
1120          * Initialise one drag-drop onto image question.
1121          *
1122          * @param {String} containerId id of the outer div for this question.
1123          * @param {boolean} readOnly whether the question is being displayed read-only.
1124          * @param {Array} Information about the drop places.
1125          */
1126         init: questionManager.init
1127     };
1128 });