Home | History | Annotate | Download | only in mouse_lock
      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>
     96