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

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

Issue 1364163002: Material PDF: Support RTL languages (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 2 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 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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698