• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Copyright (c) 2011 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
5cr.define('options.accounts', function() {
6  const List = cr.ui.List;
7  const ListItem = cr.ui.ListItem;
8  const 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    /** @inheritDoc */
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      this.addEventListener('click', this.handleClick_);
31
32      var self = this;
33
34      // Listens to pref changes.
35      Preferences.getInstance().addEventListener(this.pref,
36          function(event) {
37            self.load_(event.value);
38          });
39    },
40
41    createItem: function(user) {
42      user.picture = this.user_pictures_[user.email];
43      return new UserListItem(user);
44    },
45
46    user_pictures_: {},
47    setUserPictures: function(cache) {
48      this.user_pictures_ = cache;
49      this.redraw();
50    },
51
52    /**
53     * Finds the index of user by given email.
54     * @private
55     * @param {string} email The email address to look for.
56     * @return {number} The index of the found user or -1 if not found.
57     */
58    findUserByEmail_: function(email) {
59      var dataModel = this.dataModel;
60      var length = dataModel.length;
61      for (var i = 0; i < length; ++i) {
62        var user = dataModel.item(i);
63        if (user.email == email) {
64          return i;
65        }
66      }
67
68      return -1;
69    },
70
71    /**
72     * Adds given user to model and update backend.
73     * @param {Object} user A user to be added to user list.
74     */
75    addUser: function(user) {
76      var index = this.findUserByEmail_(user.email);
77      if (index == -1) {
78        this.dataModel.push(user);
79        chrome.send('whitelistUser', [user.email]);
80      }
81    },
82
83    /**
84     * Removes given user from model and update backend.
85     */
86    removeUser: function(user) {
87      var dataModel = this.dataModel;
88
89      var index = dataModel.indexOf(user);
90      if (index >= 0) {
91        dataModel.splice(index, 1);
92        chrome.send('unwhitelistUser', [user.email]);
93      }
94    },
95
96    /**
97     * Handles the clicks on the list and triggers user removal if the click
98     * is on the remove user button.
99     * @private
100     * @param {!Event} e The click event object.
101     */
102    handleClick_: function(e) {
103      // Handle left button click
104      if (e.button == 0) {
105        var el = e.target;
106        if (el.classList.contains('remove-user-button')) {
107          this.removeUser(el.parentNode.user);
108        }
109      }
110    },
111
112    /**
113     * Loads given user list.
114     * @param {Array} users An array of user object.
115     */
116    load_: function(users) {
117      this.dataModel = new ArrayDataModel(users);
118    }
119  };
120
121  /**
122   * Whether the user list is disabled. Only used for display purpose.
123   * @type {boolean}
124   */
125  cr.defineProperty(UserList, 'disabled', cr.PropertyKind.BOOL_ATTR);
126
127  /**
128   * Creates a new user list item.
129   * @param user The user account this represents.
130   * @constructor
131   * @extends {cr.ui.ListItem}
132   */
133  function UserListItem(user) {
134    var el = cr.doc.createElement('div');
135    el.user = user;
136    UserListItem.decorate(el);
137    return el;
138  }
139
140  /**
141   * Decorates an element as a user account item.
142   * @param {!HTMLElement} el The element to decorate.
143   */
144  UserListItem.decorate = function(el) {
145    el.__proto__ = UserListItem.prototype;
146    el.decorate();
147  };
148
149  UserListItem.prototype = {
150    __proto__: ListItem.prototype,
151
152    /** @inheritDoc */
153    decorate: function() {
154      ListItem.prototype.decorate.call(this);
155
156      this.className = 'user-list-item';
157
158      var icon = this.ownerDocument.createElement('img');
159      icon.className = 'user-icon';
160      if (this.user.picture) {
161        icon.src = this.user.picture;
162      } else {
163        icon.src = 'chrome://theme/IDR_LOGIN_DEFAULT_USER';
164      }
165
166      var labelEmail = this.ownerDocument.createElement('span');
167      labelEmail.className = 'user-email-label';
168      labelEmail.textContent = this.user.email;
169
170      var labelName = this.ownerDocument.createElement('span');
171      labelName.className = 'user-name-label';
172      labelName.textContent = this.user.owner ?
173          localStrings.getStringF('username_format', this.user.name) :
174          this.user.name;
175
176      var emailNameBlock = this.ownerDocument.createElement('div');
177      emailNameBlock.className = 'user-email-name-block';
178      emailNameBlock.appendChild(labelEmail);
179      emailNameBlock.appendChild(labelName);
180      emailNameBlock.title = this.user.owner ?
181          localStrings.getStringF('username_format', this.user.email) :
182          this.user.email;
183
184      this.appendChild(icon);
185      this.appendChild(emailNameBlock);
186
187      if (!this.user.owner) {
188        var removeButton = this.ownerDocument.createElement('button');
189        removeButton.classList.add('raw-button');
190        removeButton.classList.add('remove-user-button');
191        this.appendChild(removeButton);
192      }
193    }
194  };
195
196  return {
197    UserList: UserList
198  };
199});
200