Merge branch 'braden/required-field-fixes' into st-gallen-2016-02-10

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -189,7 +189,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 {
@@ -225,7 +225,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_edit.js

@@ -87,6 +87,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,
@@ -129,6 +133,7 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                         $fbkTab.addClass('hidden');
                         $zoneTab.removeClass('hidden');
+                        self.scrollToTop();
 
                         $(this).one('click', function loadThirdTab(e) {
                             // $zoneTab -> $itemTab
@@ -148,6 +153,7 @@ function DragAndDropEditBlock(runtime, element, params) {
 
                             $zoneTab.addClass('hidden');
                             $itemTab.removeClass('hidden');
+                            self.scrollToTop();
 
                             $(this).addClass('hidden');
                             $('.save-button', element).parent()
@@ -167,6 +173,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)
@@ -187,13 +194,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');
@@ -204,10 +211,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: {
@@ -426,6 +435,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

@@ -110,7 +110,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 """