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 cr.define('print_preview', function() { | 5 cr.define('print_preview', function() { |
6 'use strict'; | 6 'use strict'; |
7 | 7 |
8 /** | 8 /** |
9 * Component that renders a destination item in a destination list. | 9 * Component that renders a destination item in a destination list. |
10 * @param {!cr.EventTarget} eventTarget Event target to dispatch selection | 10 * @param {!cr.EventTarget} eventTarget Event target to dispatch selection |
(...skipping 20 matching lines...) Expand all Loading... |
31 * @private | 31 * @private |
32 */ | 32 */ |
33 this.destination_ = destination; | 33 this.destination_ = destination; |
34 | 34 |
35 /** | 35 /** |
36 * Active filter query text. | 36 * Active filter query text. |
37 * @type {RegExp} | 37 * @type {RegExp} |
38 * @private | 38 * @private |
39 */ | 39 */ |
40 this.query_ = query; | 40 this.query_ = query; |
41 }; | 41 } |
42 | 42 |
43 /** | 43 /** |
44 * Event types dispatched by the destination list item. | 44 * Event types dispatched by the destination list item. |
45 * @enum {string} | 45 * @enum {string} |
46 */ | 46 */ |
47 DestinationListItem.EventType = { | 47 DestinationListItem.EventType = { |
48 // Dispatched to check the printer needs to be configured before activation. | 48 // Dispatched to check the printer needs to be configured before activation. |
49 CONFIGURE_REQUEST: 'print_preview.DestinationListItem.CONFIGURE_REQUEST', | 49 CONFIGURE_REQUEST: 'print_preview.DestinationListItem.CONFIGURE_REQUEST', |
50 // Dispatched when the list item is activated. | 50 // Dispatched when the list item is activated. |
51 SELECT: 'print_preview.DestinationListItem.SELECT', | 51 SELECT: 'print_preview.DestinationListItem.SELECT', |
(...skipping 16 matching lines...) Expand all Loading... |
68 print_preview.Component.prototype.enterDocument.call(this); | 68 print_preview.Component.prototype.enterDocument.call(this); |
69 this.tracker.add(this.getElement(), 'click', this.onActivate_.bind(this)); | 69 this.tracker.add(this.getElement(), 'click', this.onActivate_.bind(this)); |
70 this.tracker.add( | 70 this.tracker.add( |
71 this.getElement(), 'keydown', this.onKeyDown_.bind(this)); | 71 this.getElement(), 'keydown', this.onKeyDown_.bind(this)); |
72 this.tracker.add( | 72 this.tracker.add( |
73 this.getChildElement('.register-promo-button'), | 73 this.getChildElement('.register-promo-button'), |
74 'click', | 74 'click', |
75 this.onRegisterPromoClicked_.bind(this)); | 75 this.onRegisterPromoClicked_.bind(this)); |
76 }, | 76 }, |
77 | 77 |
78 /** @return {!print_preiew.Destination} */ | 78 /** @return {!print_preview.Destination} */ |
79 get destination() { | 79 get destination() { |
80 return this.destination_; | 80 return this.destination_; |
81 }, | 81 }, |
82 | 82 |
83 /** | 83 /** |
84 * Updates the list item UI state. | 84 * Updates the list item UI state. |
85 * @param {!print_preview.Destination} destination Destination data object | 85 * @param {!print_preview.Destination} destination Destination data object |
86 * to render. | 86 * to render. |
87 * @param {RegExp} query Active filter query. | 87 * @param {RegExp} query Active filter query. |
88 */ | 88 */ |
(...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
183 var extensionIconEl = this.getChildElement('.extension-icon'); | 183 var extensionIconEl = this.getChildElement('.extension-icon'); |
184 extensionIconEl.style.backgroundImage = '-webkit-image-set(' + | 184 extensionIconEl.style.backgroundImage = '-webkit-image-set(' + |
185 'url(chrome://extension-icon/' + | 185 'url(chrome://extension-icon/' + |
186 this.destination_.extensionId + '/24/1) 1x,' + | 186 this.destination_.extensionId + '/24/1) 1x,' + |
187 'url(chrome://extension-icon/' + | 187 'url(chrome://extension-icon/' + |
188 this.destination_.extensionId + '/48/1) 2x)'; | 188 this.destination_.extensionId + '/48/1) 2x)'; |
189 extensionIconEl.title = loadTimeData.getStringF( | 189 extensionIconEl.title = loadTimeData.getStringF( |
190 'extensionDestinationIconTooltip', | 190 'extensionDestinationIconTooltip', |
191 this.destination_.extensionName); | 191 this.destination_.extensionName); |
192 extensionIconEl.onclick = this.onExtensionIconClicked_.bind(this); | 192 extensionIconEl.onclick = this.onExtensionIconClicked_.bind(this); |
193 extensionIconEl.onkeydown = this.onExtensionIconKeyDown_.bind(this); | 193 extensionIconEl.onkeydown = /** @type {function(Event)} */( |
| 194 this.onExtensionIconKeyDown_.bind(this)); |
194 } | 195 } |
195 | 196 |
196 var extensionIndicatorEl = | 197 var extensionIndicatorEl = |
197 this.getChildElement('.extension-controlled-indicator'); | 198 this.getChildElement('.extension-controlled-indicator'); |
198 setIsVisible(extensionIndicatorEl, this.destination_.isExtension); | 199 setIsVisible(extensionIndicatorEl, this.destination_.isExtension); |
199 | 200 |
200 // Initialize the element which renders the destination's offline status. | 201 // Initialize the element which renders the destination's offline status. |
201 this.getElement().classList.toggle('stale', this.destination_.isOffline); | 202 this.getElement().classList.toggle('stale', this.destination_.isOffline); |
202 var offlineStatusEl = this.getChildElement('.offline-status'); | 203 var offlineStatusEl = this.getChildElement('.offline-status'); |
203 offlineStatusEl.textContent = this.destination_.offlineStatusText; | 204 offlineStatusEl.textContent = this.destination_.offlineStatusText; |
(...skipping 30 matching lines...) Expand all Loading... |
234 span.className = 'destination-list-item-query-highlight'; | 235 span.className = 'destination-list-item-query-highlight'; |
235 span.textContent = sections[i]; | 236 span.textContent = sections[i]; |
236 parent.appendChild(span); | 237 parent.appendChild(span); |
237 } | 238 } |
238 } | 239 } |
239 }, | 240 }, |
240 | 241 |
241 /** | 242 /** |
242 * Shows/Hides the configuring in progress message and starts/stops its | 243 * Shows/Hides the configuring in progress message and starts/stops its |
243 * animation accordingly. | 244 * animation accordingly. |
244 * @param {bool} show If the message and animation should be shown. | 245 * @param {boolean} show If the message and animation should be shown. |
245 * @private | 246 * @private |
246 */ | 247 */ |
247 updateConfiguringMessage_: function(show) { | 248 updateConfiguringMessage_: function(show) { |
248 setIsVisible( | 249 setIsVisible( |
249 this.getChildElement('.configuring-in-progress-text'), show); | 250 this.getChildElement('.configuring-in-progress-text'), show); |
250 this.getChildElement('.configuring-text-jumping-dots') | 251 this.getChildElement('.configuring-text-jumping-dots') |
251 .classList.toggle('jumping-dots', show); | 252 .classList.toggle('jumping-dots', show); |
252 }, | 253 }, |
253 | 254 |
254 /** | 255 /** |
(...skipping 25 matching lines...) Expand all Loading... |
280 print_preview.DestinationConnectionStatus.UNREGISTERED) { | 281 print_preview.DestinationConnectionStatus.UNREGISTERED) { |
281 var selectEvt = new Event(DestinationListItem.EventType.SELECT); | 282 var selectEvt = new Event(DestinationListItem.EventType.SELECT); |
282 selectEvt.destination = this.destination_; | 283 selectEvt.destination = this.destination_; |
283 this.eventTarget_.dispatchEvent(selectEvt); | 284 this.eventTarget_.dispatchEvent(selectEvt); |
284 } | 285 } |
285 }, | 286 }, |
286 | 287 |
287 /** | 288 /** |
288 * Called when the key is pressed on the destination item. Dispatches a | 289 * Called when the key is pressed on the destination item. Dispatches a |
289 * SELECT event when Enter is pressed. | 290 * SELECT event when Enter is pressed. |
290 * @param {KeyboardEvent} e Keyboard event to process. | 291 * @param {!KeyboardEvent} e Keyboard event to process. |
291 * @private | 292 * @private |
292 */ | 293 */ |
293 onKeyDown_: function(e) { | 294 onKeyDown_: function(e) { |
294 if (!hasKeyModifiers(e)) { | 295 if (!hasKeyModifiers(e)) { |
295 if (e.keyCode == 13) { | 296 if (e.keyCode == 13) { |
296 var activeElementTag = document.activeElement ? | 297 var activeElementTag = document.activeElement ? |
297 document.activeElement.tagName.toUpperCase() : ''; | 298 document.activeElement.tagName.toUpperCase() : ''; |
298 if (activeElementTag == 'LI') { | 299 if (activeElementTag == 'LI') { |
299 e.stopPropagation(); | 300 e.stopPropagation(); |
300 e.preventDefault(); | 301 e.preventDefault(); |
(...skipping 11 matching lines...) Expand all Loading... |
312 var promoClickedEvent = new Event( | 313 var promoClickedEvent = new Event( |
313 DestinationListItem.EventType.REGISTER_PROMO_CLICKED); | 314 DestinationListItem.EventType.REGISTER_PROMO_CLICKED); |
314 promoClickedEvent.destination = this.destination_; | 315 promoClickedEvent.destination = this.destination_; |
315 this.eventTarget_.dispatchEvent(promoClickedEvent); | 316 this.eventTarget_.dispatchEvent(promoClickedEvent); |
316 }, | 317 }, |
317 | 318 |
318 /** | 319 /** |
319 * Handles click and 'Enter' key down events for the extension icon element. | 320 * Handles click and 'Enter' key down events for the extension icon element. |
320 * It opens extensions page with the extension associated with the | 321 * It opens extensions page with the extension associated with the |
321 * destination highlighted. | 322 * destination highlighted. |
322 * @param {MouseEvent|KeyboardEvent} e The event to handle. | 323 * @param {Event} e The event to handle. |
323 * @private | 324 * @private |
324 */ | 325 */ |
325 onExtensionIconClicked_: function(e) { | 326 onExtensionIconClicked_: function(e) { |
326 e.stopPropagation(); | 327 e.stopPropagation(); |
327 window.open('chrome://extensions?id=' + this.destination_.extensionId); | 328 window.open('chrome://extensions?id=' + this.destination_.extensionId); |
328 }, | 329 }, |
329 | 330 |
330 /** | 331 /** |
331 * Handles key down event for the extensin icon element. Keys different than | 332 * Handles key down event for the extensin icon element. Keys different than |
332 * 'Enter' are ignored. | 333 * 'Enter' are ignored. |
333 * @param {KeyboardEvent} e The event to handle. | 334 * @param {!Event} e The event to handle. |
334 * @private | 335 * @private |
335 */ | 336 */ |
336 onExtensionIconKeyDown_: function(e) { | 337 onExtensionIconKeyDown_: function(e) { |
337 if (hasKeyModifiers(e)) | 338 if (hasKeyModifiers(e)) |
338 return; | 339 return; |
339 if (e.keyCode != 13 /* Enter */) | 340 if (e.keyCode != 13 /* Enter */) |
340 return; | 341 return; |
341 this.onExtensionIconClicked_(event); | 342 this.onExtensionIconClicked_(e); |
342 } | 343 } |
343 }; | 344 }; |
344 | 345 |
345 // Export | 346 // Export |
346 return { | 347 return { |
347 DestinationListItem: DestinationListItem | 348 DestinationListItem: DestinationListItem |
348 }; | 349 }; |
349 }); | 350 }); |
OLD | NEW |