view.tpl 16 KB

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