Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajax loader spinner #42

Merged
merged 6 commits into from
Dec 22, 2015
Merged

Ajax loader spinner #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4dc7aa1
Added spinner to initial load notification
e-kolpakov Dec 18, 2015
a62272d
Spinners for droppable elements
e-kolpakov Dec 18, 2015
cc7bc7e
Spinners for inputs
e-kolpakov Dec 21, 2015
834fb7f
Initial load spinner margin
e-kolpakov Dec 22, 2015
7fb5cfc
Virtual DOM instead of explicit hide/show
e-kolpakov Dec 22, 2015
0e72330
Overlay-style spinner for items with images
e-kolpakov Dec 22, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions drag_and_drop_v2/public/css/drag_and_drop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@e-kolpakov Any specific advantage(s) of using padding-top instead of margin-top here? (Just asking because I'm curious :))

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@itsjeyd the spinner is shown as if it is inside the text input, so it's just for the symmetry: both spinner wrapper and text input have the same padding.

color: #333;
}

.xblock--drag-and-drop .drag-container .option .numerical-input .input {
display: inline-block;
width: 144px;
Expand Down
62 changes: 38 additions & 24 deletions drag_and_drop_v2/public/js/drag_and_drop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down Expand Up @@ -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';
Expand All @@ -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;
Expand Down
22 changes: 20 additions & 2 deletions drag_and_drop_v2/public/js/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -34,13 +46,15 @@
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'))
])
);
};

var itemTemplate = function(item) {
var style = {};
var className = (item.class_name) ? item.class_name : "";
if (item.background_color) {
style['background-color'] = item.background_color;
}
Expand All @@ -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)
]
)
Expand Down
2 changes: 1 addition & 1 deletion drag_and_drop_v2/templates/html/drag_and_drop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% 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>