| 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 |