OC-1320 Added help text to zone align form field, and made the new text support i18n

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -160,6 +160,7 @@
     height: 128px;
 }
 
+.xblock--drag-and-drop--editor .zones-form .zones-form-help,
 .xblock--drag-and-drop--editor .target-image-form .target-image-form-help,
 .xblock--drag-and-drop--editor .item-styles-form .item-styles-form-help {
     margin-top: 5px;

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -14,6 +14,12 @@ function DragAndDropEditBlock(runtime, element, params) {
         }
         return Number(value).toFixed(Number(value) == parseInt(value) ? 0 : 1);
     });
+    Handlebars.registerHelper('ifeq', function(v1, v2, options) {
+      if(v1 === v2) {
+        return options.fn(this);
+      }
+      return options.inverse(this);
+    });
 
     var $element = $(element);
 
@@ -23,7 +29,6 @@ function DragAndDropEditBlock(runtime, element, params) {
             tpl: {
                 init: function() {
                     _fn.tpl = {
-                        zoneAlignDropdown: Handlebars.compile($("#zone-align-dropdown-tpl", element).html()),
                         zoneInput: Handlebars.compile($("#zone-input-tpl", element).html()),
                         zoneElement: Handlebars.compile($("#zone-element-tpl", element).html()),
                         zoneDropdown: Handlebars.compile($("#zone-dropdown-tpl", element).html()),
@@ -241,8 +246,7 @@ function DragAndDropEditBlock(runtime, element, params) {
                                 height: oldZone.height || 100,
                                 x: oldZone.x || 0,
                                 y: oldZone.y || 0,
-                                align: oldZone.align || '',
-                                align_dropdown: _fn.build.form.createAlignDropdown(oldZone),
+                                align: oldZone.align || ''
                             };
 
                             _fn.build.form.zone.zoneObjects.push(zoneObj);
@@ -255,11 +259,9 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.$el.zones.form.append($zoneNode);
                             _fn.build.form.zone.enableDelete();
 
-                            // Once form is built, clean out html from zoneObj
-                            delete zoneObj['align_dropdown'];
-
                             // Add zone div to target
                             _fn.build.form.zone.renderZonesPreview();
+
                         },
                         generateUID: function() {
                             // Generate a unique ID for a new zone.
@@ -321,7 +323,7 @@ function DragAndDropEditBlock(runtime, element, params) {
                                         y_percent: (+zoneObj.y) / imgHeight * 100,
                                         width_percent: (+zoneObj.width) / imgWidth * 100,
                                         height_percent: (+zoneObj.height) / imgHeight * 100,
-                                        align: zoneObj.align,
+                                        align: zoneObj.align
                                     })
                                 );
                             });
@@ -339,11 +341,12 @@ function DragAndDropEditBlock(runtime, element, params) {
                             });
                             return zoneNames;
                         },
+
                         getZoneAlignNames: function() {
                             var alignNames = ["", "left", "center", "right"];
                             return alignNames;
                         },
-
+                        
                         changedInputHandler: function(ev) {
                             // Called when any of the inputs have changed.
                             var $changedInput = $(ev.currentTarget);
@@ -393,20 +396,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                         var html = dropdown.join('');
                         return new Handlebars.SafeString(html);
                     },
-                    createAlignDropdown: function(selected) {
-                        var tpl = _fn.tpl.zoneAlignDropdown,
-                            dropdown = [],
-                            html,
-                            dropdown_items = _fn.build.form.zone.getZoneAlignNames();
-
-                        for (var i=0; i<dropdown_items.length; i++) {
-                            var is_sel = (dropdown_items[i] == selected['align']) ? 'selected' : '';
-                            dropdown.push(tpl({ value: dropdown_items[i], selected: is_sel }));
-                        }
-
-                        html = dropdown.join('');
-                        return new Handlebars.SafeString(html);
-                    },
                     feedback: function($form) {
                         _fn.data.feedback = {
                             start: $form.find('#intro-feedback').val(),

drag_and_drop_v2/templates/html/js_templates.html

@@ -9,10 +9,6 @@
     </div>
 </script>
 
-<script id="zone-align-dropdown-tpl" type="text/html">
-    <option value="{{ value }}" {{ selected }}>{{ value }}</option>
-</script>
-
 <script id="zone-input-tpl" type="text/html">
     <div class="zone-row" data-uid="{{zone.uid}}">
         <!-- uid values from old versions of the block may contain spaces and other characters, so we use 'index' as an alternate unique ID here. -->
@@ -56,9 +52,32 @@
                    value="{{ zone.y }}" />
         </div>
         <div class="alignment">
-            <label for="zone-{{index}}-align">align</label>
+            <label for="zone-{{index}}-align">
+                {{i18n "Alignment"}}
+            </label>
             <select id="zone-{{index}}-align"
-                   class="align-select">{{ align_dropdown }}</select>
+                   class="align-select"
+                   aria-describedby="zone-align-description" >
+                <option value="" 
+                    {{#ifeq align "" }}selected{{/ifeq}}>
+                    {{i18n "not aligned"}}
+                </option>
+                <option value="left" 
+                    {{#ifeq align "left" }}selected{{/ifeq}}>
+                    {{i18n "left aligned" }}
+                </option>
+                <option value="center" 
+                    {{#ifeq align "center" }}selected{{/ifeq}}>
+                    {{i18n "center aligned" }}
+                </option>
+                <option value="right"
+                    {{#ifeq align "right" }}selected{{/ifeq}}>
+                    {{i18n "right aligned" }}
+                </option>
+            </select>
+            <div id="zone-align-description" class="zones-form-help">
+                {{i18n "Align dropped items to the left, center, or right.  Default is no alignment."}}
+            </div>
         </div>
     </div>
 </script>