Skip to content

E
edx-platform
Commit 46aec4aa by Bill Filler
Options

add animation during loading

parent e2659a97
Showing with 58 additions and 25 deletions
common/lib/xmodule/xmodule/js/src/sequence/display.js
......@@ -7,7 +7,7 @@
this.Sequence = (function() {
function Sequence(element) {
var self = this;
//alert("in Sequence for element" + element);
this.removeBookmarkIconFromActiveNavItem = function(event) {
return Sequence.prototype.removeBookmarkIconFromActiveNavItem.apply(self, [event]);
};
......@@ -38,11 +38,11 @@
this.displayTabTooltip = function(event) {
return Sequence.prototype.displayTabTooltip.apply(self, [event]);
};
this.loadSeqContents = function(event) {
return Sequence.prototype.loadSeqContents.apply(self, [event]);
this.loadSeqContents = function() {
return Sequence.prototype.loadSeqContents.apply(self);
}
this.recalcGrade = function(event) {
return Sequence.prototype.recalcGrade.apply(self, [event]);
this.recalcGrade = function() {
return Sequence.prototype.recalcGrade.apply(self);
}
this.arrowKeys = {
LEFT: 37,
......@@ -73,6 +73,9 @@
this.base_page_title = ($('title').data('base-title') || '').trim();
this.bind();
this.render(parseInt(this.el.data('position'), 10));
if (this.calculateScore) {
this.recalcGrade();
}
}
Sequence.prototype.$ = function(selector) {
......@@ -89,30 +92,35 @@
this.$('.recalc-grade').click(this.recalcGrade);
};
Sequence.prototype.loadSeqContents = function(event) {
Sequence.prototype.loadSeqContents = function() {
var modxFullUrl, currentText, self;
modxFullUrl = '' + this.ajaxUrl + '/load_seq_contents';
self = this;
$.postWithPrefix(modxFullUrl, {},
function(response) {
$('#loading-content').hide();
console.log('load_seq_contents response = ');
console.log(response);
self.position = -1;
$('.sequence-list-wrapper').contents(response.seq_list_html);
$('#seq-list-wrapper').html(response.seq_list_html);
$('#main-content').html(response.seq_contents_html);
self.contents = self.$('.seq_contents');
self.content_container = self.$('#seq_content');
self.sr_container = self.$('.sr-is-focusable');
self.num_contents = self.contents.length;
self.bind();
self.render(1);
}
);
};
Sequence.prototype.recalcGrade = function(event) {
Sequence.prototype.recalcGrade = function() {
var modxFullUrl, currentText, self;
modxFullUrl = '' + this.ajaxUrl + '/recalc_grade';
self = this;
$('.ui-loading').show();
$.postWithPrefix(modxFullUrl, {
"gate_conent": this.gateContent,
"prereq_url": this.prereqUrl,
......@@ -126,9 +134,14 @@
self.gateContent = response.gate_content;
self.scoreReached = response.score_reached;
self.calculateScore = response.calculate_score;
$('.ui-loading').hide();
$('#main-content').html(response.html);
if (self.scoreReached) {
setTimeout(self.loadSeqContents(event), 3000);
// if we reached the score, load the contents
// after a short delay
self.el.find('.icon .fa .fa-lock').removeClass('fa-lock').addClass('fa-unlock');
$('#loading-content').show();
setTimeout(self.loadSeqContents, 6000);
}
}
);
......@@ -227,7 +240,7 @@
* 'new_content_state' is the updated content of the problem.
* 'new_state' is the updated state of the problem.
*/
alert("in addToUpdatedProblems for problemId=" + problemId);
// initialize for the current sequence if there isn't any updated problem for this position.
if (!this.anyUpdatedProblems(this.position)) {
this.updatedProblems[this.position] = {};
......@@ -283,9 +296,11 @@
};
Sequence.prototype.render = function(newPosition) {
var bookmarked, currentTab, modxFullUrl, sequenceLinks,
self = this;
if (this.position !== newPosition) {
//alert("in render for position" + newPosition);
if (this.position) {
this.mark_visited(this.position);
modxFullUrl = '' + this.ajaxUrl + '/goto_position';
......@@ -298,9 +313,7 @@
// Added for aborting video bufferization, see ../video/10_main.js
this.el.trigger('sequence:change');
this.mark_active(newPosition);
console.log("this.contents=" + this.contents);
currentTab = this.contents.eq(newPosition - 1);
console.log("current tab text=" + currentTab.text());
bookmarked = this.el.find('.active .bookmark-icon').hasClass('bookmarked');
// update the data-attributes with latest contents only for updated problems.
......@@ -312,6 +325,7 @@
if (this.anyUpdatedProblems(newPosition)) {
$.each(this.updatedProblems[newPosition], function(problemId, latestData) {
alert("updating problem index=" + newPosition + " problemId=" + problemId);
var latestContent, latestResponse;
latestContent = latestData[0];
latestResponse = latestData[1];
......@@ -323,8 +337,9 @@
.data('attempts-used', latestResponse.attempts_used);
});
}
console.log("calling XBlock.initialize");
//alert("calling XBlock.initialize for content_container=" + this.content_container + " requestToken=" + this.requestToken);
XBlock.initializeBlocks(this.content_container, this.requestToken);
//alert("XBlocks init is done");
// For embedded circuit simulator exercises in 6.002x
window.update_schematics();
......
lms/templates/_gated_content.html
......@@ -5,19 +5,27 @@ from django.utils.translation import ugettext as _
from openedx.core.djangolib.markup import HTML, Text
%>
<div class="hidden-content proctored-exam completed">
<h3>
${unit_name}
</h3>
<div>
<h2 class="hd hd-2 unit-title">
<span class="icon fa fa-lock" aria-hidden="true">&nbsp</span>${unit_name}
</h2>
<hr>
<h3>
% if calculate_score:
<span class="recalc-grade">
${Text(_(
<div class="ui-loading is-hidden">
<p>
<span class="spin">
<span class="icon fa fa-refresh" aria-hidden="true">
</span>
</span>
<span class="copy">${Text(_(
"Calculating your score for {section_name}..."
)).format(
section_name=prereq_section_name
)}
)}</span>
</p>
</div>
</span>
% elif score_reached:
${_("Score achieved!")}
......@@ -26,11 +34,20 @@ from openedx.core.djangolib.markup import HTML, Text
% endif
</h3>
<p>
% if calculate_score:
${_("Processing...")}
% elif score_reached:
${_("Congratulations you have unlocked this section!")}
% else:
% if score_reached:
<h3>
<span class="icon fa fa-check-circle-o" aria-hidden="true">&nbsp</span>${_("Congratulations you have unlocked this section!")}
<div id="loading-content" class="ui-loading is-hidden">
<p>
<span class="spin">
<span class="icon fa fa-refresh" aria-hidden="true">
</span>
</span>
<span class="copy">${_("Loading content...")}</span>
</p>
</div>
</h3>
% elif not calculate_score:
${Text(_(
"You must complete the section '{section_name}' with the required score before you are able to view this content."
)).format(section_name=prereq_section_name)}
......
lms/templates/_sequence_list.html
......@@ -5,6 +5,7 @@ from django.utils.translation import ugettext as _
from openedx.core.djangolib.markup import HTML, Text
%>
<div class="sequence-nav" id="seq-list-wrapper">
<nav class="sequence-list-wrapper" aria-label="${_('Sequence')}">
<ol id="sequence-list" role="tablist">
% if gate_content:
......@@ -34,3 +35,4 @@ from openedx.core.djangolib.markup import HTML, Text
% endif
</ol>
</nav>
</div>
lms/templates/seq_module.html
......@@ -26,7 +26,6 @@ from openedx.core.djangolib.markup import HTML, Text
</button>
<%include file="_sequence_list.html" args="items=items, gate_content=gate_content, disable_navigation=disable_navigation"/>
</div>
<div id="main-content">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment