src/chrome/browser/resources/options/managed_user_list.js

   1 // Copyright 2013 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.managedUserOptions', function() {
   6   /** @const */ var List = cr.ui.List;
   7   /** @const */ var ListItem = cr.ui.ListItem;
   8   /** @const */ var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
   9
  10   /**
  11    * Create a new managed user list item.
  12    * @param {Object} entry The managed user this item represents.
  13    *     It has the following form:
  14    *       managedUser = {
  15    *         id: "Managed User ID",
  16    *         name: "Managed User Name",
  17    *         iconURL: "chrome://path/to/icon/image",
  18    *         onCurrentDevice: true or false,
  19    *         needAvatar: true or false
  20    *       }
  21    * @constructor
  22    * @extends {cr.ui.ListItem}
  23    */
  24   function ManagedUserListItem(entry) {
  25     var el = cr.doc.createElement('div');
  26     el.managedUser_ = entry;
  27     el.__proto__ = ManagedUserListItem.prototype;
  28     el.decorate();
  29     return el;
  30   }
  31
  32   ManagedUserListItem.prototype = {
  33     __proto__: ListItem.prototype,
  34
  35     /**
  36      * @type {string} the ID of this managed user list item.
  37      */
  38     get id() {
  39       return this.managedUser_.id;
  40     },
  41
  42     /**
  43      * @type {string} the name of this managed user list item.
  44      */
  45     get name() {
  46       return this.managedUser_.name;
  47     },
  48
  49     /**
  50      * @type {string} the path to the avatar icon of this managed
  51      *     user list item.
  52      */
  53     get iconURL() {
  54       return this.managedUser_.iconURL;
  55     },
  56
  57     /** @override */
  58     decorate: function() {
  59       ListItem.prototype.decorate.call(this);
  60       var managedUser = this.managedUser_;
  61
  62       // Add the avatar.
  63       var iconElement = this.ownerDocument.createElement('img');
  64       iconElement.className = 'profile-img';
  65       iconElement.style.content = getProfileAvatarIcon(managedUser.iconURL);
  66       this.appendChild(iconElement);
  67
  68       // Add the profile name.
  69       var nameElement = this.ownerDocument.createElement('div');
  70       nameElement.className = 'profile-name';
  71       nameElement.textContent = managedUser.name;
  72       this.appendChild(nameElement);
  73
  74       if (managedUser.onCurrentDevice) {
  75         iconElement.className += ' profile-img-disabled';
  76         nameElement.className += ' profile-name-disabled';
  77
  78         // Add "(already on this device)" message.
  79         var alreadyOnDeviceElement = this.ownerDocument.createElement('div');
  80         alreadyOnDeviceElement.className =
  81             'profile-name-disabled already-on-this-device';
  82         alreadyOnDeviceElement.textContent =
  83             loadTimeData.getString('managedUserAlreadyOnThisDevice');
  84         this.appendChild(alreadyOnDeviceElement);
  85       }
  86     },
  87   };
  88
  89   /**
  90    * Create a new managed users list.
  91    * @constructor
  92    * @extends {cr.ui.List}
  93    */
  94   var ManagedUserList = cr.ui.define('list');
  95
  96   ManagedUserList.prototype = {
  97     __proto__: List.prototype,
  98
  99     /** @override */
 100     createItem: function(entry) {
 101       return new ManagedUserListItem(entry);
 102     },
 103
 104     /** @override */
 105     decorate: function() {
 106       List.prototype.decorate.call(this);
 107       this.selectionModel = new ListSingleSelectionModel();
 108       this.autoExpands = true;
 109     },
 110   };
 111
 112   return {
 113     ManagedUserListItem: ManagedUserListItem,
 114     ManagedUserList: ManagedUserList,
 115   };
 116 });