| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <head> |
| <title>Mouse Lock Example</title> |
| <style type="text/css"> |
| :-webkit-full-screen { |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| </head> |
| <body title="This tooltip should not be shown if the mouse is locked."> |
| <div id="container"> |
| <ul> |
| <li>Lock mouse: |
| <ul> |
| <li>left click in either of the two boxes; or</li> |
| <li>right click in either of the boxes to ensure that it is focused and |
| then press Enter key. (You could verify that the tooltip window is |
| dismissed properly by this second approach.)</li> |
| </ul> |
| </li> |
| <li>Unlock mouse voluntarily: |
| <ul> |
| <li>press Enter.</li> |
| </ul> |
| </li> |
| <li>Unlock mouse involuntarily: |
| <ul> |
| <li>lose focus; or</li> |
| <li>press Esc key; or</li> |
| <li>exit from "tab fullscreen"/"browser fullscreen"/"Flash fullscreen". |
| <ul> |
| <li>"tab fullscreen" refers to when a tab enters fullscreen mode via |
| the JS or Pepper fullscreen API;</li> |
| <li>"browser fullscreen" refers to the user putting the browser |
| itself into fullscreen mode from the UI (e.g., pressing F11). |
| </li> |
| <li>"Flash fullscreen" refers to the fullscreen mode used by Pepper |
| Flash. You could enter Flash fullscreen by pressing 'f' key |
| when either of the boxes is focused, and exit by pressing Esc |
| key.</li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| <div> |
| <button onclick="ToggleFullscreen();"> |
| Toggle Tab Fullscreen |
| </button> |
| <button onclick="AddAPlugin();"> |
| Add A Plugin |
| </button> |
| <button onclick="RemoveAPlugin();"> |
| Remove A Plugin (press 'x') |
| </button> |
| </div> |
| <div id="plugins_container"> |
| </div> |
| </div> |
| </body> |
| <script> |
| plugins_container = document.getElementById("plugins_container"); |
| AddAPlugin(); |
| AddAPlugin(); |
| |
| function ToggleFullscreen() { |
| if (document.webkitIsFullScreen) { |
| document.webkitCancelFullScreen(); |
| } else { |
| document.getElementById('container').webkitRequestFullScreen( |
| Element.ALLOW_KEYBOARD_INPUT); |
| } |
| } |
| function AddAPlugin() { |
| plugins_container.insertAdjacentHTML("BeforeEnd", |
| '<object type="application/x-ppapi-example-mouse-lock" ' + |
| 'width="300" height="300" border="2px"></object>'); |
| } |
| function RemoveAPlugin() { |
| if (plugins_container.firstElementChild) |
| plugins_container.removeChild(plugins_container.firstElementChild); |
| } |
| document.body.onkeydown = function (e) { |
| if (String.fromCharCode(e.keyCode) == "X") |
| RemoveAPlugin(); |
| } |
| </script> |
| </html> |
