Use configured widths when displaying the block

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -10,6 +10,7 @@ function DragAndDropBlock(runtime, element, configuration) {
     var root = $root[0];
 
     var state = undefined;
+    var bgImgNaturalWidth = undefined; // pixel width of the background image (when not scaled)
     var __vdom = virtualDom.h();  // blank virtual DOM
 
     // Keyboard accessibility
@@ -40,7 +41,9 @@ function DragAndDropBlock(runtime, element, configuration) {
                 computeZoneDimension(zone, bgImg.width, bgImg.height);
             });
             state = stateResult[0]; // stateResult is an array of [data, statusText, jqXHR]
+            migrateConfiguration(bgImg.width);
             migrateState(bgImg.width, bgImg.height);
+            bgImgNaturalWidth = bgImg.width;
             applyState();
 
             // Set up event handlers
@@ -527,6 +530,7 @@ function DragAndDropBlock(runtime, element, configuration) {
                 imageDescription: item.imageDescription,
                 has_image: !!imageURL,
                 grabbed: grabbed,
+                widthPercent: item.widthPercent, // widthPercent may be undefined (auto width)
             };
             if (item_user_state) {
                 itemProperties.is_placed = true;
@@ -545,6 +549,7 @@ function DragAndDropBlock(runtime, element, configuration) {
 
         var context = {
             // configuration - parts that never change:
+            bg_image_width: bgImgNaturalWidth, // Not stored in configuration since it's unknown on the server side
             header_html: configuration.title,
             show_title: configuration.show_title,
             question_html: configuration.question_text,
@@ -565,6 +570,21 @@ function DragAndDropBlock(runtime, element, configuration) {
     };
 
     /**
+     * migrateConfiguration: Apply any changes to support older versions of the configuration.
+     * We have to do this in JS, not python, since some migrations depend on the image size,
+     * which is not known in Python-land.
+     */
+    var migrateConfiguration = function(bg_image_width) {
+        for (var i in configuration.items) {
+            var item = configuration.items[i];
+            // Convert from old-style pixel widths to new-style percentage widths:
+            if (item.widthPercent === undefined && item.size && parseInt(item.size.width) > 0) {
+                item.widthPercent = parseInt(item.size.width) / bg_image_width * 100;
+            }
+        }
+    }
+
+    /**
      * migrateState: Apply any changes necessary to support the 'state' format used by older
      * versions of this XBlock.
      * We have to do this in JS, not python, since some migrations depend on the image size,

drag_and_drop_v2/public/js/view.js

@@ -52,7 +52,7 @@
         );
     };
 
-    var itemTemplate = function(item) {
+    var itemTemplate = function(item, ctx) {
         // Define properties
         var className = (item.class_name) ? item.class_name : "";
         if (item.has_image) {
@@ -77,9 +77,23 @@
         if (item.is_placed) {
             style.left = item.x_percent + "%";
             style.top = item.y_percent + "%";
+            if (item.widthPercent) {
+                style.width = item.widthPercent + "%";
+                style.maxWidth = item.widthPercent + "%"; // default maxWidth is ~33%
+            }
         } else {
             // If an item has not been placed it must be possible to move focus to it using the keyboard:
             attributes.tabindex = 0;
+            if (item.widthPercent) {
+                // The item bank container is often wider than the background image, and the
+                // widthPercent is specified relative to the background image so we have to
+                // convert it to pixels. But if the browser window / mobile screen is not as
+                // wide as the image, then the background image will be scaled down and this
+                // pixel value would be too large, so we also specify it as a max-width
+                // percentage.
+                style.width = (item.widthPercent / 100 * ctx.bg_image_width) + "px";
+                style.maxWidth = item.widthPercent + "%";
+            }
         }
         // Define children
         var children = [