Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(143)

Side by Side Diff: chrome/browser/resources/print_preview/search/destination_list.js

Issue 2939273002: DO NOT SUBMIT: what chrome/browser/resources/ could eventually look like with clang-format (Closed)
Patch Set: Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698