ChromeOS: Implement Language Selection screen of material design OOBE.

chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Polymer class definition for 'oobe-i18n-dropdown'.
+ */
+(function() {
+
+
+/**
+ * Languages/keyboard descriptor to display
+ * @type {!OobeTypes.LanguageDsc|!OobeTypes.IMEDsc}
+ */
+var I18nMenuItem;
+
+Polymer({
+  is: 'oobe-i18n-dropdown',
+
+  properties: {
+    /**
+     * List of languages/keyboards to display
+     * @type {!Array<I18nMenuItem>}
+     */
+    items: {
+      type: Array,
+      observer: 'onItemsChanged_',
+    },
+  },
+
+  /**
+   * This flag prevents recursive calls of observers and callbacks.
+   */
+  observersDisabled_: false,
+
+  /**
+   * @param {!{detail: !{item: { item: {!I18nMenuItem}}}}} event
+   * @private
+   */
+  onSelect_: function(event) {
+    if (this.observersDisabled_)
+      return;
+
+    var selected = event.detail.item.item;

[michaelpg, 2016/08/02 20:31:53]

var selectedModel = domRepeat.modelForElement(event.detail.item);

[Alexander Alekseev, 2016/08/03 06:32:44]

Done.

+    if (!selected)
+      return;
+
+    this.set('items.' + this.$$('paper-listbox').selected + '.selected', true);

[michaelpg, 2016/08/02 20:31:53]

selectedModel.set('item.selected', true);

[Alexander Alekseev, 2016/08/03 06:32:44]

Done.

+    this.fire('select-item', selected);
+  },
+
+  onDeselect_: function(e) {
+    if (this.observersDisabled_)
+      return;
+    this.set(
+        'items.' + this.$$('paper-listbox').indexOf(e.detail.item) +

[michaelpg, 2016/08/02 20:31:53]

same

[Alexander Alekseev, 2016/08/03 06:32:44]

Done.

+            '.selected',
+        false);
+  },
+
+  onItemsChanged_: function(items) {
+    if (this.observersDisabled_)
+      return;
+
+    if (!items)
+      return;
+
+    this.observersDisabled_ = true;
+
+    var index = items.findIndex(function(item) { return item.selected; });
+    if (index != -1) {
+      // This is needed for selectIndex() to pick up values from updated
+      // this.items (for example, translated into other language).
+      Polymer.dom.flush();
+
+      if (this.$.listboxDropdown.selected == index) {
+        // This is to force update real <input> element value even if selection
+        // index has not changed.
+        this.$.listboxDropdown.selectIndex(null);
+      }
+      this.$.listboxDropdown.selectIndex(index);
+    }
+
+    this.observersDisabled_ = false;
+  },
+});
+})();