OLD | NEW |
---|---|
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 cr.define('extensions', function() { | 5 cr.define('extensions', function() { |
6 'use strict'; | 6 'use strict'; |
7 | 7 |
8 /** | 8 /** |
9 * The ExtensionOptionsOverlay will show an extension's options page using | 9 * The ExtensionOptionsOverlay will show an extension's options page using |
10 * an <extensionoptions> element. | 10 * an <extensionoptions> element. |
(...skipping 22 matching lines...) Expand all Loading... | |
33 initializePage: function(showOverlay) { | 33 initializePage: function(showOverlay) { |
34 var overlay = $('overlay'); | 34 var overlay = $('overlay'); |
35 | 35 |
36 cr.ui.overlay.setupOverlay(overlay); | 36 cr.ui.overlay.setupOverlay(overlay); |
37 cr.ui.overlay.globalInitialization(); | 37 cr.ui.overlay.globalInitialization(); |
38 overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this)); | 38 overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this)); |
39 | 39 |
40 this.showOverlay_ = showOverlay; | 40 this.showOverlay_ = showOverlay; |
41 }, | 41 }, |
42 | 42 |
43 setInitialFocus: function() { | |
44 this.getExentionOptions_().focus(); | |
45 }, | |
46 | |
47 /** @return {?Element} */ | |
48 getExentionOptions_: function() { | |
not at google - send to devlin
2015/02/03 20:52:04
Exention -> Extension
kudos on being consistent,
Dan Beam
2015/02/04 17:15:38
Done. (ah, the magic of Ctrl+n)
| |
49 return $('extension-options-overlay-guest').querySelector( | |
50 'extensionoptions'); | |
51 }, | |
52 | |
43 /** | 53 /** |
44 * Handles a click on the close button. | 54 * Handles a click on the close button. |
45 * @param {Event} event The click event. | 55 * @param {Event} event The click event. |
46 * @private | 56 * @private |
47 */ | 57 */ |
48 handleDismiss_: function(event) { | 58 handleDismiss_: function(event) { |
49 this.setVisible_(false); | 59 this.setVisible_(false); |
50 var extensionoptions = | 60 var extensionoptions = this.getExentionOptions_(); |
51 $('extension-options-overlay-guest') | |
52 .querySelector('extensionoptions'); | |
53 | |
54 if (extensionoptions) | 61 if (extensionoptions) |
55 $('extension-options-overlay-guest').removeChild(extensionoptions); | 62 $('extension-options-overlay-guest').removeChild(extensionoptions); |
56 | 63 |
57 $('extension-options-overlay-icon').removeAttribute('src'); | 64 $('extension-options-overlay-icon').removeAttribute('src'); |
58 | 65 |
59 // Remove the options query string. | 66 // Remove the options query string. |
60 uber.replaceState({}, ''); | 67 uber.replaceState({}, ''); |
61 }, | 68 }, |
62 | 69 |
63 /** | 70 /** |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
118 var newHeight = Math.min(evt.height, maxHeight); | 125 var newHeight = Math.min(evt.height, maxHeight); |
119 | 126 |
120 // animationTime is the amount of time in ms that will be used to resize | 127 // animationTime is the amount of time in ms that will be used to resize |
121 // the overlay. It is calculated by multiplying the pythagorean distance | 128 // the overlay. It is calculated by multiplying the pythagorean distance |
122 // between old and the new size (in px) with a constant speed of | 129 // between old and the new size (in px) with a constant speed of |
123 // 0.25 ms/px. | 130 // 0.25 ms/px. |
124 var animationTime = 0.25 * Math.sqrt( | 131 var animationTime = 0.25 * Math.sqrt( |
125 Math.pow(newWidth - oldWidth, 2) + | 132 Math.pow(newWidth - oldWidth, 2) + |
126 Math.pow(newHeight - oldHeight, 2)); | 133 Math.pow(newHeight - oldHeight, 2)); |
127 | 134 |
128 if (animation) { | 135 if (animation) |
129 animation.cancel(); | 136 animation.cancel(); |
130 } | 137 |
131 animation = overlay.animate([ | 138 animation = overlay.animate([ |
132 {width: oldWidth + 'px', height: oldHeight + 'px'}, | 139 {width: oldWidth + 'px', height: oldHeight + 'px'}, |
133 {width: newWidth + 'px', height: newHeight + 'px'} | 140 {width: newWidth + 'px', height: newHeight + 'px'} |
134 ], { | 141 ], { |
135 duration: animationTime, | 142 duration: animationTime, |
136 delay: 0 | 143 delay: 0 |
137 }); | 144 }); |
138 | 145 |
139 animation.onfinish = function(e) { | 146 animation.onfinish = function(e) { |
140 animation = null; | 147 animation = null; |
148 | |
141 // The <extensionoptions> element is ready to place back in the | 149 // The <extensionoptions> element is ready to place back in the |
142 // overlay. Make sure that it's sized to take up the full | 150 // overlay. Make sure that it's sized to take up the full width/height |
143 // width/height of the overlay. | 151 // of the overlay. |
144 overlayGuest.style.position = ''; | 152 overlayGuest.style.position = ''; |
145 overlayGuest.style.left = ''; | 153 overlayGuest.style.left = ''; |
146 overlayGuest.style.width = newWidth + 'px'; | 154 overlayGuest.style.width = newWidth + 'px'; |
147 overlayGuest.style.height = newHeight + 'px'; | 155 overlayGuest.style.height = newHeight + 'px'; |
156 | |
157 cr.dispatchSimpleEvent($('overlay'), 'animationFinished'); | |
148 }; | 158 }; |
149 }.bind(this); | 159 }.bind(this); |
150 | 160 |
151 // Move the <extensionoptions> off screen until the overlay is ready. | 161 // Move the <extensionoptions> off screen until the overlay is ready. |
152 overlayGuest.style.position = 'fixed'; | 162 overlayGuest.style.position = 'fixed'; |
153 overlayGuest.style.left = window.outerWidth + 'px'; | 163 overlayGuest.style.left = window.outerWidth + 'px'; |
154 // Begin rendering at the default dimensions. This is also necessary to | 164 // Begin rendering at the default dimensions. This is also necessary to |
155 // cancel any width/height set on a previous render. | 165 // cancel any width/height set on a previous render. |
156 // TODO(kalman): This causes a visual jag where the overlay guest shows | 166 // TODO(kalman): This causes a visual jag where the overlay guest shows |
157 // up briefly. It would be better to render this off-screen first, then | 167 // up briefly. It would be better to render this off-screen first, then |
(...skipping 15 matching lines...) Expand all Loading... | |
173 /** @type {HTMLDivElement} */($('extension-options-overlay')) : | 183 /** @type {HTMLDivElement} */($('extension-options-overlay')) : |
174 null); | 184 null); |
175 } | 185 } |
176 }; | 186 }; |
177 | 187 |
178 // Export | 188 // Export |
179 return { | 189 return { |
180 ExtensionOptionsOverlay: ExtensionOptionsOverlay | 190 ExtensionOptionsOverlay: ExtensionOptionsOverlay |
181 }; | 191 }; |
182 }); | 192 }); |
OLD | NEW |