Merge pull request #42 from open-craft/ajax_loader_spinner

Ajax loader spinner

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -5,6 +5,10 @@
     padding: 0;
 }
 
+.xblock--drag-and-drop .initial-load-spinner {
+    margin-right: 3px;
+}
+
 /* Header, instruction text, etc. */
 
 .xblock--drag-and-drop .problem-header {
@@ -76,6 +80,31 @@
     z-index: 10 !important;
 }
 
+.xblock--drag-and-drop .drag-container .option .spinner-wrapper {
+    margin-right: 3px;
+    float: left;
+}
+
+.xblock--drag-and-drop .drag-container .option.option-with-image .spinner-wrapper {
+    position: absolute;
+    float: none;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #000;
+    opacity: 0.6;
+    color: #fff;
+    margin: 0;
+    display: flex;
+    justify-content: center; /* align horizontal */
+    align-items: center; /* align vertical */
+}
+
+.xblock--drag-and-drop .drag-container .option .item-content {
+    display: inline-block;
+}
+
 /* Placed option */
 .xblock--drag-and-drop .drag-container .target .option {
     position: absolute;
@@ -102,6 +131,15 @@
     top: calc(50% - 16px);
 }
 
+.xblock--drag-and-drop .drag-container .option .numerical-input .spinner-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin-right: 5px;
+    padding-top: 6px;
+    color: #333;
+}
+
 .xblock--drag-and-drop .drag-container .option .numerical-input .input {
     display: inline-block;
     width: 144px;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -202,20 +202,26 @@ function DragAndDropBlock(runtime, element, configuration) {
             x_percent: x_percent,
             y_percent: y_percent,
         };
-        $.post(url, JSON.stringify(data), 'json').done(function(data){
-            if (data.correct_location) {
-                state.items[item_id].correct_input = Boolean(data.correct);
-                state.items[item_id].submitting_location = false;
-            } else {
+
+        $.post(url, JSON.stringify(data), 'json')
+            .done(function(data){
+                if (data.correct_location) {
+                    state.items[item_id].correct_input = Boolean(data.correct);
+                    state.items[item_id].submitting_location = false;
+                } else {
+                    delete state.items[item_id];
+                }
+                state.feedback = data.feedback;
+                if (data.finished) {
+                    state.finished = true;
+                    state.overall_feedback = data.overall_feedback;
+                }
+                applyState();
+            })
+            .fail(function (data) {
                 delete state.items[item_id];
-            }
-            state.feedback = data.feedback;
-            if (data.finished) {
-                state.finished = true;
-                state.overall_feedback = data.overall_feedback;
-            }
-            applyState();
-        });
+                applyState();
+            });
     };
 
     var submitInput = function(evt) {
@@ -236,16 +242,21 @@ function DragAndDropBlock(runtime, element, configuration) {
 
         var url = runtime.handlerUrl(element, 'do_attempt');
         var data = {val: item_id, input: input_value};
-        $.post(url, JSON.stringify(data), 'json').done(function(data) {
-            state.items[item_id].submitting_input = false;
-            state.items[item_id].correct_input = data.correct;
-            state.feedback = data.feedback;
-            if (data.finished) {
-                state.finished = true;
-                state.overall_feedback = data.overall_feedback;
-            }
-            applyState();
-        });
+        $.post(url, JSON.stringify(data), 'json')
+            .done(function(data) {
+                state.items[item_id].submitting_input = false;
+                state.items[item_id].correct_input = data.correct;
+                state.feedback = data.feedback;
+                if (data.finished) {
+                    state.finished = true;
+                    state.overall_feedback = data.overall_feedback;
+                }
+                applyState();
+            })
+            .fail(function(data) {
+                state.items[item_id].submitting_input = false;
+                applyState();
+            });
     };
 
     var closePopup = function(evt) {
@@ -293,6 +304,7 @@ function DragAndDropBlock(runtime, element, configuration) {
                     has_value: Boolean(item_user_state && 'input' in item_user_state),
                     value : (item_user_state && item_user_state.input) || '',
                     class_name: undefined,
+                    xhr_active: (item_user_state && item_user_state.submitting_input)
                 };
                 if (input.has_value && !item_user_state.submitting_input) {
                     input.class_name = item_user_state.correct_input ? 'correct' : 'incorrect';
@@ -302,8 +314,10 @@ function DragAndDropBlock(runtime, element, configuration) {
                 value: item.id,
                 drag_disabled: Boolean(item_user_state || state.finished),
                 class_name: item_user_state && ('input' in item_user_state || item_user_state.correct_input) ? 'fade': undefined,
+                xhr_active: (item_user_state && item_user_state.submitting_location),
                 input: input,
-                content_html: item.backgroundImage ? '<img src="' + item.backgroundImage + '"/>' : item.displayName
+                content_html: item.backgroundImage ? '<img src="' + item.backgroundImage + '"/>' : item.displayName,
+                has_image: !!item.backgroundImage
             };
             if (item_user_state) {
                 itemProperties.is_placed = true;

drag_and_drop_v2/public/js/view.js

@@ -18,6 +18,18 @@
         }, 0);
     };
 
+    var itemSpinnerTemplate = function(xhr_active) {
+        if (!xhr_active) {
+            return null;
+        }
+        return (h(
+            "div.spinner-wrapper",
+            [
+                h("i.fa.fa-spin.fa-spinner")
+            ]
+        ));
+    };
+
     var renderCollection = function(template, collection, ctx) {
         return collection.map(function(item) {
             return template(item, ctx);
@@ -34,6 +46,7 @@
                                       style: {display: input.is_visible ? 'block' : 'none'}}, [
                 h('input.input', {type: 'text', value: input.value, disabled: input.has_value,
                                   focusHook: focus_hook}),
+                itemSpinnerTemplate(input.xhr_active),
                 h('button.submit-input', {disabled: input.has_value}, gettext('ok'))
             ])
         );
@@ -41,6 +54,7 @@
 
     var itemTemplate = function(item) {
         var style = {};
+        var className = (item.class_name) ? item.class_name : "";
         if (item.background_color) {
             style['background-color'] = item.background_color;
         }
@@ -51,15 +65,19 @@
             style.left = item.x_percent + "%";
             style.top = item.y_percent + "%";
         }
+        if (item.has_image) {
+            className += " " + "option-with-image";
+        }
         return (
             h('div.option',
                 {
                     key: item.value,
-                    className: item.class_name,
+                    className: className,
                     attributes: {'data-value': item.value, 'data-drag-disabled': item.drag_disabled},
                     style: style
                 }, [
-                    h('div', {innerHTML: item.content_html}),
+                    itemSpinnerTemplate(item.xhr_active),
+                    h('div', {innerHTML: item.content_html, className: "item-content"}),
                     itemInputTemplate(item.input)
                 ]
             )

drag_and_drop_v2/templates/html/drag_and_drop.html

 {% load i18n %}
 <section class="xblock--drag-and-drop">
-    {% trans "Loading drag and drop exercise." %}
+    <i class="fa fa-spin fa-spinner initial-load-spinner"></i>{% trans "Loading drag and drop exercise." %}
 </section>