Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(38)

Side by Side Diff: chrome/browser/resources/settings/languages_page/languages_page.js

Issue 1902893003: MD Settings: simplify language model and data binding (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: update comment based on other CL feedback Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 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 /** 5 /**
6 * @fileoverview 'settings-languages-page' is the settings page 6 * @fileoverview 'settings-languages-page' is the settings page
7 * for language and input method settings. 7 * for language and input method settings.
8 */ 8 */
9 (function() { 9 (function() {
10 'use strict'; 10 'use strict';
(...skipping 14 matching lines...) Expand all
25 * Preferences state. 25 * Preferences state.
26 */ 26 */
27 prefs: { 27 prefs: {
28 type: Object, 28 type: Object,
29 notify: true, 29 notify: true,
30 }, 30 },
31 31
32 /** 32 /**
33 * Read-only reference to the languages model provided by the 33 * Read-only reference to the languages model provided by the
34 * 'settings-languages' instance. 34 * 'settings-languages' instance.
35 * @type {LanguagesModel|undefined} 35 * @type {!LanguagesModel|undefined}
36 */ 36 */
37 languages: { 37 languages: {
38 type: Object, 38 type: Object,
39 notify: true, 39 notify: true,
40 }, 40 },
41 41
42 /** @private */ 42 /** @private */
43 inputMethodsSecondary_: { 43 inputMethodsSecondary_: {
44 type: String, 44 type: String,
45 value: 'Placeholder, e.g. US keyboard', 45 value: 'Placeholder, e.g. US keyboard',
46 }, 46 },
47 47
48 /** @private */ 48 /** @private */
49 spellCheckSecondary_: { 49 spellCheckSecondary_: {
50 type: String, 50 type: String,
51 value: 'Placeholder, e.g. English (United States)', 51 value: 'Placeholder, e.g. English (United States)',
52 }, 52 },
53 53
54 /** 54 /**
55 * The language to display the details for. 55 * The language to display the details for.
56 * @type {!LanguageInfo|undefined} 56 * @type {!LanguageState|undefined}
57 * @private 57 * @private
58 */ 58 */
59 detailLanguage_: Object, 59 detailLanguage_: Object,
60 60
61 /** @private {!LanguageHelper} */ 61 /** @private {!LanguageHelper} */
62 languageHelper_: Object, 62 languageHelper_: Object,
63 }, 63 },
64 64
65 /** @override */ 65 /** @override */
66 created: function() { 66 created: function() {
67 this.languageHelper_ = LanguageHelperImpl.getInstance(); 67 this.languageHelper_ = LanguageHelperImpl.getInstance();
68 }, 68 },
69 69
70 /** 70 /**
71 * Handler for clicking a language on the main page, which selects the 71 * Handler for clicking a language on the main page, which selects the
72 * language as the prospective UI language on Chrome OS and Windows. 72 * language as the prospective UI language on Chrome OS and Windows.
73 * @param {!{model: !{item: !LanguageInfo}}} e 73 * @param {!{model: !{item: !LanguageState}}} e
74 */ 74 */
75 onLanguageTap_: function(e) { 75 onLanguageTap_: function(e) {
76 // Only change the UI language on platforms that allow it. 76 // Only change the UI language on platforms that allow it.
77 if (!cr.isChromeOS && !cr.isWindows) 77 if (!cr.isChromeOS && !cr.isWindows)
78 return; 78 return;
79 79
80 // Taps on the paper-icon-button are handled in onShowLanguageDetailTap_. 80 // Taps on the paper-icon-button are handled in onShowLanguageDetailTap_.
81 if (e.target.tagName == 'PAPER-ICON-BUTTON') 81 if (e.target.tagName == 'PAPER-ICON-BUTTON')
82 return; 82 return;
83 83
84 // Set the prospective UI language. This won't take effect until a restart. 84 // Set the prospective UI language. This won't take effect until a restart.
85 if (e.model.item.language.supportsUI) 85 if (e.model.item.language.supportsUI)
86 this.languageHelper_.setUILanguage(e.model.item.language.code); 86 this.languageHelper_.setUILanguage(e.model.item.language.code);
87 }, 87 },
88 88
89 /** 89 /**
90 * Handler for enabling or disabling spell check. 90 * Handler for enabling or disabling spell check.
91 * @param {!{target: Element, model: !{item: !LanguageInfo}}} e 91 * @param {!{target: Element, model: !{item: !LanguageState}}} e
92 */ 92 */
93 onSpellCheckChange_: function(e) { 93 onSpellCheckChange_: function(e) {
94 this.languageHelper_.toggleSpellCheck(e.model.item.language.code, 94 this.languageHelper_.toggleSpellCheck(e.model.item.language.code,
95 e.target.checked); 95 e.target.checked);
96 }, 96 },
97 97
98 /** @private */ 98 /** @private */
99 onBackTap_: function() { 99 onBackTap_: function() {
100 this.$.pages.back(); 100 this.$.pages.back();
101 }, 101 },
102 102
103 /** 103 /**
104 * Opens the Manage Languages page. 104 * Opens the Manage Languages page.
105 * @private 105 * @private
106 */ 106 */
107 onManageLanguagesTap_: function() { 107 onManageLanguagesTap_: function() {
108 this.$.pages.setSubpageChain(['manage-languages']); 108 this.$.pages.setSubpageChain(['manage-languages']);
109 this.forceRenderList_('settings-manage-languages-page'); 109 this.forceRenderList_('settings-manage-languages-page');
110 }, 110 },
111 111
112 /** 112 /**
113 * Opens the Language Detail page for the language. 113 * Opens the Language Detail page for the language.
114 * @param {!{model: !{item: !LanguageInfo}}} e 114 * @param {!{model: !{item: !LanguageState}}} e
115 * @private 115 * @private
116 */ 116 */
117 onShowLanguageDetailTap_: function(e) { 117 onShowLanguageDetailTap_: function(e) {
118 this.detailLanguage_ = e.model.item; 118 this.detailLanguage_ = e.model.item;
119 this.$.pages.setSubpageChain(['language-detail']); 119 this.$.pages.setSubpageChain(['language-detail']);
120 }, 120 },
121 121
122 <if expr="not is_macosx">
123 /** 122 /**
124 * Returns the enabled languages which support spell check. 123 * Returns the enabled languages which support spell check.
124 * @return {!Array<!LanguageState>}
125 * @private 125 * @private
126 */ 126 */
127 spellCheckLanguages_: function() { 127 spellCheckLanguages_: function() {
128 return this.languages.enabledLanguages.filter(function(languageInfo) { 128 assert(!cr.isMac);
129 return languageInfo.language.supportsSpellcheck; 129 return this.languages.enabled.filter(function(languageState) {
130 return languageState.language.supportsSpellcheck;
130 }); 131 });
131 }, 132 },
132 133
133 /** 134 /**
134 * Opens the Custom Dictionary page. 135 * Opens the Custom Dictionary page.
135 * @private 136 * @private
136 */ 137 */
137 onEditDictionaryTap_: function() { 138 onEditDictionaryTap_: function() {
139 assert(!cr.isMac);
138 this.$.pages.setSubpageChain(['edit-dictionary']); 140 this.$.pages.setSubpageChain(['edit-dictionary']);
139 this.forceRenderList_('settings-edit-dictionary-page'); 141 this.forceRenderList_('settings-edit-dictionary-page');
140 }, 142 },
141 </if>
142 143
143 <if expr="chromeos or is_win">
144 /** 144 /**
145 * Checks whether the prospective UI language (the pref that indicates what 145 * Checks whether the prospective UI language (the pref that indicates what
146 * language to use in Chrome) matches the current language. This pref is only 146 * language to use in Chrome) matches the current language. This pref is only
147 * on Chrome OS and Windows; we don't control the UI language elsewhere. 147 * on Chrome OS and Windows; we don't control the UI language elsewhere.
148 * @param {string} languageCode The language code identifying a language. 148 * @param {string} languageCode The language code identifying a language.
149 * @param {string} prospectiveUILanguage The prospective UI language. 149 * @param {string} prospectiveUILanguage The prospective UI language.
150 * @return {boolean} True if the given language matches the prospective UI 150 * @return {boolean} True if the given language matches the prospective UI
151 * pref (which may be different from the actual UI language). 151 * pref (which may be different from the actual UI language).
152 * @private 152 * @private
153 */ 153 */
154 isProspectiveUILanguage_: function(languageCode, prospectiveUILanguage) { 154 isProspectiveUILanguage_: function(languageCode, prospectiveUILanguage) {
155 assert(cr.isChromeOS || cr.isWindows);
155 return languageCode == this.languageHelper_.getProspectiveUILanguage(); 156 return languageCode == this.languageHelper_.getProspectiveUILanguage();
156 }, 157 },
157 </if>
158 158
159 /** 159 /**
160 * @return {string} 160 * @return {string}
161 * @private 161 * @private
162 */ 162 */
163 getProspectiveUILanguageName_: function() { 163 getProspectiveUILanguageName_: function() {
164 return this.languageHelper_.getLanguage( 164 return this.languageHelper_.getLanguage(
165 this.languageHelper_.getProspectiveUILanguage()).displayName; 165 this.languageHelper_.getProspectiveUILanguage()).displayName;
166 }, 166 },
167 167
168 /** 168 /**
169 * Returns either the "selected" class, if the language matches the 169 * Returns either the "selected" class, if the language matches the
170 * prospective UI language, or an empty string. Languages can only be 170 * prospective UI language, or an empty string. Languages can only be
171 * selected on Chrome OS and Windows. 171 * selected on Chrome OS and Windows.
172 * @param {string} languageCode The language code identifying a language. 172 * @param {string} languageCode The language code identifying a language.
173 * @param {string} prospectiveUILanguage The prospective UI language. 173 * @param {string} prospectiveUILanguage The prospective UI language.
174 * @return {string} The class name for the language item. 174 * @return {string} The class name for the language item.
175 * @private 175 * @private
176 */ 176 */
177 getLanguageItemClass_: function(languageCode, prospectiveUILanguage) { 177 getLanguageItemClass_: function(languageCode, prospectiveUILanguage) {
178 <if expr="chromeos or is_win"> 178 if ((cr.isChromeOS || cr.isWindows) &&
179 if (this.isProspectiveUILanguage_(languageCode, prospectiveUILanguage)) 179 this.isProspectiveUILanguage_(languageCode, prospectiveUILanguage)) {
180 return 'selected'; 180 return 'selected';
181 </if> 181 }
182 return ''; 182 return '';
183 }, 183 },
184 184
185 <if expr="chromeos">
186 /** 185 /**
187 * @param {string} id The input method ID. 186 * @param {string} id The input method ID.
188 * @param {string} currentId The ID of the currently enabled input method. 187 * @param {string} currentId The ID of the currently enabled input method.
189 * @return {boolean} True if the IDs match. 188 * @return {boolean} True if the IDs match.
190 * @private 189 * @private
191 */ 190 */
192 isCurrentInputMethod_: function(id, currentId) { 191 isCurrentInputMethod_: function(id, currentId) {
193 assert(cr.isChromeOS); 192 assert(cr.isChromeOS);
194 return id == currentId; 193 return id == currentId;
195 }, 194 },
196 195
197 /** 196 /**
198 * @param {string} id The input method ID. 197 * @param {string} id The input method ID.
199 * @param {string} currentId The ID of the currently enabled input method. 198 * @param {string} currentId The ID of the currently enabled input method.
200 * @return {string} The class for the input method item. 199 * @return {string} The class for the input method item.
201 * @private 200 * @private
202 */ 201 */
203 getInputMethodItemClass_: function(id, currentId) { 202 getInputMethodItemClass_: function(id, currentId) {
203 assert(cr.isChromeOS);
204 return this.isCurrentInputMethod_(id, currentId) ? 'selected' : ''; 204 return this.isCurrentInputMethod_(id, currentId) ? 'selected' : '';
205 }, 205 },
206 </if>
207 206
208 /** 207 /**
209 * HACK(michaelpg): This is necessary to show the list when navigating to 208 * HACK(michaelpg): This is necessary to show the list when navigating to
210 * the sub-page. Remove this function when PolymerElements/neon-animation#60 209 * the sub-page. Remove this function when PolymerElements/neon-animation#60
211 * is fixed. 210 * is fixed.
212 * @param {string} tagName Name of the element containing the <iron-list>. 211 * @param {string} tagName Name of the element containing the <iron-list>.
213 */ 212 */
214 forceRenderList_: function(tagName) { 213 forceRenderList_: function(tagName) {
215 this.$$(tagName).$$('iron-list').fire('iron-resize'); 214 this.$$(tagName).$$('iron-list').fire('iron-resize');
216 }, 215 },
217 }); 216 });
218 })(); 217 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698