OC-1320 Added zone.align option select to the DnDv2 edit panel

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -144,7 +144,7 @@
                                here we make sure that both input fields get the same value for line-height */
 }
 
-.xblock--drag-and-drop--editor .zones-form .zone-row .layout {
+.xblock--drag-and-drop--editor .zones-form .zone-row .alignment {
     margin-bottom: 15px;
 }
 

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -23,6 +23,7 @@ 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()),
@@ -164,7 +165,7 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.form.zone.add();
                         })
                         .on('click', '.remove-zone', _fn.build.form.zone.remove)
-                        .on('input', '.zone-row input', _fn.build.form.zone.changedInputHandler)
+                        .on('input', '.zone-row input, .zone-row select', _fn.build.form.zone.changedInputHandler)
                         .on('click', '.target-image-form button', function(e) {
                             e.preventDefault();
 
@@ -237,6 +238,8 @@ 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),
                             };
 
                             _fn.build.form.zone.zoneObjects.push(zoneObj);
@@ -247,9 +250,11 @@ function DragAndDropEditBlock(runtime, element, params) {
                             $elements.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();
-
                         },
                         remove: function(e) {
                             var $el = $(e.currentTarget).closest('.zone-row'),
@@ -303,6 +308,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,
                                     })
                                 );
                             });
@@ -319,6 +325,10 @@ 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);
@@ -336,6 +346,8 @@ function DragAndDropEditBlock(runtime, element, params) {
                                 record.x = $changedInput.val();
                             } else if ($changedInput.hasClass('y')) {
                                 record.y = $changedInput.val();
+                            } else if ($changedInput.hasClass('align-select')) {
+                                record.align = $changedInput.val();
                             }
                             _fn.build.form.zone.renderZonesPreview();
                         },
@@ -358,6 +370,20 @@ function DragAndDropEditBlock(runtime, element, params) {
                         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,6 +9,10 @@
     </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 {{ id }}" data-index="{{index}}">
         <label for="zone-{{index}}-title">{{i18n "Text"}}</label>
@@ -50,6 +54,11 @@
                    class="coord y"
                    value="{{ y }}" />
         </div>
+        <div class="alignment">
+            <label for="zone-{{index}}-align">align</label>
+            <select id="zone-{{index}}-align"
+                   class="align-select">{{ align_dropdown }}</select>
+        </div>
     </div>
 </script>