lms/lms/lms/widgets/CourseOutline.html

{% set chapters = get_chapters(course.name) %}

{% if course.edit_mode or chapters | length %}
<div class="course-home-outline">


    {% if course.edit_mode and course.name %}
    <button class="btn btn-md btn-secondary btn-chapter pull-right"> {{ _("New Chapter") }} </button>
    {% endif %}

    {% if course.name and (course.edit_mode or chapters | length) %}
    <div class="course-home-headings" id="outline-heading">
        {{ _("Course Content") }}
    </div>
    {% endif %}

    {% if course.edit_mode and course.name and not chapters | length %}
    <div class="chapter-parent chapter-edit new-chapter">
        <div contenteditable="true" data-placeholder="{{ _('Chapter Name') }}" class="chapter-title-main"></div>
        <div class="chapter-description small my-2" contenteditable="true" data-placeholder="{{ _('Short Description') }}"></div>
        <button class="btn btn-sm btn-secondary d-block btn-save-chapter" data-index="1"> {{ _('Save') }} </button>
    </div>
    {% endif %}

    {% if chapters | length %}

    {% for chapter in chapters %}
    <div class="chapter-parent {% if course.edit_mode %} chapter-edit {% endif %} ">
        <div class="chapter-title" {% if not course.edit_mode %}  data-toggle="collapse" aria-expanded="false"
        data-target="#{{ get_slugified_chapter_title(chapter.title) }}" {% endif %} >
            {% if not course.edit_mode %}
            <img class="chapter-icon" src="/assets/lms/icons/chevron-right.svg">
            {% endif %}
            <div class="w-100 chapter-title-main" {% if course.edit_mode %} contenteditable="true" {% endif %} >{{ chapter.title }}</div>
        </div>

       {% set lessons = get_lessons(course.name, chapter) %}

        <div class="chapter-content {% if not course.edit_mode %} collapse navbar-collapse {% endif %} "
            id="{{ get_slugified_chapter_title(chapter.title) }}">

            {% if chapter.description or course.edit_mode %}
            <div {% if course.edit_mode %} contenteditable="true" {% endif %} class="chapter-description
            {% if not course.edit_mode %} mx-8 mb-2 {% endif %} "
            data-placeholder="{{ _('Short Description') }}">{{ chapter.description }}</div>
            {% endif %}

            {% if course.edit_mode %}
            <div class="mt-2">
                <button class="btn btn-sm btn-secondary btn-save-chapter"
                data-index="{{ loop.index }}" data-chapter="{{ chapter.name }}"> {{ _('Save') }} </button>
                <a class="btn btn-sm btn-secondary btn-lesson ml-2"
                    href="/courses/{{ course.name }}/learn/{{loop.index}}.{{ lessons | length + 1 }}?edit=1"> {{ _("New Lesson") }}  </a>
            </div>
            {% endif %}

            {% set is_instructor = is_instructor(course.name) %}

            {% if lessons | length %}
            <div class="lessons">

                {% if course.edit_mode %}
                <b class="course-meta"> {{ _("Lessons") }}: </b>
                {% endif %}

                {% for lesson in lessons %}
                {% set active = membership.current_lesson == lesson.name %}
                <div class="lesson-info {% if active and not course.edit_mode %} active-lesson {% endif %}">

                {% if membership or lesson.include_in_preview or is_instructor or has_course_moderator_role() %}
                <a class="lesson-links" data-course="{{ course.name }}"
                {% if is_instructor and not lesson.include_in_preview %}
                title="{{ _('This lesson is not available for preview. As you are the Instructor of the course only you can see it.') }}"
                {% endif %}
                href="{{ get_lesson_url(course.name, lesson.number) }}{% if course.edit_mode and is_instructor %}?edit=1{% endif %}{{course.query_parameter}}">

                    <svg class="icon icon-sm mr-2">
                        <use class="" href="#{{ lesson.icon }}">
                    </svg>

                    <span>{{ lesson.title }}</span>

                    {% if membership %}
                    <svg class="icon icon-sm lesson-progress-tick {{ get_progress(course.name, lesson.name) != 'Complete' and 'hide' }}">
                        <use class="" href="#icon-green-check">
                    </svg>
                    {% endif %}

                </a>

                {% else %}
                <div class="no-preview" title="This lesson is not available for preview" data-course="{{ course.name }}">
                    <div class="lesson-links">
                    <svg class="icon icon-sm mr-2">
                        <use class="" href="#icon-lock-gray">
                    </svg>
                    <div>{{ lesson.title }}</div>
                    </div>
                </div>
                {% endif %}

                </div>
                {% endfor %}

            </div>
            {% endif %}

        </div>
    </div>
    {% endfor %}

    {% endif %}

</div>
{% endif %}

{% if chapters | length %}
<!-- No Preview Modal -->
{{ widgets.NoPreviewModal(course=course, membership=membership) }}

{% endif %}

<script>

frappe.ready(() => {

    expand_the_active_chapter();

    $(".chapter-title").unbind().click((e) => {
        rotate_chapter_icon(e);
    });

    $(".no-preview").click((e) => {
        show_no_preview_dialog(e);
    });

});


const expand_the_first_chapter = () => {
    let elements = $(".course-home-outline .collapse");
    elements.each((i, element) => {
        if (i < 1) {
            show_section(element);
            return false;
        }
    });
};


const expand_the_active_chapter = () => {

    /* Find anchor matching the URL for course details page */
    let 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");
        $(".lesson-info").each((i, elem) => {
            let href = $(elem).find("use").attr("href");
            href.endsWith("blue") && $(elem).find("use").attr("href", href.substring(0, href.length - 5));
        })

        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();
    }
};


const show_section = (element) => {
    $(element).addClass("show");
    $(element).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
    $(element).siblings(".chapter-title").attr("aria-expanded", true);
};


const rotate_chapter_icon = (e) => {
    let icon = $(e.currentTarget).children(".chapter-icon");
    if (icon.css("transform") == "none") {
        icon.css("transform", "rotate(90deg)");
    } else {
        icon.css("transform", "none");
    }
};


const show_no_preview_dialog = (e) => {
    $("#no-preview-modal").modal("show");
};

</script>