enlight-lms/lms/lms/widgets/CourseOutline.html

{% if get_chapters(course.name) | length %}
<div class="course-home-outline">
  <div class="course-home-headings">
    {{ _("Course Content") }}
  </div>
  {% for chapter in get_chapters(course.name) %}
  <div class="">
    <div class="chapter-title" data-target="#{{ get_slugified_chapter_title(chapter.title) }}"
      data-toggle="collapse" aria-expanded="false">
      <img class="chapter-icon" src="/assets/lms/icons/chevron-right.svg">
      <div>{{ chapter.title }}</div>
    </div>

    <div class="chapter-content collapse navbar-collapse" id="{{ get_slugified_chapter_title(chapter.title) }}">

        {% if chapter.description %}
        <div class="chapter-description muted-text">
            {{ chapter.description }}
        </div>
        {% endif %}

        {% set is_instructor = is_instructor(course.name) %}
        <div class="lessons">

            {% for lesson in get_lessons(course.name, chapter) %}
            {% set active = membership.current_lesson == lesson.name %}
            <div class="lesson-info {% if active %} active-lesson {% endif %}">

            {% if membership or lesson.include_in_preview %}
            <a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
                data-course="{{ course.name }}">
                <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>

            {% elif is_instructor and not lesson.include_in_preview %}
            <a class="lesson-links"
                title="This lesson is not available for preview. As you are the Instructor of the course only you can see it."
                href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
                data-course="{{ course.name }}">

                <svg class="icon icon-sm">
                    <use class="" href="#icon-lock">
                </svg>
                <div>{{ lesson.title }}</div>
            </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">
                    <use class="" href="#icon-lock-gray">
                </svg>
                <div>{{ lesson.title }}</div>
                </div>
            </div>
            {% endif %}

            </div>
            {% endfor %}

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

<!-- No Preview Modal -->
<div class="modal fade no-preview-modal" id="no-preview-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="font-weight-bold">{{ _("Not available for preview") }}</div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {% if is_user_interested %}
                    <div class=""> {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }} </div>
                {% else %}
                    <div class=""> {{ _("This lesson is not available for preview. Please join the course to access it.") }} </div>
                {% endif %}
            </div>
            {% if not is_user_interested %}
            <div class="modal-footer">
                {% if course.upcoming %}
                <div class="button is-primary notify-me" data-course="{{course.name | urlencode}}">
                    {{ _("Notify me when available") }}
                </div>
                {% else %}
                <div class="button is-primary join-batch" data-course="{{ course.name | urlencode}}">
                {{ _("Start Learning") }}</div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% 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>