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 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
114 /** | 143 /** |
115 * Handles a click on the close button by firing a close-button-click event. | 144 * Handles a click on the close button by firing a close-button-click event. |
116 * | 145 * |
117 * @private | 146 * @private |
118 */ | 147 */ |
119 onCloseButtonClick_: function() { | 148 onCloseButtonClick_: function() { |
120 this.fire('close-button-click'); | 149 this.fire('close-button-click'); |
121 }, | 150 }, |
122 | 151 |
123 /** | 152 /** |
153 * Updates header height to accomodate email text. This is called on changes | |
154 * to |showEmail| and will return early if the value has not changed. | |
155 * | |
156 * @param {boolean} oldValue . | |
157 * @param {boolean} newValue . | |
158 * @private | |
159 */ | |
160 maybeChangeHeaderHeight_: function(oldValue, newValue) { | |
161 if (oldValue == newValue) { | |
162 return; | |
163 } | |
164 | |
165 // Ensures conditional templates are stamped. | |
166 this.async(function() { | |
167 var currentHeight = this.offsetHeight; | |
168 | |
169 this.$$('#header-toolbar').style.height = | |
170 this.showEmail && | |
171 !$('media-router-container').isEmptyOrWhitespace_(this.userEmail) ? | |
imcheng
2016/02/18 18:58:54
I am all for reusing code, but it seems a bit odd
amp
2016/02/20 02:00:55
Putting it in media_router.js would also require h
apacible
2016/02/23 21:51:00
After extraction you can make it accessible simila
| |
172 this.headerWithEmailHeight_ + 'px' : undefined; | |
173 | |
174 var newHeight = this.offsetHeight; | |
175 // Only fire if height actually changed. | |
176 if (currentHeight != newHeight) { | |
177 this.fire('header-height-changed'); | |
178 } | |
179 }); | |
180 }, | |
181 | |
182 /** | |
124 * Updates the cursor style for the header text when the view changes. When | 183 * 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. | 184 * the drop arrow is also shown, the header text is also clickable. |
126 * | 185 * |
127 * @param {?media_router.MediaRouterView} view The current view. | 186 * @param {?media_router.MediaRouterView} view The current view. |
128 * @private | 187 * @private |
129 */ | 188 */ |
130 updateHeaderCursorStyle_: function(view) { | 189 updateHeaderCursorStyle_: function(view) { |
131 this.$$('#header-text').style.cursor = | 190 this.$$('#header-text').style.cursor = |
132 view == media_router.MediaRouterView.SINK_LIST || | 191 view == media_router.MediaRouterView.SINK_LIST || |
133 view == media_router.MediaRouterView.CAST_MODE_LIST ? | 192 view == media_router.MediaRouterView.CAST_MODE_LIST ? |
134 'pointer' : 'auto'; | 193 'pointer' : 'auto'; |
135 }, | 194 }, |
136 }); | 195 }); |
OLD | NEW |