ppapi/examples/mouse_lock/mouse_lock.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   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
   6   found in the LICENSE file.
   7   -->
   8 <head>
   9   <title>Mouse Lock Example</title>
  10   <style type="text/css">
  11     :-webkit-full-screen {
  12       width: 100%;
  13       height: 100%;
  14     }
  15   </style>
  16 </head>
  17 <body title="This tooltip should not be shown if the mouse is locked.">
  18 <div id="container">
  19   <ul>
  20     <li>Lock mouse:
  21       <ul>
  22         <li>left click in either of the two boxes; or</li>
  23         <li>right click in either of the boxes to ensure that it is focused and
  24             then press Enter key. (You could verify that the tooltip window is
  25             dismissed properly by this second approach.)</li>
  26       </ul>
  27     </li>
  28     <li>Unlock mouse voluntarily:
  29       <ul>
  30         <li>press Enter.</li>
  31       </ul>
  32     </li>
  33     <li>Unlock mouse involuntarily:
  34       <ul>
  35         <li>lose focus; or</li>
  36         <li>press Esc key; or</li>
  37         <li>exit from "tab fullscreen"/"browser fullscreen"/"Flash fullscreen".
  38           <ul>
  39             <li>"tab fullscreen" refers to when a tab enters fullscreen mode via
  40                 the JS or Pepper fullscreen API;</li>
  41             <li>"browser fullscreen" refers to the user putting the browser
  42                 itself into fullscreen mode from the UI (e.g., pressing F11).
  43             </li>
  44             <li>"Flash fullscreen" refers to the fullscreen mode used by Pepper
  45                 Flash. You could enter Flash fullscreen by pressing 'f' key
  46                 when either of the boxes is focused, and exit by pressing Esc
  47                 key.</li>
  48           </ul>
  49         </li>
  50       </ul>
  51     </li>
  52   </ul>
  53   <div>
  54     <button onclick="ToggleFullscreen();">
  55       Toggle Tab Fullscreen
  56     </button>
  57     <button onclick="AddAPlugin();">
  58       Add A Plugin
  59     </button>
  60     <button onclick="RemoveAPlugin();">
  61       Remove A Plugin (press 'x')
  62     </button>
  63   </div>
  64   <div id="plugins_container">
  65   </div>
  66 </div>
  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>
  95 </html>