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
3 // found in the LICENSE file.
5 cr.define('print_preview', function() {
9 * Component used for searching for a print destination.
10 * This is a modal dialog that allows the user to search and select a
11 * destination to print to. When a destination is selected, it is written to
12 * the destination store.
13 * @param {!print_preview.DestinationStore} destinationStore Data store
14 * containing the destinations to search through.
15 * @param {!print_preview.InvitationStore} invitationStore Data store
16 * holding printer sharing invitations.
17 * @param {!print_preview.UserInfo} userInfo Event target that contains
18 * information about the logged in user.
20 * @extends {print_preview.Overlay}
22 function DestinationSearch(destinationStore, invitationStore, userInfo) {
23 print_preview.Overlay.call(this);
26 * Data store containing the destinations to search through.
27 * @type {!print_preview.DestinationStore}
30 this.destinationStore_ = destinationStore;
33 * Data store holding printer sharing invitations.
34 * @type {!print_preview.DestinationStore}
37 this.invitationStore_ = invitationStore;
40 * Event target that contains information about the logged in user.
41 * @type {!print_preview.UserInfo}
44 this.userInfo_ = userInfo;
47 * Currently displayed printer sharing invitation.
48 * @type {print_preview.Invitation}
51 this.invitation_ = null;
54 * Used to record usage statistics.
55 * @type {!print_preview.DestinationSearchMetricsContext}
58 this.metrics_ = new print_preview.DestinationSearchMetricsContext();
61 * Whether or not a UMA histogram for the register promo being shown was
66 this.registerPromoShownMetricRecorded_ = false;
69 * Search box used to search through the destination lists.
70 * @type {!print_preview.SearchBox}
73 this.searchBox_ = new print_preview.SearchBox(
74 loadTimeData.getString('searchBoxPlaceholder'));
75 this.addChild(this.searchBox_);
78 * Destination list containing recent destinations.
79 * @type {!print_preview.DestinationList}
82 this.recentList_ = new print_preview.RecentDestinationList(this);
83 this.addChild(this.recentList_);
86 * Destination list containing local destinations.
87 * @type {!print_preview.DestinationList}
90 this.localList_ = new print_preview.DestinationList(
92 loadTimeData.getString('localDestinationsTitle'),
93 cr.isChromeOS ? null : loadTimeData.getString('manage'));
94 this.addChild(this.localList_);
97 * Destination list containing cloud destinations.
98 * @type {!print_preview.DestinationList}
101 this.cloudList_ = new print_preview.CloudDestinationList(this);
102 this.addChild(this.cloudList_);
106 * Event types dispatched by the component.
109 DestinationSearch.EventType = {
110 // Dispatched when user requests to sign-in into another Google account.
111 ADD_ACCOUNT: 'print_preview.DestinationSearch.ADD_ACCOUNT',
113 // Dispatched when the user requests to manage their cloud destinations.
114 MANAGE_CLOUD_DESTINATIONS:
115 'print_preview.DestinationSearch.MANAGE_CLOUD_DESTINATIONS',
117 // Dispatched when the user requests to manage their local destinations.
118 MANAGE_LOCAL_DESTINATIONS:
119 'print_preview.DestinationSearch.MANAGE_LOCAL_DESTINATIONS',
121 // Dispatched when the user requests to sign-in to their Google account.
122 SIGN_IN: 'print_preview.DestinationSearch.SIGN_IN'
126 * Padding at the bottom of a destination list in pixels.
131 DestinationSearch.LIST_BOTTOM_PADDING_ = 18;
134 * Number of unregistered destinations that may be promoted to the top.
139 DestinationSearch.MAX_PROMOTED_UNREGISTERED_PRINTERS_ = 2;
141 DestinationSearch.prototype = {
142 __proto__: print_preview.Overlay.prototype,
145 onSetVisibleInternal: function(isVisible) {
147 this.searchBox_.focus();
148 if (getIsVisible(this.getChildElement('.cloudprint-promo'))) {
149 this.metrics_.record(
150 print_preview.Metrics.DestinationSearchBucket.SIGNIN_PROMPT);
152 if (this.userInfo_.initialized)
153 this.onUsersChanged_();
155 this.metrics_.record(
156 print_preview.Metrics.DestinationSearchBucket.DESTINATION_SHOWN);
158 this.destinationStore_.startLoadAllDestinations();
159 this.invitationStore_.startLoadingInvitations();
161 // Collapse all destination lists
162 this.localList_.setIsShowAll(false);
163 this.cloudList_.setIsShowAll(false);
169 onCancelInternal: function() {
170 this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
171 DESTINATION_CLOSED_UNCHANGED);
174 /** Shows the Google Cloud Print promotion banner. */
175 showCloudPrintPromo: function() {
176 setIsVisible(this.getChildElement('.cloudprint-promo'), true);
177 if (this.getIsVisible()) {
178 this.metrics_.record(
179 print_preview.Metrics.DestinationSearchBucket.SIGNIN_PROMPT);
185 enterDocument: function() {
186 print_preview.Overlay.prototype.enterDocument.call(this);
189 this.getChildElement('.account-select'),
191 this.onAccountChange_.bind(this));
194 this.getChildElement('.sign-in'),
196 this.onSignInActivated_.bind(this));
199 this.getChildElement('.invitation-accept-button'),
201 this.onInvitationProcessButtonClick_.bind(this, true /*accept*/));
203 this.getChildElement('.invitation-reject-button'),
205 this.onInvitationProcessButtonClick_.bind(this, false /*accept*/));
208 this.getChildElement('.cloudprint-promo > .close-button'),
210 this.onCloudprintPromoCloseButtonClick_.bind(this));
213 print_preview.SearchBox.EventType.SEARCH,
214 this.onSearch_.bind(this));
217 print_preview.DestinationListItem.EventType.SELECT,
218 this.onDestinationSelect_.bind(this));
221 print_preview.DestinationListItem.EventType.REGISTER_PROMO_CLICKED,
223 this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
224 REGISTER_PROMO_SELECTED);
228 this.destinationStore_,
229 print_preview.DestinationStore.EventType.DESTINATIONS_INSERTED,
230 this.onDestinationsInserted_.bind(this));
232 this.destinationStore_,
233 print_preview.DestinationStore.EventType.DESTINATION_SELECT,
234 this.onDestinationStoreSelect_.bind(this));
236 this.destinationStore_,
237 print_preview.DestinationStore.EventType.DESTINATION_SEARCH_STARTED,
238 this.updateThrobbers_.bind(this));
240 this.destinationStore_,
241 print_preview.DestinationStore.EventType.DESTINATION_SEARCH_DONE,
242 this.onDestinationSearchDone_.bind(this));
245 this.invitationStore_,
246 print_preview.InvitationStore.EventType.INVITATION_SEARCH_DONE,
247 this.updateInvitations_.bind(this));
249 this.invitationStore_,
250 print_preview.InvitationStore.EventType.INVITATION_PROCESSED,
251 this.updateInvitations_.bind(this));
255 print_preview.DestinationList.EventType.ACTION_LINK_ACTIVATED,
256 this.onManageLocalDestinationsActivated_.bind(this));
259 print_preview.DestinationList.EventType.ACTION_LINK_ACTIVATED,
260 this.onManageCloudDestinationsActivated_.bind(this));
264 print_preview.UserInfo.EventType.USERS_CHANGED,
265 this.onUsersChanged_.bind(this));
267 this.tracker.add(window, 'resize', this.onWindowResize_.bind(this));
269 this.updateThrobbers_();
271 // Render any destinations already in the store.
272 this.renderDestinations_();
276 decorateInternal: function() {
277 this.searchBox_.render(this.getChildElement('.search-box-container'));
278 this.recentList_.render(this.getChildElement('.recent-list'));
279 this.localList_.render(this.getChildElement('.local-list'));
280 this.cloudList_.render(this.getChildElement('.cloud-list'));
281 this.getChildElement('.promo-text').innerHTML = loadTimeData.getStringF(
282 'cloudPrintPromotion',
283 '<span class="sign-in link-button">',
285 this.getChildElement('.account-select-label').textContent =
286 loadTimeData.getString('accountSelectTitle');
290 * @return {number} Height available for destination lists, in pixels.
293 getAvailableListsHeight_: function() {
294 var elStyle = window.getComputedStyle(this.getElement());
295 return this.getElement().offsetHeight -
296 parseInt(elStyle.getPropertyValue('padding-top')) -
297 parseInt(elStyle.getPropertyValue('padding-bottom')) -
298 this.getChildElement('.lists').offsetTop -
299 this.getChildElement('.invitation-container').offsetHeight -
300 this.getChildElement('.cloudprint-promo').offsetHeight;
304 * Filters all destination lists with the given query.
305 * @param {RegExp} query Query to filter destination lists by.
308 filterLists_: function(query) {
309 this.recentList_.updateSearchQuery(query);
310 this.localList_.updateSearchQuery(query);
311 this.cloudList_.updateSearchQuery(query);
315 * Resets the search query.
318 resetSearch_: function() {
319 this.searchBox_.setQuery(null);
320 this.filterLists_(null);
324 * Renders all of the destinations in the destination store.
327 renderDestinations_: function() {
328 var recentDestinations = [];
329 var localDestinations = [];
330 var cloudDestinations = [];
331 var unregisteredCloudDestinations = [];
334 this.destinationStore_.destinations(this.userInfo_.activeUser);
335 destinations.forEach(function(destination) {
336 if (destination.isRecent) {
337 recentDestinations.push(destination);
339 if (destination.isLocal) {
340 localDestinations.push(destination);
342 if (destination.connectionStatus ==
343 print_preview.Destination.ConnectionStatus.UNREGISTERED) {
344 unregisteredCloudDestinations.push(destination);
346 cloudDestinations.push(destination);
351 if (unregisteredCloudDestinations.length != 0 &&
352 !this.registerPromoShownMetricRecorded_) {
353 this.metrics_.record(
354 print_preview.Metrics.DestinationSearchBucket.REGISTER_PROMO_SHOWN);
355 this.registerPromoShownMetricRecorded_ = true;
358 var finalCloudDestinations = unregisteredCloudDestinations.slice(
359 0, DestinationSearch.MAX_PROMOTED_UNREGISTERED_PRINTERS_).concat(
361 unregisteredCloudDestinations.slice(
362 DestinationSearch.MAX_PROMOTED_UNREGISTERED_PRINTERS_));
364 this.recentList_.updateDestinations(recentDestinations);
365 this.localList_.updateDestinations(localDestinations);
366 this.cloudList_.updateDestinations(finalCloudDestinations);
370 * Reflows the destination lists according to the available height.
373 reflowLists_: function() {
374 if (!this.getIsVisible()) {
378 var hasCloudList = getIsVisible(this.getChildElement('.cloud-list'));
379 var lists = [this.recentList_, this.localList_];
381 lists.push(this.cloudList_);
384 var getListsTotalHeight = function(lists, counts) {
385 return lists.reduce(function(sum, list, index) {
386 return sum + list.getEstimatedHeightInPixels(counts[index]) +
387 DestinationSearch.LIST_BOTTOM_PADDING_;
390 var getCounts = function(lists, count) {
391 return lists.map(function(list) { return count; });
394 var availableHeight = this.getAvailableListsHeight_();
395 var listsEl = this.getChildElement('.lists');
396 listsEl.style.maxHeight = availableHeight + 'px';
398 var maxListLength = lists.reduce(function(prevCount, list) {
399 return Math.max(prevCount, list.getDestinationsCount());
401 for (var i = 1; i <= maxListLength; i++) {
402 if (getListsTotalHeight(lists, getCounts(lists, i)) > availableHeight) {
407 var counts = getCounts(lists, i);
408 // Fill up the possible n-1 free slots left by the previous loop.
409 if (getListsTotalHeight(lists, counts) < availableHeight) {
410 for (var countIndex = 0; countIndex < counts.length; countIndex++) {
411 counts[countIndex]++;
412 if (getListsTotalHeight(lists, counts) > availableHeight) {
413 counts[countIndex]--;
419 lists.forEach(function(list, index) {
420 list.updateShortListSize(counts[index]);
423 // Set height of the list manually so that search filter doesn't change
425 var listsHeight = getListsTotalHeight(lists, counts) + 'px';
426 if (listsHeight != listsEl.style.height) {
427 // Try to close account select if there's a possibility it's open now.
428 var accountSelectEl = this.getChildElement('.account-select');
429 if (!accountSelectEl.disabled) {
430 accountSelectEl.disabled = true;
431 accountSelectEl.disabled = false;
433 listsEl.style.height = listsHeight;
438 * Updates whether the throbbers for the various destination lists should be
442 updateThrobbers_: function() {
443 this.localList_.setIsThrobberVisible(
444 this.destinationStore_.isLocalDestinationSearchInProgress);
445 this.cloudList_.setIsThrobberVisible(
446 this.destinationStore_.isCloudDestinationSearchInProgress);
447 this.recentList_.setIsThrobberVisible(
448 this.destinationStore_.isLocalDestinationSearchInProgress &&
449 this.destinationStore_.isCloudDestinationSearchInProgress);
454 * Updates printer sharing invitations UI.
457 updateInvitations_: function() {
458 var invitations = this.userInfo_.activeUser ?
459 this.invitationStore_.invitations(this.userInfo_.activeUser) : [];
460 if (invitations.length > 0) {
461 if (this.invitation_ != invitations[0]) {
462 this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
463 INVITATION_AVAILABLE);
465 this.invitation_ = invitations[0];
466 this.showInvitation_(this.invitation_);
468 this.invitation_ = null;
471 this.getChildElement('.invitation-container'), !!this.invitation_);
476 * @param {!printe_preview.Invitation} invitation Invitation to show.
479 showInvitation_: function(invitation) {
480 var invitationText = '';
481 if (invitation.asGroupManager) {
482 invitationText = loadTimeData.getStringF(
483 'groupPrinterSharingInviteText',
485 invitation.destination.displayName,
486 invitation.receiver);
488 invitationText = loadTimeData.getStringF(
489 'printerSharingInviteText',
491 invitation.destination.displayName);
493 this.getChildElement('.invitation-text').innerHTML = invitationText;
495 var acceptButton = this.getChildElement('.invitation-accept-button');
496 acceptButton.textContent = loadTimeData.getString(
497 invitation.asGroupManager ? 'acceptForGroup' : 'accept');
498 acceptButton.disabled = !!this.invitationStore_.invitationInProgress;
499 this.getChildElement('.invitation-reject-button').disabled =
500 !!this.invitationStore_.invitationInProgress;
502 this.getChildElement('#invitation-process-throbber'),
503 !!this.invitationStore_.invitationInProgress);
507 * Called when user's logged in accounts change. Updates the UI.
510 onUsersChanged_: function() {
511 var loggedIn = this.userInfo_.loggedIn;
513 var accountSelectEl = this.getChildElement('.account-select');
514 accountSelectEl.innerHTML = '';
515 this.userInfo_.users.forEach(function(account) {
516 var option = document.createElement('option');
517 option.text = account;
518 option.value = account;
519 accountSelectEl.add(option);
521 var option = document.createElement('option');
522 option.text = loadTimeData.getString('addAccountTitle');
524 accountSelectEl.add(option);
526 accountSelectEl.selectedIndex =
527 this.userInfo_.users.indexOf(this.userInfo_.activeUser);
530 setIsVisible(this.getChildElement('.user-info'), loggedIn);
531 setIsVisible(this.getChildElement('.cloud-list'), loggedIn);
532 setIsVisible(this.getChildElement('.cloudprint-promo'), !loggedIn);
533 this.updateInvitations_();
537 * Called when a destination search should be executed. Filters the
538 * destination lists with the given query.
539 * @param {Event} evt Contains the search query.
542 onSearch_: function(evt) {
543 this.filterLists_(evt.queryRegExp);
547 * Called when a destination is selected. Clears the search and hides the
549 * @param {Event} evt Contains the selected destination.
552 onDestinationSelect_: function(evt) {
553 this.setIsVisible(false);
554 this.destinationStore_.selectDestination(evt.destination);
555 this.metrics_.record(print_preview.Metrics.DestinationSearchBucket.
556 DESTINATION_CLOSED_CHANGED);
560 * Called when a destination is selected. Selected destination are marked as
561 * recent, so we have to update our recent destinations list.
564 onDestinationStoreSelect_: function() {
566 this.destinationStore_.destinations(this.userInfo_.activeUser);
567 var recentDestinations = [];
568 destinations.forEach(function(destination) {
569 if (destination.isRecent) {
570 recentDestinations.push(destination);
573 this.recentList_.updateDestinations(recentDestinations);
578 * Called when destinations are inserted into the store. Rerenders
582 onDestinationsInserted_: function() {
583 this.renderDestinations_();
588 * Called when destinations are inserted into the store. Rerenders
592 onDestinationSearchDone_: function() {
593 this.updateThrobbers_();
594 this.renderDestinations_();
596 // In case user account information was retrieved with this search
597 // (knowing current user account is required to fetch invitations).
598 this.invitationStore_.startLoadingInvitations();
602 * Called when the manage cloud printers action is activated.
605 onManageCloudDestinationsActivated_: function() {
606 cr.dispatchSimpleEvent(
608 print_preview.DestinationSearch.EventType.MANAGE_CLOUD_DESTINATIONS);
612 * Called when the manage local printers action is activated.
615 onManageLocalDestinationsActivated_: function() {
616 cr.dispatchSimpleEvent(
618 print_preview.DestinationSearch.EventType.MANAGE_LOCAL_DESTINATIONS);
622 * Called when the "Sign in" link on the Google Cloud Print promo is
626 onSignInActivated_: function() {
627 cr.dispatchSimpleEvent(this, DestinationSearch.EventType.SIGN_IN);
628 this.metrics_.record(
629 print_preview.Metrics.DestinationSearchBucket.SIGNIN_TRIGGERED);
633 * Called when item in the Accounts list is selected. Initiates active user
634 * switch or, for 'Add account...' item, opens Google sign-in page.
637 onAccountChange_: function() {
638 var accountSelectEl = this.getChildElement('.account-select');
640 accountSelectEl.options[accountSelectEl.selectedIndex].value;
642 this.userInfo_.activeUser = account;
643 this.destinationStore_.reloadUserCookieBasedDestinations();
644 this.invitationStore_.startLoadingInvitations();
645 this.metrics_.record(
646 print_preview.Metrics.DestinationSearchBucket.ACCOUNT_CHANGED);
648 cr.dispatchSimpleEvent(this, DestinationSearch.EventType.ADD_ACCOUNT);
649 // Set selection back to the active user.
650 for (var i = 0; i < accountSelectEl.options.length; i++) {
651 if (accountSelectEl.options[i].value == this.userInfo_.activeUser) {
652 accountSelectEl.selectedIndex = i;
656 this.metrics_.record(
657 print_preview.Metrics.DestinationSearchBucket.ADD_ACCOUNT_SELECTED);
662 * Called when the printer sharing invitation Accept/Reject button is
666 onInvitationProcessButtonClick_: function(accept) {
667 this.metrics_.record(accept ?
668 print_preview.Metrics.DestinationSearchBucket.INVITATION_ACCEPTED :
669 print_preview.Metrics.DestinationSearchBucket.INVITATION_REJECTED);
670 this.invitationStore_.processInvitation(this.invitation_, accept);
671 this.updateInvitations_();
675 * Called when the close button on the cloud print promo is clicked. Hides
679 onCloudprintPromoCloseButtonClick_: function() {
680 setIsVisible(this.getChildElement('.cloudprint-promo'), false);
684 * Called when the window is resized. Reflows layout of destination lists.
687 onWindowResize_: function() {
694 DestinationSearch: DestinationSearch