OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 // This file exists to share common overlay behaviors. | 5 // This file exists to share common overlay behaviors. |
6 | 6 |
7 cr.define('cr.ui.overlay', function() { | 7 cr.define('cr.ui.overlay', function() { |
8 | 8 |
9 /** | 9 /** |
10 * Gets the top, visible overlay. It makes the assumption that if multiple | 10 * Gets the top, visible overlay. It makes the assumption that if multiple |
11 * overlays are visible, the last in the byte order is topmost. | 11 * overlays are visible, the last in the byte order is topmost. |
12 * TODO(estade): rely on aria-visibility instead? | 12 * TODO(estade): rely on aria-visibility instead? |
13 * @return {HTMLElement} The overlay. | 13 * @return {HTMLElement} The overlay. |
14 */ | 14 */ |
15 function getTopOverlay() { | 15 function getTopOverlay() { |
16 var overlays = document.querySelectorAll('.overlay:not([hidden])'); | 16 var overlays = document.querySelectorAll('.overlay:not([hidden])'); |
17 return overlays[overlays.length - 1]; | 17 return overlays[overlays.length - 1]; |
18 } | 18 } |
19 | 19 |
20 /** | 20 /** |
21 * Makes initializations which must hook at the document level. | 21 * Makes initializations which must hook at the document level. |
22 */ | 22 */ |
23 function globalInitialization() { | 23 function globalInitialization() { |
24 // Listen to focus events and make sure focus doesn't move outside of a | 24 // Listen to focus events and make sure focus doesn't move outside of a |
25 // visible overlay .page. | 25 // visible overlay .page. |
26 document.addEventListener('focus', function(e) { | 26 document.addEventListener('focus', function(e) { |
27 var overlay = getTopOverlay(); | 27 var overlay = getTopOverlay(); |
28 if (!overlay) | 28 var page = overlay ? overlay.querySelector('.page:not([hidden])') : null; |
29 return; | 29 if (!page || page.contains(e.target)) |
30 | |
31 var page = overlay.querySelector('.page:not([hidden])'); | |
32 if (page.contains(e.target)) | |
33 return; | 30 return; |
34 | 31 |
35 var focusElement = page.querySelector('button, input, list, select, a'); | 32 var focusElement = page.querySelector('button, input, list, select, a'); |
36 if (focusElement) | 33 if (focusElement) |
37 focusElement.focus(); | 34 focusElement.focus(); |
38 }, true); | 35 }, true); |
39 | 36 |
40 // Close the overlay on escape. | 37 // Close the overlay on escape. |
41 document.addEventListener('keydown', function(e) { | 38 document.addEventListener('keydown', function(e) { |
42 if (e.keyCode == 27) { // Escape | 39 if (e.keyCode == 27) { // Escape |
43 var overlay = getTopOverlay(); | 40 var overlay = getTopOverlay(); |
44 if (!overlay) | 41 if (!overlay) |
45 return; | 42 return; |
46 | 43 |
47 cr.dispatchSimpleEvent(overlay, 'cancelOverlay'); | 44 cr.dispatchSimpleEvent(overlay, 'cancelOverlay'); |
48 } | 45 } |
49 }); | 46 }); |
50 | 47 |
51 window.addEventListener('resize', function() { | 48 window.addEventListener('resize', function() { |
52 var overlay = getTopOverlay(); | 49 var overlay = getTopOverlay(); |
53 if (!overlay) | 50 var page = overlay ? overlay.querySelector('.page:not([hidden])') : null; |
| 51 if (!page) |
54 return; | 52 return; |
55 | 53 |
56 var page = overlay.querySelector('.page:not([hidden])'); | |
57 page.style.maxHeight = Math.min(0.9 * window.innerHeight, 640) + 'px'; | 54 page.style.maxHeight = Math.min(0.9 * window.innerHeight, 640) + 'px'; |
58 }); | 55 }); |
59 } | 56 } |
60 | 57 |
61 /** | 58 /** |
62 * Adds behavioral hooks for the given overlay. | 59 * Adds behavioral hooks for the given overlay. |
63 * @param {HTMLElement} overlay The .overlay. | 60 * @param {HTMLElement} overlay The .overlay. |
64 */ | 61 */ |
65 function setupOverlay(overlay) { | 62 function setupOverlay(overlay) { |
66 // Close the overlay on clicking any of the pages' close buttons. | 63 // Close the overlay on clicking any of the pages' close buttons. |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
100 } | 97 } |
101 | 98 |
102 return { | 99 return { |
103 globalInitialization: globalInitialization, | 100 globalInitialization: globalInitialization, |
104 setupOverlay: setupOverlay, | 101 setupOverlay: setupOverlay, |
105 } | 102 } |
106 }); | 103 }); |
107 | 104 |
108 document.addEventListener('DOMContentLoaded', | 105 document.addEventListener('DOMContentLoaded', |
109 cr.ui.overlay.globalInitialization); | 106 cr.ui.overlay.globalInitialization); |
OLD | NEW |