src/CoreBundle/Resources/views/LearnPath/view.html.twig
{% extends '@ChamiloCore/Layout/no_layout.html.twig' %}
{% set lp_view = true %}
{% block content %}
{% autoescape false %}
<div id="learning_path_main" class="{{ is_allowed_to_edit ? 'lp-view-include-breadcrumb' }} {{ lp_mode == 'embedframe' ? 'lp-view-collapsed' : '' }}">
{% if show_left_column == 1 %}
<div id="learning_path_left_zone" class="sidebar-scorm">
<div class="lp-view-zone-container">
<div id="scorm-info">
<div id="panel-scorm">
<div class="image-avatar">
{% if lp_author == '' %}
{{ lp_preview_image }}
{% else %}
<div class="media-author">
<div class="media-author-avatar">
{{ lp_preview_image }}
</div>
<div class="media-author-description">
{{ lp_author }}
</div>
</div>
{% endif %}
</div>
{% if show_audio_player %}
<div id="lp_media_file" class="audio-scorm">
{{ media_player }}
</div>
{% endif %}
{% if lp_accumulate_work_time != '' %}
{% set lp_progress %}
<style>
#timer .container {
display: table;
background: #777;
color: #eee;
font-weight: bold;
width: 100%;
text-align: center;
text-shadow: 1px 1px 4px #999;
}
#timer .container div {
display: table-cell;
font-size: 24px;
padding: 0px;
width: 20px;
}
#timer .container .divider {
width: 10px;
color: #ddd;
}
</style>
<script>
$(function() {
var timerData = {
hour: parseInt($("#hour").text()),
minute: parseInt($("#minute").text()),
second: parseInt($("#second").text())
}
clearInterval(window.timerInterval)
window.timerInterval = setInterval(function() {
// Seconds
timerData.second++
if (timerData.second >= 60) {
timerData.second = 0
timerData.minute++
}
// Minutes
if (timerData.minute >= 60) {
timerData.minute = 0
timerData.hour++
}
$("#hour").text(timerData.hour < 10 ? "0" + timerData.hour : timerData.hour)
$("#minute").text(timerData.minute < 10 ? "0" + timerData.minute : timerData.minute)
$("#second").text(timerData.second < 10 ? "0" + timerData.second : timerData.second)
}, 1000)
})
</script>
<div class="row">
<div class="col-xs-4">
<b>
{{ "Progress"|trans|format(lp_accumulate_work_time) }}
</b>
</div>
<div class="col-xs-8">
<div id="progress_bar">
{{ progress_bar }}
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<b>
{{ "Time spent in the learning path"|trans|format(lp_accumulate_work_time) }}
</b>
</div>
<div class="col-xs-8">
<div id="timer">
<div class="container">
<div id="hour">{{ hour }}</div>
<div class="divider">:</div>
<div id="minute">{{ minute }}</div>
<div class="divider">:</div>
<div id="second">{{ second }}</div>
<div id="slash"> /</div>
<div>{{ hour_min }}</div>
</div>
</div>
</div>
</div>
{% endset %}
{% else %}
{% set lp_progress %}
<div id="progress_bar">
{{ progress_bar }}
</div>
{% endset %}
{% endif %}
{% if gamification_mode == 1 %}
<!--- gamification -->
<div id="scorm-gamification">
<div class="row">
<div class="col-xs-6">
{% if gamification_stars > 0 %}
{% for i in 1..gamification_stars %}
<i class="level mdi-star-face mdi" aria-hidden="true"></i>
{% endfor %}
{% endif %}
{% if gamification_stars < 4 %}
{% for i in 1..4 - gamification_stars %}
<i class="mdi-home-outline mdi" aria-hidden="true"></i>
{% endfor %}
{% endif %}
</div>
<div class="col-xs-6 text-right">
{{ "%s points"|trans|format(gamification_points) }}
</div>
</div>
<div class="row">
<div class="col-xs-12 navegation-bar">
{{ lp_progress }}
</div>
</div>
</div>
<!--- end gamification -->
{% else %}
{{ lp_progress }}
{% endif %}
{{ teacher_toc_buttons }}
</div>
</div>
{# TOC layout #}
<div id="toc_id" class="scorm-body" name="toc_name">
{# div#flab-mobile is to know when the user is on mobile view. Don't delete. #}
<div id="flag-mobile" class="visible-xs-block" aria-hidden="true"></div>
{% include '@ChamiloCore/LearnPath/scorm_list.html.twig' %}
</div>
</div>
</div>
{% endif %}
{# Right zone #}
<div id="learning_path_right_zone" class="{{ show_left_column == 1 ? 'content-scorm' : 'no-right-col' }}">
<div class="lp-view-zone-container">
<div class="lp-view-tabs">
<div id="navTabBar" class="nav-tabs-bar">
<div class="text-left">
<h2 class="text-h3">{{ lp_title_scorm }}</h2>
<div id="item-parent-names">
{% for parent_title in lp_item_parents %}
<h3 class="text-h5">{{ parent_title }}</h3>
{% endfor %}
</div>
</div>
<!--ul id="navTabs" class="nav nav-tabs tabs-right" role="tablist">
<li role="presentation" class="active">
<a href="#lp-view-content" title="{{ 'Lesson'|trans }}"
aria-controls="lp-view-content" role="tab" data-toggle="tab">
<i class="mdi-book mdi" aria-hidden="true"></i>
<span class="sr-only">{{ 'Lesson'|trans }}</span>
</a>
</li>
<li role="presentation">
<a href="#lp-view-forum" title="{{ 'Forum'|trans }}"
aria-controls="lp-view-forum" role="tab" data-toggle="tab">
<i class="mdi-message-reply-text mdi" aria-hidden="true"></i>
<span class="sr-only">{{ 'Forum'|trans }}</span>
</a>
</li>
</ul-->
</div>
{% include '@ChamiloCore/LearnPath/menubar.html.twig' %}
<div id="tab-iframe" class="auto tab-content">
<div role="tabpanel" id="lp-view-content">
<div id="wrapper-iframe">
{% if lp_mode == 'fullscreen' %}
<iframe id="content_id_blank" name="content_name_blank" src="blank.php"
style="width:100%; height:100%" border="0" frameborder="0"
allowfullscreen="true" webkitallowfullscreen="true"
mozallowfullscreen="true">
</iframe>
{% else %}
<iframe id="content_id" name="content_name" src="{{ iframe_src }}"
style="width:100%; height:100%" border="0" frameborder="0"
allowfullscreen="true" webkitallowfullscreen="true"
mozallowfullscreen="true">
</iframe>
{% endif %}
</div>
</div>
<div role="tabpanel" class="tab-pane" id="lp-view-forum">
</div>
</div>
</div>
</div>
</div>
{# end right Zone #}
</div>
<script>
$(function() {
$(".menu-button").on("click", function() {
$(".circle").toggleClass("open")
$(".menu-button").toggleClass("menu-button-selected")
})
if (/iPhone|iPod|iPad|Safari/.test(navigator.userAgent)) {
if (!/Chrome/.test(navigator.userAgent)) {
// Fix an issue where you cannot scroll below first screen in
// learning paths on Apple devices
/*document.getElementById("wrapper-iframe").setAttribute(
"style",
"width:100%; overflow:auto; position:auto; -webkit-overflow-scrolling:touch !important;"
)*/
$("#wrapper-iframe").before('<a class="btn-open-pdf" target="_blank" href="{{ iframe_src }}" >Open PDF on Safari</a>')
// Fix another issue whereby buttons do not react to click below
// second screen in learning paths on Apple devices
document.getElementById("content_id").style.overflow = 'auto';
}
}
{% if lp_mode == 'embedframe' %}
$("#lp-view-expand-button, #lp-view-expand-toggle").on("click", function(e) {
e.preventDefault()
$("#learning_path_main").toggleClass("lp-view-collapsed")
$("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-expand-horizontal")
$("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-collapse-horizontal")
var className = $("#lp-view-expand-toggle i.mdi").attr("class")
if (className == "mdi-arrow-collapse-horizontal") {
$(this).attr("title", '{{ "Expand" | trans }}')
} else {
$(this).attr("title", '{{ "Collapse" | trans }}')
}
if ($("#navTabBar").is(":hidden")) {
$("#navTabBar").show()
} else {
$("#navTabBar").hide()
}
})
{% else %}
$("#lp-view-expand-button, #lp-view-expand-toggle").on("click", function(e) {
e.preventDefault()
$("#learning_path_main").toggleClass("lp-view-collapsed")
$("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-collapse-horizontal")
$("#lp-view-expand-toggle i.mdi").toggleClass("mdi-arrow-expand-horizontal")
var className = $("#lp-view-expand-toggle i.mdi").attr("class")
if (className == "mdi-arrow-expand-horizontal") {
$(this).attr("title", '{{ "Expand" | trans }}')
} else {
$(this).attr("title", '{{ "Collapse" | trans }}')
}
})
{% endif %}
$(".lp-view-tabs").on("click", ".disabled", function(e) {
e.preventDefault()
})
$("a#ui-option").on("click", function(e) {
e.preventDefault()
var icon = $(this).children(".mdi")
if (icon.is(".mdi-chevron-up")) {
icon.removeClass("mdi-chevron-up").addClass("mdi-chevron-down")
return
}
icon.removeClass("mdi-chevron-down").addClass("mdi-chevron-up")
})
$(".scorm_item_normal a, #scorm-previous, #scorm-next").on("click", function() {
//$('.lp-view-tabs').animate({opacity: 0}, 500);
})
$("#learning_path_right_zone #lp-view-content iframe").on("load", function() {
//$('.lp-view-tabs a[href="#lp-view-content"]').tab('show');
//$('.lp-view-tabs').animate({opacity: 1}, 500);
})
{% if lp_mode == 'embedded' %}
/*$('.scorm_item_normal a, #scorm-previous, #scorm-next').on('click', function () {
$('.lp-view-tabs').animate({opacity: 0}, 500);
if ($('#flag-mobile').is(':visible') && !$('#learning_path_main').is('.lp-view-collapsed')) {
$('#lp-view-expand-toggle').trigger('click');
}
});*/
{% endif %}
//loadForumThread({{ lp_id }}, {{ lp_current_item_id }});
checkCurrentItemPosition({{ lp_current_item_id }});
{% if glossary_extra_tools in glossary_tool_available_list %}
// Loads the glossary library.
(function() {
{% if show_glossary_in_documents == 'ismanual' %}
$.frameReady(
function() {
// $("<div>I am a div courses</div>").prependTo("body");
},
"#content_id",
[
{
type: "script", id: "_fr1", src: "{{ jquery_web_path }}", deps: [
{ type: "script", id: "_fr4", src: "{{ jquery_ui_js_web_path }}" },
{ type: "script", id: "_fr2", src: "{{ _p.web_lib }}javascript/jquery.highlight.js" },
{{ fix_link }}
]
},
{ type: "stylesheet", id: "_fr5", src: "{{ jquery_ui_css_web_path }}" }
]
)
{% elseif show_glossary_in_documents == 'isautomatic' %}
$.frameReady(
function() {
// $("<div>I am a div courses</div>").prependTo("body");
},
"#content_id",
[
{
type: "script", id: "_fr1", src: "{{ jquery_web_path }}", deps: [
{ type: "script", id: "_fr4", src: "{{ jquery_ui_js_web_path }}" },
{ type: "script", id: "_fr2", src: "{{ _p.web_lib }}javascript/jquery.highlight.js" },
{{ fix_link }}
]
},
{ type: "stylesheet", id: "_fr5", src: "{{ jquery_ui_css_web_path }}" }
]
)
{% elseif fix_link != '' %}
$.frameReady(
function() {
// $("<div>I am a div courses</div>").prependTo("body");
},
"#content_id",
[
{
type: "script", id: "_fr1", src: "{{ jquery_web_path }}", deps: [
{ type: "script", id: "_fr4", src: "{{ jquery_ui_js_web_path }}" },
{{ fix_link }}
]
},
{ type: "stylesheet", id: "_fr5", src: "{{ jquery_ui_css_web_path }}" }
]
)
{% endif %}
})()
{% endif %}
{% if disable_js_in_lp_view == 0 %}
$(function() {
var arr = ["link", "sco"]
if ($.inArray(olms.lms_item_type, arr) == -1) {
{{ frame_ready }}
}
})
{% endif %}
})
</script>
{% endautoescape %}
{% endblock %}