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 displays a list of destinations with a heading, action link, | 9 * Component that displays a list of destinations with a heading, action link, |
10 * and "Show All..." button. An event is dispatched when the action link is | 10 * and "Show All..." button. An event is dispatched when the action link is |
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
138 * Gets estimated height of the destination list for the given number of | 138 * Gets estimated height of the destination list for the given number of |
139 * items. | 139 * items. |
140 * @param {number} numItems Number of items to render in the destination | 140 * @param {number} numItems Number of items to render in the destination |
141 * list. | 141 * list. |
142 * @return {number} Height (in pixels) of the destination list. | 142 * @return {number} Height (in pixels) of the destination list. |
143 */ | 143 */ |
144 getEstimatedHeightInPixels: function(numItems) { | 144 getEstimatedHeightInPixels: function(numItems) { |
145 numItems = Math.min(numItems, this.destinations_.length); | 145 numItems = Math.min(numItems, this.destinations_.length); |
146 var headerHeight = | 146 var headerHeight = |
147 this.getChildElement('.destination-list > header').offsetHeight; | 147 this.getChildElement('.destination-list > header').offsetHeight; |
148 return headerHeight + (numItems > 0 ? | 148 return headerHeight + |
149 numItems * DestinationList.HEIGHT_OF_ITEM_ : | 149 (numItems > 0 ? numItems * DestinationList.HEIGHT_OF_ITEM_ : |
150 // To account for "No destinations found" message. | 150 // To account for "No destinations found" message. |
151 DestinationList.HEIGHT_OF_ITEM_); | 151 DestinationList.HEIGHT_OF_ITEM_); |
152 }, | 152 }, |
153 | 153 |
154 /** | 154 /** |
155 * @return {Element} The element that contains this one. Used for height | 155 * @return {Element} The element that contains this one. Used for height |
156 * calculations. | 156 * calculations. |
157 */ | 157 */ |
158 getContainerElement: function() { | 158 getContainerElement: function() { |
159 return this.getElement().parentNode; | 159 return this.getElement().parentNode; |
160 }, | 160 }, |
161 | 161 |
(...skipping 12 matching lines...) Expand all Loading... |
174 // If this is the case, we will only show the "Show All" button and | 174 // If this is the case, we will only show the "Show All" button and |
175 // nothing else. Increment the short list size by one so that we can see | 175 // nothing else. Increment the short list size by one so that we can see |
176 // at least one print destination. | 176 // at least one print destination. |
177 size++; | 177 size++; |
178 } | 178 } |
179 this.setShortListSizeInternal(size); | 179 this.setShortListSizeInternal(size); |
180 }, | 180 }, |
181 | 181 |
182 /** @override */ | 182 /** @override */ |
183 createDom: function() { | 183 createDom: function() { |
184 this.setElementInternal(this.cloneTemplateInternal( | 184 this.setElementInternal( |
185 'destination-list-template')); | 185 this.cloneTemplateInternal('destination-list-template')); |
186 this.getChildElement('.title').textContent = this.title_; | 186 this.getChildElement('.title').textContent = this.title_; |
187 if (this.actionLinkLabel_) { | 187 if (this.actionLinkLabel_) { |
188 var actionLinkEl = this.getChildElement('.action-link'); | 188 var actionLinkEl = this.getChildElement('.action-link'); |
189 actionLinkEl.textContent = this.actionLinkLabel_; | 189 actionLinkEl.textContent = this.actionLinkLabel_; |
190 setIsVisible(actionLinkEl, true); | 190 setIsVisible(actionLinkEl, true); |
191 } | 191 } |
192 }, | 192 }, |
193 | 193 |
194 /** @override */ | 194 /** @override */ |
195 enterDocument: function() { | 195 enterDocument: function() { |
196 print_preview.Component.prototype.enterDocument.call(this); | 196 print_preview.Component.prototype.enterDocument.call(this); |
197 this.tracker.add( | 197 this.tracker.add( |
198 this.getChildElement('.action-link'), | 198 this.getChildElement('.action-link'), 'click', |
199 'click', | |
200 this.onActionLinkClick_.bind(this)); | 199 this.onActionLinkClick_.bind(this)); |
201 this.tracker.add( | 200 this.tracker.add( |
202 this.getChildElement('.show-all-button'), | 201 this.getChildElement('.show-all-button'), 'click', |
203 'click', | |
204 this.setIsShowAll.bind(this, true)); | 202 this.setIsShowAll.bind(this, true)); |
205 }, | 203 }, |
206 | 204 |
207 /** | 205 /** |
208 * Updates the destinations to render in the destination list. | 206 * Updates the destinations to render in the destination list. |
209 * @param {!Array<print_preview.Destination>} destinations Destinations to | 207 * @param {!Array<print_preview.Destination>} destinations Destinations to |
210 * render. | 208 * render. |
211 */ | 209 */ |
212 updateDestinations: function(destinations) { | 210 updateDestinations: function(destinations) { |
213 this.destinations_ = destinations; | 211 this.destinations_ = destinations; |
(...skipping 11 matching lines...) Expand all Loading... |
225 }, | 223 }, |
226 | 224 |
227 /** | 225 /** |
228 * @param {string} destinationId The ID of the destination. | 226 * @param {string} destinationId The ID of the destination. |
229 * @return {?print_preview.DestinationListItem} The found destination list | 227 * @return {?print_preview.DestinationListItem} The found destination list |
230 * item or null if not found. | 228 * item or null if not found. |
231 */ | 229 */ |
232 getDestinationItem: function(destinationId) { | 230 getDestinationItem: function(destinationId) { |
233 return this.listItems_.find(function(listItem) { | 231 return this.listItems_.find(function(listItem) { |
234 return listItem.destination.id == destinationId; | 232 return listItem.destination.id == destinationId; |
235 }) || null; | 233 }) || |
| 234 null; |
236 }, | 235 }, |
237 | 236 |
238 /** | 237 /** |
239 * @param {string} text Text to set the action link to. | 238 * @param {string} text Text to set the action link to. |
240 * @protected | 239 * @protected |
241 */ | 240 */ |
242 setActionLinkTextInternal: function(text) { | 241 setActionLinkTextInternal: function(text) { |
243 this.actionLinkLabel_ = text; | 242 this.actionLinkLabel_ = text; |
244 this.getChildElement('.action-link').textContent = text; | 243 this.getChildElement('.action-link').textContent = text; |
245 }, | 244 }, |
(...skipping 23 matching lines...) Expand all Loading... |
269 }, | 268 }, |
270 | 269 |
271 /** | 270 /** |
272 * Renders all destinations in the given list. | 271 * Renders all destinations in the given list. |
273 * @param {!Array<print_preview.Destination>} destinations List of | 272 * @param {!Array<print_preview.Destination>} destinations List of |
274 * destinations to render. | 273 * destinations to render. |
275 * @private | 274 * @private |
276 */ | 275 */ |
277 renderDestinationsList_: function(destinations) { | 276 renderDestinationsList_: function(destinations) { |
278 // Update item counters, footers and other misc controls. | 277 // Update item counters, footers and other misc controls. |
279 setIsVisible(this.getChildElement('.no-destinations-message'), | 278 setIsVisible( |
280 destinations.length == 0); | 279 this.getChildElement('.no-destinations-message'), |
| 280 destinations.length == 0); |
281 setIsVisible(this.getChildElement('.destination-list > footer'), false); | 281 setIsVisible(this.getChildElement('.destination-list > footer'), false); |
282 var numItems = destinations.length; | 282 var numItems = destinations.length; |
283 if (destinations.length > this.shortListSize_ && !this.isShowAll_) { | 283 if (destinations.length > this.shortListSize_ && !this.isShowAll_) { |
284 numItems = this.shortListSize_ - 1; | 284 numItems = this.shortListSize_ - 1; |
285 this.getChildElement('.total').textContent = | 285 this.getChildElement('.total').textContent = |
286 loadTimeData.getStringF('destinationCount', destinations.length); | 286 loadTimeData.getStringF('destinationCount', destinations.length); |
287 setIsVisible(this.getChildElement('.destination-list > footer'), true); | 287 setIsVisible(this.getChildElement('.destination-list > footer'), true); |
288 } | 288 } |
289 // Remove obsolete list items (those with no corresponding destinations). | 289 // Remove obsolete list items (those with no corresponding destinations). |
290 this.listItems_ = this.listItems_.filter(function(item) { | 290 this.listItems_ = this.listItems_.filter(function(item) { |
(...skipping 11 matching lines...) Expand all Loading... |
302 var isVisible = visibleListItems.hasOwnProperty(item.destination.id); | 302 var isVisible = visibleListItems.hasOwnProperty(item.destination.id); |
303 setIsVisible(item.getElement(), isVisible); | 303 setIsVisible(item.getElement(), isVisible); |
304 if (isVisible) | 304 if (isVisible) |
305 visibleListItems[item.destination.id] = item; | 305 visibleListItems[item.destination.id] = item; |
306 }); | 306 }); |
307 // Update the existing items, add the new ones (preserve the focused one). | 307 // Update the existing items, add the new ones (preserve the focused one). |
308 var listEl = this.getChildElement('.destination-list > ul'); | 308 var listEl = this.getChildElement('.destination-list > ul'); |
309 // We need to use activeElement instead of :focus selector, which doesn't | 309 // We need to use activeElement instead of :focus selector, which doesn't |
310 // work in an inactive page. See crbug.com/723579. | 310 // work in an inactive page. See crbug.com/723579. |
311 var focusedEl = listEl.contains(document.activeElement) ? | 311 var focusedEl = listEl.contains(document.activeElement) ? |
312 document.activeElement : null; | 312 document.activeElement : |
| 313 null; |
313 for (var i = 0; i < numItems; i++) { | 314 for (var i = 0; i < numItems; i++) { |
314 var destination = assert(destinations[i]); | 315 var destination = assert(destinations[i]); |
315 var listItem = visibleListItems[destination.id]; | 316 var listItem = visibleListItems[destination.id]; |
316 if (listItem) { | 317 if (listItem) { |
317 // Destination ID is the same, but it can be registered to a different | 318 // Destination ID is the same, but it can be registered to a different |
318 // user account, hence passing it to the item update. | 319 // user account, hence passing it to the item update. |
319 this.updateListItem_(listEl, listItem, focusedEl, destination); | 320 this.updateListItem_(listEl, listItem, focusedEl, destination); |
320 } else { | 321 } else { |
321 this.renderListItem_(listEl, destination); | 322 this.renderListItem_(listEl, destination); |
322 } | 323 } |
323 } | 324 } |
324 }, | 325 }, |
325 | 326 |
326 /** | 327 /** |
327 * @param {Element} listEl List element. | 328 * @param {Element} listEl List element. |
328 * @param {!print_preview.DestinationListItem} listItem List item to update. | 329 * @param {!print_preview.DestinationListItem} listItem List item to update. |
329 * @param {Element} focusedEl Currently focused element within the listEl. | 330 * @param {Element} focusedEl Currently focused element within the listEl. |
330 * @param {!print_preview.Destination} destination Destination to render. | 331 * @param {!print_preview.Destination} destination Destination to render. |
331 * @private | 332 * @private |
332 */ | 333 */ |
333 updateListItem_: function(listEl, listItem, focusedEl, destination) { | 334 updateListItem_: function(listEl, listItem, focusedEl, destination) { |
334 listItem.update(destination, this.query_); | 335 listItem.update(destination, this.query_); |
335 | 336 |
336 var itemEl = listItem.getElement(); | 337 var itemEl = listItem.getElement(); |
337 // Preserve focused inner element, if there's one. | 338 // Preserve focused inner element, if there's one. |
338 var focusedInnerEl = focusedEl && itemEl.contains(focusedEl) ? | 339 var focusedInnerEl = |
339 focusedEl : null; | 340 focusedEl && itemEl.contains(focusedEl) ? focusedEl : null; |
340 if (focusedEl) | 341 if (focusedEl) |
341 itemEl.classList.add('moving'); | 342 itemEl.classList.add('moving'); |
342 // Move it to the end of the list. | 343 // Move it to the end of the list. |
343 listEl.appendChild(itemEl); | 344 listEl.appendChild(itemEl); |
344 // Restore focus. | 345 // Restore focus. |
345 if (focusedEl) { | 346 if (focusedEl) { |
346 if (focusedEl == itemEl || focusedEl == focusedInnerEl) | 347 if (focusedEl == itemEl || focusedEl == focusedInnerEl) |
347 focusedEl.focus(); | 348 focusedEl.focus(); |
348 itemEl.classList.remove('moving'); | 349 itemEl.classList.remove('moving'); |
349 } | 350 } |
(...skipping 11 matching lines...) Expand all Loading... |
361 listItem.render(assert(listEl)); | 362 listItem.render(assert(listEl)); |
362 this.listItems_.push(listItem); | 363 this.listItems_.push(listItem); |
363 }, | 364 }, |
364 | 365 |
365 /** | 366 /** |
366 * Called when the action link is clicked. Dispatches an | 367 * Called when the action link is clicked. Dispatches an |
367 * ACTION_LINK_ACTIVATED event. | 368 * ACTION_LINK_ACTIVATED event. |
368 * @private | 369 * @private |
369 */ | 370 */ |
370 onActionLinkClick_: function() { | 371 onActionLinkClick_: function() { |
371 cr.dispatchSimpleEvent(this, | 372 cr.dispatchSimpleEvent( |
372 DestinationList.EventType.ACTION_LINK_ACTIVATED); | 373 this, DestinationList.EventType.ACTION_LINK_ACTIVATED); |
373 } | 374 } |
374 }; | 375 }; |
375 | 376 |
376 // Export | 377 // Export |
377 return { | 378 return {DestinationList: DestinationList}; |
378 DestinationList: DestinationList | |
379 }; | |
380 }); | 379 }); |
OLD | NEW |