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 3 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
23 changes: 23 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 @@ -76,6 +76,16 @@
z-index: 10 !important;
}

.xblock--drag-and-drop .drag-container .option .spinner-wrapper {
margin-right: 3px;
float: left;
display: none;
}

.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 +112,19 @@
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.

display: none;
}

.xblock--drag-and-drop .drag-container .option .numerical-input .spinner-wrapper {
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 I think you can merge this rule with the previous one; the selectors are identical.

color: #333;
}

.xblock--drag-and-drop .drag-container .option .numerical-input .input {
display: inline-block;
width: 144px;
Expand Down
66 changes: 42 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 @@ -191,6 +191,14 @@ function DragAndDropBlock(runtime, element, configuration) {
});
};

var showSpinner = function($item) {
$item.find('.spinner-wrapper').show();
};

var hideSpinner = function($item) {
$item.find('.spinner-wrapper').hide();
};

var submitLocation = function(item_id, zone, x_percent, y_percent) {
if (!zone) {
return;
Expand All @@ -202,20 +210,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 {
delete state.items[item_id];
}
state.feedback = data.feedback;
if (data.finished) {
state.finished = true;
state.overall_feedback = data.overall_feedback;
}
applyState();
});
var $item = $root.find(".option[data-value='"+item_id+"']");
showSpinner($item);

$.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;
}
hideSpinner($item);
applyState();
})
.fail(function (data) { hideSpinner($item); });
};

var submitInput = function(evt) {
Expand All @@ -230,22 +244,26 @@ function DragAndDropBlock(runtime, element, configuration) {
return;
}

showSpinner(input_div);
state.items[item_id].input = input_value;
state.items[item_id].submitting_input = true;
applyState();

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;
}
hideSpinner(input_div);
applyState();
})
.fail(function(data) { hideSpinner(input_div); });
};

var closePopup = function(evt) {
Expand Down
13 changes: 12 additions & 1 deletion 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,15 @@
}, 0);
};

var itemSpinnerTemplate = function() {
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,6 +43,7 @@
style: {display: input.is_visible ? 'block' : 'none'}}, [
h('input.input', {type: 'text', value: input.value, disabled: input.has_value,
focusHook: focus_hook}),
itemSpinnerTemplate(),
h('button.submit-input', {disabled: input.has_value}, gettext('ok'))
])
);
Expand All @@ -59,7 +69,8 @@
attributes: {'data-value': item.value, 'data-drag-disabled': item.drag_disabled},
style: style
}, [
h('div', {innerHTML: item.content_html}),
itemSpinnerTemplate(),
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"></i>{% trans "Loading drag and drop exercise." %}
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 There is no/very little horizontal space between the spinner and the message. Can you make the right-hand margin of the spinner shown in this context consistent with the right-hand margin of the spinner that is shown when dropping an item?

</section>