Chromium Code Reviews| 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, |
|
imcheng
2016/02/17 00:51:08
nit: seems like you can just make this a String '6
amp
2016/02/17 02:11:37
It would work as a string, but if we ever need to
| |
| 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) ? | |
| 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 |