Address review comments

drag_and_drop_v2/drag_and_drop_v2.py

@@ -152,7 +152,7 @@ class DragAndDropBlock(XBlock):
             "show_title": self.show_title,
             "question_text": self.question_text,
             "show_question_header": self.show_question_header,
-            "targetImg": self.target_img_expanded_url,
+            "target_img_expanded_url": self.target_img_expanded_url,
             "item_background_color": self.item_background_color or None,
             "item_text_color": self.item_text_color or None,
             "initial_feedback": self.data['feedback']['start'],
@@ -197,6 +197,7 @@ class DragAndDropBlock(XBlock):
         fragment.initialize_js('DragAndDropEditBlock', {
             'data': self.data,
             'target_img_expanded_url': self.target_img_expanded_url,
+            'default_background_image_url': self.default_background_image_url,
         })
 
         return fragment
@@ -324,8 +325,13 @@ class DragAndDropBlock(XBlock):
         """ Get the expanded URL to the target image (the image items are dragged onto). """
         if self.data.get("targetImg"):
             return self._expand_static_url(self.data["targetImg"])
-        return self.runtime.local_resource_url(self, "public/img/triangle.png")
+        else:
+            return self.default_background_image_url
 
+    @property
+    def default_background_image_url(self):
+        """ The URL to the default background image, shown when no custom background is used """
+        return self.runtime.local_resource_url(self, "public/img/triangle.png")
 
     @XBlock.handler
     def get_user_state(self, request, suffix=''):

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -131,7 +131,7 @@
     display: table;
     /* 'display: table' makes this have the smallest size that fits the .target-img
        while still allowing the image to use 'max-width: 100%' and scale proportionally.
-       The end result is that this element has the same widdth and height as the image, so we
+       The end result is that this element has the same width and height as the image, so we
        can use it as a 'position: relative' anchor for the placed elements. */
     height: auto;
     position: relative;

drag_and_drop_v2/public/css/drag_and_drop_edit.css

-.modal-window .xblock--drag-and-drop--editor.editor-with-buttons  {
-    /* Fix Studio editor height */
-    margin-bottom: 0;
-    height: 380px;
+.xblock--drag-and-drop--editor {
+  width: 100%;
+  height: 100%;
+}
+.modal-window .drag-builder  {
+    width: 100%;
+    height: calc(100% - 60px);
+    position: absolute;
+    overflow-y: scroll;
 }
 
 /*** Drop Target ***/
@@ -59,11 +64,6 @@
     display: none !important;
 }
 
-.xblock--drag-and-drop--editor {
-    height: 100%;
-    overflow: scroll;
-}
-
 .xblock--drag-and-drop--editor .tab {
     width: 100%;
     background: #eee;
@@ -71,9 +71,8 @@
     position: relative;
 }
 
