OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 Polymer('pairing-device-list', (function() { | 5 Polymer((function() { |
6 /** @const */ var ICON_COLORS = ['#F0B9CB', '#F0ACC3', '#F098B6', '#F084A9', | 6 /** @const */ var ICON_COLORS = ['#F0B9CB', '#F0ACC3', '#F098B6', '#F084A9', |
7 '#F06D99', '#F05287', '#F0467F', '#F03473', | 7 '#F06D99', '#F05287', '#F0467F', '#F03473', |
8 '#F01E65', '#F00051']; | 8 '#F01E65', '#F00051']; |
9 return { | 9 return { |
| 10 is: 'pairing-device-list', |
| 11 |
| 12 properties: { |
| 13 devices: Array, |
| 14 |
| 15 selected: { |
| 16 type: String, |
| 17 notify: true |
| 18 }, |
| 19 |
| 20 connecting: { |
| 21 type: Boolean, |
| 22 reflectToAttribute: true |
| 23 } |
| 24 }, |
| 25 |
| 26 getStyleForDeviceIcon_: function(deviceName) { |
| 27 return 'color: ' + this.colorByName_(deviceName); |
| 28 }, |
| 29 |
10 /* Returns pseudo-random color depending of hash of the |name|. */ | 30 /* Returns pseudo-random color depending of hash of the |name|. */ |
11 colorByName: function(name) { | 31 colorByName_: function(name) { |
12 var hash = 0; | 32 var hash = 0; |
13 for (var i = 0; i < name.length; ++i) | 33 for (var i = 0; i < name.length; ++i) |
14 hash = (name.charCodeAt(i) + 31 * hash) | 0; | 34 hash = (name.charCodeAt(i) + 31 * hash) | 0; |
15 return ICON_COLORS[hash % ICON_COLORS.length]; | 35 return ICON_COLORS[hash % ICON_COLORS.length]; |
16 } | 36 } |
17 }; | 37 }; |
18 })()); | 38 })()); |
19 | 39 |
20 Polymer('controller-pairing-screen', (function() { | 40 Polymer({ |
| 41 is: 'controller-pairing-page', |
| 42 |
| 43 behaviors: [ |
| 44 Polymer.NeonSharedElementAnimatableBehavior |
| 45 ], |
| 46 |
| 47 properties: { |
| 48 sharedElements: { |
| 49 value: function() { |
| 50 return { |
| 51 'top-hero': this.$.top, |
| 52 'bottom-hero': this.$.bottom |
| 53 }; |
| 54 } |
| 55 }, |
| 56 |
| 57 animationConfig: { |
| 58 value: function() { |
| 59 return { |
| 60 'entry': [{ |
| 61 name: 'hero-animation', |
| 62 id: 'top-hero', |
| 63 toPage: this |
| 64 }, { |
| 65 name: 'hero-animation', |
| 66 id: 'bottom-hero', |
| 67 toPage: this |
| 68 }, { |
| 69 name: 'fade-in-animation', |
| 70 node: this |
| 71 }], |
| 72 |
| 73 'exit': [{ |
| 74 name: 'hero-animation', |
| 75 id: 'top-hero', |
| 76 fromPage: this |
| 77 }, { |
| 78 name: 'hero-animation', |
| 79 id: 'bottom-hero', |
| 80 fromPage: this |
| 81 }, { |
| 82 name: 'fade-out-animation', |
| 83 node: this |
| 84 }] |
| 85 }; |
| 86 } |
| 87 } |
| 88 } |
| 89 }); |
| 90 |
| 91 Polymer((function() { |
21 'use strict'; | 92 'use strict'; |
22 | 93 |
23 // Keep these constants synced with corresponding constants defined in | 94 // Keep these constants synced with corresponding constants defined in |
24 // controller_pairing_screen_actor.{h,cc}. | 95 // controller_pairing_screen_actor.{h,cc}. |
25 /** @const */ var CONTEXT_KEY_CONTROLS_DISABLED = 'controlsDisabled'; | 96 /** @const */ var CONTEXT_KEY_CONTROLS_DISABLED = 'controlsDisabled'; |
26 /** @const */ var CONTEXT_KEY_SELECTED_DEVICE = 'selectedDevice'; | 97 /** @const */ var CONTEXT_KEY_SELECTED_DEVICE = 'selectedDevice'; |
27 /** @const */ var CONTEXT_KEY_ACCOUNT_ID = 'accountId'; | 98 /** @const */ var CONTEXT_KEY_ACCOUNT_ID = 'accountId'; |
28 | 99 |
29 /** @const */ var ACTION_ENROLL = 'enroll'; | 100 /** @const */ var ACTION_ENROLL = 'enroll'; |
30 | 101 |
31 /** @const */ var PAGE_AUTHENTICATION = 'authentication'; | 102 /** @const */ var PAGE_AUTHENTICATION = 'authentication'; |
32 | 103 |
33 return { | 104 return { |
34 gaiaHost_: null, | 105 is: 'controller-pairing-screen', |
35 selectedDevice: null, | |
36 | 106 |
37 observe: { | 107 behaviors: [ |
38 'C.devices': 'deviceListChanged', | 108 login.OobeScreenBehavior |
39 'C.page': 'pageChanged' | 109 ], |
| 110 |
| 111 properties: { |
| 112 selectedDevice: { |
| 113 type: String, |
| 114 observer: 'selectedDeviceChanged_' |
| 115 } |
| 116 }, |
| 117 |
| 118 observers: [ |
| 119 'deviceListChanged_(C.devices)' |
| 120 ], |
| 121 |
| 122 ready: function() { |
| 123 /** |
| 124 * Workaround for |
| 125 * https://github.com/PolymerElements/neon-animation/issues/32 |
| 126 * TODO(dzhioev): Remove when fixed in Polymer. |
| 127 */ |
| 128 var pages = this.$.pages; |
| 129 delete pages._squelchNextFinishEvent; |
| 130 Object.defineProperty(pages, '_squelchNextFinishEvent', |
| 131 { get: function() { return false; } }); |
40 }, | 132 }, |
41 | 133 |
42 /** @override */ | 134 /** @override */ |
43 initialize: function() { | 135 initialize: function() { |
| 136 ['code', |
| 137 'controlsDisabled', |
| 138 'devices', |
| 139 'enrollmentDomain', |
| 140 'page'].forEach(this.registerBoundContextField, this); |
44 this.context.set(CONTEXT_KEY_CONTROLS_DISABLED, true); | 141 this.context.set(CONTEXT_KEY_CONTROLS_DISABLED, true); |
45 this.commitContextChanges(); | 142 this.commitContextChanges(); |
46 }, | 143 }, |
47 | 144 |
48 pageChanged: function(oldPage, newPage) { | 145 deviceListChanged_: function() { |
49 if (newPage == PAGE_AUTHENTICATION) { | 146 this.selectedDevice = this.context.get(CONTEXT_KEY_SELECTED_DEVICE, null); |
50 this.gaiaHost_.load(cr.login.GaiaAuthHost.AuthMode.DEFAULT, | |
51 {}, | |
52 this.onAuthCompleted_.bind(this)); | |
53 } | |
54 }, | 147 }, |
55 | 148 |
56 deviceListChanged: function() { | 149 selectedDeviceChanged_: function(selectedDevice) { |
57 this.selectedDevice = this.context.get(CONTEXT_KEY_SELECTED_DEVICE); | |
58 }, | |
59 | |
60 selectedDeviceChanged: function() { | |
61 this.context.set(CONTEXT_KEY_SELECTED_DEVICE, | 150 this.context.set(CONTEXT_KEY_SELECTED_DEVICE, |
62 this.selectedDevice ? this.selectedDevice : ''); | 151 selectedDevice ? selectedDevice : ''); |
63 this.commitContextChanges(); | 152 this.commitContextChanges(); |
64 }, | 153 }, |
65 | 154 |
66 helpButtonClicked: function() { | 155 helpButtonClicked_: function() { |
67 console.error('Help is not implemented yet.'); | 156 console.error('Help is not implemented yet.'); |
68 }, | 157 }, |
69 | 158 |
70 onAuthCompleted_: function(credentials) { | 159 getHostEnrollmentStepTitle_: function(domain) { |
71 this.context.set(CONTEXT_KEY_ACCOUNT_ID, credentials.email); | 160 return this.i18n(['enrollmentInProgress', domain]); |
72 this.commitContextChanges(); | 161 }, |
73 this.send(login.Screen.CALLBACK_USER_ACTED, ACTION_ENROLL); | 162 |
| 163 getSuccessMessage_: function(selectedDevice) { |
| 164 return this.i18n(['successText', selectedDevice]); |
74 } | 165 } |
75 }; | 166 }; |
76 })()); | 167 })()); |
77 | 168 |
OLD | NEW |