chrome/browser/resources/chromeos/login/controller-pairing-screen.js

   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
   3 // found in the LICENSE file.
   4
   5 Polymer((function() {
   6   /** @const */ var ICON_COLORS = ['#F0B9CB', '#F0ACC3', '#F098B6', '#F084A9',
   7                                    '#F06D99', '#F05287', '#F0467F', '#F03473',
   8                                    '#F01E65', '#F00051'];
   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
  30     /* Returns pseudo-random color depending of hash of the |name|. */
  31     colorByName_: function(name) {
  32       var hash = 0;
  33       for (var i = 0; i < name.length; ++i)
  34         hash = (name.charCodeAt(i) + 31 * hash) | 0;
  35       return ICON_COLORS[hash % ICON_COLORS.length];
  36     }
  37   };
  38 })());
  39
  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() {
  92   'use strict';
  93
  94   // Keep these constants synced with corresponding constants defined in
  95   // controller_pairing_screen_actor.{h,cc}.
  96   /** @const */ var CONTEXT_KEY_CONTROLS_DISABLED = 'controlsDisabled';
  97   /** @const */ var CONTEXT_KEY_SELECTED_DEVICE = 'selectedDevice';
  98   /** @const */ var CONTEXT_KEY_ACCOUNT_ID = 'accountId';
  99
 100   /** @const */ var ACTION_ENROLL = 'enroll';
 101
 102   /** @const */ var PAGE_AUTHENTICATION = 'authentication';
 103
 104   return {
 105     is: 'controller-pairing-screen',
 106
 107     behaviors: [
 108       login.OobeScreenBehavior
 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; } });
 132     },
 133
 134     /** @override */
 135     initialize: function() {
 136       ['code',
 137        'controlsDisabled',
 138        'devices',
 139        'enrollmentDomain',
 140        'page'].forEach(this.registerBoundContextField, this);
 141       this.context.set(CONTEXT_KEY_CONTROLS_DISABLED, true);
 142       this.commitContextChanges();
 143     },
 144
 145     deviceListChanged_: function() {
 146       this.selectedDevice = this.context.get(CONTEXT_KEY_SELECTED_DEVICE, null);
 147     },
 148
 149     selectedDeviceChanged_: function(selectedDevice) {
 150       this.context.set(CONTEXT_KEY_SELECTED_DEVICE,
 151           selectedDevice ? selectedDevice : '');
 152       this.commitContextChanges();
 153     },
 154
 155     helpButtonClicked_: function() {
 156       console.error('Help is not implemented yet.');
 157     },
 158
 159     getHostEnrollmentStepTitle_: function(domain) {
 160       return this.i18n(['enrollmentInProgress', domain]);
 161     },
 162
 163     getSuccessMessage_: function(selectedDevice) {
 164       return this.i18n(['successText', selectedDevice]);
 165     }
 166   };
 167 })());
 168