1 <?xml version="1.0" encoding="utf-8"?>
 2 <page>
 3    <config delay="">
 4       <stylesheet>
 5          ../xml_config/normal.css
 6       </stylesheet>
 7    </config>
 8 
 9    <page>
10    </page>
11    
12    <MenuContainer>
13       <pgStyleObject>
14          { theStyle  : 'fontFamily, fontSize, fontWeight, width, overflow, overflowX, overflowY, visibility',
15            propVals  : 'Roboto,     14pt,     bold,       auto,  -,        hidden,    auto,      hidden' }
16       </pgStyleObject>
17 
18       <htmlText>
19          <![CDATA[
20             <!--Menu HTML located in menuTopics.xml <theMenu> tag-->
21          ]]>
22       </htmlText>
23       
24       <function name="myLoad" event="load" params="e">
25          <![CDATA[
26             //Fetch <theMenu> code string in asynchronous mode (sends user event when complete)
27             tbfunction_pgFetch('GET', '../xml_config/menuTopics.xml', '', this.name, 'theMenu', true);
28          ]]>
29       </function>
30       
31       <function name="myUser" event="user" params="e">
32          <![CDATA[
33             //Confirm e.data is non-empty string type from pgFetch()
34             if (typeof e.data == 'string' && e.data) {
35                var parser = new DOMParser(), 
36                    dom = parser.parseFromString(e.data, 'text/html'), //Converts HTML string into HTML Document
37                    objs = dom.getElementsByTagName('li');
38                
39                for (i = 0; i < objs.length; i++) {
40                   objs[i].innerHTML = objs[i].innerHTML.replace('%1', objs[i].id + 'done');
41                   
42                   //Dynamically create a hyperlink/click event on this topic
43                   pgAddEvent(objs[i], 'click', function(e) {
44                                                    var chapter = this.id.replace('topic', ''), 
45                                                       re = new RegExp('^' + chapter + ' '),
46                                                       pages = tbfunction_getPageNameList('all', re, 'all', true, 'array');
47                                                       e.preventDefault();
48                                                       tbfunction_gotoPage(pages[0]);
49                                                 });
50                }
51             
52                this.appendChild(dom.getElementById('myTopicMenu')); //Puts menu into [this] object
53             
54                //Must get collection AFTER appendChild(); cannot reuse [objs]
55                tbfunction_pgTBObjSet(this.name, 'myCheckmarks', [this.getElementsByTagName('li')]);
56             }
57          ]]>
58       </function>
59       
60       <function name="myCheckmarks" event="" params="objList">
61          <![CDATA[
62             var i, chkID, missedPgs, re, 
63                 scr = pgIsNumber(tbfunction_getPageUnitsPerPixel().split(',')[2], 'num');
64             if (objList) {
65                for (i = 0; i < objList.length; i++) {
66                   re = new RegExp('^' + (i + 1) + ' '); //NOTE: topic #'s are one-based
67                   missedPgs = tbfunction_getPageNameList('all', re, 'not visited', true, 'array count');
68                   
69                   //NOTE: missedPgs[0] is number of pages found from previous call
70                   if (missedPgs[0] > 0) continue; //Student has NOT finished this topic
71 
72                   chkID = objList[i].id + 'done';
73                   tbfunction_pgLoadSVG(chkID, '../media/MenuCheck.svg', 'image');
74                }
75             }
76          ]]>
77       </function>
78    </MenuContainer>
79    
80    <!--Additional <config#> ... </config#> sections as required.-->
81    <config2 delay="">
82    </config2>    
83 </page>