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) 2011 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 <title>Mouse Lock Example</title> | 9 <title>Mouse Lock Example</title> |
10 <style type="text/css"> | 10 <style type="text/css"> |
11 :-webkit-full-screen { | 11 :-webkit-full-screen { |
12 width: 100%; | 12 width: 100%; |
13 height: 100%; | 13 height: 100%; |
14 } | 14 } |
15 </style> | 15 </style> |
16 <script> | |
17 function ToggleFullscreen() { | |
18 if (document.webkitIsFullScreen) { | |
19 document.webkitCancelFullScreen(); | |
20 } else { | |
21 document.getElementById('container').webkitRequestFullScreen( | |
22 Element.ALLOW_KEYBOARD_INPUT); | |
23 } | |
24 } | |
25 </script> | |
26 </head> | 16 </head> |
27 <body title="This tooltip should not be shown if the mouse is locked."> | 17 <body title="This tooltip should not be shown if the mouse is locked."> |
28 <div id="container"> | 18 <div id="container"> |
29 <ul> | 19 <ul> |
30 <li>There are two different kinds of fullscreen mode - "tab fullscreen" and | 20 <li>There are two different kinds of fullscreen mode - "tab fullscreen" and |
31 "browser fullscreen". | 21 "browser fullscreen". |
32 <ul> | 22 <ul> |
33 <li>"tab fullscreen" refers to when a tab enters fullscreen mode via the | 23 <li>"tab fullscreen" refers to when a tab enters fullscreen mode via the |
34 JS or Pepper fullscreen API;</li> | 24 JS or Pepper fullscreen API;</li> |
35 <li>"browser fullscreen" refers to the user putting the browser itself | 25 <li>"browser fullscreen" refers to the user putting the browser itself |
(...skipping 18 matching lines...) Expand all Loading... |
54 </li> | 44 </li> |
55 <li>Unlock mouse involuntarily: | 45 <li>Unlock mouse involuntarily: |
56 <ul> | 46 <ul> |
57 <li>lose focus; or</li> | 47 <li>lose focus; or</li> |
58 <li>press Esc key; or</li> | 48 <li>press Esc key; or</li> |
59 <li>exit from the "tab fullscreen" mode.</li> | 49 <li>exit from the "tab fullscreen" mode.</li> |
60 </ul> | 50 </ul> |
61 </li> | 51 </li> |
62 </ul> | 52 </ul> |
63 <div> | 53 <div> |
64 <button id="toggle_fullscreen" onclick="ToggleFullscreen();"> | 54 <button onclick="ToggleFullscreen();"> |
65 Toggle Tab Fullscreen | 55 Toggle Tab Fullscreen |
66 </button> | 56 </button> |
| 57 <button onclick="AddAPlugin();"> |
| 58 Add A Plugin |
| 59 </button> |
| 60 <button onclick="RemoveAPlugin();"> |
| 61 Remove A Plugin (press 'x') |
| 62 </button> |
67 </div> | 63 </div> |
68 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | 64 <div id="plugins_container"> |
69 width="300" height="300" border="2px"></object> | 65 </div> |
70 <div></div> | |
71 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | |
72 width="300" height="300" border="2px"></object> | |
73 </div> | 66 </div> |
74 </body> | 67 </body> |
| 68 <script> |
| 69 plugins_container = document.getElementById("plugins_container"); |
| 70 AddAPlugin(); |
| 71 AddAPlugin(); |
| 72 |
| 73 function ToggleFullscreen() { |
| 74 if (document.webkitIsFullScreen) { |
| 75 document.webkitCancelFullScreen(); |
| 76 } else { |
| 77 document.getElementById('container').webkitRequestFullScreen( |
| 78 Element.ALLOW_KEYBOARD_INPUT); |
| 79 } |
| 80 } |
| 81 function AddAPlugin() { |
| 82 plugins_container.insertAdjacentHTML("BeforeEnd", |
| 83 '<object type="application/x-ppapi-example-mouse-lock" ' + |
| 84 'width="300" height="300" border="2px"></object>'); |
| 85 } |
| 86 function RemoveAPlugin() { |
| 87 if (plugins_container.firstElementChild) |
| 88 plugins_container.removeChild(plugins_container.firstElementChild); |
| 89 } |
| 90 document.body.onkeydown = function (e) { |
| 91 if (String.fromCharCode(e.keyCode) == "X") |
| 92 RemoveAPlugin(); |
| 93 } |
| 94 </script> |
75 </html> | 95 </html> |
OLD | NEW |