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