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 =
  66           imageset(managedUser.iconURL + '@scalefactorx');
  67       this.appendChild(iconElement);
  68
  69       // Add the profile name.
  70       var nameElement = this.ownerDocument.createElement('div');
  71       nameElement.className = 'profile-name';
  72       nameElement.textContent = managedUser.name;
  73       this.appendChild(nameElement);
  74
  75       if (managedUser.onCurrentDevice) {
  76         iconElement.className += ' profile-img-disabled';
  77         nameElement.className += ' profile-name-disabled';
  78
  79         // Add "(already on this device)" message.
  80         var alreadyOnDeviceElement = this.ownerDocument.createElement('div');
  81         alreadyOnDeviceElement.className =
  82             'profile-name-disabled already-on-this-device';
  83         alreadyOnDeviceElement.textContent =
  84             loadTimeData.getString('managedUserAlreadyOnThisDevice');
  85         this.appendChild(alreadyOnDeviceElement);
  86       }
  87     },
  88   };
  89
  90   /**
  91    * Create a new managed users list.
  92    * @constructor
  93    * @extends {cr.ui.List}
  94    */
  95   var ManagedUserList = cr.ui.define('list');
  96
  97   ManagedUserList.prototype = {
  98     __proto__: List.prototype,
  99
 100     /** @override */
 101     createItem: function(entry) {
 102       return new ManagedUserListItem(entry);
 103     },
 104
 105     /** @override */
 106     decorate: function() {
 107       List.prototype.decorate.call(this);
 108       this.selectionModel = new ListSingleSelectionModel();
 109       this.autoExpands = true;
 110     },
 111   };
 112
 113   return {
 114     ManagedUserListItem: ManagedUserListItem,
 115     ManagedUserList: ManagedUserList,
 116   };
 117 });