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 Polymer({ | 5 Polymer({ |
6 is: 'viewer-zoom-button', | 6 is: 'viewer-zoom-button', |
7 | 7 |
8 behaviors: [ | |
9 Polymer.NeonAnimationRunnerBehavior | |
10 ], | |
11 | |
12 properties: { | 8 properties: { |
13 /** | 9 /** |
14 * Icons to be displayed on the FAB. Multiple icons should be separated with | 10 * Icons to be displayed on the FAB. Multiple icons should be separated with |
15 * spaces, and will be cycled through every time the FAB is clicked. | 11 * spaces, and will be cycled through every time the FAB is clicked. |
16 */ | 12 */ |
17 icons: String, | 13 icons: String, |
18 | 14 |
19 /** | 15 /** |
20 * Array version of the list of icons. Polymer does not allow array | 16 * Array version of the list of icons. Polymer does not allow array |
21 * properties to be set from HTML, so we must use a string property and | 17 * properties to be set from HTML, so we must use a string property and |
22 * perform the conversion manually. | 18 * perform the conversion manually. |
23 * @private | 19 * @private |
24 */ | 20 */ |
25 icons_: { | 21 icons_: { |
26 type: Array, | 22 type: Array, |
27 value: [''], | 23 value: [''], |
28 computed: 'computeIconsArray_(icons)' | 24 computed: 'computeIconsArray_(icons)' |
29 }, | 25 }, |
30 | 26 |
31 tooltips: Array, | 27 tooltips: Array, |
32 | 28 |
33 opened: { | 29 closed: { |
34 type: Boolean, | 30 type: Boolean, |
35 value: true | 31 reflectToAttribute: true, |
| 32 value: false |
36 }, | 33 }, |
37 | 34 |
38 delay: Number, | 35 delay: { |
39 | 36 type: Number, |
40 animationConfig: { | 37 observer: 'delayChanged_' |
41 type: Object, | |
42 computed: 'computeAnimationConfig_(delay)' | |
43 }, | 38 }, |
44 | 39 |
45 /** | 40 /** |
46 * Index of the icon currently being displayed. | 41 * Index of the icon currently being displayed. |
47 */ | 42 */ |
48 activeIndex: { | 43 activeIndex: { |
49 type: Number, | 44 type: Number, |
50 value: 0 | 45 value: 0 |
51 }, | 46 }, |
52 | 47 |
53 /** | 48 /** |
54 * Icon currently being displayed on the FAB. | 49 * Icon currently being displayed on the FAB. |
55 * @private | 50 * @private |
56 */ | 51 */ |
57 visibleIcon_: { | 52 visibleIcon_: { |
58 type: String, | 53 type: String, |
59 computed: 'computeVisibleIcon_(icons_, activeIndex)' | 54 computed: 'computeVisibleIcon_(icons_, activeIndex)' |
60 }, | 55 }, |
61 | 56 |
62 visibleTooltip_: { | 57 visibleTooltip_: { |
63 type: String, | 58 type: String, |
64 computed: 'computeVisibleTooltip_(tooltips, activeIndex)' | 59 computed: 'computeVisibleTooltip_(tooltips, activeIndex)' |
65 } | 60 } |
66 }, | 61 }, |
67 | 62 |
68 computeAnimationConfig_: function(delay) { | |
69 return { | |
70 'entry': { | |
71 name: 'transform-animation', | |
72 node: this, | |
73 timing: { | |
74 easing: 'cubic-bezier(0, 0, 0.2, 1)', | |
75 duration: 250, | |
76 delay: delay | |
77 }, | |
78 transformFrom: 'translateX(100%)' | |
79 }, | |
80 'exit': { | |
81 name: 'transform-animation', | |
82 node: this, | |
83 timing: { | |
84 easing: 'cubic-bezier(0.4, 0, 1, 1)', | |
85 duration: 250, | |
86 delay: delay | |
87 }, | |
88 transformTo: 'translateX(100%)' | |
89 } | |
90 }; | |
91 }, | |
92 | |
93 computeIconsArray_: function(icons) { | 63 computeIconsArray_: function(icons) { |
94 return icons.split(' '); | 64 return icons.split(' '); |
95 }, | 65 }, |
96 | 66 |
97 computeVisibleIcon_: function(icons, activeIndex) { | 67 computeVisibleIcon_: function(icons, activeIndex) { |
98 return icons[activeIndex]; | 68 return icons[activeIndex]; |
99 }, | 69 }, |
100 | 70 |
101 computeVisibleTooltip_: function(tooltips, activeIndex) { | 71 computeVisibleTooltip_: function(tooltips, activeIndex) { |
102 return tooltips[activeIndex]; | 72 return tooltips[activeIndex]; |
103 }, | 73 }, |
104 | 74 |
105 listeners: { | 75 delayChanged_: function() { |
106 'neon-animation-finish': '_onAnimationFinished' | 76 this.$.wrapper.style.transitionDelay = this.delay + 'ms'; |
107 }, | |
108 | |
109 _onAnimationFinished: function() { | |
110 this.style.transform = this.opened ? 'none' : 'translateX(100%)'; | |
111 }, | 77 }, |
112 | 78 |
113 show: function() { | 79 show: function() { |
114 if (!this.opened) { | 80 this.closed = false; |
115 this.toggle_(); | |
116 } | |
117 }, | 81 }, |
118 | 82 |
119 hide: function() { | 83 hide: function() { |
120 if (this.opened) | 84 this.closed = true; |
121 this.toggle_(); | |
122 }, | |
123 | |
124 toggle_: function() { | |
125 this.opened = !this.opened; | |
126 this.cancelAnimation(); | |
127 this.playAnimation(this.opened ? 'entry' : 'exit'); | |
128 }, | 85 }, |
129 | 86 |
130 fireClick: function() { | 87 fireClick: function() { |
131 // We cannot attach an on-click to the entire viewer-zoom-button, as this | 88 // We cannot attach an on-click to the entire viewer-zoom-button, as this |
132 // will include clicks on the margins. Instead, proxy clicks on the FAB | 89 // will include clicks on the margins. Instead, proxy clicks on the FAB |
133 // through. | 90 // through. |
134 this.fire('fabclick'); | 91 this.fire('fabclick'); |
135 | 92 |
136 this.activeIndex = (this.activeIndex + 1) % this.icons_.length; | 93 this.activeIndex = (this.activeIndex + 1) % this.icons_.length; |
137 } | 94 } |
138 }); | 95 }); |
OLD | NEW |