Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(92)

Side by Side Diff: chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js

Issue 2617663002: WIP: run clang-format-js on lots of things (Closed)
Patch Set: merge Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698