OLD | NEW |
| (Empty) |
1 // Copyright (c) 2012 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 cr.define('options', function() { | |
6 | |
7 var OptionsPage = options.OptionsPage; | |
8 var UserImagesGrid = options.UserImagesGrid; | |
9 | |
10 /** @const */ var CUSTOM_WALLPAPER_PREFIX = | |
11 'chrome://wallpaper-thumb/custom_'; | |
12 | |
13 ///////////////////////////////////////////////////////////////////////////// | |
14 // SetWallpaperOptions class: | |
15 | |
16 /** | |
17 * Encapsulated handling of ChromeOS set wallpaper options page. | |
18 * @constructor | |
19 */ | |
20 function SetWallpaperOptions() { | |
21 OptionsPage.call( | |
22 this, | |
23 'setWallpaper', | |
24 loadTimeData.getString('setWallpaper'), | |
25 'set-wallpaper-page'); | |
26 } | |
27 | |
28 cr.addSingletonGetter(SetWallpaperOptions); | |
29 | |
30 SetWallpaperOptions.prototype = { | |
31 // Inherit SetWallpaperOptions from OptionsPage. | |
32 __proto__: options.OptionsPage.prototype, | |
33 | |
34 /** | |
35 * Initializes SetWallpaperOptions page. | |
36 */ | |
37 initializePage: function() { | |
38 // Call base class implementation to start preferences initialization. | |
39 OptionsPage.prototype.initializePage.call(this); | |
40 | |
41 var wallpaperGrid = $('wallpaper-grid'); | |
42 UserImagesGrid.decorate(wallpaperGrid); | |
43 | |
44 wallpaperGrid.addEventListener('change', | |
45 this.handleImageSelected_.bind(this)); | |
46 wallpaperGrid.addEventListener('dblclick', | |
47 this.handleImageDblClick_.bind(this)); | |
48 wallpaperGrid.addEventListener('activate', | |
49 function() { OptionsPage.closeOverlay() }); | |
50 | |
51 $('set-wallpaper-layout').addEventListener('change', | |
52 this.handleLayoutChange_); | |
53 $('set-custom-wallpaper').onclick = this.handleChooseFile_; | |
54 $('use-daily-wallpaper').onclick = this.handleCheckboxClick_.bind(this); | |
55 $('set-wallpaper-overlay-confirm').onclick = function() { | |
56 OptionsPage.closeOverlay(); | |
57 }; | |
58 | |
59 // @type {Array.<author: string, url: string, website: string>} | |
60 this.wallpapers_ = []; | |
61 | |
62 // @type {Object} Old user custom wallpaper thumbnail. | |
63 this.oldImage_ = null; | |
64 | |
65 chrome.send('onSetWallpaperPageInitialized'); | |
66 }, | |
67 | |
68 /** | |
69 * Called right after the page has been shown to user. | |
70 */ | |
71 didShowPage: function() { | |
72 $('wallpaper-grid').updateAndFocus(); | |
73 // A quick hack to fix issue 118472. This is a general problem of list | |
74 // control and options overlay. | |
75 // TODO(bshe): Remove this hack when we fixed the general problem which | |
76 // tracked in issue 118829. | |
77 $('wallpaper-grid').redraw(); | |
78 chrome.send('onSetWallpaperPageShown'); | |
79 }, | |
80 | |
81 /** | |
82 * Called right before the page is hidden. | |
83 */ | |
84 willHidePage: function() { | |
85 var wallpaperGrid = $('wallpaper-grid'); | |
86 wallpaperGrid.blur(); | |
87 if (this.oldImage_) { | |
88 wallpaperGrid.removeItem(this.oldImage_); | |
89 this.oldImage_ = null; | |
90 } | |
91 $('set-wallpaper-layout').innerText = ''; | |
92 }, | |
93 | |
94 /** | |
95 * Set attributions of wallpaper with given URL. | |
96 * @param {string} url URL of the selected wallpaper. | |
97 * @private | |
98 */ | |
99 setWallpaperAttribution_: function(url) { | |
100 for (var i = 0; i < this.wallpapers_.length; i++) { | |
101 if (this.wallpapers_[i].url == url) { | |
102 $('wallpaper-author-name').textContent = this.wallpapers_[i].author; | |
103 $('wallpaper-author-website').textContent = | |
104 this.wallpapers_[i].website; | |
105 return; | |
106 } | |
107 } | |
108 $('wallpaper-author-name').textContent = ''; | |
109 $('wallpaper-author-website').textContent = ''; | |
110 }, | |
111 | |
112 /** | |
113 * Populates the drop down box for custom wallpaper layouts. | |
114 * param {string} layouts Available wallpaper layouts. | |
115 * param {number} selectedLayout The value of selected/default layout. | |
116 * @private | |
117 */ | |
118 populateWallpaperLayouts_: function(layouts, selectedLayout) { | |
119 var wallpaperLayout = $('set-wallpaper-layout'); | |
120 var selectedIndex = -1; | |
121 for (var i = 0; i < layouts.length; i++) { | |
122 var option = new Option(layouts[i]['name'], layouts[i]['index']); | |
123 if (selectedLayout == option.value) | |
124 selectedIndex = i; | |
125 wallpaperLayout.appendChild(option); | |
126 } | |
127 if (selectedIndex >= 0) | |
128 wallpaperLayout.selectedIndex = selectedIndex; | |
129 }, | |
130 | |
131 /** | |
132 * Handles "Custom..." button activation. | |
133 * @private | |
134 */ | |
135 handleChooseFile_: function() { | |
136 chrome.send('chooseWallpaper'); | |
137 }, | |
138 | |
139 /** | |
140 * Handle the wallpaper layout setting change. | |
141 * @private | |
142 */ | |
143 handleLayoutChange_: function() { | |
144 var setWallpaperLayout = $('set-wallpaper-layout'); | |
145 var layout = setWallpaperLayout.options[ | |
146 setWallpaperLayout.selectedIndex].value; | |
147 chrome.send('changeWallpaperLayout', [layout]); | |
148 }, | |
149 | |
150 /** | |
151 * Handles image selection change. | |
152 * @private | |
153 */ | |
154 handleImageSelected_: function() { | |
155 var wallpaperGrid = $('wallpaper-grid'); | |
156 var url = wallpaperGrid.selectedItemUrl; | |
157 if (url && | |
158 !wallpaperGrid.inProgramSelection) { | |
159 if (url.indexOf(CUSTOM_WALLPAPER_PREFIX) == 0) { | |
160 // User custom wallpaper is selected | |
161 this.isCustom = true; | |
162 // When users select the custom wallpaper thumbnail from picker UI, | |
163 // use the saved layout value and redraw the wallpaper. | |
164 this.handleLayoutChange_(); | |
165 } else { | |
166 this.isCustom = false; | |
167 chrome.send('selectDefaultWallpaper', [url]); | |
168 } | |
169 this.setWallpaperAttribution_(url); | |
170 } | |
171 }, | |
172 | |
173 /** | |
174 * Handles double click on the image grid. | |
175 * @param {Event} e Double click Event. | |
176 */ | |
177 handleImageDblClick_: function(e) { | |
178 var wallpaperGrid = $('wallpaper-grid'); | |
179 if (wallpaperGrid.disabled) | |
180 return; | |
181 // Close page unless the click target is the grid itself. | |
182 if (e.target instanceof HTMLImageElement) | |
183 OptionsPage.closeOverlay(); | |
184 }, | |
185 | |
186 /** | |
187 * Handles click on the "I'm feeling lucky" checkbox. | |
188 * @private | |
189 */ | |
190 handleCheckboxClick_: function() { | |
191 var wallpaperGrid = $('wallpaper-grid'); | |
192 if ($('use-daily-wallpaper').checked) { | |
193 wallpaperGrid.disabled = true; | |
194 $('wallpaper-attribution-label').hidden = false; | |
195 chrome.send('selectDailyWallpaper'); | |
196 wallpaperGrid.classList.add('grayout'); | |
197 $('set-wallpaper-layout').hidden = true; | |
198 } else { | |
199 wallpaperGrid.disabled = false; | |
200 wallpaperGrid.classList.remove('grayout'); | |
201 // Set the wallpaper type to User::DEFAULT. | |
202 this.handleImageSelected_(); | |
203 } | |
204 }, | |
205 | |
206 /** | |
207 * Selects corresponding wallpaper thumbnail with the given URL and toggle | |
208 * the "Change wallpaper daily..." checkbox. | |
209 * @param {string} url URL of the wallpaper thumbnail to select. | |
210 * @param {boolean} isDaily True if user checked "Change wallpaper daily..." | |
211 * checkbox. | |
212 * @private | |
213 */ | |
214 setSelectedImage_: function(url, isDaily) { | |
215 var wallpaperGrid = $('wallpaper-grid'); | |
216 wallpaperGrid.selectedItemUrl = url; | |
217 this.setWallpaperAttribution_(url); | |
218 if (isDaily) { | |
219 // Do not call chrome.send('selectDailyWallpaper'). | |
220 $('use-daily-wallpaper').checked = true; | |
221 wallpaperGrid.disabled = true; | |
222 wallpaperGrid.classList.add('grayout'); | |
223 } | |
224 }, | |
225 | |
226 /** | |
227 * Appends default images to the image grid. Should only be called once. | |
228 * @param {Array.<{author: string, url: string, website: string}>} | |
229 * wallpapers An array of wallpaper objects. | |
230 * @private | |
231 */ | |
232 setDefaultImages_: function(wallpapers) { | |
233 var wallpaperGrid = $('wallpaper-grid'); | |
234 // TODO(bshe): Ideally we should save author and website with the actual | |
235 // image (URL) and not use index related storage. This way this data is | |
236 // stored in one place rather than depending on the index to be | |
237 // consistent. | |
238 for (var i = 0, wallpaper; wallpaper = wallpapers[i]; i++) { | |
239 this.wallpapers_.push(wallpaper); | |
240 wallpaperGrid.addItem(wallpaper.url); | |
241 } | |
242 }, | |
243 | |
244 /** | |
245 * Display layout drop down box and disable daily mode if enabled. Called | |
246 * when user select a valid file from file system. | |
247 */ | |
248 didSelectFile_: function() { | |
249 $('set-wallpaper-layout').hidden = false; | |
250 var wallpaperGrid = $('wallpaper-grid'); | |
251 if ($('use-daily-wallpaper').checked) { | |
252 $('use-daily-wallpaper').checked = false; | |
253 wallpaperGrid.disabled = false; | |
254 wallpaperGrid.classList.remove('grayout'); | |
255 } | |
256 }, | |
257 | |
258 /** | |
259 * Returns url of current user's custom wallpaper thumbnail. | |
260 * @private | |
261 */ | |
262 currentWallpaperImageUrl_: function() { | |
263 return CUSTOM_WALLPAPER_PREFIX + BrowserOptions.getLoggedInUsername() + | |
264 '?id=' + (new Date()).getTime(); | |
265 }, | |
266 | |
267 /** | |
268 * Updates the visibility of attribution-label and set-wallpaper-layout. | |
269 * @param {boolean} isCustom True if users select custom wallpaper. | |
270 */ | |
271 set isCustom(isCustom) { | |
272 if (isCustom) { | |
273 // Clear attributions for custom wallpaper. | |
274 $('wallpaper-attribution-label').hidden = true; | |
275 // Enable the layout drop down box when custom wallpaper is selected. | |
276 $('set-wallpaper-layout').hidden = false; | |
277 } else { | |
278 $('wallpaper-attribution-label').hidden = false; | |
279 $('set-wallpaper-layout').hidden = true; | |
280 } | |
281 }, | |
282 | |
283 /** | |
284 * Adds or updates custom user wallpaper thumbnail from file. | |
285 * @private | |
286 */ | |
287 setCustomImage_: function() { | |
288 var wallpaperGrid = $('wallpaper-grid'); | |
289 var url = this.currentWallpaperImageUrl_(); | |
290 if (this.oldImage_) { | |
291 this.oldImage_ = wallpaperGrid.updateItem(this.oldImage_, url); | |
292 } else { | |
293 // Insert to the end of wallpaper list. | |
294 var pos = wallpaperGrid.length; | |
295 this.oldImage_ = wallpaperGrid.addItem(url, undefined, undefined, pos); | |
296 } | |
297 | |
298 this.isCustom = true; | |
299 this.setWallpaperAttribution_(''); | |
300 wallpaperGrid.selectedItem = this.oldImage_; | |
301 }, | |
302 }; | |
303 | |
304 // Forward public APIs to private implementations. | |
305 [ | |
306 'setDefaultImages', | |
307 'setSelectedImage', | |
308 'populateWallpaperLayouts', | |
309 'didSelectFile', | |
310 'setCustomImage' | |
311 ].forEach(function(name) { | |
312 SetWallpaperOptions[name] = function() { | |
313 var instance = SetWallpaperOptions.getInstance(); | |
314 return instance[name + '_'].apply(instance, arguments); | |
315 }; | |
316 }); | |
317 | |
318 // Export | |
319 return { | |
320 SetWallpaperOptions: SetWallpaperOptions | |
321 }; | |
322 | |
323 }); | |
324 | |
OLD | NEW |