Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading icon to reviews page.

Browse Source 
LEARNER-2332

Since CourseTalk doesn't allow for loading a read and write reviews
page at the same time, this commit adds a loading icon to show that
we need to grab the iframe.
This commit is contained in:
Harry Rein
2017-10-04 14:41:53 -04:00
parent 612c99ba3c
commit 271f3c9f3c
3 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
lms/static/sass/features/_course-experience.scss
View File

@@ -360,5 +360,18 @@
.course-reviews-tool {
margin: ($baseline * 2) ($baseline * 3);
position: relative;
text-align: center;
min-height: 300px;
.fa.fa-spinner {
@include left(50%);
font-size: 2rem;
margin-top: $baseline*3;
position: absolute;
}
iframe {
display: block !important;
}
}
}

27
openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js
View File

@@ -11,21 +11,32 @@ export class CourseTalkReviews { // eslint-disable-line import/prefer-default-e
// Initialize page to the read reviews view
self.currentSrc = options.readSrc;
$.getScript(options.readSrc);
$.getScript(options.readSrc, () => { // eslint-disable-line func-names
$('iframe').load(() => {
$(options.loadIcon).hide();
});
});
$courseTalkToggleReadWriteReviews.text(toWriteBtnText);
$courseTalkToggleReadWriteReviews.on('click', () => {
const switchToReadView = self.currentSrc === options.writeSrc;
// Cache js file for future button clicks
$.ajaxSetup({ cache: true });
// Toggle the new coursetalk script object
const switchToReadView = self.currentSrc === options.writeSrc;
self.currentSrc = switchToReadView ? options.readSrc : options.writeSrc;
$.getScript(self.currentSrc);
// Show the loading icon
$(options.loadIcon).show();
// Toggle button text on switch to the other view
const newText = switchToReadView ? toWriteBtnText : toReadBtnText;
$courseTalkToggleReadWriteReviews.text(newText);
// Update toggle button text
const newBtnText = switchToReadView ? toWriteBtnText : toReadBtnText;
$courseTalkToggleReadWriteReviews.text(newBtnText);
// Toggle the new coursetalk script object
self.currentSrc = switchToReadView ? options.readSrc : options.writeSrc;
$.getScript(self.currentSrc, () => { // eslint-disable-line func-names
$('iframe').load(() => {
$(options.loadIcon).hide();
});
});
});
}
}

2
openedx/features/course_experience/templates/course_experience/course_reviews_modules/coursetalk-reviews-fragment.html
View File

@@ -12,6 +12,7 @@ from openedx.features.course_experience import SHOW_REVIEWS_TOOL_FLAG
% if SHOW_REVIEWS_TOOL_FLAG.is_enabled(course.id):
<div class="coursetalk-read-reviews">
<span class="fa fa-spinner fa-spin" aria-hidden="true"></span>
## Coursetalk Widget
<div id="ct-custom-read-review-widget" data-provider="${platform_key}" data-course="${course.id}"></div>
</div>
@@ -20,6 +21,7 @@ from openedx.features.course_experience import SHOW_REVIEWS_TOOL_FLAG
<%static:webpack entry="CourseTalkReviews">
new CourseTalkReviews({
toggleButton: '.toggle-read-write-reviews',
loadIcon: '.coursetalk-read-reviews .fa.fa-spinner',
readSrc: "${settings.COURSE_TALK_READ_ONLY_SOURCE | n, js_escaped_string}",
writeSrc: "${settings.COURSE_TALK_WRITE_ONLY_SOURCE | n, js_escaped_string}"
});