Home | History | Annotate | Download | only in user_manager 
      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 /**
      6  * @fileoverview Desktop User Chooser UI control bar implementation.
      7  */
      8 
      9 cr.define('login', function() {
     10   /**
     11    * Creates a header bar element.
     12    * @constructor
     13    * @extends {HTMLDivElement}
     14    */
     15   var HeaderBar = cr.ui.define('div');
     16 
     17   HeaderBar.prototype = {
     18     __proto__: HTMLDivElement.prototype,
     19 
     20     // Whether guest button should be shown when header bar is in normal mode.
     21     showGuest_: true,
     22 
     23     // Current UI state of the sign-in screen.
     24     signinUIState_: SIGNIN_UI_STATE.ACCOUNT_PICKER,
     25 
     26     // Whether to show kiosk apps menu.
     27     hasApps_: false,
     28 
     29     /** @override */
     30     decorate: function() {
     31       $('add-user-button').addEventListener('click',
     32           this.handleAddUserClick_);
     33       $('cancel-add-user-button').addEventListener('click',
     34           this.handleCancelAddUserClick_);
     35       $('guest-user-header-bar-item').addEventListener('click',
     36           this.handleGuestClick_);
     37       $('guest-user-button').addEventListener('click',
     38           this.handleGuestClick_);
     39       this.updateUI_();
     40     },
     41 
     42     /**
     43      * Tab index value for all button elements.
     44      * @type {number}
     45      */
     46     set buttonsTabIndex(tabIndex) {
     47       var buttons = this.getElementsByTagName('button');
     48       for (var i = 0, button; button = buttons[i]; ++i) {
     49         button.tabIndex = tabIndex;
     50       }
     51     },
     52 
     53     /**
     54      * Disables the header bar and all of its elements.
     55      * @type {boolean}
     56      */
     57     set disabled(value) {
     58       var buttons = this.getElementsByTagName('button');
     59       for (var i = 0, button; button = buttons[i]; ++i)
     60         if (!button.classList.contains('button-restricted'))
     61           button.disabled = value;
     62     },
     63 
     64     /**
     65      * Add user button click handler.
     66      * @private
     67      */
     68     handleAddUserClick_: function(e) {
     69       chrome.send('addUser');
     70       // Prevent further propagation of click event. Otherwise, the click event
     71       // handler of document object will set wallpaper to user's wallpaper when
     72       // there is only one existing user. See http://crbug.com/166477
     73       e.stopPropagation();
     74     },
     75 
     76     /**
     77      * Cancel add user button click handler.
     78      * @private
     79      */
     80     handleCancelAddUserClick_: function(e) {
     81       // Let screen handle cancel itself if that is capable of doing so.
     82       if (Oobe.getInstance().currentScreen &&
     83           Oobe.getInstance().currentScreen.cancel) {
     84         Oobe.getInstance().currentScreen.cancel();
     85         return;
     86       }
     87 
     88       Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER});
     89       Oobe.resetSigninUI(true);
     90     },
     91 
     92     /**
     93      * Guest button click handler.
     94      * @private
     95      */
     96     handleGuestClick_: function(e) {
     97       chrome.send('launchGuest');
     98       e.stopPropagation();
     99     },
    100 
    101     /**
    102      * If true then "Browse as Guest" button is shown.
    103      * @type {boolean}
    104      */
    105     set showGuestButton(value) {
    106       this.showGuest_ = value;
    107       this.updateUI_();
    108     },
    109 
    110     /**
    111      * Update current header bar UI.
    112      * @type {number} state Current state of the sign-in screen
    113      *                      (see SIGNIN_UI_STATE).
    114      */
    115     set signinUIState(state) {
    116       this.signinUIState_ = state;
    117       this.updateUI_();
    118     },
    119 
    120     /**
    121      * Whether the Cancel button is enabled during Gaia sign-in.
    122      * @type {boolean}
    123      */
    124     set allowCancel(value) {
    125       this.allowCancel_ = value;
    126       this.updateUI_();
    127     },
    128 
    129     /**
    130      * Updates visibility state of action buttons.
    131      * @private
    132      */
    133     updateUI_: function() {
    134       $('add-user-button').hidden = false;
    135       $('cancel-add-user-button').hidden = !this.allowCancel_;
    136       $('guest-user-header-bar-item').hidden = false;
    137       $('add-user-header-bar-item').hidden = false;
    138     },
    139 
    140     /**
    141      * Animates Header bar to hide from the screen.
    142      * @param {function()} callback will be called once animation is finished.
    143      */
    144     animateOut: function(callback) {
    145       var launcher = this;
    146       launcher.addEventListener(
    147           'webkitTransitionEnd', function f(e) {
    148             launcher.removeEventListener('webkitTransitionEnd', f);
    149             callback();
    150           });
    151       this.classList.remove('login-header-bar-animate-slow');
    152       this.classList.add('login-header-bar-animate-fast');
    153       this.classList.add('login-header-bar-hidden');
    154     },
    155 
    156     /**
    157      * Animates Header bar to slowly appear on the screen.
    158      */
    159     animateIn: function() {
    160       this.classList.remove('login-header-bar-animate-fast');
    161       this.classList.add('login-header-bar-animate-slow');
    162       this.classList.remove('login-header-bar-hidden');
    163     },
    164   };
    165 
    166   /**
    167    * Convenience wrapper of animateOut.
    168    */
    169   HeaderBar.animateOut = function(callback) {
    170     $('login-header-bar').animateOut(callback);
    171   };
    172 
    173   /**
    174    * Convenience wrapper of animateIn.
    175    */
    176   HeaderBar.animateIn = function() {
    177     $('login-header-bar').animateIn();
    178   }
    179 
    180   return {
    181     HeaderBar: HeaderBar
    182   };
    183 });
    184