Merge pull request #55 from open-craft/braden/required-field-fixes

Fix: Background Description was required but not always saved

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -188,7 +188,7 @@
 
 .xblock--drag-and-drop--editor .items-form .item-image-url {
     width: 81%;
-    margin-right: 1%;
+    margin: 0 1%;
 }
 
 .xblock--drag-and-drop--editor .items-form .item-width {
@@ -224,7 +224,6 @@
     border: 1px solid #156ab4;
     border-radius: 6px;
     padding: 5px 10px;
-    margin-top: 15px;
 }
 
 .xblock--drag-and-drop--editor .btn:hover {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -293,6 +293,8 @@ function DragAndDropBlock(runtime, element, configuration) {
     if (!window.gettext) { window.gettext = function gettext_stub(string) { return string; }; }
 
     var $element = $(element);
+    element = $element[0]; // TODO: This line can be removed when we no longer support Dogwood.
+                           // It works around this Studio bug: https://github.com/edx/edx-platform/pull/11433
     // root: root node managed by the virtual DOM
     var $root = $element.find('.xblock--drag-and-drop');
     var root = $root[0];

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -81,6 +81,10 @@ function DragAndDropEditBlock(runtime, element, params) {
                     return success
                 },
 
+                scrollToTop: function() {
+                    $('.drag-builder', element).scrollTop(0);
+                },
+
                 clickHandlers: function() {
                     var $fbkTab = _fn.build.$el.feedback.tab,
                         $zoneTab = _fn.build.$el.zones.tab,
@@ -123,6 +127,7 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                         $fbkTab.addClass('hidden');
                         $zoneTab.removeClass('hidden');
+                        self.scrollToTop();
 
                         $(this).one('click', function loadThirdTab(e) {
                             // $zoneTab -> $itemTab
@@ -142,6 +147,7 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                             $zoneTab.addClass('hidden');
                             $itemTab.removeClass('hidden');
+                            self.scrollToTop();
 
                             $(this).addClass('hidden');
                             $('.save-button', element).parent()
@@ -161,6 +167,7 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                     $zoneTab
                         .on('click', '.add-zone', function(e) {
+                            e.preventDefault();
                             _fn.build.form.zone.add();
                         })
                         .on('click', '.remove-zone', _fn.build.form.zone.remove)
@@ -181,13 +188,13 @@ function DragAndDropEditBlock(runtime, element, params) {
                                 _fn.build.$el.targetImage.attr('src', new_img_url);
                             }
                             _fn.data.targetImg = new_img_url;
-
+                        })
+                        .on('input', '.target-image-form #background-description', function(e) {
                             var new_description = $.trim(
                                 $('.target-image-form #background-description', element).val()
                             );
                             _fn.build.$el.targetImage.attr('alt', new_description);
                             _fn.data.targetImgDescription = new_description;
-
                         })
                         .on('click', '.display-labels-form input', function(e) {
                             _fn.data.displayLabels = $('.display-labels-form input', element).is(':checked');
@@ -198,10 +205,12 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                     $itemTab
                         .on('click', '.add-item', function(e) {
+                            e.preventDefault();
                             _fn.build.form.item.add();
                         })
                         .on('click', '.remove-item', _fn.build.form.item.remove)
-                        .on('click', '.advanced-link a', _fn.build.form.item.showAdvancedSettings);
+                        .on('click', '.advanced-link a', _fn.build.form.item.showAdvancedSettings)
+                        .on('input', '.item-image-url', _fn.build.form.item.imageURLChanged);
                 },
                 form: {
                     zone: {
@@ -416,6 +425,12 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.form.item.disableDelete();
 
                         },
+                        imageURLChanged: function(e) {
+                            // Mark the image description field as required if (and only if) an image is specified.
+                            var $imageUrlField = $(e.currentTarget);
+                            var $descriptionField = $imageUrlField.closest('.item').find('.item-image-description');
+                            $descriptionField.prop("required", $imageUrlField.val() != "");
+                        },
                         enableDelete: function() {
                             if (_fn.build.form.item.count > 1) {
                                 _fn.build.$el.items.form.find('.remove-item').removeClass('hidden');

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -52,6 +52,7 @@
                     <input id="background-url"
                            type="text"
                            placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}">
+                    <button class="btn">{% trans "Change background" %}</button>
                     <label class="h3" for="background-description">{% trans "Background description" %}</label>
                     <textarea required id="background-description"
                               aria-describedby="background-description-description"></textarea>
@@ -62,7 +63,6 @@
                             to solve the problem even without seeing the image.
                         {% endblocktrans %}
                     </div>
-                    <button class="btn">{% trans "Change background" %}</button>
                 </form>
             </section>
             <section class="tab-content">

drag_and_drop_v2/templates/html/js_templates.html

@@ -82,7 +82,7 @@
         </div>
         <div class="row">
             <label for="item-{{id}}-image-description">{{i18n "Image description (should provide sufficient information to place the item even if the image did not load)"}}</label>
-            <textarea required id="item-{{id}}-image-description"
+            <textarea id="item-{{id}}-image-description" {{#if imageURL}}required{{/if}}
                       class="item-image-description">{{ imageDescription }}</textarea>
         </div>
         <div class="row">

tests/integration/test_sizing.py

@@ -3,6 +3,7 @@ import base64
 from collections import namedtuple
 import os.path
 from selenium.webdriver.common.keys import Keys
+from selenium.webdriver.support.ui import WebDriverWait
 
 from xblockutils.resources import ResourceLoader
 
@@ -109,6 +110,8 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
 
     def _size_for_mobile(self):
         self.browser.set_window_size(375, 627)  # iPhone 6 viewport size
+        wait = WebDriverWait(self.browser, 2)
+        wait.until(lambda browser: browser.get_window_size()["width"] == 375)
 
     def test_wide_image_mobile(self):
         """ Test the upper, larger, wide image in a mobile-sized window """