| <!DOCTYPE html> |
| <!-- |
| Copyright 2015 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <polymer-element name='tr-ui-heading'> |
| <template> |
| <style> |
| :host { |
| background-color: rgb(243, 245, 247); |
| border-right: 1px solid #8e8e8e; |
| display: block; |
| height: 100%; |
| margin: 0; |
| padding: 0 5px 0 0; |
| } |
| |
| heading { |
| display: block; |
| overflow-x: hidden; |
| text-align: left; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| #arrow { |
| -webkit-flex: 0 0 auto; |
| font-family: sans-serif; |
| margin-left: 5px; |
| margin-right: 5px; |
| width: 8px; |
| } |
| |
| #link, #heading_content { |
| display: none; |
| } |
| </style> |
| <heading id='heading' on-click='{{onHeadingDivClicked_}}'> |
| <span id='arrow'></span> |
| <span id='heading_content'></span> |
| <tr-ui-a-analysis-link id='link'></tr-ui-a-analysis-link> |
| </heading> |
| </template> |
| |
| <script> |
| 'use strict'; |
| Polymer({ |
| DOWN_ARROW: String.fromCharCode(0x25BE), |
| RIGHT_ARROW: String.fromCharCode(0x25B8), |
| |
| ready: function(viewport) { |
| // Minus 6 == 1px border + 5px padding right. |
| this.style.width = (tr.c.constants.HEADING_WIDTH - 6) + 'px'; |
| |
| this.heading_ = ''; |
| this.expanded_ = true; |
| this.arrowVisible_ = false; |
| this.selectionGenerator_ = undefined; |
| |
| this.updateContents_(); |
| }, |
| |
| get heading() { |
| return this.heading_; |
| }, |
| |
| set heading(text) { |
| if (this.heading_ === text) |
| return; |
| |
| this.heading_ = text; |
| this.updateContents_(); |
| }, |
| |
| set arrowVisible(val) { |
| if (this.arrowVisible_ === val) |
| return; |
| |
| this.arrowVisible_ = !!val; |
| this.updateContents_(); |
| }, |
| |
| set tooltip(text) { |
| this.$.heading.title = text; |
| }, |
| |
| set selectionGenerator(generator) { |
| if (this.selectionGenerator_ === generator) |
| return; |
| |
| this.selectionGenerator_ = generator; |
| this.updateContents_(); |
| }, |
| |
| get expanded() { |
| return this.expanded_; |
| }, |
| |
| set expanded(expanded) { |
| if (this.expanded_ === expanded) |
| return; |
| |
| this.expanded_ = !!expanded; |
| this.updateContents_(); |
| }, |
| |
| onHeadingDivClicked_: function() { |
| this.dispatchEvent(new tr.b.Event('heading-clicked', {'bubbles': true})); |
| }, |
| |
| updateContents_: function() { |
| if (this.arrowVisible_) { |
| this.$.arrow.style.display = ''; |
| } else { |
| this.$.arrow.style.display = 'none'; |
| this.$.heading.style.display = this.expanded_ ? '' : 'none'; |
| } |
| |
| if (this.arrowVisible_) { |
| this.$.arrow.textContent = |
| this.expanded_ ? this.DOWN_ARROW : this.RIGHT_ARROW; |
| } |
| |
| this.$.link.style.display = 'none'; |
| this.$.heading_content.style.display = 'none'; |
| |
| if (this.selectionGenerator_) { |
| this.$.link.style.display = 'inline-block'; |
| this.$.link.selection = this.selectionGenerator_; |
| this.$.link.textContent = this.heading_; |
| } else { |
| this.$.heading_content.style.display = 'inline-block'; |
| this.$.heading_content.textContent = this.heading_; |
| } |
| } |
| }); |
| </script> |
| </polymer-element> |
