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 // This Polymer element is used as a header for the media router interface. | 5 // This Polymer element is used as a header for the media router interface. |
6 Polymer({ | 6 Polymer({ |
7 is: 'media-router-header', | 7 is: 'media-router-header', |
8 | 8 |
9 properties: { | 9 properties: { |
10 /** | 10 /** |
(...skipping 18 matching lines...) Expand all Loading... | |
29 /** | 29 /** |
30 * The header text to show. | 30 * The header text to show. |
31 * @type {string} | 31 * @type {string} |
32 */ | 32 */ |
33 headingText: { | 33 headingText: { |
34 type: String, | 34 type: String, |
35 value: '', | 35 value: '', |
36 }, | 36 }, |
37 | 37 |
38 /** | 38 /** |
39 * The current view that this header should reflect. | 39 * The height of the header when it shows the user email. |
40 * @type {?media_router.MediaRouterView} | 40 * @private {number} |
41 */ | 41 */ |
42 view: { | 42 headerWithEmailHeight_: { |
43 type: String, | 43 type: Number, |
44 value: null, | 44 readOnly: true, |
45 observer: 'updateHeaderCursorStyle_', | 45 value: 62, |
46 }, | 46 }, |
47 | 47 |
48 /** | 48 /** |
49 * Whether to show the user email in the header. | |
50 * @type {boolean} | |
51 */ | |
52 showEmail: { | |
53 type: Boolean, | |
54 value: false, | |
55 observer: 'maybeChangeHeaderHeight_', | |
56 }, | |
57 | |
58 /** | |
49 * The text to show in the tooltip. | 59 * The text to show in the tooltip. |
50 * @type {string} | 60 * @type {string} |
51 */ | 61 */ |
52 tooltip: { | 62 tooltip: { |
53 type: String, | 63 type: String, |
54 value: '', | 64 value: '', |
55 }, | 65 }, |
66 | |
67 /** | |
68 * The user email if they are signed in. | |
69 * @type {string} | |
70 */ | |
71 userEmail: { | |
72 type: String, | |
73 value: '', | |
74 }, | |
75 | |
76 /** | |
77 * The current view that this header should reflect. | |
78 * @type {?media_router.MediaRouterView} | |
79 */ | |
80 view: { | |
81 type: String, | |
82 value: null, | |
83 observer: 'updateHeaderCursorStyle_', | |
84 }, | |
56 }, | 85 }, |
57 | 86 |
58 attached: function() { | 87 attached: function() { |
59 // isRTL() only works after i18n_template.js runs to set <html dir>. | 88 // isRTL() only works after i18n_template.js runs to set <html dir>. |
60 // Set the back button icon based on text direction. | 89 // Set the back button icon based on text direction. |
61 this.arrowDropIcon_ = isRTL() ? 'arrow-forward' : 'arrow-back'; | 90 this.arrowDropIcon_ = isRTL() ? 'arrow-forward' : 'arrow-back'; |
62 }, | 91 }, |
63 | 92 |
64 /** | 93 /** |
65 * @param {?media_router.MediaRouterView} view The current view. | 94 * @param {?media_router.MediaRouterView} view The current view. |
(...skipping 18 matching lines...) Expand all Loading... | |
84 /** | 113 /** |
85 * @param {?media_router.MediaRouterView} view The current view. | 114 * @param {?media_router.MediaRouterView} view The current view. |
86 * @return {boolean} Whether or not the back button should be hidden. | 115 * @return {boolean} Whether or not the back button should be hidden. |
87 * @private | 116 * @private |
88 */ | 117 */ |
89 computeBackButtonHidden_: function(view) { | 118 computeBackButtonHidden_: function(view) { |
90 return view != media_router.MediaRouterView.ROUTE_DETAILS; | 119 return view != media_router.MediaRouterView.ROUTE_DETAILS; |
91 }, | 120 }, |
92 | 121 |
93 /** | 122 /** |
123 * Returns whether given string is undefined, null, empty, or whitespace only. | |
124 * @param {?string} str String to be tested. | |
125 * @return {boolean} |true| if the string is undefined, null, empty, or | |
126 * whitespace. | |
127 * @private | |
128 */ | |
129 isEmptyOrWhitespace_: function(str) { | |
130 return str === undefined || str === null || (/^\s*$/).test(str); | |
131 }, | |
132 | |
133 /** | |
94 * Handles a click on the arrow button by firing an arrow-click event. | 134 * Handles a click on the arrow button by firing an arrow-click event. |
95 * | 135 * |
96 * @private | 136 * @private |
97 */ | 137 */ |
98 onHeaderOrArrowClick_: function() { | 138 onHeaderOrArrowClick_: function() { |
99 if (this.view == media_router.MediaRouterView.SINK_LIST || | 139 if (this.view == media_router.MediaRouterView.SINK_LIST || |
100 this.view == media_router.MediaRouterView.CAST_MODE_LIST) { | 140 this.view == media_router.MediaRouterView.CAST_MODE_LIST) { |
101 this.fire('header-or-arrow-click'); | 141 this.fire('header-or-arrow-click'); |
102 } | 142 } |
103 }, | 143 }, |
(...skipping 10 matching lines...) Expand all Loading... | |
114 /** | 154 /** |
115 * Handles a click on the close button by firing a close-button-click event. | 155 * Handles a click on the close button by firing a close-button-click event. |
116 * | 156 * |
117 * @private | 157 * @private |
118 */ | 158 */ |
119 onCloseButtonClick_: function() { | 159 onCloseButtonClick_: function() { |
120 this.fire('close-button-click'); | 160 this.fire('close-button-click'); |
121 }, | 161 }, |
122 | 162 |
123 /** | 163 /** |
164 * Updates header height to accomodate email text. This is called on changes | |
165 * to |showEmail| and will return early if the value has not changed. | |
166 * | |
167 * @param {boolean} oldValue . | |
168 * @param {boolean} newValue . | |
169 * @private | |
170 */ | |
171 maybeChangeHeaderHeight_: function(oldValue, newValue) { | |
172 if (!!oldValue == !!newValue) { | |
173 return; | |
174 } | |
175 | |
176 // Ensures conditional templates are stamped. | |
177 this.async(function() { | |
178 var currentHeight = this.offsetHeight; | |
179 | |
180 this.$$('#header-toolbar').style.height = | |
181 this.showEmail && | |
182 !this.isEmptyOrWhitespace_(this.userEmail) ? | |
apacible
2016/02/25 00:16:02
nit: Fix indenting here and the next line. Also, d
amp
2016/02/25 03:01:14
Done.
182 does fit on the line above.
showone=Cod
| |
183 this.headerWithEmailHeight_ + 'px' : undefined; | |
184 | |
185 var newHeight = this.offsetHeight; | |
186 // Only fire if height actually changed. | |
187 if (currentHeight != newHeight) { | |
apacible
2016/02/25 00:16:02
nit: Use |this.offsetHeight| here rather than decl
amp
2016/02/25 03:01:15
Done.
| |
188 this.fire('header-height-changed'); | |
189 } | |
190 }); | |
191 }, | |
192 | |
193 /** | |
124 * Updates the cursor style for the header text when the view changes. When | 194 * Updates the cursor style for the header text when the view changes. When |
125 * the drop arrow is also shown, the header text is also clickable. | 195 * the drop arrow is also shown, the header text is also clickable. |
126 * | 196 * |
127 * @param {?media_router.MediaRouterView} view The current view. | 197 * @param {?media_router.MediaRouterView} view The current view. |
128 * @private | 198 * @private |
129 */ | 199 */ |
130 updateHeaderCursorStyle_: function(view) { | 200 updateHeaderCursorStyle_: function(view) { |
131 this.$$('#header-text').style.cursor = | 201 this.$$('#header-text').style.cursor = |
132 view == media_router.MediaRouterView.SINK_LIST || | 202 view == media_router.MediaRouterView.SINK_LIST || |
133 view == media_router.MediaRouterView.CAST_MODE_LIST ? | 203 view == media_router.MediaRouterView.CAST_MODE_LIST ? |
134 'pointer' : 'auto'; | 204 'pointer' : 'auto'; |
135 }, | 205 }, |
136 }); | 206 }); |
OLD | NEW |