view.tpl 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. <div id="learning_path_main" class="{{ is_allowed_to_edit ? 'lp-view-include-breadcrumb' }} {{ lp_mode == 'embedframe' ? 'lp-view-collapsed' : '' }}">
  2. {% if show_left_column == 1 %}
  3. <div id="learning_path_left_zone" class="sidebar-scorm">
  4. <div class="lp-view-zone-container">
  5. <div id="scorm-info">
  6. <div id="panel-scorm" class="panel-body">
  7. <div class="image-avatar">
  8. {% if lp_author == '' %}
  9. <div class="text-center">
  10. {{ lp_preview_image }}
  11. </div>
  12. {% else %}
  13. <div class="media-author">
  14. <div class="media-author-avatar">
  15. {{ lp_preview_image }}
  16. </div>
  17. <div class="media-author-description">
  18. {{ lp_author }}
  19. </div>
  20. </div>
  21. {% endif %}
  22. </div>
  23. {% if show_audio_player %}
  24. <div id="lp_media_file" class="audio-scorm">
  25. {{ media_player }}
  26. </div>
  27. {% endif %}
  28. {% if lp_accumulate_work_time != '' %}
  29. {% set lp_progress %}
  30. <style>
  31. #timer .container{display:table;background:#777;color:#eee;font-weight:bold;width:100%;text-align:center;text-shadow:1px 1px 4px #999;}
  32. #timer .container div{display:table-cell;font-size:24px;padding:0px;width:20px;}
  33. #timer .container .divider{width:10px;color:#ddd;}
  34. #btn-comenzar{box-sizing:border-box;background:#eee;border:none;margin:0 auto;padding:20px;width:100%;font-size:30px;color:#777;}
  35. #btn-comenzar:hover{background:#fff;}
  36. </style>
  37. <script>
  38. $(function() {
  39. var timerData = {
  40. hour: parseInt($("#hour").text()),
  41. minute: parseInt($("#minute").text()),
  42. second: parseInt($("#second").text())
  43. };
  44. //window.timerInterval = null;
  45. clearInterval(window.timerInterval);
  46. window.timerInterval = setInterval(function(){
  47. // Seconds
  48. timerData.second++;
  49. if (timerData.second >= 60) {
  50. timerData.second = 0;
  51. timerData.minute++;
  52. }
  53. // Minutes
  54. if (timerData.minute >= 60) {
  55. timerData.minute = 0;
  56. timerData.hour++;
  57. }
  58. $("#hour").text(timerData.hour < 10 ? '0' + timerData.hour : timerData.hour);
  59. $("#minute").text(timerData.minute < 10 ? '0' + timerData.minute : timerData.minute);
  60. $("#second").text(timerData.second < 10 ? '0' + timerData.second : timerData.second);
  61. }, 1000);
  62. })
  63. </script>
  64. <div class="row">
  65. <div class="col-xs-4">
  66. <b>
  67. {{ "ProgressSpentInLp"|get_lang|format(lp_accumulate_work_time) }}
  68. </b>
  69. </div>
  70. <div class="col-xs-8">
  71. <div id="progress_bar">
  72. {{ progress_bar }}
  73. </div>
  74. </div>
  75. </div>
  76. <div class="row">
  77. <div class="col-xs-4">
  78. <b>
  79. {{ "TimeSpentInLp"|get_lang|format(lp_accumulate_work_time) }}
  80. </b>
  81. </div>
  82. <div class="col-xs-8">
  83. <div id="timer">
  84. <div class="container">
  85. <div id="hour">{{ hour }}</div>
  86. <div class="divider">:</div>
  87. <div id="minute">{{ minute }}</div>
  88. <div class="divider">:</div>
  89. <div id="second">{{ second }}</div>
  90. <div id="slash"> / </div>
  91. <div>{{ hour_min }}</div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. {% endset %}
  97. {% else %}
  98. {% set lp_progress %}
  99. <div id="progress_bar">
  100. {{ progress_bar }}
  101. </div>
  102. {% endset %}
  103. {% endif %}
  104. {% if gamification_mode == 1 %}
  105. <!--- gamification -->
  106. <div id="scorm-gamification">
  107. <div class="row">
  108. <div class="col-xs-6">
  109. {% if gamification_stars > 0 %}
  110. {% for i in 1..gamification_stars %}
  111. <em class="fa fa-star level"></em>
  112. {% endfor %}
  113. {% endif %}
  114. {% if gamification_stars < 4 %}
  115. {% for i in 1..4 - gamification_stars %}
  116. <em class="fa fa-star"></em>
  117. {% endfor %}
  118. {% endif %}
  119. </div>
  120. <div class="col-xs-6 text-right">
  121. {{ "XPoints"|get_lang|format(gamification_points) }}
  122. </div>
  123. </div>
  124. <div class="row">
  125. <div class="col-xs-12 navegation-bar">
  126. {{ lp_progress }}
  127. </div>
  128. </div>
  129. </div>
  130. <!--- end gamification -->
  131. {% else %}
  132. {{ lp_progress }}
  133. {% endif %}
  134. {{ teacher_toc_buttons }}
  135. </div>
  136. </div>
  137. {# TOC layout #}
  138. <div id="toc_id" class="scorm-body" name="toc_name">
  139. {% include 'learnpath/scorm_list.tpl'|get_template %}
  140. </div>
  141. {# end TOC layout #}
  142. </div>
  143. </div>
  144. {# end left zone #}
  145. {% endif %}
  146. <div id="lp_navigation_elem" class="navegation-bar">
  147. {% if show_left_column == 1 %}
  148. <a href="#" title = "{{ 'Expand'|get_lang }}" id="lp-view-expand-toggle" class="icon-toolbar expand" role="button">
  149. {% if lp_mode == 'embedframe' %}
  150. <span class="fa fa-compress" aria-hidden="true"></span>
  151. <span class="sr-only">{{ 'Expand'|get_lang }}</span>
  152. {% else %}
  153. <span class="fa fa-expand" aria-hidden="true"></span>
  154. <span class="sr-only">{{ 'Expand'|get_lang }}</span>
  155. {% endif %}
  156. </a>
  157. {% endif %}
  158. <a id="home-course" title = "{{ 'Home'|get_lang }}" href="{{ button_home_url }}" class="icon-toolbar" target="_self" onclick="javascript: window.parent.API.save_asset();">
  159. <em class="fa fa-home"></em> <span class="hidden-xs hidden-sm"></span>
  160. </a>
  161. {{ navigation_bar }}
  162. </div>
  163. {# right zone #}
  164. <div id="learning_path_right_zone" class="{{ show_left_column == 1 ? 'content-scorm' : 'no-right-col' }}">
  165. <div class="lp-view-zone-container">
  166. <div class="lp-view-tabs">
  167. <div id="navTabsbar" class="nav-tabs-bar">
  168. <ul id="navTabs" class="nav nav-tabs" role="tablist">
  169. <li role="presentation" class="active">
  170. <a href="#lp-view-content" title="{{ 'Lesson'|get_lang }}" aria-controls="lp-view-content" role="tab" data-toggle="tab">
  171. <span class="fa fa-book fa-2x fa-fw" aria-hidden="true"></span>
  172. <span class="sr-only">{{ 'Lesson'|get_lang }}</span>
  173. </a>
  174. </li>
  175. <li role="presentation">
  176. <a href="#lp-view-forum" title="{{ 'Forum'|get_lang }}" aria-controls="lp-view-forum" role="tab" data-toggle="tab">
  177. <span class="fa fa-commenting-o fa-2x fa-fw" aria-hidden="true"></span>
  178. <span class="sr-only">{{ 'Forum'|get_lang }}</span>
  179. </a>
  180. </li>
  181. </ul>
  182. </div>
  183. <div class="tab-content">
  184. <div role="tabpanel" class="tab-pane active" id="lp-view-content">
  185. <div id="wrapper-iframe">
  186. {% if lp_mode == 'fullscreen' %}
  187. <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>
  188. {% else %}
  189. <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>
  190. {% endif %}
  191. </div>
  192. </div>
  193. <div role="tabpanel" class="tab-pane" id="lp-view-forum">
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. {# end right Zone #}
  200. </div>
  201. <script>
  202. (function () {
  203. var LPViewUtils = {
  204. setHeightLPToc: function () {
  205. var scormInfoHeight = $('#scorm-info').outerHeight(true);
  206. $('#learning_path_toc').css({
  207. top: scormInfoHeight
  208. });
  209. }
  210. };
  211. $(function() {
  212. if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
  213. // Fix an issue where you cannot scroll below first screen in
  214. // learning paths on Apple devices
  215. document.getElementById('wrapper-iframe')
  216. .setAttribute(
  217. 'style',
  218. 'width:100%; overflow:auto; position:auto; -webkit-overflow-scrolling:touch !important;'
  219. );
  220. // Fix another issue whereby buttons do not react to click below
  221. // second screen in learning paths on Apple devices
  222. document.getElementById('content_id')
  223. .setAttribute(
  224. 'style',
  225. 'overflow: auto;'
  226. );
  227. }
  228. {% if lp_mode == 'embedframe' %}
  229. //$('#learning_path_main').addClass('lp-view-collapsed');
  230. $('#lp-view-expand-button, #lp-view-expand-toggle').on('click', function (e) {
  231. e.preventDefault();
  232. $('#learning_path_main').toggleClass('lp-view-collapsed');
  233. $('#lp-view-expand-toggle span.fa').toggleClass('fa-compress');
  234. $('#lp-view-expand-toggle span.fa').toggleClass('fa-expand');
  235. var className = $('#lp-view-expand-toggle span.fa').attr('class');
  236. if (className == 'fa fa-expand') {
  237. $(this).attr('title', '{{ "Expand" | get_lang }}');
  238. } else {
  239. $(this).attr('title', '{{ "Collapse" | get_lang }}');
  240. }
  241. if($('#navTabsbar').is(':hidden')){
  242. $('#navTabsbar').show();
  243. } else {
  244. $('#navTabsbar').hide();
  245. }
  246. });
  247. {% else %}
  248. $('#lp-view-expand-button, #lp-view-expand-toggle').on('click', function (e) {
  249. e.preventDefault();
  250. $('#learning_path_main').toggleClass('lp-view-collapsed');
  251. $('#lp-view-expand-toggle span.fa').toggleClass('fa-expand');
  252. $('#lp-view-expand-toggle span.fa').toggleClass('fa-compress');
  253. var className = $('#lp-view-expand-toggle span.fa').attr('class');
  254. if (className == 'fa fa-expand') {
  255. $(this).attr('title', '{{ "Expand" | get_lang }}');
  256. } else {
  257. $(this).attr('title', '{{ "Collapse" | get_lang }}');
  258. }
  259. if($('#navTabsbar').is(':hidden')){
  260. $('#navTabsbar').show();
  261. } else {
  262. $('#navTabsbar').hide();
  263. }
  264. });
  265. {% endif %}
  266. $('.lp-view-tabs').on('click', '.disabled', function (e) {
  267. e.preventDefault();
  268. });
  269. $('a#ui-option').on('click', function (e) {
  270. e.preventDefault();
  271. var icon = $(this).children('.fa');
  272. if (icon.is('.fa-chevron-up')) {
  273. icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
  274. return;
  275. }
  276. icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
  277. });
  278. LPViewUtils.setHeightLPToc();
  279. $('.scorm_item_normal a, #scorm-previous, #scorm-next').on('click', function () {
  280. $('.lp-view-tabs').animate({opacity: 0}, 500);
  281. });
  282. $('#learning_path_right_zone #lp-view-content iframe').on('load', function () {
  283. $('.lp-view-tabs a[href="#lp-view-content"]').tab('show');
  284. $('.lp-view-tabs').animate({opacity: 1}, 500);
  285. });
  286. loadForumThread({{ lp_id }}, {{ lp_current_item_id }});
  287. checkCurrentItemPosition({{ lp_current_item_id }});
  288. {% if glossary_extra_tools in glossary_tool_available_list %}
  289. // Loads the glossary library.
  290. (function () {
  291. {% if show_glossary_in_documents == 'ismanual' %}
  292. $.frameReady(
  293. function(){
  294. // $("<div>I am a div courses</div>").prependTo("body");
  295. },
  296. "top.content_name",
  297. {
  298. load: [
  299. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  300. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  301. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  302. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  303. {{ fix_link }}
  304. ]
  305. }
  306. );
  307. {% elseif show_glossary_in_documents == 'isautomatic' %}
  308. $.frameReady(
  309. function(){
  310. // $("<div>I am a div courses</div>").prependTo("body");
  311. },
  312. "top.content_name",
  313. {
  314. load: [
  315. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  316. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  317. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  318. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  319. {{ fix_link }}
  320. ]
  321. }
  322. );
  323. {% elseif fix_link != '' %}
  324. $.frameReady(
  325. function(){
  326. // $("<div>I am a div courses</div>").prependTo("body");
  327. },
  328. "top.content_name",
  329. {
  330. load: [
  331. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  332. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  333. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  334. {{ fix_link }}
  335. ]
  336. }
  337. );
  338. {% endif %}
  339. })();
  340. {% endif %}
  341. {% if disable_js_in_lp_view == 0 %}
  342. $(function() {
  343. $('iframe#content_id').on('load', function () {
  344. var arr = ['link', 'sco'];
  345. if ($.inArray(olms.lms_item_type, arr) == -1) {
  346. {{ frame_ready }}
  347. }
  348. });
  349. });
  350. {% endif %}
  351. $(window).on('resize', function () {
  352. LPViewUtils.setHeightLPToc();
  353. });
  354. });
  355. })();
  356. </script>