Editor: New "Width (%)" field

Also preserve data from old "Width (px)" and "Height (px)" fields, and convert from "Width (px)" to "Width (%)" as needed

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -196,9 +196,8 @@
     margin-right: 1%;
 }
 
-.xblock--drag-and-drop--editor .items-form .item-width,
-.xblock--drag-and-drop--editor .items-form .item-height {
-    width: 40px;
+.xblock--drag-and-drop--editor .items-form .item-width {
+    width: 50px;
 }
 
 .xblock--drag-and-drop--editor .items-form .item-numerical-value,

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -7,6 +7,13 @@ function DragAndDropEditBlock(runtime, element, params) {
 
     // Make gettext available in Handlebars templates
     Handlebars.registerHelper('i18n', function(str) { return gettext(str); });
+    // Numeric rounding in Handlebars templates
+    Handlebars.registerHelper('singleDecimalFloat', function(value) {
+        if (value === "" || isNaN(Number(value))) {
+            return "";
+        }
+        return Number(value).toFixed(Number(value) == parseInt(value) ? 0 : 1);
+    });
 
     var $element = $(element);
 
@@ -331,32 +338,37 @@ function DragAndDropEditBlock(runtime, element, params) {
                     },
                     item: {
                         count: 0,
-                        add: function(oldItem) {
+                        add: function(itemData) {
                             var $form = _fn.build.$el.items.form,
                                 tpl = _fn.tpl.itemInput,
                                 ctx = {};
 
-                            if (oldItem) ctx = oldItem;
-
-                            ctx.dropdown = _fn.build.form.createDropdown(ctx.zone);
-
-                            // Item width/height are ignored in new versions of the block, but
-                            // preserve the data in case we change back to using those values.
-                            if (oldItem && oldItem.size && oldItem.size.width != 'auto') {
-                                ctx.width = oldItem.size.width.substr(0, oldItem.size.width.length - 2); // Remove 'px'
-                            } else {
-                                ctx.width = '0';
+                            if (itemData) {
+                                ctx = itemData;
+                                if (itemData.size && parseInt(itemData.size.width) > 0) {
+                                    // Convert old fixed pixel width setting values (hard to
+                                    // make mobile friendly) to new percentage format.
+                                    // Note itemData.size.width is a string like "380px" (it can
+                                    // also be "auto" but that's excluded by the if condition above)
+                                    var bgImgWidth = _fn.build.$el.targetImage[0].naturalWidth;
+                                    if (bgImgWidth > 0 && typeof ctx.widthPercent === "undefined") {
+                                        ctx.widthPercent = parseInt(itemData.size.width) / bgImgWidth * 100;
                                     }
-                            if (oldItem && oldItem.size && oldItem.size.height != 'auto') {
-                                ctx.height = oldItem.size.height.substr(0, oldItem.size.height.length - 2); // Remove 'px'
-                            } else {
-                                ctx.height = '0';
+                                    // Preserve the old-style data in case we need it again:
+                                    ctx.pixelWidth = itemData.size.width.substr(0, itemData.size.width.length - 2); // Remove 'px'
                                 }
-
-                            if (oldItem && oldItem.inputOptions) {
-                                ctx.numericalValue = oldItem.inputOptions.value;
-                                ctx.numericalMargin = oldItem.inputOptions.margin;
+                                if (itemData.size && parseInt(itemData.size.height) > 0) {
+                                    // Item fixed pixel height is ignored in new versions of the
+                                    // block, but preserve the data in case we need it again:
+                                    ctx.pixelHeight = itemData.size.height.substr(0, itemData.size.height.length - 2); // Remove 'px'
                                 }
+                                if (itemData.inputOptions) {
+                                    ctx.numericalValue = itemData.inputOptions.value;
+                                    ctx.numericalMargin = itemData.inputOptions.margin;
+                                }
+                            }
+
+                            ctx.dropdown = _fn.build.form.createDropdown(ctx.zone);
 
                             _fn.build.form.item.count++;
                             $form.append(tpl(ctx));
@@ -399,16 +411,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                                 imageDescription = $el.find('.item-image-description').val();
 
                             if (name.length > 0 || imageURL.length > 0) {
-                                // Item width/height are ignored, but preserve the data:
-                                var width = $el.find('.item-width').val(),
-                                    height = $el.find('.item-height').val();
-
-                                if (height === '0') height = 'auto';
-                                else height = height + 'px';
-
-                                if (width === '0') width = 'auto';
-                                else width = width + 'px';
-
                                 var data = {
                                     displayName: name,
                                     zone: $el.find('.zone-select').val(),
@@ -417,13 +419,18 @@ function DragAndDropEditBlock(runtime, element, params) {
                                         correct: $el.find('.success-feedback').val(),
                                         incorrect: $el.find('.error-feedback').val()
                                     },
-                                    size: {
-                                        width: width,
-                                        height: height
-                                    },
+                                    size: {}, // old size data (preserved if present but ignored)
                                     imageURL: imageURL,
                                     imageDescription: imageDescription,
                                 };
+                                // Optional preferred width as a percentage of the bg image's width:
+                                var widthPercent = $el.find('.item-width').val();
+                                if (widthPercent && +widthPercent > 0) { data.widthPercent = widthPercent; }
+                                // Item width/height in pixels are now ignored, but preserve the data:
+                                var width = $el.find('.item-pixel-width').val();
+                                if (width && +width > 0) { data.size.width = (+width) + 'px'; }
+                                var height = $el.find('.item-pixel-height').val();
+                                if (height && +height > 0) { data.size.height = (+height) + 'px'; }
 
                                 var numValue = parseFloat($el.find('.item-numerical-value').val());
                                 var numMargin = parseFloat($el.find('.item-numerical-margin').val());

drag_and_drop_v2/templates/html/js_templates.html

@@ -92,25 +92,15 @@
             <textarea id="item-{{id}}-error-feedback"
                       class="error-feedback">{{ feedback.incorrect }}</textarea>
         </div>
-        <div class="row" style="display: none;">
+        <div class="row">
+            <label for="item-{{id}}-width-percent">{{i18n "Preferred width as a percentage of the background image width (or blank for automatic width):"}}</label>
+            <input type="number" id="item-{{id}}-width-percent" class="item-width" value="{{ singleDecimalFloat widthPercent }}" step="0.1" min="1" max="99" />%
             <!--
-            width and height are no longer respected, so they are now hidden, but we are
-            keeping the HTML and JS code intact so that the existing data will be preserved
-            until we can be sure that removing the width/height is OK for all courses that use
-            this block.
-            If we do add them back in, we should only allow setting "width". Height will be
-            detected automatically based on font/image size requirements.
+            A fixed pixel width/height is no longer used, so they are now hidden, but we are
+            preserving the existing data:
             -->
-            <label for="item-{{id}}-width">{{i18n "Width in pixels (0 for auto)"}}</label>
-            <input type="text"
-                   id="item-{{id}}-width"
-                   class="item-width"
-                   value="{{ width }}" />
-            <label for="item-{{id}}-height">{{i18n "Height in pixels (0 for auto)"}}</label>
-            <input type="text"
-                   id="item-{{id}}-height"
-                   class="item-height"
-                   value="{{ height }}" />
+            <input type="hidden" class="item-pixel-width" value="{{ pixelWidth }}" />
+            <input type="hidden" class="item-pixel-height" value="{{ pixelHeight }}" />
         </div>
         <div class="row">
           <label for="item-{{id}}-numerical-value">