114 lines
3.3 KiB
HTML
114 lines
3.3 KiB
HTML
<div>
|
|
|
|
<div class="chapter-title small-title" data-target="#{{ course.get_slugified_chapter_title(chapter.title) }}"
|
|
data-toggle="collapse" aria-expanded="false">
|
|
<img class="chapter-icon" src="/assets/community/icons/chevron-right.svg">
|
|
{{ index }}. {{ chapter.title }}
|
|
</div>
|
|
|
|
<div class="chapter-content collapse navbar-collapse" id="{{ course.get_slugified_chapter_title(chapter.title) }}">
|
|
|
|
{% if chapter.description %}
|
|
<div class="chapter-description muted-text">
|
|
{{ chapter.description }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% set is_instructor = frappe.session.user == course.instructor %}
|
|
<div class="lessons">
|
|
|
|
{% for lesson in course.get_lessons(chapter) %}
|
|
|
|
<div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">
|
|
|
|
{% if membership or lesson.include_in_preview or is_instructor %}
|
|
<a class="lesson-links" href="{{ course.get_learn_url(lesson.number) }}{{course.query_parameter}}"
|
|
data-course="{{ course.name }}">
|
|
{{ lesson.title }}
|
|
|
|
{% if membership %}
|
|
<img class="ml-1 lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
|
|
src="/assets/community/icons/check.svg">
|
|
{% endif %}
|
|
|
|
</a>
|
|
|
|
{% else %}
|
|
<div class="no-preview" title="This lesson is not available for preview">
|
|
<div class="lesson-links">
|
|
{{ lesson.title }}
|
|
<img class="ml-2" src="/assets/community/icons/lock.svg">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if index != course.get_chapters() | length %}
|
|
<div class="card-divider"></div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
frappe.ready(() => {
|
|
expand_the_active_chapter();
|
|
|
|
$(".chapter-title").unbind().click((e) => {
|
|
rotate_chapter_icon(e);
|
|
});
|
|
|
|
})
|
|
|
|
var expand_the_first_chapter = () => {
|
|
var elements = $(".collapse");
|
|
elements.each((i, element) => {
|
|
if (i <= 1) {
|
|
show_section(element);
|
|
}
|
|
});
|
|
}
|
|
|
|
var expand_the_active_chapter = () => {
|
|
|
|
/* Find anchor matching the URL for course details page */
|
|
var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
|
if (!selector.length) {
|
|
selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
|
}
|
|
if (selector.length && $(".course-details-page").length) {
|
|
$(".lesson-info").removeClass("active-lesson")
|
|
selector.addClass("active-lesson");
|
|
show_section(selector.parent().parent());
|
|
}
|
|
|
|
/* For course home page */
|
|
else if ($(".active-lesson").length) {
|
|
selector = $(".active-lesson")
|
|
show_section(selector.parent().parent());
|
|
}
|
|
|
|
/* If no active chapter then exapand the first chapter */
|
|
else {
|
|
expand_the_first_chapter();
|
|
}
|
|
}
|
|
|
|
var show_section = (element) => {
|
|
$(element).addClass("show");
|
|
$(element).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
|
|
}
|
|
|
|
var rotate_chapter_icon = (e) => {
|
|
var icon = $(e.currentTarget).children(".chapter-icon");
|
|
if (icon.css("transform") == "none") {
|
|
icon.css("transform", "rotate(90deg)");
|
|
} else {
|
|
icon.css("transform", "none");
|
|
}
|
|
}
|
|
</script>
|