-.xblock--drag-and-drop--editor .tab:after,
-.xblock--drag-and-drop--editor .tab-footer:after,
-.xblock--drag-and-drop--editor .target:after {
+.xblock--drag-and-drop--editor .tab::after,
+.xblock--drag-and-drop--editor .tab-footer::after {
   content: "";
   display: table;
   clear: both;
@@ -109,21 +108,25 @@
 /* Zones Tab */
 .xblock--drag-and-drop--editor .zones-tab .zone-editor {
   position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
 }
 
 .xblock--drag-and-drop--editor .zones-tab .tab-content .controls {
-  width: 40%;
+  flex-basis: 40%;
+  margin-right: 15px;
 }
 
 .xblock--drag-and-drop--editor .zones-tab .tab-content .target {
-  position: absolute;
-  left: 40%;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  flex-basis: 60%;
+  position: relative;
   border: 1px solid #ccc;
+  overflow: hidden;
 }
 .xblock--drag-and-drop--editor .zones-tab .tab-content .target-img {
+  display: block;
   width: auto;
   height: auto;
   max-width: 100%;
@@ -150,10 +153,6 @@
     margin: 0 19px 5px 0;
 }
 
-.xblock--drag-and-drop--editor .target {
-    margin-bottom: 40px;
-}
-
 .xblock--drag-and-drop--editor .zone {
     border: 1px dotted #666;
 }

drag_and_drop_v2/public/js/drag_and_drop.js

 function DragAndDropBlock(runtime, element, configuration) {
     "use strict";
-    // Ensure "undefined" has not been redefined (though this unlikely and often impossible).
-    // Now we can check for 'undefined' using just '=== undefined' throughout this file.
-    if (undefined !== void 0) { console.log("WARNING: 'undefined' redefined"); var undefined = void 0; }
-    // Set up gettext in case it isn't available in the client runtime:
-    if (gettext === undefined) {
-        window.gettext = function gettext_stub(string) { return string; };
+    // Set up a mock for gettext if it isn't available in the client runtime:
+    if (!window.gettext) {
+        var gettext = function gettext_stub(string) { return string; };
     }
 
     var $element = $(element);
     // root: root node managed by the virtual DOM
-    var root = $element.find('.xblock--drag-and-drop')[0];
-    var $root = $(root);
+    var $root = $element.find('.xblock--drag-and-drop');
+    var root = $root[0];
 
     var state = undefined;
     var __vdom = virtualDom.h();  // blank virtual DOM
@@ -56,7 +53,7 @@ function DragAndDropBlock(runtime, element, configuration) {
             }
         }, false);
         img.addEventListener("error", function() { promise.reject() });
-        img.src = configuration.targetImg;
+        img.src = configuration.target_img_expanded_url;
         return promise;
     }
 
@@ -330,7 +327,7 @@ function DragAndDropBlock(runtime, element, configuration) {
             show_title: configuration.show_title,
             question_html: configuration.question_text,
             show_question_header: configuration.show_question_header,
-            target_img_src: configuration.targetImg,
+            target_img_src: configuration.target_img_expanded_url,
             display_zone_labels: configuration.display_zone_labels,
             zones: configuration.zones,
             items: items,

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -122,14 +122,19 @@ function DragAndDropEditBlock(runtime, element, params) {
                         .on('click', '.target-image-form button', function(e) {
                             e.preventDefault();
 
-                            var new_img_url = $('.target-image-form input', element).val();
-                            _fn.data.targetImg = new_img_url;
+                            var new_img_url = $.trim($('.target-image-form input', element).val());
+                            if (new_img_url) {
                                 // We may need to 'expand' the URL before it will be valid.
                                 // e.g. '/static/blah.png' becomes '/asset-v1:course+id/blah.png'
                                 var handlerUrl = runtime.handlerUrl(element, 'expand_static_url');
                                 $.post(handlerUrl, JSON.stringify(new_img_url), function(result) {
                                     _fn.build.$el.targetImage.attr('src', result.url);
-                            }).error(function(a, b, c) { console.log(a, b, c); });
+                                });
+                            } else {
+                                new_img_url = params.default_background_image_url;
+                                _fn.build.$el.targetImage.attr('src', new_img_url);
+                            }
+                            _fn.data.targetImg = new_img_url;
 
                             // Placeholder shim for IE9
                             $.placeholder.shim();
@@ -233,6 +238,10 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.$el.zonesPreview.html('');
                             var imgWidth = _fn.build.$el.targetImage[0].naturalWidth;
                             var imgHeight = _fn.build.$el.targetImage[0].naturalHeight;
+                            if (imgWidth == 0 || imgHeight == 0) {
+                                // Set a non-zero value to avoid divide-by-zero:
+                                imgWidth = imgHeight = 400;
+                            }
                             this.zoneObjects.forEach(function(zoneObj) {
                                 _fn.build.$el.zonesPreview.append(
                                     _fn.tpl.zoneElement({

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -54,7 +54,7 @@
                     <input name="display-labels" id="display-labels" type="checkbox" />
                 </section>
                 <div class="zone-editor">
-                    <div class="items">
+                    <div class="controls">
                         <form class="zones-form"></form>
                         <a href="#" class="add-zone add-element"><div class="icon add"></div>{% trans "Add a zone" %}</a>
                     </div>