03b40df2598d83d48ead9bb44600b1297859e1a7
[moodle.git] / mod / scorm / module.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /**
17  * Javascript helper function for IMS Content Package module.
18  *
19  * @package   mod-scorm
20  * @copyright 2009 Petr Skoda (http://skodak.org)
21  * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22  */
24 M.mod_scorm = {};
26 M.mod_scorm.init = function(Y, hide_nav, hide_toc, toc_title, window_name, window_options, window_width, window_height, launch_sco) {
28     var popup_winHandle = false;
30     if (hide_nav == 0) {
31         scorm_hide_nav = false;
32     }
33     else {
34         scorm_hide_nav = true;
35     }
36     if (hide_toc == 0) {
37         scorm_hide_toc = false;
38     }
39     else {
40         scorm_hide_toc = true;
41     }
43     var scorm_layout_widget;
44     var scorm_current_node;
45     var scorm_buttons = [];
46     var scorm_bloody_labelclick = false;
47     var scorm_nav_panel;
50     Y.use('yui2-resize', 'yui2-dragdrop', 'yui2-container', 'yui2-button', 'yui2-layout', 'yui2-treeview', 'yui2-json', 'yui2-event', function(Y) {
53         var scorm_activate_item = function(node) {
54             if (!node) {
55                 return;
56             }
57             scorm_current_node = node;
58             scorm_current_node.highlight();
60             // remove any reference to the old API
61             if (window.API) {
62                 window.API = null;
63             }
64             if (window.API_1484_11) {
65                 window.API_1484_11 = null;
66             }
67             var url_prefix = M.cfg.wwwroot + '/mod/scorm/loadSCO.php?';
68             var el_old_api = document.getElementById('scormapi123');
69             if (el_old_api) {
70                 el_old_api.parentNode.removeChild(el_old_api);
71             }
73             if (node.title) {
74                 var el_scorm_api = document.getElementById("external-scormapi");
75                 el_scorm_api.parentNode.removeChild(el_scorm_api);
76                 el_scorm_api = document.createElement('script');
77                 el_scorm_api.setAttribute('id','external-scormapi');
78                 el_scorm_api.setAttribute('type','text/javascript');
79                 var pel_scorm_api = document.getElementById('scormapi-parent');
80                 pel_scorm_api.appendChild(el_scorm_api);
81                 var api_url = M.cfg.wwwroot + '/mod/scorm/api.php?' + node.title;
82                 document.getElementById('external-scormapi').src = api_url;
83             }
85             // make the popup work
86             if (window_name) {
87                 popup_winHandle = window.open('', window_name, window_options, window_width, window_height);
88                 popup_winHandle.location.href =  url_prefix + node.title;
89                 popup_winHandle.resizeTo(window_width, window_height);
90             }
91          
92             var content = new YAHOO.util.Element('scorm_content');
93             try {
94                 // first try IE way - it can not set name attribute later
95                 // and also it has some restrictions on DOM access from object tag
96                 if (window_name || node.title == null) {
97                     var obj = document.createElement('<iframe id="scorm_object" src="">');
98                 }
99                 else {
100                     var obj = document.createElement('<iframe id="scorm_object" src="'+url_prefix + node.title+'">');
101                 }
102             } catch (e) {
103                 var obj = document.createElement('object');
104                 obj.setAttribute('id', 'scorm_object');
105                 obj.setAttribute('type', 'text/html');
106                 if (!window_name && node.title != null) {
107                     obj.setAttribute('data', url_prefix + node.title);
108                 }
109             }
110             var old = YAHOO.util.Dom.get('scorm_object');
111             if (old) {
112                 content.replaceChild(obj, old);
113             } else {
114                 content.appendChild(obj);
115             }
116           
117             scorm_resize_frame();
119             var left = scorm_layout_widget.getUnitByPosition('left');
120             if (left.expanded) {
121                 scorm_current_node.focus();
122             }
123             if (scorm_hide_nav == false) {
124                 scorm_fixnav();
125             }
126         };
128         /**
129          * Enables/disables navigation buttons as needed.
130          * @return void
131          */
132         var scorm_fixnav = function() {
133             scorm_buttons[0].set('disabled', (scorm_skipprev(scorm_current_node) == null));
134             scorm_buttons[1].set('disabled', (scorm_prev(scorm_current_node) == null));
135             scorm_buttons[2].set('disabled', (scorm_up(scorm_current_node) == null));
136             scorm_buttons[3].set('disabled', (scorm_next(scorm_current_node) == null));
137             scorm_buttons[4].set('disabled', (scorm_skipnext(scorm_current_node) == null));
138         };
141         var scorm_resize_layout = function(alsowidth) {
142             if (window_name) {
143                 //scorm_layout_widget.setStyle('width', '260px');
144                 //scorm_layout_widget.render();
145                 return;
146             }
148             if (alsowidth) {
149                 //var layout = YAHOO.util.Dom.get('scorm_layout');
150                 //layout.style.width = '600px';
151                 scorm_layout_widget.setStyle('width', '');
152                 var newwidth = scorm_get_htmlelement_size('content', 'width');
153                 if (newwidth > 600) {
154                     //layout.style.width = newwidth+'px';
155                     scorm_layout_widget.setStyle('width', newwidth+'px');
156                 }
157             }
158             // make sure that the max width of the TOC doesn't go to far
159             var left = scorm_layout_widget.getUnitByPosition('left');
160             var maxwidth = parseInt(YAHOO.util.Dom.getStyle('scorm_layout', 'width'));
161             left.set('maxWidth', (maxwidth - 10));
162             var cwidth = left.get('width');
163             if (cwidth > (maxwidth - 10)) {
164                 left.set('width', (maxwidth - 10));
165             }
167             var pageheight = scorm_get_htmlelement_size('page', 'height');
168             var layoutheight = scorm_get_htmlelement_size(scorm_layout_widget, 'height');
169             var newheight = layoutheight + parseInt(YAHOO.util.Dom.getViewportHeight()) - pageheight - 20;
170             if (newheight > 400) {
171                 if (newheight > 768) {
172                     scorm_layout_widget.setStyle('height', '768px');
173                 }
174                 else {
175                     scorm_layout_widget.setStyle('height', newheight+'px');
176                 }
177             }
179             scorm_layout_widget.render();
180             scorm_resize_frame();
182             if (scorm_nav_panel) {
183                 scorm_nav_panel.align('bl', 'bl');
184             }
185         };
187         var scorm_get_htmlelement_size = function(el, prop) {
188             var val = YAHOO.util.Dom.getStyle(el, prop);
189             if (val == 'auto') {
190                 if (el.get) {
191                     el = el.get('element'); // get real HTMLElement from YUI element
192                 }
193                 val = YAHOO.util.Dom.getComputedStyle(YAHOO.util.Dom.get(el), prop);
194             }
195             return parseInt(val);
196         };
198         var scorm_resize_frame = function() {
199             var obj = YAHOO.util.Dom.get('scorm_object');
200             if (obj) {
201                 var content = scorm_layout_widget.getUnitByPosition('center').get('wrap');
202                 // basically trap IE6 and 7
203                 if (YAHOO.env.ua.ie > 5 && YAHOO.env.ua.ie < 8) {
204                     if( obj.style.setAttribute ) {
205                         obj.style.setAttribute("cssText", 'width: ' +(content.offsetWidth - 6)+'px; height: ' + (content.offsetHeight - 10)+'px;');
206                     }
207                     else {
208                         obj.style.setAttribute('width', (content.offsetWidth - 6)+'px', 0);
209                         obj.style.setAttribute('height', (content.offsetHeight - 10)+'px', 0);
210                     }
211                 }
212                 else {
213                     obj.style.width = (content.offsetWidth - 6)+'px';
214                     obj.style.height = (content.offsetHeight - 10)+'px';
215                 }
216             }
217         };
220         var scorm_up = function(node) {
221             var node = scorm_tree_node.getHighlightedNode();
222             if (node.depth > 0) {
223                 return node.parent;
224             }
225             return null;
226         };
228         var scorm_lastchild = function(node) {
229             if (node.children.length) {
230                 return scorm_lastchild(node.children[node.children.length-1]);
231             } else {
232                 return node;
233             }
234         };
236         var scorm_prev = function(node) {
237             if (node.previousSibling && node.previousSibling.children.length) {
238                 return scorm_lastchild(node.previousSibling);
239             }
240             return scorm_skipprev(node);
241         };
243         var scorm_skipprev = function(node) {
244             /*
245             if (node == scorm_tree_node.getRoot().children[0]) {
246                 return null;
247             }
248             else {
249                 return scorm_tree_node.getRoot().children[0];
250             }
251             */
252             if (node.previousSibling) {
253                 return node.previousSibling;
254             } else if (node.depth > 0) {
255                 return node.parent;
256             }
257             return null;
258         };
260         var scorm_next = function(node) {
261             if (node === false) {
262                 return scorm_tree_node.getRoot().children[0];
263             }
264             if (node.children.length) {
265                 return node.children[0];
266             }
267             return scorm_skipnext(node);
268         };
270         var scorm_skipnext = function(node) {
271             /*
272             var toc_children = scorm_tree_node.getRoot().children;
273             if (node == toc_children[toc_children.length - 1]) {
274                 return null;
275             }
276             else {
277                 return toc_children[toc_children.length - 1];
278             }
279             */
280             if (node.nextSibling) {
281                 return node.nextSibling;
282             } else if (node.depth > 0) {
283                 return scorm_skipnext(node.parent);
284             }
285             return null;
286         };
289         // layout
290         YAHOO.widget.LayoutUnit.prototype.STR_COLLAPSE = M.str.moodle.hide;
291         YAHOO.widget.LayoutUnit.prototype.STR_EXPAND = M.str.moodle.show;
293 /*
294         scorm_layout_widget = new YAHOO.widget.Layout('scorm_layout', {
295             minWidth: 600,
296             minHeight: 400,
297             units: [
298                 { position: 'left', body: 'scorm_toc', header: M.str.scorm.toc, width: 250, resize: true, gutter: '2px 5px 5px 2px', collapse: true, minWidth:150},
299                 { position: 'center', body: '<div id="scorm_content"></div>', gutter: '2px 5px 5px 2px', scroll: true}
300             ]
301         });
302         */
303         scorm_layout_widget = new YAHOO.widget.Layout('scorm_layout', {
304             minWidth: 255,
305             minHeight: 400,
306             units: [
307                 { position: 'left', body: 'scorm_toc', header: toc_title, width: 250, resize: true, gutter: '2px 5px 5px 2px', collapse: true, minWidth:250, maxWidth: 590},
308                 { position: 'center', body: '<div id="scorm_content"></div>', gutter: '2px 5px 5px 2px', scroll: true}
309             ]
310         });
311         scorm_layout_widget.render();
312         var left = scorm_layout_widget.getUnitByPosition('left');
313         left.on('collapse', function() {
314             scorm_resize_frame();
315         });
316         left.on('expand', function() {
317             scorm_resize_frame();
318         });
320         // ugly resizing hack that works around problems with resizing of iframes and objects
321         left._resize.on('startResize', function() {
322             var obj = YAHOO.util.Dom.get('scorm_object');
323             obj.style.display = 'none';
324         });
325         left._resize.on('endResize', function() {
326             var obj = YAHOO.util.Dom.get('scorm_object');
327             obj.style.display = 'block';
328             scorm_resize_frame();
329         });
331         // hide the TOC if that is the default
332         if (scorm_hide_toc == true) {
333             left.collapse();
334         }
336         // TOC tree
337         var tree = new YAHOO.widget.TreeView('scorm_tree');
338         scorm_tree_node = tree;
339         tree.singleNodeHighlight = true;
340         tree.subscribe('labelClick', function(node) {
341             scorm_activate_item(node);
342             if (node.children.length) {
343                 scorm_bloody_labelclick = true;
344             }
345         });
346         tree.subscribe('collapse', function(node) {
347             if (scorm_bloody_labelclick) {
348                 scorm_bloody_labelclick = false;
349                 return false;
350             }
351         });
352         tree.subscribe('expand', function(node) {
353             if (scorm_bloody_labelclick) {
354                 scorm_bloody_labelclick = false;
355                 return false;
356             }
357         });
358         tree.expandAll();
359         tree.render();
361         // navigation
362         if (scorm_hide_nav == false) {
363             //scorm_nav_panel = new YAHOO.widget.Panel('scorm_navpanel', { visible:true, draggable:true, close:false,
364             //                                                       context: ['page', 'bl', 'bl', ["windowScroll", "textResize", "windowResize"]], constraintoviewport:true} );
365             scorm_nav_panel = new YAHOO.widget.Panel('scorm_navpanel', { visible:true, draggable:true, close:false, xy: [250, 450],
366                                                                     autofillheight: "body"} );
367             scorm_nav_panel.setHeader(M.str.scorm.navigation);
368     
369             //TODO: make some better&accessible buttons
370             scorm_nav_panel.setBody('<span id="scorm_nav"><button id="nav_skipprev">&lt;&lt;</button><button id="nav_prev">&lt;</button><button id="nav_up">^</button><button id="nav_next">&gt;</button><button id="nav_skipnext">&gt;&gt;</button></span>');
371             scorm_nav_panel.render();
372             scorm_buttons[0] = new YAHOO.widget.Button('nav_skipprev');
373             scorm_buttons[1] = new YAHOO.widget.Button('nav_prev');
374             scorm_buttons[2] = new YAHOO.widget.Button('nav_up');
375             scorm_buttons[3] = new YAHOO.widget.Button('nav_next');
376             scorm_buttons[4] = new YAHOO.widget.Button('nav_skipnext');
377             scorm_buttons[0].on('click', function(ev) {
378                 scorm_activate_item(scorm_skipprev(scorm_tree_node.getHighlightedNode()));
379             });
380             scorm_buttons[1].on('click', function(ev) {
381                 scorm_activate_item(scorm_prev(scorm_tree_node.getHighlightedNode()));
382             });
383             scorm_buttons[2].on('click', function(ev) {
384                 scorm_activate_item(scorm_up(scorm_tree_node.getHighlightedNode()));
385             });
386             scorm_buttons[3].on('click', function(ev) {
387                 scorm_activate_item(scorm_next(scorm_tree_node.getHighlightedNode()));
388             });
389             scorm_buttons[4].on('click', function(ev) {
390                 scorm_activate_item(scorm_skipnext(scorm_tree_node.getHighlightedNode()));
391             });
392             scorm_nav_panel.render();
393         }
395         // finally activate the chosen item
396         var scorm_first_url = tree.getRoot().children[0];
397         var nxt = false;
398         while (nxt = scorm_next(nxt)) {
399             if (nxt.title) {
400                 expression = new RegExp('^.*?scoid=' + launch_sco + '.*?$');
401                 matches = nxt.title.match(expression);
402                 if (matches != null) {
403                     scorm_first_url = nxt;
404                     break;
405                 }
406             }
407         }
408         scorm_activate_item(scorm_first_url);
410         // resizing
411         scorm_resize_layout(false);
413         // fix layout if window resized
414         window.onresize = function() {
415             scorm_resize_layout(true);
416         };
417     });
418 };