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