| 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 |