view.tpl 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  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. <div id="wrapper-iframe" style="width:100%; height:100%">
  125. {% if lp_mode == 'fullscreen' %}
  126. <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>
  127. {% else %}
  128. <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>
  129. {% endif %}
  130. </div>
  131. </div>
  132. <div role="tabpanel" class="tab-pane" id="lp-view-forum">
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. {# end right Zone #}
  139. </div>
  140. <script>
  141. (function () {
  142. var LPViewUtils = {
  143. setHeightLPToc: function () {
  144. var scormInfoHeight = $('#scorm-info').outerHeight(true);
  145. $('#learning_path_toc').css({
  146. top: scormInfoHeight
  147. });
  148. }
  149. };
  150. $(document).on('ready', function () {
  151. if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
  152. $('#wrapper-iframe').css({
  153. 'overflow' : 'auto',
  154. 'position' : 'relative',
  155. '-webkit-overflow-scrolling': 'touch'
  156. });
  157. }
  158. {% if lp_mode == 'embedframe' %}
  159. //$('#learning_path_main').addClass('lp-view-collapsed');
  160. $('#lp-view-expand-button, #lp-view-expand-toggle').on('click', function (e) {
  161. e.preventDefault();
  162. $('#learning_path_main').toggleClass('lp-view-collapsed');
  163. $('#lp-view-expand-toggle span.fa').toggleClass('fa-compress');
  164. $('#lp-view-expand-toggle span.fa').toggleClass('fa-expand');
  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. });
  173. {% endif %}
  174. $('.lp-view-tabs').on('click', '.disabled', function (e) {
  175. e.preventDefault();
  176. });
  177. $('a#ui-option').on('click', function (e) {
  178. e.preventDefault();
  179. var icon = $(this).children('.fa');
  180. if (icon.is('.fa-chevron-up')) {
  181. icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
  182. return;
  183. }
  184. icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
  185. });
  186. LPViewUtils.setHeightLPToc();
  187. $('.scorm_item_normal a, #scorm-previous, #scorm-next').on('click', function () {
  188. $('.lp-view-tabs').fadeOut();
  189. });
  190. $('#learning_path_right_zone #lp-view-content iframe').on('load', function () {
  191. $('.lp-view-tabs a[href="#lp-view-content"]').tab('show');
  192. $('.lp-view-tabs').fadeIn();
  193. });
  194. loadForumThread({{ lp_id }}, {{ lp_current_item_id }});
  195. {% if glossary_extra_tools in glossary_tool_availables %}
  196. // Loads the glossary library.
  197. (function () {
  198. {% if show_glossary_in_documents == 'ismanual' %}
  199. $.frameReady(
  200. function(){
  201. // $("<div>I am a div courses</div>").prependTo("body");
  202. },
  203. "top.content_name",
  204. {
  205. load: [
  206. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  207. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  208. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  209. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  210. {{ fix_link }}
  211. ]
  212. }
  213. );
  214. {% elseif show_glossary_in_documents == 'isautomatic' %}
  215. $.frameReady(
  216. function(){
  217. // $("<div>I am a div courses</div>").prependTo("body");
  218. },
  219. "top.content_name",
  220. {
  221. load: [
  222. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  223. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  224. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  225. { type:"script", id:"_fr2", src:"{{ _p.web_lib }}javascript/jquery.highlight.js"},
  226. {{ fix_link }}
  227. ]
  228. }
  229. );
  230. {% elseif fix_link != '' %}
  231. $.frameReady(
  232. function(){
  233. // $("<div>I am a div courses</div>").prependTo("body");
  234. },
  235. "top.content_name",
  236. {
  237. load: [
  238. { type:"script", id:"_fr1", src:"{{ jquery_web_path }}"},
  239. { type:"script", id:"_fr4", src:"{{ jquery_ui_js_web_path }}"},
  240. { type:"stylesheet", id:"_fr5", src:"{{ jquery_ui_css_web_path }}"},
  241. {{ fix_link }}
  242. ]
  243. }
  244. );
  245. {% endif %}
  246. })();
  247. {% endif %}
  248. $('iframe#content_id')
  249. .on('load', function () {
  250. $.frameReady(function () {
  251. }, 'top.content_name', {
  252. load: [
  253. {type: 'script', id: '_fr1', src: '{{ _p.web }}web/assets/jquery/dist/jquery.min.js'},
  254. {type: 'script', id: '_fr7', src: '{{ _p.web }}web/assets/MathJax/MathJax.js?config=AM_HTMLorMML'},
  255. {type: 'script', id: '_fr4', src: '{{ _p.web }}web/assets/jquery-ui/jquery-ui.min.js'},
  256. {type: 'stylesheet', id: '_fr5', src: '{{ _p.web }}web/assets/jquery-ui/themes/smoothness/jquery-ui.min.css'},
  257. {type: 'stylesheet', id: '_fr6', src: '{{ _p.web }}web/assets/jquery-ui/themes/smoothness/theme.css'},
  258. {type: 'script', id: '_fr2', src: '{{ _p.web_lib }}javascript/jquery.highlight.js'},
  259. {type: 'script', id: '_fr3', src: '{{ _p.web_main }}glossary/glossary.js.php'}
  260. ]
  261. });
  262. });
  263. });
  264. $(window).on('resize', function () {
  265. LPViewUtils.setHeightLPToc();
  266. });
  267. })();
  268. </script>