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 |