initial commit
[namibia] / public / js / lib / syntaxhighlighter / tests / theme_tests.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5         <title>SyntaxHighlighter Theme Tests</title>
6         <script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
7 </head>
8
9 <body>
10
11 <div id="output"></div>
12
13 <style>
14 body {
15         background: white;
16         font-family: Helvetica;
17 }
18
19 .test-wrap {
20         width: 100%;
21         height: 800px;
22         overflow: auto;
23         border: none;
24 }
25 </style>
26
27 <script id="sample" type="text/plain">
28         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
29         <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
30         <head>
31                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
32                 <title>SyntaxHighlighter Theme Tests</title>
33         </head>
34         
35         <body>
36                 &lt;script>
37                 /**
38                  * Looks for a child or parent node which has specified classname.
39                  * Equivalent to jQuery's $(container).find(".className")
40                  * @param {Element} target Target element.
41                  * @param {String} search Class name or node name to look for.
42                  * @param {Boolean} reverse If set to true, will go up the node tree instead of down.
43                  * @return {Element} Returns found child or parent element on null.
44                  */
45                 function findElement(target, search, reverse /* optional */)
46                 {
47                         if (target == null)
48                                 return null;
49                 
50                         var nodes                       = reverse != true ? target.childNodes : [ target.parentNode ],
51                                 propertyToFind  = { '#' : 'id', '.' : 'className' }[search.substr(0, 1)] || 'nodeName',
52                                 expectedValue,
53                                 found
54                                 ;
55                                 
56                         // main return of the found node
57                         if ((target[propertyToFind] || '').indexOf(expectedValue) != -1)
58                                 return target;
59                 
60                         return found;
61                 };
62                 &lt;/script>
63                 
64         </body>
65         </html>
66 </script>
67
68 <script type="text/javascript">
69 var themes = [
70                 ['#fff', 'Default'],
71                 ['#000', 'Django'],
72                 ['#fff', 'Eclipse'],
73                 ['#000', 'Emacs'],
74                 ['#000', 'FadeToGrey'],
75                 ['#000', 'MDUltra'],
76                 ['#000', 'Midnight'],
77                 ['#000', 'RDark']
78         ];
79         
80 $(document).ready(function()
81 {
82         var sample = $('#sample').text().replace(/</g, '&lt;');
83         
84         $.each(themes, function(index)
85         {
86                 var $iframe = $('<iframe class="test-wrap" src="about:blank" />'),
87                         background = this[0],
88                         themeName = this[1]
89                         ;
90                 
91                 $('#output')
92                         .append(''
93                                 + '<h1>'
94                                         + '<a href="#theme' + (index + 1) + '">next</a> '
95                                         + '<a name="theme' + index + '">'
96                                                 + themeName
97                                         + '</a>'
98                                 + '</h1>'
99                         )
100                         .append($iframe)
101                         ;
102                         
103                 $iframe.ready(function()
104                 {
105                         var doc = $iframe[0].contentDocument;
106                         $iframe.css('background', background);
107                         
108                         doc.write(''
109                                 + '<scr' + 'ipt type="text/javascript" src="/sh/scripts/XRegExp.js"></scr' + 'ipt>'
110                                 + '<scr' + 'ipt type="text/javascript" src="/sh/scripts/shCore.js"></scr' + 'ipt>'
111                                 + '<scr' + 'ipt type="text/javascript" src="/sh/scripts/shBrushXml.js"></scr' + 'ipt>'
112                                 + '<scr' + 'ipt type="text/javascript" src="/sh/scripts/shBrushJScript.js"></scr' + 'ipt>'
113                                 + '<link type="text/css" rel="stylesheet" href="/sh/styles/shCore' + themeName + '.css"/>'
114                                 + '<pre type="syntaxhighlighter" class="brush: js; html-script: true; highlight: [5, 20]" title="This is SyntaxHighlighter theme ' + themeName + ' in action!">'
115                                         + sample
116                                 + '</pre>'
117                                 + '<pre type="syntaxhighlighter" class="brush: js; html-script: true; collapse: true">'
118                                         + sample
119                                 + '</pre>'
120                                 + '<scr' + 'ipt type="text/javascript">'
121                                         + 'SyntaxHighlighter.highlight();'
122                                 + '</scr' + 'ipt>'
123                                 );
124                         doc.close();
125                 });
126         });
127         
128         $('#output a[name]:first').attr('name', 'top');
129         $('#output a[href]:last').attr('href', '#top').html('top');
130 });
131 </script>
132
133 </body>
134 </html>