src/chrome/browser/resources/print_preview/search/destination_list_item.js

   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.
   4
   5 cr.define('print_preview', function() {
   6   'use strict';
   7
   8   /**
   9    * Component that renders a destination item in a destination list.
  10    * @param {!cr.EventTarget} eventTarget Event target to dispatch selection
  11    *     events to.
  12    * @param {!print_preview.Destination} destination Destination data object to
  13    *     render.
  14    * @param {RegExp} query Active filter query.
  15    * @constructor
  16    * @extends {print_preview.Component}
  17    */
  18   function DestinationListItem(eventTarget, destination, query) {
  19     print_preview.Component.call(this);
  20
  21     /**
  22      * Event target to dispatch selection events to.
  23      * @type {!cr.EventTarget}
  24      * @private
  25      */
  26     this.eventTarget_ = eventTarget;
  27
  28     /**
  29      * Destination that the list item renders.
  30      * @type {!print_preview.Destination}
  31      * @private
  32      */
  33     this.destination_ = destination;
  34
  35     /**
  36      * Active filter query text.
  37      * @type {RegExp}
  38      * @private
  39      */
  40     this.query_ = query;
  41
  42     /**
  43      * FedEx terms-of-service widget or {@code null} if this list item does not
  44      * render the FedEx Office print destination.
  45      * @type {print_preview.FedexTos}
  46      * @private
  47      */
  48     this.fedexTos_ = null;
  49   };
  50
  51   /**
  52    * Event types dispatched by the destination list item.
  53    * @enum {string}
  54    */
  55   DestinationListItem.EventType = {
  56     // Dispatched when the list item is activated.
  57     SELECT: 'print_preview.DestinationListItem.SELECT',
  58     REGISTER_PROMO_CLICKED:
  59         'print_preview.DestinationListItem.REGISTER_PROMO_CLICKED'
  60   };
  61
  62   DestinationListItem.prototype = {
  63     __proto__: print_preview.Component.prototype,
  64
  65     /** @override */
  66     createDom: function() {
  67       this.setElementInternal(this.cloneTemplateInternal(
  68           'destination-list-item-template'));
  69       this.updateUi_();
  70     },
  71
  72     /** @override */
  73     enterDocument: function() {
  74       print_preview.Component.prototype.enterDocument.call(this);
  75       this.tracker.add(this.getElement(), 'click', this.onActivate_.bind(this));
  76       this.tracker.add(
  77           this.getElement(), 'keydown', this.onKeyDown_.bind(this));
  78       this.tracker.add(
  79           this.getChildElement('.register-promo-button'),
  80           'click',
  81           this.onRegisterPromoClicked_.bind(this));
  82     },
  83
  84     /** @return {!print_preiew.Destination} */
  85     get destination() {
  86       return this.destination_;
  87     },
  88
  89     /**
  90      * Updates the list item UI state.
  91      * @param {RegExp} query Active filter query.
  92      */
  93     update: function(query) {
  94       this.query_ = query;
  95       this.updateUi_();
  96     },
  97
  98     /**
  99      * Initializes the element with destination's info.
 100      * @private
 101      */
 102     updateUi_: function() {
 103       var iconImg = this.getChildElement('.destination-list-item-icon');
 104       iconImg.src = this.destination_.iconUrl;
 105
 106       var nameEl = this.getChildElement('.destination-list-item-name');
 107       var textContent = this.destination_.displayName;
 108       if (this.query_) {
 109         nameEl.textContent = '';
 110         // When search query is specified, make it obvious why this particular
 111         // printer made it to the list. Display name is always visible, even if
 112         // it does not match the search query.
 113         this.addTextWithHighlight_(nameEl, textContent);
 114         // Show the first matching property.
 115         this.destination_.extraPropertiesToMatch.some(function(property) {
 116           if (property.match(this.query_)) {
 117             var hintSpan = document.createElement('span');
 118             hintSpan.className = 'search-hint';
 119             nameEl.appendChild(hintSpan);
 120             this.addTextWithHighlight_(hintSpan, property);
 121             // Add the same property to the element title.
 122             textContent += ' (' + property + ')';
 123             return true;
 124           }
 125         }, this);
 126       } else {
 127         // Show just the display name and nothing else to lessen visual clutter.
 128         nameEl.textContent = textContent;
 129       }
 130       nameEl.title = textContent;
 131
 132       // Initialize the element which renders the destination's offline status.
 133       this.getElement().classList.toggle('stale', this.destination_.isOffline);
 134       var offlineStatusEl = this.getChildElement('.offline-status');
 135       offlineStatusEl.textContent = this.destination_.offlineStatusText;
 136       setIsVisible(offlineStatusEl, this.destination_.isOffline);
 137
 138       // Initialize registration promo element for Privet unregistered printers.
 139       setIsVisible(
 140           this.getChildElement('.register-promo'),
 141           this.destination_.connectionStatus ==
 142               print_preview.Destination.ConnectionStatus.UNREGISTERED);
 143     },
 144
 145     /**
 146      * Adds text to parent element wrapping search query matches in highlighted
 147      * spans.
 148      * @param {!Element} parent Element to build the text in.
 149      * @param {string} text The text string to highlight segments in.
 150      * @private
 151      */
 152     addTextWithHighlight_: function(parent, text) {
 153       var sections = text.split(this.query_);
 154       for (var i = 0; i < sections.length; ++i) {
 155         if (i % 2 == 0) {
 156           parent.appendChild(document.createTextNode(sections[i]));
 157         } else {
 158           var span = document.createElement('span');
 159           span.className = 'destination-list-item-query-highlight';
 160           span.textContent = sections[i];
 161           parent.appendChild(span);
 162         }
 163       }
 164     },
 165
 166     /**
 167      * Called when the destination item is activated. Dispatches a SELECT event
 168      * on the given event target.
 169      * @private
 170      */
 171     onActivate_: function() {
 172       if (this.destination_.id ==
 173               print_preview.Destination.GooglePromotedId.FEDEX &&
 174           !this.destination_.isTosAccepted) {
 175         if (!this.fedexTos_) {
 176           this.fedexTos_ = new print_preview.FedexTos();
 177           this.fedexTos_.render(this.getElement());
 178           this.tracker.add(
 179               this.fedexTos_,
 180               print_preview.FedexTos.EventType.AGREE,
 181               this.onTosAgree_.bind(this));
 182         }
 183         this.fedexTos_.setIsVisible(true);
 184       } else if (this.destination_.connectionStatus !=
 185                      print_preview.Destination.ConnectionStatus.UNREGISTERED) {
 186         var selectEvt = new Event(DestinationListItem.EventType.SELECT);
 187         selectEvt.destination = this.destination_;
 188         this.eventTarget_.dispatchEvent(selectEvt);
 189       }
 190     },
 191
 192     /**
 193      * Called when the key is pressed on the destination item. Dispatches a
 194      * SELECT event when Enter is pressed.
 195      * @param {KeyboardEvent} e Keyboard event to process.
 196      * @private
 197      */
 198     onKeyDown_: function(e) {
 199       if (!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
 200         if (e.keyCode == 13) {
 201           var activeElementTag = document.activeElement ?
 202               document.activeElement.tagName.toUpperCase() : '';
 203           if (activeElementTag == 'LI') {
 204             e.stopPropagation();
 205             e.preventDefault();
 206             this.onActivate_();
 207           }
 208         }
 209       }
 210     },
 211
 212     /**
 213      * Called when the user agrees to the print destination's terms-of-service.
 214      * Selects the print destination that was agreed to.
 215      * @private
 216      */
 217     onTosAgree_: function() {
 218       var selectEvt = new Event(DestinationListItem.EventType.SELECT);
 219       selectEvt.destination = this.destination_;
 220       this.eventTarget_.dispatchEvent(selectEvt);
 221     },
 222
 223     /**
 224      * Called when the registration promo is clicked.
 225      * @private
 226      */
 227     onRegisterPromoClicked_: function() {
 228       var promoClickedEvent = new Event(
 229           DestinationListItem.EventType.REGISTER_PROMO_CLICKED);
 230       promoClickedEvent.destination = this.destination_;
 231       this.eventTarget_.dispatchEvent(promoClickedEvent);
 232     }
 233   };
 234
 235   // Export
 236   return {
 237     DestinationListItem: DestinationListItem
 238   };
 239 });