MDL-70426 qtype_ddmarker: infinite markers keep duplicating
authorHuong Nguyen <huongnv13@gmail.com>
Tue, 8 Dec 2020 09:04:09 +0000 (16:04 +0700)
committerHuong Nguyen <huongnv13@gmail.com>
Thu, 10 Dec 2020 08:52:46 +0000 (15:52 +0700)
question/type/ddmarker/amd/build/question.min.js
question/type/ddmarker/amd/build/question.min.js.map
question/type/ddmarker/amd/src/question.js

index 9b4d45e..aaf8d2e 100644 (file)
Binary files a/question/type/ddmarker/amd/build/question.min.js and b/question/type/ddmarker/amd/build/question.min.js differ
index 8562ce1..fa7d568 100644 (file)
Binary files a/question/type/ddmarker/amd/build/question.min.js.map and b/question/type/ddmarker/amd/build/question.min.js.map differ
index 5d516de..ca8b9bc 100644 (file)
@@ -473,8 +473,10 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
             var drag = $(draghome);
             var placeHolder = drag.clone();
             placeHolder.removeClass();
-            placeHolder.addClass('marker choice' +
-                thisQ.getChoiceNoFromElement(drag) + ' dragno' + thisQ.getDragNo(drag) + ' dragplaceholder');
+            placeHolder.addClass('marker');
+            placeHolder.addClass('choice' + thisQ.getChoiceNoFromElement(drag));
+            placeHolder.addClass(thisQ.getDragNoClass(drag, false));
+            placeHolder.addClass('dragplaceholder');
             drag.before(placeHolder);
         });
     };
@@ -489,6 +491,26 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
         return this.getClassnameNumericSuffix(drag, 'dragno');
     };
 
+    /**
+     * Get the drag number prefix of a drag.
+     *
+     * @param {jQuery} drag the drag.
+     * @param {Boolean} includeSelector include the CSS selector prefix or not.
+     * @return {String} Class name
+     */
+    DragDropMarkersQuestion.prototype.getDragNoClass = function(drag, includeSelector) {
+        var className = 'dragno' + this.getDragNo(drag);
+        if (this.isInfiniteDrag(drag)) {
+            className = 'infinite';
+        }
+
+        if (includeSelector) {
+            return '.' + className;
+        }
+
+        return className;
+    };
+
     /**
      * Get drag clone for a given drag.
      *
@@ -497,7 +519,7 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
      */
     DragDropMarkersQuestion.prototype.getDragClone = function(drag) {
         return this.getRoot().find('.draghomes' + ' span.marker' +
-            '.choice' + this.getChoiceNoFromElement(drag) + '.dragno' + this.getDragNo(drag) + '.dragplaceholder');
+            '.choice' + this.getChoiceNoFromElement(drag) + this.getDragNoClass(drag, true) + '.dragplaceholder');
     };
 
     /**
@@ -555,20 +577,21 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
         var inputNode = this.getInput(drag),
             noOfDrags = Number(this.getClassnameNumericSuffix(inputNode, 'noofdrags')),
             displayedDragsInDropArea = this.getRoot().find('div.droparea .marker.choice' +
-                this.getChoiceNoFromElement(drag) + '.dragno' + this.getDragNo(drag)).length,
+                this.getChoiceNoFromElement(drag) + this.getDragNoClass(drag, true)).length,
             displayedDragsInDragHomes = this.getRoot().find('div.draghomes .marker.choice' +
-                this.getChoiceNoFromElement(drag) + '.dragno' + this.getDragNo(drag)).not('.dragplaceholder').length;
+                this.getChoiceNoFromElement(drag) + this.getDragNoClass(drag, true)).not('.dragplaceholder').length;
 
-        if (displayedDragsInDropArea < noOfDrags && displayedDragsInDragHomes === 0) {
-            var dragclone = drag.clone();
-            dragclone.addClass('unneeded')
+        if ((this.isInfiniteDrag(drag) ||
+                !this.isInfiniteDrag(drag) && displayedDragsInDropArea < noOfDrags) && displayedDragsInDragHomes === 0) {
+            var dragClone = drag.clone();
+            dragClone.addClass('unneeded')
                 .css('top', '')
                 .css('left', '')
                 .css('transform', '');
             this.getDragClone(drag)
                 .removeClass('active')
-                .after(dragclone);
-            questionManager.addEventHandlersToMarker(dragclone);
+                .after(dragClone);
+            questionManager.addEventHandlersToMarker(dragClone);
         }
     };
 
@@ -578,11 +601,12 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
      * @param {jQuery} drag the item to place.
      */
     DragDropMarkersQuestion.prototype.removeDragIfNeeded = function(drag) {
-        var displayeddrags = this.getRoot().find('div.draghomes .marker.choice' +
-            this.getChoiceNoFromElement(drag) + '.dragno' + this.getDragNo(drag)).not('.dragplaceholder').length;
-        if (displayeddrags > 1) {
-            this.getRoot().find('div.draghomes .marker.choice' +
-                this.getChoiceNoFromElement(drag) + '.dragno' + this.getDragNo(drag)).not('.dragplaceholder').first().remove();
+        var dragsInHome = this.getRoot().find('div.draghomes .marker.choice' +
+            this.getChoiceNoFromElement(drag) + this.getDragNoClass(drag, true)).not('.dragplaceholder');
+        var displayedDrags = dragsInHome.length;
+        while (displayedDrags > 1) {
+            dragsInHome.first().remove();
+            displayedDrags--;
         }
     };
 
@@ -631,6 +655,15 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes', 'core/key_codes'], f
         });
     };
 
+    /**
+     * Check if the given drag is in infinite mode or not.
+     *
+     * @param {jQuery} drag The drag item need to check.
+     */
+    DragDropMarkersQuestion.prototype.isInfiniteDrag = function(drag) {
+        return drag.hasClass('infinite');
+    };
+
     /**
      * Singleton that tracks all the DragDropToTextQuestions on this page, and deals
      * with event dispatching.