| OLD | NEW |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 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 | 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 cr.define('options', function() { | 5 cr.define('options', function() { |
| 6 const ArrayDataModel = cr.ui.ArrayDataModel; | 6 const ArrayDataModel = cr.ui.ArrayDataModel; |
| 7 const DeletableItem = options.DeletableItem; | 7 const DeletableItem = options.DeletableItem; |
| 8 const DeletableItemList = options.DeletableItemList; | 8 const DeletableItemList = options.DeletableItemList; |
| 9 const List = cr.ui.List; | 9 const List = cr.ui.List; |
| 10 const ListItem = cr.ui.ListItem; | 10 const ListItem = cr.ui.ListItem; |
| 11 const ListSingleSelectionModel = cr.ui.ListSingleSelectionModel; | 11 const ListSingleSelectionModel = cr.ui.ListSingleSelectionModel; |
| (...skipping 211 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 223 this.savePreference_(); | 223 this.savePreference_(); |
| 224 } | 224 } |
| 225 return index; | 225 return index; |
| 226 }, | 226 }, |
| 227 | 227 |
| 228 /* | 228 /* |
| 229 * Computes the target item of drop event. | 229 * Computes the target item of drop event. |
| 230 * @param {Event} e The drop or dragover event. | 230 * @param {Event} e The drop or dragover event. |
| 231 * @private | 231 * @private |
| 232 */ | 232 */ |
| 233 getTargetFromDropEvent_ : function(e) { | 233 getTargetFromDropEvent_: function(e) { |
| 234 var target = e.target; | 234 var target = e.target; |
| 235 // e.target may be an inner element of the list item | 235 // e.target may be an inner element of the list item |
| 236 while (target != null && !(target instanceof ListItem)) { | 236 while (target != null && !(target instanceof ListItem)) { |
| 237 target = target.parentNode; | 237 target = target.parentNode; |
| 238 } | 238 } |
| 239 return target; | 239 return target; |
| 240 }, | 240 }, |
| 241 | 241 |
| 242 /* | 242 /* |
| 243 * Handles the dragstart event. | 243 * Handles the dragstart event. |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 314 this.selectionModel.selectedIndex = newIndex; | 314 this.selectionModel.selectedIndex = newIndex; |
| 315 // Save the preference. | 315 // Save the preference. |
| 316 this.savePreference_(); | 316 this.savePreference_(); |
| 317 }, | 317 }, |
| 318 | 318 |
| 319 /* | 319 /* |
| 320 * Handles the dragleave event. | 320 * Handles the dragleave event. |
| 321 * @param {Event} e The dragleave event | 321 * @param {Event} e The dragleave event |
| 322 * @private | 322 * @private |
| 323 */ | 323 */ |
| 324 handleDragLeave_ : function(e) { | 324 handleDragLeave_: function(e) { |
| 325 this.hideDropMarker_(); | 325 this.hideDropMarker_(); |
| 326 }, | 326 }, |
| 327 | 327 |
| 328 /* | 328 /* |
| 329 * Shows and positions the marker to indicate the drop target. | 329 * Shows and positions the marker to indicate the drop target. |
| 330 * @param {HTMLElement} target The current target list item of drop | 330 * @param {HTMLElement} target The current target list item of drop |
| 331 * @param {string} pos 'below' or 'above' | 331 * @param {string} pos 'below' or 'above' |
| 332 * @private | 332 * @private |
| 333 */ | 333 */ |
| 334 showDropMarker_ : function(target, pos) { | 334 showDropMarker_: function(target, pos) { |
| 335 window.clearTimeout(this.hideDropMarkerTimer_); | 335 window.clearTimeout(this.hideDropMarkerTimer_); |
| 336 var marker = $('language-options-list-dropmarker'); | 336 var marker = $('language-options-list-dropmarker'); |
| 337 var rect = target.getBoundingClientRect(); | 337 var rect = target.getBoundingClientRect(); |
| 338 var markerHeight = 8; | 338 var markerHeight = 8; |
| 339 if (pos == 'above') { | 339 if (pos == 'above') { |
| 340 marker.style.top = (rect.top - markerHeight/2) + 'px'; | 340 marker.style.top = (rect.top - markerHeight / 2) + 'px'; |
| 341 } else { | 341 } else { |
| 342 marker.style.top = (rect.bottom - markerHeight/2) + 'px'; | 342 marker.style.top = (rect.bottom - markerHeight / 2) + 'px'; |
| 343 } | 343 } |
| 344 marker.style.width = rect.width + 'px'; | 344 marker.style.width = rect.width + 'px'; |
| 345 marker.style.left = rect.left + 'px'; | 345 marker.style.left = rect.left + 'px'; |
| 346 marker.style.display = 'block'; | 346 marker.style.display = 'block'; |
| 347 }, | 347 }, |
| 348 | 348 |
| 349 /* | 349 /* |
| 350 * Hides the drop marker. | 350 * Hides the drop marker. |
| 351 * @private | 351 * @private |
| 352 */ | 352 */ |
| 353 hideDropMarker_ : function() { | 353 hideDropMarker_: function() { |
| 354 // Hide the marker in a timeout to reduce flickering as we move between | 354 // Hide the marker in a timeout to reduce flickering as we move between |
| 355 // valid drop targets. | 355 // valid drop targets. |
| 356 window.clearTimeout(this.hideDropMarkerTimer_); | 356 window.clearTimeout(this.hideDropMarkerTimer_); |
| 357 this.hideDropMarkerTimer_ = window.setTimeout(function() { | 357 this.hideDropMarkerTimer_ = window.setTimeout(function() { |
| 358 $('language-options-list-dropmarker').style.display = ''; | 358 $('language-options-list-dropmarker').style.display = ''; |
| 359 }, 100); | 359 }, 100); |
| 360 }, | 360 }, |
| 361 | 361 |
| 362 /** | 362 /** |
| 363 * Handles preferred languages pref change. | 363 * Handles preferred languages pref change. |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 400 this.selectionModel.selectedIndex : -1); | 400 this.selectionModel.selectedIndex : -1); |
| 401 this.dataModel = new ArrayDataModel(languageCodes); | 401 this.dataModel = new ArrayDataModel(languageCodes); |
| 402 if (originalSelectedIndex >= 0 && | 402 if (originalSelectedIndex >= 0 && |
| 403 originalSelectedIndex < this.dataModel.length) { | 403 originalSelectedIndex < this.dataModel.length) { |
| 404 // Restore the original selected index if the selected index is | 404 // Restore the original selected index if the selected index is |
| 405 // valid after the data model is loaded. This is neeeded to keep | 405 // valid after the data model is loaded. This is neeeded to keep |
| 406 // the selected language after the languge is added or removed. | 406 // the selected language after the languge is added or removed. |
| 407 this.selectionModel.selectedIndex = originalSelectedIndex; | 407 this.selectionModel.selectedIndex = originalSelectedIndex; |
| 408 // The lead index should be updated too. | 408 // The lead index should be updated too. |
| 409 this.selectionModel.leadIndex = originalSelectedIndex; | 409 this.selectionModel.leadIndex = originalSelectedIndex; |
| 410 } else if (this.dataModel.length > 0){ | 410 } else if (this.dataModel.length > 0) { |
| 411 // Otherwise, select the first item if it's not empty. | 411 // Otherwise, select the first item if it's not empty. |
| 412 // Note that ListSingleSelectionModel won't select an item | 412 // Note that ListSingleSelectionModel won't select an item |
| 413 // automatically, hence we manually select the first item here. | 413 // automatically, hence we manually select the first item here. |
| 414 this.selectionModel.selectedIndex = 0; | 414 this.selectionModel.selectedIndex = 0; |
| 415 } | 415 } |
| 416 }, | 416 }, |
| 417 | 417 |
| 418 /** | 418 /** |
| 419 * Saves the preference. | 419 * Saves the preference. |
| 420 */ | 420 */ |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 478 } | 478 } |
| 479 return filteredLanguageCodes; | 479 return filteredLanguageCodes; |
| 480 }, | 480 }, |
| 481 }; | 481 }; |
| 482 | 482 |
| 483 return { | 483 return { |
| 484 LanguageList: LanguageList, | 484 LanguageList: LanguageList, |
| 485 LanguageListItem: LanguageListItem | 485 LanguageListItem: LanguageListItem |
| 486 }; | 486 }; |
| 487 }); | 487 }); |
| OLD | NEW |