view.tpl 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  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">
  14. <div class="media-left">
  15. {{ lp_preview_image }}
  16. </div>
  17. <div class="media-body">
  18. <div class="description-autor"> {{ lp_author }} </div>
  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 gamification_mode == 1 %}
  29. <!--- gamification -->
  30. <div id="scorm-gamification">
  31. <div class="row">
  32. <div class="col-xs-6">
  33. {% if gamification_stars > 0 %}
  34. {% for i in 1..gamification_stars %}
  35. <em class="fa fa-star level"></em>
  36. {% endfor %}
  37. {% endif %}
  38. {% if gamification_stars < 4 %}
  39. {% for i in 1..4 - gamification_stars %}
  40. <em class="fa fa-star"></em>
  41. {% endfor %}
  42. {% endif %}
  43. </div>
  44. <div class="col-xs-6 text-right">
  45. {{ "XPoints"|get_lang|format(gamification_points) }}
  46. </div>
  47. </div>
  48. <div class="row">
  49. <div class="col-xs-12 navegation-bar">
  50. <div id="progress_bar">
  51. {{ progress_bar }}
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <!--- end gamification -->
  57. {% else %}
  58. <div id="progress_bar">
  59. {{ progress_bar }}
  60. </div>
  61. {% endif %}
  62. {{ teacher_toc_buttons }}
  63. </div>
  64. </div>
  65. {# TOC layout #}
  66. <div id="toc_id" class="scorm-body" name="toc_name">
  67. {% include 'learnpath/scorm_list.tpl'|get_template %}
  68. </div>
  69. {# end TOC layout #}
  70. </div>
  71. </div>
  72. {# end left zone #}
  73. {% endif %}
  74. <div id="lp_navigation_elem" class="navegation-bar">
  75. {% if show_left_column == 1 %}
  76. <a href="#" title = "{{ 'Expand'|get_lang }}" id="lp-view-expand-toggle" class="icon-toolbar expand" role="button">
  77. {% if lp_mode == 'embedframe' %}
  78. <span class="fa fa-compress" aria-hidden="true"></span>
  79. <span class="sr-only">{{ 'Expand'|get_lang }}</span>
  80. {% else %}
  81. <span class="fa fa-expand" aria-hidden="true"></span>
  82. <span class="sr-only">{{ 'Expand'|get_lang }}</span>
  83. {% endif %}
  84. </a>
  85. {% endif %}
  86. <a id="home-course" title = "{{ 'Home'|get_lang }}" href="{{ button_home_url }}" class="icon-toolbar" target="_self" onclick="javascript: window.parent.API.save_asset();">
  87. <em class="fa fa-home"></em> <span class="hidden-xs hidden-sm"></span>
  88. </a>
  89. {{ navigation_bar }}
  90. </div>
  91. {# right zone #}
  92. <div id="learning_path_right_zone" class="{{ show_left_column == 1 ? 'content-scorm' : 'no-right-col' }}">
  93. <div class="lp-view-zone-container">
  94. <div class="lp-view-tabs">
  95. <div id="navTabsbar" class="nav-tabs-bar">
  96. <ul id="navTabs" class="nav nav-tabs" role="tablist">
  97. <li role="presentation" class="active">
  98. <a href="#lp-view-content" title="{{ 'Lesson'|get_lang }}" aria-controls="lp-view-content" role="tab" data-toggle="tab">
  99. <span class="fa fa-book fa-2x fa-fw" aria-hidden="true"></span>
  100. <span class="sr-only">{{ 'Lesson'|get_lang }}</span>
  101. </a>
  102. </li>
  103. <li role="presentation">
  104. <a href="#lp-view-forum" title="{{ 'Forum'|get_lang }}" aria-controls="lp-view-forum" role="tab" data-toggle="tab">
  105. <span class="fa fa-commenting-o fa-2x fa-fw" aria-hidden="true"></span>
  106. <span class="sr-only">{{ 'Forum'|get_lang }}</span>
  107. </a>
  108. </li>
  109. </ul>
  110. </div>
  111. <div class="tab-content">
  112. <div role="tabpanel" class="tab-pane active" id="lp-view-content">
  113. <div id="wrapper-iframe">
  114. {% if lp_mode == 'fullscreen' %}
  115. <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>
  116. {% else %}
  117. <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>
  118. {% endif %}
  119. </div>
  120. </div>
  121. <div role="tabpanel" class="tab-pane" id="lp-view-forum">
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. {# end right Zone #}
  128. </div>
  129. <script>
  130. (function () {
  131. var LPViewUtils = {
  132. setHeightLPToc: function () {
  133. var scormInfoHeight = $('#scorm-info').outerHeight(true);
  134. $('#learning_path_toc').css({
  135. top: scormInfoHeight
  136. });
  137. }
  138. };
  139. $(document).on('ready', function () {
  140. if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
  141. document.getElementById('wrapper-iframe')
  142. .setAttribute(
  143. 'style',
  144. 'width:100%; overflow:auto; position:auto; -webkit-overflow-scrolling:touch !important;'
  145. );
  146. }
  147. {% if lp_mode == 'embedframe' %}
  148. //$('#learning_path_main').addClass('lp-view-collapsed');
  149. $('#lp-view-expand-button, #lp-view-expand-toggle').on('click', function (e) {
  150. e.preventDefault();
  151. $('#learning_path_main').toggleClass('lp-view-collapsed');
  152. $('#lp-view-expand-toggle span.fa').toggleClass('fa-compress');
  153. $('#lp-view-expand-toggle span.fa').toggleClass('fa-expand');
  154. var className = $('#lp-view-expand-toggle span.fa').attr('class');
  155. if (className == 'fa fa-expand') {
  156. $(this).attr('title', '{{ "Expand" | get_lang }}');
  157. } else {
  158. $(this).attr('title', '{{ "Collapse" | get_lang }}');
  159. }
  160. if($('#navTabsbar').is(':hidden')){
  161. $('#navTabsbar').show();
  162. } else {
  163. $('#navTabsbar').hide();
  164. }
  165. });
  166. {% else %}
  167. $('#lp-view-expand-button, #lp-view-expand-toggle').on('click', function (e) {
  168. e.preventDefault();
  169. $('#learning_path_main').toggleClass('lp-view-collapsed');
  170. $('#lp-view-expand-toggle span.fa').toggleClass('fa-expand');
  171. $('#lp-view-expand-toggle span.fa').toggleClass('fa-compress');
  172. var className = $('#lp-view-expand-toggle span.fa').attr('class');
  173. if (className == 'fa fa-expand') {
  174. $(this).attr('title', '{{ "Expand" | get_lang }}');
  175. } else {
  176. $(this).attr('title', '{{ "Collapse" | get_lang }}');
  177. }
  178. if($('#navTabsbar').is(':hidden')){
  179. $('#navTabsbar').show();
  180. } else {
  181. $('#navTabsbar').hide();
  182. }
  183. });
  184. {% endif %}
  185. $('.lp-view-tabs').on('click', '.disabled', function (e) {
  186. e.preventDefault();
  187. });
  188. $('a#ui-option').on('click', function (e) {
  189. e.preventDefault();
  190. var icon = $(this).children('.fa');
  191. if (icon.is('.fa-chevron-up')) {
  192. icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
  193. return;
  194. }
  195. icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
  196. });
  197. LPViewUtils.setHeightLPToc();
  198. $('.scorm_item_normal a, #scorm-previous, #scorm-next').on('click', function () {
  199. $('.lp-view-tabs').animate({opacity: 0}, 500);
  200. });
  201. $('#learning_path_right_zone #lp-view-content iframe').on('load', function () {
  202. $('.lp-view-tabs a[href="#lp-view-content"]').tab('show');
  203. $('.lp-view-tabs').animate({opacity: 1}, 500);
  204. });
  205. loadForumThread({{ lp_id }}, {{ lp_current_item_id }});
  206. checkCurrentItemPosition({{ lp_current_item_id }});
  207. {% if glossary_extra_tools in glossary_tool_available_list %}
  208. // Loads the glossary library.
  209. (function () {
  210. {% if show_glossary_in_documents == 'ismanual' %}
  211. $.frameReady(
  212. function(){
  213. // $("<div>I am a div courses</div>").prependTo("body");
  214. },
  215. "top.content_name",
  216. {
  217. load: [
  218. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  219. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  220. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  221. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  222. {{ fix_link }}
  223. ]
  224. }
  225. );
  226. {% elseif show_glossary_in_documents == 'isautomatic' %}
  227. $.frameReady(
  228. function(){
  229. // $("<div>I am a div courses</div>").prependTo("body");
  230. },
  231. "top.content_name",
  232. {
  233. load: [
  234. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  235. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  236. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  237. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  238. {{ fix_link }}
  239. ]
  240. }
  241. );
  242. {% elseif fix_link != '' %}
  243. $.frameReady(
  244. function(){
  245. // $("<div>I am a div courses</div>").prependTo("body");
  246. },
  247. "top.content_name",
  248. {
  249. load: [
  250. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  251. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  252. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  253. {{ fix_link }}
  254. ]
  255. }
  256. );
  257. {% endif %}
  258. })();
  259. {% endif %}
  260. {% if disable_js_in_lp_view == 0 %}
  261. $('iframe#content_id').on('load', function () {
  262. if ('link' !== olms.lms_item_type) {
  263. $.frameReady(function () {
  264. }, 'top.content_name', {
  265. load: [
  266. {type: 'script', id: '_fr1', src: '{{ _p.web }}web/assets/jquery/dist/jquery.min.js'},
  267. {type: 'script', id: '_fr7', src: '{{ _p.web }}web/assets/MathJax/MathJax.js?config=AM_HTMLorMML'},
  268. {type: 'script', id: '_fr4', src: '{{ _p.web }}web/assets/jquery-ui/jquery-ui.min.js'},
  269. {type: 'stylesheet', id: '_fr5', src: '{{ _p.web }}web/assets/jquery-ui/themes/smoothness/jquery-ui.min.css'},
  270. {type: 'stylesheet', id: '_fr6', src: '{{ _p.web }}web/assets/jquery-ui/themes/smoothness/theme.css'},
  271. {type: 'script', id: '_fr2', src: '{{ _p.web_lib }}javascript/jquery.highlight.js'},
  272. {type: 'script', id: '_fr3', src: '{{ _p.web_main }}glossary/glossary.js.php?{{ _p.web_cid_query }}'}
  273. ]
  274. });
  275. }
  276. });
  277. {% endif %}
  278. });
  279. $(window).on('resize', function () {
  280. LPViewUtils.setHeightLPToc();
  281. });
  282. })();
  283. </script>