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 9cr.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.HIDDEN, 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 $('guest-user-header-bar-item').addEventListener('click', 34 this.handleGuestClick_); 35 $('guest-user-button').addEventListener('click', 36 this.handleGuestClick_); 37 this.updateUI_(); 38 }, 39 40 /** 41 * Tab index value for all button elements. 42 * @type {number} 43 */ 44 set buttonsTabIndex(tabIndex) { 45 var buttons = this.getElementsByTagName('button'); 46 for (var i = 0, button; button = buttons[i]; ++i) { 47 button.tabIndex = tabIndex; 48 } 49 }, 50 51 /** 52 * Disables the header bar and all of its elements. 53 * @type {boolean} 54 */ 55 set disabled(value) { 56 var buttons = this.getElementsByTagName('button'); 57 for (var i = 0, button; button = buttons[i]; ++i) 58 if (!button.classList.contains('button-restricted')) 59 button.disabled = value; 60 }, 61 62 /** 63 * Add user button click handler. 64 * @private 65 */ 66 handleAddUserClick_: function(e) { 67 chrome.send('addUser'); 68 // Prevent further propagation of click event. Otherwise, the click event 69 // handler of document object will set wallpaper to user's wallpaper when 70 // there is only one existing user. See http://crbug.com/166477 71 e.stopPropagation(); 72 }, 73 74 /** 75 * Cancel add user button click handler. 76 * @private 77 */ 78 handleCancelAddUserClick_: function(e) { 79 // Let screen handle cancel itself if that is capable of doing so. 80 if (Oobe.getInstance().currentScreen && 81 Oobe.getInstance().currentScreen.cancel) { 82 Oobe.getInstance().currentScreen.cancel(); 83 return; 84 } 85 86 Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER}); 87 Oobe.resetSigninUI(true); 88 }, 89 90 /** 91 * Guest button click handler. 92 * @private 93 */ 94 handleGuestClick_: function(e) { 95 chrome.send('launchGuest'); 96 e.stopPropagation(); 97 }, 98 99 /** 100 * If true then "Browse as Guest" button is shown. 101 * @type {boolean} 102 */ 103 set showGuestButton(value) { 104 this.showGuest_ = value; 105 this.updateUI_(); 106 }, 107 108 /** 109 * Update current header bar UI. 110 * @type {number} state Current state of the sign-in screen 111 * (see SIGNIN_UI_STATE). 112 */ 113 set signinUIState(state) { 114 this.signinUIState_ = state; 115 this.updateUI_(); 116 }, 117 118 get signinUIState() { 119 return this.signinUIState_; 120 }, 121 122 /** 123 * Whether the Cancel button is enabled during Gaia sign-in. 124 * @type {boolean} 125 */ 126 set allowCancel(value) { 127 this.allowCancel_ = value; 128 this.updateUI_(); 129 }, 130 131 /** 132 * Updates visibility state of action buttons. 133 * @private 134 */ 135 updateUI_: function() { 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