MDL-78176 Question: Fix D&D onto image and D&D markers theme issue

question/type/ddimageortext/amd/src/form.js

@@ -55,20 +55,24 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
          */
         init: function() {
             dragDropToImageForm.fp = dragDropToImageForm.filePickers();
+            dragDropToImageForm.updateVisibilityOfFilePickers();
+            dragDropToImageForm.setOptionsForDragItemSelectors();
+            dragDropToImageForm.setupEventHandlers();
+            dragDropToImageForm.waitForFilePickerToInitialise();
+        },
 
+        /**
+         * Add html for the preview area.
+         */
+        setupPreviewArea: function() {
             $('#id_previewareaheader').append(
                 '<div class="ddarea que ddimageortext">' +
-                '  <div class="droparea">' +
+                '  <div id="id_droparea" class="droparea">' +
                 '    <img class="dropbackground" />' +
                 '    <div class="dropzones"></div>' +
                 '  </div>' +
                 '  <div class="dragitems"></div>' +
                 '</div>');
-
-            dragDropToImageForm.updateVisibilityOfFilePickers();
-            dragDropToImageForm.setOptionsForDragItemSelectors();
-            dragDropToImageForm.setupEventHandlers();
-            dragDropToImageForm.waitForFilePickerToInitialise();
         },
 
         /**
@@ -90,8 +94,13 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
                 M.util.js_pending('dragDropToImageForm');
                 dragDropToImageForm.loadPreviewImage();
             });
-
-            dragDropToImageForm.loadPreviewImage();
+            if ($('#id_droparea').length) {
+                dragDropToImageForm.loadPreviewImage();
+            } else {
+                // Setup preview area when the background image is uploaded the first time.
+                dragDropToImageForm.setupPreviewArea();
+                dragDropToImageForm.loadPreviewImage();
+            }
         },
 
         /**

question/type/ddmarker/amd/src/form.js

@@ -374,7 +374,6 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
         init: function() {
             dragDropForm.fp = dragDropForm.filePickers();
             dragDropForm.noDropZones = dragDropForm.form.getFormValue('nodropzone', []);
-            dragDropForm.setupPreviewArea();
             dragDropForm.setOptionsForDragItemSelectors();
             dragDropForm.createShapes();
             dragDropForm.setupEventHandlers();
@@ -555,7 +554,13 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
             // after filepicker's javascript has finished.
             $('form.mform[data-qtype="ddmarker"]').on('change', '#id_bgimage', dragDropForm.loadPreviewImage);
 
-            dragDropForm.loadPreviewImage();
+            if ($('#ddm-droparea').length) {
+                dragDropForm.loadPreviewImage();
+            } else {
+                // Setup preview area when the background image is uploaded the first time.
+                dragDropForm.setupPreviewArea();
+                dragDropForm.loadPreviewImage();
+            }
         },
 
         /**

question/type/ddmarker/styles.css

@@ -227,7 +227,3 @@ body#page-question-type-ddmarker div[id^=fitem_id_][id*=hintclearwrong_] {
 body#page-question-type-ddmarker #fitem_id_penalty {
     margin-bottom: 2em;
 }
-
-body#page-question-type-ddmarker .ddarea.que.ddmarker {
-    overflow-y: scroll;
-}