| 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 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 51 SELECT: 'print_preview.DestinationListItem.SELECT', | 51 SELECT: 'print_preview.DestinationListItem.SELECT', |
| 52 REGISTER_PROMO_CLICKED: | 52 REGISTER_PROMO_CLICKED: |
| 53 'print_preview.DestinationListItem.REGISTER_PROMO_CLICKED' | 53 'print_preview.DestinationListItem.REGISTER_PROMO_CLICKED' |
| 54 }; | 54 }; |
| 55 | 55 |
| 56 DestinationListItem.prototype = { | 56 DestinationListItem.prototype = { |
| 57 __proto__: print_preview.Component.prototype, | 57 __proto__: print_preview.Component.prototype, |
| 58 | 58 |
| 59 /** @override */ | 59 /** @override */ |
| 60 createDom: function() { | 60 createDom: function() { |
| 61 this.setElementInternal(this.cloneTemplateInternal( | 61 this.setElementInternal( |
| 62 'destination-list-item-template')); | 62 this.cloneTemplateInternal('destination-list-item-template')); |
| 63 this.updateUi_(); | 63 this.updateUi_(); |
| 64 }, | 64 }, |
| 65 | 65 |
| 66 /** @override */ | 66 /** @override */ |
| 67 enterDocument: function() { | 67 enterDocument: function() { |
| 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'), 'click', |
| 74 'click', | |
| 75 this.onRegisterPromoClicked_.bind(this)); | 74 this.onRegisterPromoClicked_.bind(this)); |
| 76 }, | 75 }, |
| 77 | 76 |
| 78 /** @return {!print_preview.Destination} */ | 77 /** @return {!print_preview.Destination} */ |
| 79 get destination() { | 78 get destination() { |
| 80 return this.destination_; | 79 return this.destination_; |
| 81 }, | 80 }, |
| 82 | 81 |
| 83 /** | 82 /** |
| 84 * Updates the list item UI state. | 83 * Updates the list item UI state. |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 123 * @param response {!print_preview.PrinterSetupResponse} | 122 * @param response {!print_preview.PrinterSetupResponse} |
| 124 */ | 123 */ |
| 125 onConfigureResolved: function(response) { | 124 onConfigureResolved: function(response) { |
| 126 assert(response.printerId == this.destination_.id); | 125 assert(response.printerId == this.destination_.id); |
| 127 if (response.success) { | 126 if (response.success) { |
| 128 this.updateConfiguringMessage_(false); | 127 this.updateConfiguringMessage_(false); |
| 129 this.destination_.capabilities = response.capabilities; | 128 this.destination_.capabilities = response.capabilities; |
| 130 this.onDestinationActivated_(); | 129 this.onDestinationActivated_(); |
| 131 } else { | 130 } else { |
| 132 this.updateConfiguringMessage_(false); | 131 this.updateConfiguringMessage_(false); |
| 133 setIsVisible( | 132 setIsVisible(this.getChildElement('.configuring-failed-text'), true); |
| 134 this.getChildElement('.configuring-failed-text'), true); | |
| 135 } | 133 } |
| 136 }, | 134 }, |
| 137 | 135 |
| 138 /** | 136 /** |
| 139 * Initializes the element with destination's info. | 137 * Initializes the element with destination's info. |
| 140 * @private | 138 * @private |
| 141 */ | 139 */ |
| 142 updateUi_: function() { | 140 updateUi_: function() { |
| 143 var iconImg = this.getChildElement('.destination-list-item-icon'); | 141 var iconImg = this.getChildElement('.destination-list-item-icon'); |
| 144 iconImg.src = this.destination_.iconUrl; | 142 iconImg.src = this.destination_.iconUrl; |
| (...skipping 30 matching lines...) Expand all Loading... |
| 175 extensionNameEl.title = this.destination_.extensionName; | 173 extensionNameEl.title = this.destination_.extensionName; |
| 176 if (this.query_) { | 174 if (this.query_) { |
| 177 extensionNameEl.textContent = ''; | 175 extensionNameEl.textContent = ''; |
| 178 this.addTextWithHighlight_(extensionNameEl, extensionName); | 176 this.addTextWithHighlight_(extensionNameEl, extensionName); |
| 179 } else { | 177 } else { |
| 180 extensionNameEl.textContent = this.destination_.extensionName; | 178 extensionNameEl.textContent = this.destination_.extensionName; |
| 181 } | 179 } |
| 182 | 180 |
| 183 var extensionIconEl = this.getChildElement('.extension-icon'); | 181 var extensionIconEl = this.getChildElement('.extension-icon'); |
| 184 extensionIconEl.style.backgroundImage = '-webkit-image-set(' + | 182 extensionIconEl.style.backgroundImage = '-webkit-image-set(' + |
| 185 'url(chrome://extension-icon/' + | 183 'url(chrome://extension-icon/' + this.destination_.extensionId + |
| 186 this.destination_.extensionId + '/24/1) 1x,' + | 184 '/24/1) 1x,' + |
| 187 'url(chrome://extension-icon/' + | 185 'url(chrome://extension-icon/' + this.destination_.extensionId + |
| 188 this.destination_.extensionId + '/48/1) 2x)'; | 186 '/48/1) 2x)'; |
| 189 extensionIconEl.title = loadTimeData.getStringF( | 187 extensionIconEl.title = loadTimeData.getStringF( |
| 190 'extensionDestinationIconTooltip', | 188 'extensionDestinationIconTooltip', this.destination_.extensionName); |
| 191 this.destination_.extensionName); | |
| 192 extensionIconEl.onclick = this.onExtensionIconClicked_.bind(this); | 189 extensionIconEl.onclick = this.onExtensionIconClicked_.bind(this); |
| 193 extensionIconEl.onkeydown = /** @type {function(Event)} */( | 190 extensionIconEl.onkeydown = /** @type {function(Event)} */ ( |
| 194 this.onExtensionIconKeyDown_.bind(this)); | 191 this.onExtensionIconKeyDown_.bind(this)); |
| 195 } | 192 } |
| 196 | 193 |
| 197 var extensionIndicatorEl = | 194 var extensionIndicatorEl = |
| 198 this.getChildElement('.extension-controlled-indicator'); | 195 this.getChildElement('.extension-controlled-indicator'); |
| 199 setIsVisible(extensionIndicatorEl, this.destination_.isExtension); | 196 setIsVisible(extensionIndicatorEl, this.destination_.isExtension); |
| 200 | 197 |
| 201 // Initialize the element which renders the destination's offline status. | 198 // Initialize the element which renders the destination's offline status. |
| 202 this.getElement().classList.toggle('stale', this.destination_.isOffline); | 199 this.getElement().classList.toggle('stale', this.destination_.isOffline); |
| 203 var offlineStatusEl = this.getChildElement('.offline-status'); | 200 var offlineStatusEl = this.getChildElement('.offline-status'); |
| 204 offlineStatusEl.textContent = this.destination_.offlineStatusText; | 201 offlineStatusEl.textContent = this.destination_.offlineStatusText; |
| 205 setIsVisible(offlineStatusEl, this.destination_.isOffline); | 202 setIsVisible(offlineStatusEl, this.destination_.isOffline); |
| 206 | 203 |
| 207 // Initialize registration promo element for Privet unregistered printers. | 204 // Initialize registration promo element for Privet unregistered printers. |
| 208 setIsVisible( | 205 setIsVisible( |
| 209 this.getChildElement('.register-promo'), | 206 this.getChildElement('.register-promo'), |
| 210 this.destination_.connectionStatus == | 207 this.destination_.connectionStatus == |
| 211 print_preview.DestinationConnectionStatus.UNREGISTERED); | 208 print_preview.DestinationConnectionStatus.UNREGISTERED); |
| 212 | 209 |
| 213 if (cr.isChromeOS) { | 210 if (cr.isChromeOS) { |
| 214 // Reset the configuring messages for CUPS printers. | 211 // Reset the configuring messages for CUPS printers. |
| 215 this.updateConfiguringMessage_(false); | 212 this.updateConfiguringMessage_(false); |
| 216 setIsVisible( | 213 setIsVisible(this.getChildElement('.configuring-failed-text'), false); |
| 217 this.getChildElement('.configuring-failed-text'), false); | |
| 218 } | 214 } |
| 219 }, | 215 }, |
| 220 | 216 |
| 221 /** | 217 /** |
| 222 * Adds text to parent element wrapping search query matches in highlighted | 218 * Adds text to parent element wrapping search query matches in highlighted |
| 223 * spans. | 219 * spans. |
| 224 * @param {!Element} parent Element to build the text in. | 220 * @param {!Element} parent Element to build the text in. |
| 225 * @param {string} text The text string to highlight segments in. | 221 * @param {string} text The text string to highlight segments in. |
| 226 * @private | 222 * @private |
| 227 */ | 223 */ |
| (...skipping 11 matching lines...) Expand all Loading... |
| 239 } | 235 } |
| 240 }, | 236 }, |
| 241 | 237 |
| 242 /** | 238 /** |
| 243 * Shows/Hides the configuring in progress message and starts/stops its | 239 * Shows/Hides the configuring in progress message and starts/stops its |
| 244 * animation accordingly. | 240 * animation accordingly. |
| 245 * @param {boolean} show If the message and animation should be shown. | 241 * @param {boolean} show If the message and animation should be shown. |
| 246 * @private | 242 * @private |
| 247 */ | 243 */ |
| 248 updateConfiguringMessage_: function(show) { | 244 updateConfiguringMessage_: function(show) { |
| 249 setIsVisible( | 245 setIsVisible(this.getChildElement('.configuring-in-progress-text'), show); |
| 250 this.getChildElement('.configuring-in-progress-text'), show); | |
| 251 this.getChildElement('.configuring-text-jumping-dots') | 246 this.getChildElement('.configuring-text-jumping-dots') |
| 252 .classList.toggle('jumping-dots', show); | 247 .classList.toggle('jumping-dots', show); |
| 253 }, | 248 }, |
| 254 | 249 |
| 255 /** | 250 /** |
| 256 * Called when the destination item is activated. Check if the printer needs | 251 * Called when the destination item is activated. Check if the printer needs |
| 257 * to be set up first before activation. | 252 * to be set up first before activation. |
| 258 * @private | 253 * @private |
| 259 */ | 254 */ |
| 260 onActivate_: function() { | 255 onActivate_: function() { |
| (...skipping 10 matching lines...) Expand all Loading... |
| 271 this.eventTarget_.dispatchEvent(configureEvent); | 266 this.eventTarget_.dispatchEvent(configureEvent); |
| 272 }, | 267 }, |
| 273 | 268 |
| 274 /** | 269 /** |
| 275 * Called when the destination has been resolved successfully and needs to | 270 * Called when the destination has been resolved successfully and needs to |
| 276 * be activated. Dispatches a SELECT event on the given event target. | 271 * be activated. Dispatches a SELECT event on the given event target. |
| 277 * @private | 272 * @private |
| 278 */ | 273 */ |
| 279 onDestinationActivated_: function() { | 274 onDestinationActivated_: function() { |
| 280 if (this.destination_.connectionStatus != | 275 if (this.destination_.connectionStatus != |
| 281 print_preview.DestinationConnectionStatus.UNREGISTERED) { | 276 print_preview.DestinationConnectionStatus.UNREGISTERED) { |
| 282 var selectEvt = new Event(DestinationListItem.EventType.SELECT); | 277 var selectEvt = new Event(DestinationListItem.EventType.SELECT); |
| 283 selectEvt.destination = this.destination_; | 278 selectEvt.destination = this.destination_; |
| 284 this.eventTarget_.dispatchEvent(selectEvt); | 279 this.eventTarget_.dispatchEvent(selectEvt); |
| 285 } | 280 } |
| 286 }, | 281 }, |
| 287 | 282 |
| 288 /** | 283 /** |
| 289 * Called when the key is pressed on the destination item. Dispatches a | 284 * Called when the key is pressed on the destination item. Dispatches a |
| 290 * SELECT event when Enter is pressed. | 285 * SELECT event when Enter is pressed. |
| 291 * @param {!KeyboardEvent} e Keyboard event to process. | 286 * @param {!KeyboardEvent} e Keyboard event to process. |
| 292 * @private | 287 * @private |
| 293 */ | 288 */ |
| 294 onKeyDown_: function(e) { | 289 onKeyDown_: function(e) { |
| 295 if (!hasKeyModifiers(e)) { | 290 if (!hasKeyModifiers(e)) { |
| 296 if (e.keyCode == 13) { | 291 if (e.keyCode == 13) { |
| 297 var activeElementTag = document.activeElement ? | 292 var activeElementTag = document.activeElement ? |
| 298 document.activeElement.tagName.toUpperCase() : ''; | 293 document.activeElement.tagName.toUpperCase() : |
| 294 ''; |
| 299 if (activeElementTag == 'LI') { | 295 if (activeElementTag == 'LI') { |
| 300 e.stopPropagation(); | 296 e.stopPropagation(); |
| 301 e.preventDefault(); | 297 e.preventDefault(); |
| 302 this.onActivate_(); | 298 this.onActivate_(); |
| 303 } | 299 } |
| 304 } | 300 } |
| 305 } | 301 } |
| 306 }, | 302 }, |
| 307 | 303 |
| 308 /** | 304 /** |
| 309 * Called when the registration promo is clicked. | 305 * Called when the registration promo is clicked. |
| 310 * @private | 306 * @private |
| 311 */ | 307 */ |
| 312 onRegisterPromoClicked_: function() { | 308 onRegisterPromoClicked_: function() { |
| 313 var promoClickedEvent = new Event( | 309 var promoClickedEvent = |
| 314 DestinationListItem.EventType.REGISTER_PROMO_CLICKED); | 310 new Event(DestinationListItem.EventType.REGISTER_PROMO_CLICKED); |
| 315 promoClickedEvent.destination = this.destination_; | 311 promoClickedEvent.destination = this.destination_; |
| 316 this.eventTarget_.dispatchEvent(promoClickedEvent); | 312 this.eventTarget_.dispatchEvent(promoClickedEvent); |
| 317 }, | 313 }, |
| 318 | 314 |
| 319 /** | 315 /** |
| 320 * Handles click and 'Enter' key down events for the extension icon element. | 316 * Handles click and 'Enter' key down events for the extension icon element. |
| 321 * It opens extensions page with the extension associated with the | 317 * It opens extensions page with the extension associated with the |
| 322 * destination highlighted. | 318 * destination highlighted. |
| 323 * @param {Event} e The event to handle. | 319 * @param {Event} e The event to handle. |
| 324 * @private | 320 * @private |
| (...skipping 12 matching lines...) Expand all Loading... |
| 337 onExtensionIconKeyDown_: function(e) { | 333 onExtensionIconKeyDown_: function(e) { |
| 338 if (hasKeyModifiers(e)) | 334 if (hasKeyModifiers(e)) |
| 339 return; | 335 return; |
| 340 if (e.keyCode != 13 /* Enter */) | 336 if (e.keyCode != 13 /* Enter */) |
| 341 return; | 337 return; |
| 342 this.onExtensionIconClicked_(e); | 338 this.onExtensionIconClicked_(e); |
| 343 } | 339 } |
| 344 }; | 340 }; |
| 345 | 341 |
| 346 // Export | 342 // Export |
| 347 return { | 343 return {DestinationListItem: DestinationListItem}; |
| 348 DestinationListItem: DestinationListItem | |
| 349 }; | |
| 350 }); | 344 }); |
| OLD | NEW |