-
Notifications
You must be signed in to change notification settings - Fork 2
/
CoursesPageCustomCode.html
71 lines (54 loc) · 2.08 KB
/
CoursesPageCustomCode.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script>
MemberStack.onReady.then(async function(member) {
// setup
var loadingClass = 'loading'
var completedClass = 'completed';
var notCompletedClass = 'notcompleted';
var lessonItemClass = '.lessonitem';
var lessonsId = 'lessons';
// set default state
var completedState = notCompletedClass;
// fetch remote metadata
let metadata = await member.getMetaData()
var completedLessons = metadata.completed ? metadata.completed : [];
// get all of the lesson links listed (from CMS Collection)
var links = document.getElementById(lessonsId).getElementsByTagName('a');
// loop all of the links
for (let l = 0; l < links.length; l++) {
// setup the current link variables
var link = links[l];
var linkUrl = link.href;
// loop all links found in the JSON stored in MemberStack
for (let c = 0; c < completedLessons.length; c++) {
// set the current url stored in MemberStack
var completedUrl = completedLessons[c];
// if the current link and stored link match
if (linkUrl === completedUrl) {
// set completed state
completedState = completedClass;
// break out of this for loop and
// check the next link
c = completedLessons.length;
} else {
// set completed state
completedState = notCompletedClass;
}
}
// display completed state to screen
let lessonItem = link.closest(lessonItemClass);
(completedState === completedClass) ? displayCompleted(lessonItem): displayNotCompleted(lessonItem);
}
// show the completed state
function displayCompleted(lessonItem) {
lessonItem.getElementsByClassName(loadingClass)[0].style.display = 'none';
lessonItem.getElementsByClassName(completedClass)[0].style.display = 'block';
lessonItem.getElementsByClassName(notCompletedClass)[0].style.display = 'none';
}
// show the not completed state
function displayNotCompleted(lessonItem) {
lessonItem.getElementsByClassName(loadingClass)[0].style.display = 'none';
lessonItem.getElementsByClassName(notCompletedClass)[0].style.display = 'block';
lessonItem.getElementsByClassName(completedClass)[0].style.display = 'none';
}
})
</script>