OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <!-- | 3 <!-- |
4 Copyright (c) 2011 The Chromium Authors. All rights reserved. | 4 Copyright (c) 2012 The Chromium Authors. All rights reserved. |
5 Use of this source code is governed by a BSD-style license that can be | 5 Use of this source code is governed by a BSD-style license that can be |
6 found in the LICENSE file. | 6 found in the LICENSE file. |
7 --> | 7 --> |
8 <head> | 8 <head> |
| 9 <meta http-equiv="Pragma" content="no-cache" /> |
| 10 <meta http-equiv="Expires" content="-1" /> |
9 <title>Magic Eightball</title> | 11 <title>Magic Eightball</title> |
10 <script type="text/javascript"> | 12 <script type="text/javascript"> |
| 13 naclModule = null; // Global application object. |
| 14 statusText = 'NO-STATUSES'; |
11 | 15 |
12 function moduleDidLoad() { | 16 function ExtractSearchParameter(name, def_value) { |
13 } | 17 var nameIndex = window.location.search.indexOf(name + "="); |
| 18 if (nameIndex != -1) { |
| 19 var value = location.search.substring(nameIndex + name.length + 1); |
| 20 var endIndex = value.indexOf("&"); |
| 21 if (endIndex != -1) |
| 22 value = value.substring(0, endIndex); |
| 23 return value; |
| 24 } |
| 25 return def_value; |
| 26 } |
14 | 27 |
15 function handleMessage(message_event) { | 28 function createNaClModule(name, tool, width, height) { |
16 if(message_event.data=='Eightball loaded!') | 29 var listenerDiv = document.getElementById('listener'); |
17 { | 30 var naclModule = document.createElement('embed'); |
18 document.getElementById('consolec').innerHTML = " \ | 31 naclModule.setAttribute('name', 'nacl_module'); |
19 Eightball loaded, type a question below, press the button, and get a response. \ | 32 naclModule.setAttribute('id', 'nacl_module'); |
20 <br /> \ | 33 naclModule.setAttribute('width', width); |
21 <form name='form' Value='Hello Me' onSubmit='return askBall()'> \ | 34 naclModule.setAttribute('height',height); |
22 <input type='textarea' size='64' name='inputtext' /> \ | 35 naclModule.setAttribute('src', tool + '/' + name + '.nmf'); |
23 <input type='button' NAME='button' Value='ASK!' onClick='askBall()' /> \ | 36 naclModule.setAttribute('type', 'application/x-nacl'); |
24 </form>"; | 37 listenerDiv.appendChild(naclModule); |
25 } | 38 } |
26 else | 39 |
27 { | 40 // Indicate success when the NaCl module has loaded. |
28 if(message_event.data[0]=='!') | 41 function moduleDidLoad() { |
29 { | 42 updateStatus('SUCCESS'); |
| 43 naclModule = document.getElementById('nacl_module'); |
| 44 } |
| 45 |
| 46 function handleMessage(message_event) { |
| 47 var consolec = document.getElementById('consolec'); |
| 48 if(message_event.data[0]=='!') { |
30 document.getElementById('answerlog').innerHTML += | 49 document.getElementById('answerlog').innerHTML += |
31 (document.form.inputtext.value + ": " + message_event.data +"<br />"); | 50 (consolec.value + ": " + message_event.data +"<br />"); |
| 51 } else { |
| 52 document.getElementById('answerlog').innerHTML += |
| 53 (message_event.data +"<br />"); |
32 } | 54 } |
33 else | 55 updateStatus(message_event.data); |
34 { | 56 } |
35 document.getElementById('consolec').innerHTML += | 57 |
36 message_event.data + "<br />"; | 58 function pageDidUnload() { |
37 console.log(message_event.data); | 59 clearInterval(paintInterval); |
| 60 } |
| 61 |
| 62 // If the page loads before the Native Client module loads, then set the |
| 63 // status message indicating that the module is still loading. Otherwise, |
| 64 // do not change the status message. |
| 65 function pageDidLoad() { |
| 66 updateStatus('Page loaded.'); |
| 67 if (naclModule == null) { |
| 68 tool = ExtractSearchParameter('tool', 'glibc'); |
| 69 updateStatus('Creating embed: ' + tool) |
| 70 createNaClModule('dlopen', tool, 100, 100) |
| 71 } else { |
| 72 // It's possible that the Native Client module onload event fired |
| 73 // before the page's onload event. In this case, the status message |
| 74 // will reflect 'SUCCESS', but won't be displayed. This call will |
| 75 // display the current message. |
| 76 updateStatus('Waiting.'); |
38 } | 77 } |
39 } | 78 } |
40 } | |
41 | 79 |
42 function pageDidUnload() { | 80 // Set the global status message. If the element with id 'statusField' |
43 clearInterval(paintInterval); | 81 // exists, then set its HTML to the status message as well. |
44 } | 82 // opt_message The message test. If this is null or undefined, then |
| 83 // attempt to set the element with id 'statusField' to the value of |
| 84 // |statusText|. |
| 85 function updateStatus(opt_message) { |
| 86 if (opt_message) |
| 87 statusText = opt_message; |
| 88 var statusField = document.getElementById('statusField'); |
| 89 var answerLog = document.getElementById('anderlog'); |
| 90 if (statusField) { |
| 91 statusField.innerHTML = statusText; |
| 92 } |
| 93 if (answerLog) { |
| 94 answerLog.innerHTML += (message_event.data +"<br />"); |
| 95 } |
| 96 } |
45 | 97 |
46 function askBall() | 98 function askBall() |
47 { | 99 { |
48 dlopen.postMessage('query'); | 100 naclModule = document.getElementById('nacl_module'); |
49 return false; | 101 updateStatus('Posing...'); |
50 } | 102 naclModule.postMessage('query'); |
| 103 return false; |
| 104 } |
51 </script> | 105 </script> |
52 </head> | 106 </head> |
53 <body id="bodyId" onunload="pageDidUnload()"> | 107 <body id="bodyId" onload="pageDidLoad()"> |
54 <div id="listener"> | 108 <h2>Status: <code id="statusField">NO-STATUS</code></h2> |
55 <script type="text/javascript"> | 109 <div id="listener"> |
56 var listener = document.getElementById('listener') | 110 <script type="text/javascript"> |
57 listener.addEventListener('load', moduleDidLoad, true); | 111 var listener = document.getElementById('listener') |
58 listener.addEventListener('message', handleMessage, true); | 112 listener.addEventListener('load', moduleDidLoad, true); |
59 </script> | 113 listener.addEventListener('message', handleMessage, true); |
60 <h1>The Magic 8 Ball </h1> | 114 </script> |
61 <embed name="nacl_module" | 115 <h1>The Magic 8 Ball </h1> |
62 id="dlopen" | 116 </div> |
63 width=1 height=1 | |
64 src="dlopen.nmf" | |
65 type="application/x-nacl" /> | |
66 </div> | |
67 <br /> | 117 <br /> |
68 <div id="consolec">..loading dynamic libraries...</div> | 118 <div>Eightball loaded, type a question below, press the button, and get a resp
onse.</div> |
| 119 <input type="text" id="consolec" value="" onselect="return askBall()"/> |
| 120 <input type="button" id="button" value="ASK!" onclick="return askBall()"/> |
| 121 </form> |
| 122 <br /> |
69 <div id="answerlog"></div> | 123 <div id="answerlog"></div> |
70 </body> | 124 </body> |
71 </html> | 125 </html> |
OLD | NEW |