| OLD | NEW |
| 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 (function() { | 5 (function() { |
| 6 /** | 6 /** |
| 7 * Size of additional padding in the inner scrollable section of the dropdown. | 7 * Size of additional padding in the inner scrollable section of the dropdown. |
| 8 */ | 8 */ |
| 9 var DROPDOWN_INNER_PADDING = 12; | 9 var DROPDOWN_INNER_PADDING = 12; |
| 10 | 10 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 21 /** String to be displayed at the top of the dropdown. */ | 21 /** String to be displayed at the top of the dropdown. */ |
| 22 header: String, | 22 header: String, |
| 23 | 23 |
| 24 /** Icon to display when the dropdown is closed. */ | 24 /** Icon to display when the dropdown is closed. */ |
| 25 closedIcon: String, | 25 closedIcon: String, |
| 26 | 26 |
| 27 /** Icon to display when the dropdown is open. */ | 27 /** Icon to display when the dropdown is open. */ |
| 28 openIcon: String, | 28 openIcon: String, |
| 29 | 29 |
| 30 /** True if the dropdown is currently open. */ | 30 /** True if the dropdown is currently open. */ |
| 31 dropdownOpen: { | 31 dropdownOpen: {type: Boolean, reflectToAttribute: true, value: false}, |
| 32 type: Boolean, | |
| 33 reflectToAttribute: true, | |
| 34 value: false | |
| 35 }, | |
| 36 | 32 |
| 37 /** Toolbar icon currently being displayed. */ | 33 /** Toolbar icon currently being displayed. */ |
| 38 dropdownIcon: { | 34 dropdownIcon: { |
| 39 type: String, | 35 type: String, |
| 40 computed: 'computeIcon_(dropdownOpen, closedIcon, openIcon)' | 36 computed: 'computeIcon_(dropdownOpen, closedIcon, openIcon)' |
| 41 }, | 37 }, |
| 42 | 38 |
| 43 /** Lowest vertical point that the dropdown should occupy (px). */ | 39 /** Lowest vertical point that the dropdown should occupy (px). */ |
| 44 lowerBound: { | 40 lowerBound: {type: Number, observer: 'lowerBoundChanged_'}, |
| 45 type: Number, | |
| 46 observer: 'lowerBoundChanged_' | |
| 47 }, | |
| 48 | 41 |
| 49 /** | 42 /** |
| 50 * True if the max-height CSS property for the dropdown scroll container | 43 * True if the max-height CSS property for the dropdown scroll container |
| 51 * is valid. If false, the height will be updated the next time the | 44 * is valid. If false, the height will be updated the next time the |
| 52 * dropdown is visible. | 45 * dropdown is visible. |
| 53 */ | 46 */ |
| 54 maxHeightValid_: false, | 47 maxHeightValid_: false, |
| 55 | 48 |
| 56 /** Current animation being played, or null if there is none. */ | 49 /** Current animation being played, or null if there is none. */ |
| 57 animation_: Object | 50 animation_: Object |
| (...skipping 16 matching lines...) Expand all Loading... |
| 74 if (!this.maxHeightValid_) | 67 if (!this.maxHeightValid_) |
| 75 this.updateMaxHeight(); | 68 this.updateMaxHeight(); |
| 76 } | 69 } |
| 77 this.cancelAnimation_(); | 70 this.cancelAnimation_(); |
| 78 this.playAnimation_(this.dropdownOpen); | 71 this.playAnimation_(this.dropdownOpen); |
| 79 }, | 72 }, |
| 80 | 73 |
| 81 updateMaxHeight: function() { | 74 updateMaxHeight: function() { |
| 82 var scrollContainer = this.$['scroll-container']; | 75 var scrollContainer = this.$['scroll-container']; |
| 83 var height = this.lowerBound - | 76 var height = this.lowerBound - |
| 84 scrollContainer.getBoundingClientRect().top - | 77 scrollContainer.getBoundingClientRect().top - DROPDOWN_INNER_PADDING; |
| 85 DROPDOWN_INNER_PADDING; | |
| 86 height = Math.max(height, MIN_DROPDOWN_HEIGHT); | 78 height = Math.max(height, MIN_DROPDOWN_HEIGHT); |
| 87 scrollContainer.style.maxHeight = height + 'px'; | 79 scrollContainer.style.maxHeight = height + 'px'; |
| 88 this.maxHeightValid_ = true; | 80 this.maxHeightValid_ = true; |
| 89 }, | 81 }, |
| 90 | 82 |
| 91 cancelAnimation_: function() { | 83 cancelAnimation_: function() { |
| 92 if (this._animation) | 84 if (this._animation) |
| 93 this._animation.cancel(); | 85 this._animation.cancel(); |
| 94 }, | 86 }, |
| 95 | 87 |
| (...skipping 12 matching lines...) Expand all Loading... |
| 108 }.bind(this); | 100 }.bind(this); |
| 109 }, | 101 }, |
| 110 | 102 |
| 111 animateEntry_: function() { | 103 animateEntry_: function() { |
| 112 var maxHeight = this.$.dropdown.getBoundingClientRect().height - | 104 var maxHeight = this.$.dropdown.getBoundingClientRect().height - |
| 113 DROPDOWN_OUTER_PADDING; | 105 DROPDOWN_OUTER_PADDING; |
| 114 | 106 |
| 115 if (maxHeight < 0) | 107 if (maxHeight < 0) |
| 116 maxHeight = 0; | 108 maxHeight = 0; |
| 117 | 109 |
| 118 var fade = new KeyframeEffect(this.$.dropdown, [ | 110 var fade = new KeyframeEffect( |
| 119 {opacity: 0}, | 111 this.$.dropdown, [{opacity: 0}, {opacity: 1}], |
| 120 {opacity: 1} | 112 {duration: 150, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); |
| 121 ], {duration: 150, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); | 113 var slide = new KeyframeEffect( |
| 122 var slide = new KeyframeEffect(this.$.dropdown, [ | 114 this.$.dropdown, |
| 115 [ |
| 123 {height: '20px', transform: 'translateY(-10px)'}, | 116 {height: '20px', transform: 'translateY(-10px)'}, |
| 124 {height: maxHeight + 'px', transform: 'translateY(0)'} | 117 {height: maxHeight + 'px', transform: 'translateY(0)'} |
| 125 ], {duration: 250, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); | 118 ], |
| 119 {duration: 250, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); |
| 126 | 120 |
| 127 return document.timeline.play(new GroupEffect([fade, slide])); | 121 return document.timeline.play(new GroupEffect([fade, slide])); |
| 128 }, | 122 }, |
| 129 | 123 |
| 130 animateExit_: function() { | 124 animateExit_: function() { |
| 131 return this.$.dropdown.animate([ | 125 return this.$.dropdown.animate( |
| 126 [ |
| 132 {transform: 'translateY(0)', opacity: 1}, | 127 {transform: 'translateY(0)', opacity: 1}, |
| 133 {transform: 'translateY(-5px)', opacity: 0} | 128 {transform: 'translateY(-5px)', opacity: 0} |
| 134 ], {duration: 100, easing: 'cubic-bezier(0.4, 0, 1, 1)'}); | 129 ], |
| 130 {duration: 100, easing: 'cubic-bezier(0.4, 0, 1, 1)'}); |
| 135 } | 131 } |
| 136 }); | 132 }); |
| 137 | 133 |
| 138 })(); | 134 })(); |
| OLD | NEW |