MD Settings: Languages model for language pages

chrome/browser/resources/settings/languages_page/languages_page.js

 // Copyright 2015 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.
 
 /**
  * @fileoverview 'cr-settings-languages-page' is the settings page
  * for language and input method settings.
  *
  * @group Chrome Settings Elements
  * @element cr-settings-languages-page
  */
+(function() {
+'use strict';
+
 Polymer({
   is: 'cr-settings-languages-page',
 
   properties: {
     /**
+     * The current active route.
+     */
+    currentRoute: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
      * Preferences state.
      */
     prefs: {
       type: Object,
       notify: true,
     },
 
-    dummyLanguages_: {
-      type: Array,
-      value: function() {
-        return [{code: 'en', displayName: 'English', supportsSpellcheck: true},
-                {code: 'es', displayName: 'Spanish', supportsSpellcheck: true},
-                {code: 'ru', displayName: 'Russian', supportsSpellcheck: true},
-                {code: 'ar', displayName: 'Arabic'}];
-      },
-    },
-
-    dummyInputMethods_: {
-      type: Array,
-      value: function() {
-        return [{id: 'us', name: 'US Keyboard'},
-                {id: 'fr', name: 'French Keyboard'}];
-      },
-    },
-
-    dummyAppLocale_: {
-      type: String,
-      value: 'en',
-    },
-
-    dummyCurrentInputMethod_: {
-      type: String,
-      value: 'us',
-    },
-
-    dummySpellcheckDictionaries_: {
-      type: Array,
-      value: function() {
-        return ['en', 'es', 'ru'];
-      },
-    },
-
-    route: String,
-
     /**
-     * Whether the page is a subpage.
+     * Languages model.

[stevenjb, 2015/09/22 16:47:33]

I think a bit more of a comment would be useful here, e.g. Read-only reference
to this.$.languages.model.

[michaelpg, 2015/09/23 21:27:27]

Done.

+     * @type {(LanguagesModel|undefined)}
      */
-    subpage: {
-      type: Boolean,
-      value: false,
-      readOnly: true
-    },
-
-    /**
-     * ID of the page.
-     */
-    PAGE_ID: {
-      type: String,
-      value: 'languages',
-      readOnly: true
-    },
-
-    /**
-     * Title for the page header and navigation menu.
-     */
-    pageTitle: {
-      type: String,
-      value: function() {
-        return loadTimeData.getString('languagesPageTitle');
-      },
-    },
-
-    /**
-     * Name of the 'iron-icon' to be shown in the settings-page-header.
-     */
-    icon: {
-      type: String,
-      value: 'language',
-      readOnly: true
+    model: {

[stevenjb, 2015/09/22 16:47:34]

I think it would clarify things a little for me if we named this property
something other than just 'model', e.g. languagesModel.

[michaelpg, 2015/09/23 21:27:27]

Done (model -> languages).

+      type: Object,
+      notify: true,

[stevenjb, 2015/09/22 16:47:34]

can we make this readOnly?

[michaelpg, 2015/09/23 21:27:27]

no, readOnly would prevent it from being updatable by data binding.
Unfortunately, Polymer doesn't have a concept of "read-only for manual updates,
but data binding works".

simplified example: http://jsbin.com/rirososude/3/edit?html,output

     },
   },
 
   /**
-   * @param {!Array<!Language>} languages
-   * @return {!Array<!Language>} The languages from |languages| which support
-   *     spell check.
+   * Handler for clicking a language on the main page, which selects the
+   * language as the prospective UI language on Chrome OS and Windows.
+   * @param {!{model: !{item: !{language: !{code: string}}}}} e
+   */
+  onLanguageTap_: function(e) {
+    // Set the prospective UI language. This won't take effect until a restart.
+    if (cr.isChromeOS || cr.isWindows)

[stevenjb, 2015/09/22 16:47:33]

I think this if() would be better in setUILanguage (or in the C++ code).
Platforms that don't support this should be hiding the UI entirely. If they
don't for some reason it should just be a no-op (or log an error).

[michaelpg, 2015/09/23 21:27:27]

The UI (a list of languages on the advanced page) is always there -- but tapping
can only "select" a language on platforms where that's possible.

Moved to setUILanguage.

+      this.$.languages.setUILanguage(e.model.item.language.code);
+  },
+
+  /**
+   * Handler for enabling or disabling spell check.
+   * @param {!{target: Element, model: !{item: !{language: !{code: string}}}}} e
+   */
+  onSpellCheckChange_: function(e) {
+    this.$.languages.toggleSpellCheck(e.model.item.language.code,
+                                      e.target.checked);
+  },
+
+  /** @private */
+  onBackTap_: function() {
+    this.$.pages.back();
+  },
+
+  /**
+   * Opens the Manage Languages page.
    * @private
    */
-  getSpellcheckLanguages_: function(languages) {
-    return languages.filter(function(language) {
-      return language.supportsSpellcheck;
-    });
+  onManageLanguagesTap_: function() {
+    this.$.pages.setSubpageChain(['manage-languages']);
+    // TODO(michaelpg): This is necessary to show the list when navigating to

[stevenjb, 2015/09/22 16:47:33]

nit: TODO(): Remove... (?)

[michaelpg, 2015/09/23 21:27:27]

Done.

+    // the sub-page. Probably due to PolymerElements/neon-animation#60.
+    /** @type {{_render: function()}} */(this.$.manageLanguagesPage.$.list)
+        ._render();
   },
 
   /**
    * @param {string} languageCode The language code identifying a language.
-   * @param {string} dummyAppLocale A fake app locale.
+   * @param {string} appLocale The prospective UI language.
    * @return {boolean} True if the given language matches the app locale pref
-   *     (which may be different from the actual app locale if it was changed).
+   *     (which may be different from the actual app locale).
    * @private
    */
-  isUILanguage_: function(languageCode, dummyAppLocale) {
-    return languageCode == dummyAppLocale;
+  isUILanguage_: function(languageCode, appLocale) {
+    // Check the current language if the locale pref hasn't been set.
+    if (!appLocale)
+      appLocale = navigator.language;
+    return languageCode == appLocale;
   },
 
   /**
    * @param {string} id The input method ID.
    * @param {string} currentId The ID of the currently enabled input method.
    * @return {boolean} True if the IDs match.
    * @private
    */
   isCurrentInputMethod_: function(id, currentId) {
     assert(cr.isChromeOS);
     return id == currentId;
   },
-
-  /**
-   * @param {string} languageCode The language code identifying a language.
-   * @param {!Array<string>} spellcheckDictionaries The list of languages
-   *     for which spell check is enabled.
-   * @return {boolean} True if spell check is enabled for the language.
-   * @private
-   */
-  isSpellcheckEnabled_: function(languageCode, spellcheckDictionaries) {
-    return spellcheckDictionaries.indexOf(languageCode) != -1;
-  },
 });
+})();