MD Settings: Allow the user to order the list of languages.

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 'settings-languages-page' is the settings page
  * for language and input method settings.
  */
 (function() {
 'use strict';
@@ skipping 53 matching lines @@
   /**
    * 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: !LanguageState}}} e
    */
   onLanguageTap_: function(e) {
     // Only change the UI language on platforms that allow it.
     if (!cr.isChromeOS && !cr.isWindows)
       return;
 
-    // Taps on the paper-icon-button are handled in onShowLanguageDetailTap_.
-    if (e.target.tagName == 'PAPER-ICON-BUTTON')
-      return;
-
     // Set the prospective UI language. This won't take effect until a restart.
     if (e.model.item.language.supportsUI)
       this.languageHelper_.setUILanguage(e.model.item.language.code);
   },
 
   /**
    * Handler for enabling or disabling spell check.
    * @param {!{target: Element, model: !{item: !LanguageState}}} e
    */
   onSpellCheckChange_: function(e) {
     this.languageHelper_.toggleSpellCheck(e.model.item.language.code,
                                           e.target.checked);
   },
 
   /** @private */
   onBackTap_: function() {
     this.$.pages.back();
   },
 
   /**
    * Opens the Manage Languages page.
    * @private
    */
   onManageLanguagesTap_: function() {
     this.$.pages.setSubpageChain(['manage-languages']);
     this.forceRenderList_('settings-manage-languages-page');
   },
 
   /**
+   * @param {number} index Index of the language in the list of languages.
+   * @param {!Object} change Polymer change object (provided in the HTML so this
+   *     gets called whenever languages.enabled.* changes).

[michaelpg, 2016/06/21 00:34:42]

doesn't |index| change when the list changes?

[Moe, 2016/06/21 20:10:19]

Not really. It may be a Polymer bug. It seems like functions bound to |index|
get called only once when an item is added (or at the initial construction of
the repeater). the documentation also hints that index gets updated when the
array is sorted or filtered. It doesn't say anything about the index getting
updated when the array changes:
https://www.polymer-project.org/1.0/docs/devguide/templates

[michaelpg, 2016/06/22 01:06:27]

TIL, thanks.

+   * @return {boolean} True if the given language is the first one in the list
+   *     of languages.
+   * @private
+   */
+  isFirstLanguage_: function(index, change) {
+    return index == 0;
+  },
+
+  /**
+   * Moves the language up in the list.
+   * @param {!{model: !{item: !LanguageState}}} e
+   * @private
+   */
+  onMoveUpTap_: function(e) {

[michaelpg, 2016/06/21 00:34:42]

nit: put this above onMoveDownTap_

[Moe, 2016/06/21 20:10:19]

Done.

+    this.languageHelper_.moveLanguage(e.model.item.language.code, -1);
+  },
+
+  /**
+   * @param {number} index Index of the language in the list of languages.
+   * @param {!Object} change Polymer change object (provided in the HTML so this
+   *     gets called whenever languages.enabled.* changes).
+   * @return {boolean} True if the given language is the last one in the list of
+   *     languages.
+   * @private
+   */
+  isLastLanguage_: function(index, change) {
+    return index == this.languages.enabled.length - 1;
+  },
+
+  /**
+   * @param {!Object} change Polymer change object (provided in the HTML so this

[michaelpg, 2016/06/21 00:34:42]

meh, feel free to omit this param altogether, if not though, no need for this
parenthetical.

[Moe, 2016/06/21 20:10:19]

Done.

+   *     gets called whenever languages.enabled.* changes).
+   * @return {boolean} True if there are less than 2 languages.
+   */
+  isHelpTextHidden_: function(change) {
+    return this.languages.enabled.length <= 1;
+  },
+
+  /**
+   * Moves the language down in the list.
+   * @param {!{model: !{item: !LanguageState}}} e
+   * @private
+   */
+  onMoveDownTap_: function(e) {
+    this.languageHelper_.moveLanguage(e.model.item.language.code, 1);
+  },
+
+  /**
    * Opens the Language Detail page for the language.
    * @param {!{model: !{item: !LanguageState}}} e
    * @private
    */
   onShowLanguageDetailTap_: function(e) {
     this.detailLanguage_ = e.model.item;
     this.$.pages.setSubpageChain(['language-detail']);
   },
 
   /**
@@ skipping 169 matching lines @@
    * HACK(michaelpg): This is necessary to show the list when navigating to
    * the sub-page. Remove this function when PolymerElements/neon-animation#60
    * is fixed.
    * @param {string} tagName Name of the element containing the <iron-list>.
    */
   forceRenderList_: function(tagName) {
     this.$$(tagName).$$('iron-list').fire('iron-resize');
   },
 });
 })();