view.tpl 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. <div id="learning_path_main" class="{{ is_allowed_to_edit ? 'lp-view-include-breadcrumb' }} {{ lp_mode == 'embedframe' ? 'lp-view-collapsed' }}">
  2. {% if is_allowed_to_edit %}
  3. <div id="learning_path_breadcrumb_zone" class="hidden-xs">
  4. {{ breadcrumb }}
  5. </div>
  6. {% endif %}
  7. <div id="learning_path_left_zone" class="sidebar-scorm">
  8. <div class="lp-view-zone-container">
  9. <div id="scorm-info">
  10. <div id="panel-scorm" class="panel-bsody">
  11. <div class="image-avatar">
  12. {% if lp_author == '' %}
  13. <div class="text-center">
  14. {{ lp_preview_image }}
  15. </div>
  16. {% else %}
  17. <div class="media">
  18. <div class="media-left">
  19. {{ lp_preview_image }}
  20. </div>
  21. <div class="media-body">
  22. <div class="description-autor"> {{ lp_author }} </div>
  23. </div>
  24. </div>
  25. {% endif %}
  26. </div>
  27. {% if show_audio_player %}
  28. <div id="lp_media_file">
  29. {{ media_player }}
  30. </div>
  31. {% endif %}
  32. {% if gamification_mode == 1 %}
  33. <hr>
  34. <!--- gamification -->
  35. <div id="scorm-gamification">
  36. <div class="row">
  37. <div class="col-xs-6">
  38. {% if gamification_stars > 0 %}
  39. {% for i in 1..gamification_stars %}
  40. <em class="fa fa-star level"></em>
  41. {% endfor %}
  42. {% endif %}
  43. {% if gamification_stars < 4 %}
  44. {% for i in 1..4 - gamification_stars %}
  45. <em class="fa fa-star"></em>
  46. {% endfor %}
  47. {% endif %}
  48. </div>
  49. <div class="col-xs-6 text-right">
  50. {{ "XPoints"|get_lang|format(gamification_points) }}
  51. </div>
  52. </div>
  53. <div class="row">
  54. <div class="col-xs-12 navegation-bar">
  55. <div id="progress_bar">
  56. {{ progress_bar }}
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <!--- end gamification -->
  62. {% else %}
  63. <div id="progress_bar">
  64. {{ progress_bar }}
  65. </div>
  66. {% endif %}
  67. {{ teacher_toc_buttons }}
  68. <hr class="visible-xs-block">
  69. <div class="visible-xs-block movil-toolbar">
  70. <button type="button" id="lp-view-expand-button" class="icon-toolbar expand visible-xs-block">
  71. <span class="fa fa-expand" aria-hidden="true"></span>
  72. </button>
  73. <a href="{{ button_home_url }}" class="icon-toolbar" target="_self" onclick="javascript: window.parent.API.save_asset();">
  74. <em class="fa fa-home"></em> <span class="hidden-xs hidden-sm"></span>
  75. </a>
  76. </div>
  77. </div>
  78. </div>
  79. {# TOC layout #}
  80. <div id="toc_id" class="scorm-body" name="toc_name">
  81. <div id="learning_path_toc" class="scorm-list">
  82. <h1 class="scorm-title">{{ lp_title_scorm }}</h1>
  83. {{ lp_html_toc }}
  84. </div>
  85. </div>
  86. {# end TOC layout #}
  87. </div>
  88. </div>
  89. {# end left zone #}
  90. {# <div id="hide_bar" class="scorm-toggle" style="display:inline-block; width: 25px; height: 1000px;"></div> #}
  91. {# right zone #}
  92. <div id="learning_path_right_zone" class="content-scorm">
  93. <div class="lp-view-zone-container">
  94. <div id="lp_navigation_elem" class="navegation-bar pull-right text-right">
  95. <a href="#" id="lp-view-expand-toggle" class="icon-toolbar expand" role="button">
  96. {% if lp_mode == 'embedframe' %}
  97. <span class="fa fa-compress" aria-hidden="true"></span>
  98. <span class="sr-only">{{ 'Expand'|get_lang }}</span>
  99. {% else %}
  100. <span class="fa fa-expand" aria-hidden="true"></span>
  101. <span class="sr-only">{{ 'Expand'|get_lang }}</span>
  102. {% endif %}
  103. </a>
  104. <a id="home-course" href="{{ button_home_url }}" class="icon-toolbar" target="_self" onclick="javascript: window.parent.API.save_asset();">
  105. <em class="fa fa-home"></em> <span class="hidden-xs hidden-sm"></span>
  106. </a>
  107. {{ navigation_bar }}
  108. </div>
  109. <div class="lp-view-tabs">
  110. <ul id="navTabs" class="nav nav-tabs" role="tablist">
  111. <li role="presentation" class="active">
  112. <a href="#lp-view-content" aria-controls="lp-view-content" role="tab" data-toggle="tab">
  113. <span class="fa fa-book fa-2x fa-fw" aria-hidden="true"></span><span class="sr-only">{{ 'Lesson'|get_lang }}</span>
  114. </a>
  115. </li>
  116. <li role="presentation">
  117. <a href="#lp-view-forum" aria-controls="lp-view-forum" role="tab" data-toggle="tab">
  118. <span class="fa fa-commenting-o fa-2x fa-fw" aria-hidden="true"></span><span class="sr-only">{{ 'Forum'|get_lang }}</span>
  119. </a>
  120. </li>
  121. </ul>
  122. <div class="tab-content">
  123. <div role="tabpanel" class="tab-pane active" id="lp-view-content">
  124. {% if lp_mode == 'fullscreen' %}
  125. <iframe id="content_id_blank" name="content_name_blank" src="blank.php" border="0" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
  126. {% else %}
  127. <iframe id="content_id" name="content_name" src="{{ iframe_src }}" border="0" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
  128. {% endif %}
  129. </div>
  130. <div role="tabpanel" class="tab-pane" id="lp-view-forum">
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. {# end right Zone #}
  137. </div>
  138. <script>
  139. (function () {
  140. var LPViewUtils = {
  141. setHeightLPToc: function () {
  142. var scormInfoHeight = $('#scorm-info').outerHeight(true);
  143. $('#learning_path_toc').css({
  144. top: scormInfoHeight
  145. });
  146. }
  147. };
  148. $(document).on('ready', function () {
  149. {% if lp_mode == 'embedframe' %}
  150. //$('#learning_path_main').addClass('lp-view-collapsed');
  151. $('#lp-view-expand-button, #lp-view-expand-toggle').on('click', function (e) {
  152. e.preventDefault();
  153. $('#learning_path_main').toggleClass('lp-view-collapsed');
  154. $('#lp-view-expand-toggle span.fa').toggleClass('fa-compress');
  155. $('#lp-view-expand-toggle span.fa').toggleClass('fa-expand');
  156. });
  157. {% else %}
  158. $('#lp-view-expand-button, #lp-view-expand-toggle').on('click', function (e) {
  159. e.preventDefault();
  160. $('#learning_path_main').toggleClass('lp-view-collapsed');
  161. $('#lp-view-expand-toggle span.fa').toggleClass('fa-expand');
  162. $('#lp-view-expand-toggle span.fa').toggleClass('fa-compress');
  163. });
  164. {% endif %}
  165. $('.lp-view-tabs').on('click', '.disabled', function (e) {
  166. e.preventDefault();
  167. });
  168. $('a#ui-option').on('click', function (e) {
  169. e.preventDefault();
  170. var icon = $(this).children('.fa');
  171. if (icon.is('.fa-chevron-up')) {
  172. icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
  173. return;
  174. }
  175. icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
  176. });
  177. LPViewUtils.setHeightLPToc();
  178. $('.scorm_item_normal a, #scorm-previous, #scorm-next').on('click', function () {
  179. $('.lp-view-tabs').fadeOut();
  180. });
  181. $('#learning_path_right_zone #lp-view-content iframe').on('load', function () {
  182. $('.lp-view-tabs a[href="#lp-view-content"]').tab('show');
  183. $('.lp-view-tabs').fadeIn();
  184. });
  185. loadForumThread({{ lp_id }}, {{ lp_current_item_id }});
  186. checkCurrentItemPosition({{ lp_current_item_id }});
  187. {% if glossary_extra_tools in glossary_tool_availables %}
  188. // Loads the glossary library.
  189. (function () {
  190. {% if show_glossary_in_documents == 'ismanual' %}
  191. $.frameReady(
  192. function(){
  193. // $("<div>I am a div courses</div>").prependTo("body");
  194. },
  195. "top.content_name",
  196. {
  197. load: [
  198. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  199. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  200. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  201. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  202. {{ fix_link }}
  203. ]
  204. }
  205. );
  206. {% elseif show_glossary_in_documents == 'isautomatic' %}
  207. $.frameReady(
  208. function(){
  209. // $("<div>I am a div courses</div>").prependTo("body");
  210. },
  211. "top.content_name",
  212. {
  213. load: [
  214. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  215. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  216. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  217. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  218. {{ fix_link }}
  219. ]
  220. }
  221. );
  222. {% elseif fix_link != '' %}
  223. $.frameReady(
  224. function(){
  225. // $("<div>I am a div courses</div>").prependTo("body");
  226. },
  227. "top.content_name",
  228. {
  229. load: [
  230. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  231. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  232. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  233. {{ fix_link }}
  234. ]
  235. }
  236. );
  237. {% endif %}
  238. })();
  239. {% endif %}
  240. $('iframe#content_id')
  241. .on('load', function () {
  242. $.frameReady(function () {
  243. }, 'top.content_name', {
  244. load: [
  245. {type: 'script', id: '_fr1', src: '{{ _p.web }}web/assets/jquery/dist/jquery.min.js'},
  246. {type: 'script', id: '_fr7', src: '{{ _p.web }}web/assets/MathJax/MathJax.js?config=AM_HTMLorMML'},
  247. {type: 'script', id: '_fr4', src: '{{ _p.web }}web/assets/jquery-ui/jquery-ui.min.js'},
  248. {type: 'stylesheet', id: '_fr5', src: '{{ _p.web }}web/assets/jquery-ui/themes/smoothness/jquery-ui.min.css'},
  249. {type: 'stylesheet', id: '_fr6', src: '{{ _p.web }}web/assets/jquery-ui/themes/smoothness/theme.css'},
  250. {type: 'script', id: '_fr2', src: '{{ _p.web_lib }}javascript/jquery.highlight.js'},
  251. {type: 'script', id: '_fr3', src: '{{ _p.web_main }}glossary/glossary.js.php'}
  252. ]
  253. });
  254. });
  255. });
  256. $(window).on('resize', function () {
  257. LPViewUtils.setHeightLPToc();
  258. });
  259. })();
  260. </script>