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('options.accounts', function() {
6 /** @const */ var List = cr.ui.List;
7 /** @const */ var ListItem = cr.ui.ListItem;
8 /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
11 * Creates a new user list.
12 * @param {Object=} opt_propertyBag Optional properties.
14 * @extends {cr.ui.List}
16 var UserList = cr.ui.define('list');
18 UserList.prototype = {
19 __proto__: List.prototype,
21 pref: 'cros.accounts.users',
24 decorate: function() {
25 List.prototype.decorate.call(this);
27 // HACK(arv): http://crbug.com/40902
28 window.addEventListener('resize', this.redraw.bind(this));
32 // Listens to pref changes.
33 Preferences.getInstance().addEventListener(this.pref,
35 self.load_(event.value.value);
41 * @param {Object} user
43 createItem: function(user) {
44 return new UserListItem(user);
48 * Finds the index of user by given username (canonicalized email).
50 * @param {string} username The username to look for.
51 * @return {number} The index of the found user or -1 if not found.
53 indexOf_: function(username) {
54 var dataModel = this.dataModel;
58 var length = dataModel.length;
59 for (var i = 0; i < length; ++i) {
60 var user = dataModel.item(i);
61 if (user.username == username) {
70 * Update given user's account picture.
71 * @param {string} username User for which to update the image.
73 updateAccountPicture: function(username) {
74 var index = this.indexOf_(username);
76 var item = this.getListItemByIndex(index);
83 * Loads given user list.
84 * @param {!Array<Object>} users An array of user info objects.
87 load_: function(users) {
88 this.dataModel = new ArrayDataModel(users);
92 * Removes given user from the list.
93 * @param {Object} user User info object to be removed from user list.
96 removeUser_: function(user) {
97 var e = new Event('remove');
99 this.dispatchEvent(e);
104 * Whether the user list is disabled. Only used for display purpose.
106 cr.defineProperty(UserList, 'disabled', cr.PropertyKind.BOOL_ATTR);
109 * Creates a new user list item.
110 * @param {Object} user The user account this represents.
112 * @extends {cr.ui.ListItem}
114 function UserListItem(user) {
115 var el = cr.doc.createElement('div');
117 UserListItem.decorate(el);
122 * Decorates an element as a user account item.
123 * @param {!HTMLElement} el The element to decorate.
125 UserListItem.decorate = function(el) {
126 el.__proto__ = UserListItem.prototype;
130 UserListItem.prototype = {
131 __proto__: ListItem.prototype,
134 decorate: function() {
135 ListItem.prototype.decorate.call(this);
137 this.className = 'user-list-item';
139 this.icon_ = this.ownerDocument.createElement('img');
140 this.icon_.className = 'user-icon';
141 this.updatePicture();
143 var labelEmail = this.ownerDocument.createElement('span');
144 labelEmail.className = 'user-email-label';
145 labelEmail.textContent = this.user.email;
147 var labelName = this.ownerDocument.createElement('span');
148 labelName.className = 'user-name-label';
149 labelName.textContent = this.user.owner ?
150 loadTimeData.getStringF('username_format', this.user.name) :
153 var emailNameBlock = this.ownerDocument.createElement('div');
154 emailNameBlock.className = 'user-email-name-block';
155 emailNameBlock.appendChild(labelEmail);
156 emailNameBlock.appendChild(labelName);
157 emailNameBlock.title = this.user.owner ?
158 loadTimeData.getStringF('username_format', this.user.email) :
161 this.appendChild(this.icon_);
162 this.appendChild(emailNameBlock);
164 if (!this.user.owner) {
165 var removeButton = this.ownerDocument.createElement('button');
166 removeButton.className =
167 'raw-button remove-user-button custom-appearance';
168 removeButton.addEventListener(
169 'click', this.handleRemoveButtonClick_.bind(this));
170 this.appendChild(removeButton);
175 * Handles click on the remove button.
176 * @param {Event} e Click event.
179 handleRemoveButtonClick_: function(e) {
180 // Handle left button click
182 this.parentNode.removeUser_(this.user);
186 * Reloads user picture.
188 updatePicture: function() {
189 this.icon_.src = 'chrome://userimage/' + this.user.username +
190 '?id=' + (new Date()).getTime();