chrome/browser/resources/options/chromeos/accounts_user_list.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('options.accounts', function() {
   6   /** @const */ var List = cr.ui.List;
   7   /** @const */ var ListItem = cr.ui.ListItem;
   8   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
   9
  10   /**
  11    * Creates a new user list.
  12    * @param {Object=} opt_propertyBag Optional properties.
  13    * @constructor
  14    * @extends {cr.ui.List}
  15    */
  16   var UserList = cr.ui.define('list');
  17
  18   UserList.prototype = {
  19     __proto__: List.prototype,
  20
  21     pref: 'cros.accounts.users',
  22
  23     /** @override */
  24     decorate: function() {
  25       List.prototype.decorate.call(this);
  26
  27       // HACK(arv): http://crbug.com/40902
  28       window.addEventListener('resize', this.redraw.bind(this));
  29
  30       var self = this;
  31
  32       // Listens to pref changes.
  33       Preferences.getInstance().addEventListener(this.pref,
  34           function(event) {
  35             self.load_(event.value.value);
  36           });
  37     },
  38
  39     createItem: function(user) {
  40       return new UserListItem(user);
  41     },
  42
  43     /**
  44      * Finds the index of user by given username (canonicalized email).
  45      * @private
  46      * @param {string} username The username to look for.
  47      * @return {number} The index of the found user or -1 if not found.
  48      */
  49     indexOf_: function(username) {
  50       var dataModel = this.dataModel;
  51       if (!dataModel)
  52         return -1;
  53
  54       var length = dataModel.length;
  55       for (var i = 0; i < length; ++i) {
  56         var user = dataModel.item(i);
  57         if (user.username == username) {
  58           return i;
  59         }
  60       }
  61
  62       return -1;
  63     },
  64
  65     /**
  66      * Update given user's account picture.
  67      * @param {string} username User for which to update the image.
  68      */
  69     updateAccountPicture: function(username) {
  70       var index = this.indexOf_(username);
  71       if (index >= 0) {
  72         var item = this.getListItemByIndex(index);
  73         if (item)
  74           item.updatePicture();
  75       }
  76     },
  77
  78     /**
  79      * Loads given user list.
  80      * @param {Array.<Object>} users An array of user info objects.
  81      * @private
  82      */
  83     load_: function(users) {
  84       this.dataModel = new ArrayDataModel(users);
  85     },
  86
  87     /**
  88      * Removes given user from the list.
  89      * @param {Object} user User info object to be removed from user list.
  90      * @private
  91      */
  92     removeUser_: function(user) {
  93       var e = new Event('remove');
  94       e.user = user;
  95       this.dispatchEvent(e);
  96     }
  97   };
  98
  99   /**
 100    * Whether the user list is disabled. Only used for display purpose.
 101    * @type {boolean}
 102    */
 103   cr.defineProperty(UserList, 'disabled', cr.PropertyKind.BOOL_ATTR);
 104
 105   /**
 106    * Creates a new user list item.
 107    * @param {Object} user The user account this represents.
 108    * @constructor
 109    * @extends {cr.ui.ListItem}
 110    */
 111   function UserListItem(user) {
 112     var el = cr.doc.createElement('div');
 113     el.user = user;
 114     UserListItem.decorate(el);
 115     return el;
 116   }
 117
 118   /**
 119    * Decorates an element as a user account item.
 120    * @param {!HTMLElement} el The element to decorate.
 121    */
 122   UserListItem.decorate = function(el) {
 123     el.__proto__ = UserListItem.prototype;
 124     el.decorate();
 125   };
 126
 127   UserListItem.prototype = {
 128     __proto__: ListItem.prototype,
 129
 130     /** @override */
 131     decorate: function() {
 132       ListItem.prototype.decorate.call(this);
 133
 134       this.className = 'user-list-item';
 135
 136       this.icon_ = this.ownerDocument.createElement('img');
 137       this.icon_.className = 'user-icon';
 138       this.updatePicture();
 139
 140       var labelEmail = this.ownerDocument.createElement('span');
 141       labelEmail.className = 'user-email-label';
 142       labelEmail.textContent = this.user.email;
 143
 144       var labelName = this.ownerDocument.createElement('span');
 145       labelName.className = 'user-name-label';
 146       labelName.textContent = this.user.owner ?
 147           loadTimeData.getStringF('username_format', this.user.name) :
 148           this.user.name;
 149
 150       var emailNameBlock = this.ownerDocument.createElement('div');
 151       emailNameBlock.className = 'user-email-name-block';
 152       emailNameBlock.appendChild(labelEmail);
 153       emailNameBlock.appendChild(labelName);
 154       emailNameBlock.title = this.user.owner ?
 155           loadTimeData.getStringF('username_format', this.user.email) :
 156           this.user.email;
 157
 158       this.appendChild(this.icon_);
 159       this.appendChild(emailNameBlock);
 160
 161       if (!this.user.owner) {
 162         var removeButton = this.ownerDocument.createElement('button');
 163         removeButton.className =
 164             'raw-button remove-user-button custom-appearance';
 165         removeButton.addEventListener(
 166             'click', this.handleRemoveButtonClick_.bind(this));
 167         this.appendChild(removeButton);
 168       }
 169     },
 170
 171     /**
 172      * Handles click on the remove button.
 173      * @param {Event} e Click event.
 174      * @private
 175      */
 176     handleRemoveButtonClick_: function(e) {
 177       // Handle left button click
 178       if (e.button == 0)
 179         this.parentNode.removeUser_(this.user);
 180     },
 181
 182     /**
 183      * Reloads user picture.
 184      */
 185     updatePicture: function() {
 186       this.icon_.src = 'chrome://userimage/' + this.user.username +
 187                        '?id=' + (new Date()).getTime();
 188     }
 189   };
 190
 191   return {
 192     UserList: UserList
 193   };
 194 });