| <link rel="import" href="../../polymer/polymer.html"> |
| <link rel="import" href="../../paper-button/paper-button.html"> |
| <polymer-element name="ag-data-grid-column-renderer" extends="th" attributes="data gridState" expects-grid-state> |
| <template> |
| <link rel="stylesheet" href="renderer.css"> |
| <paper-button class="{{ data.align }}" disabled?="{{!data.sortable}}" on-tap="{{ updateGridState }}"> |
| {{ formattedLabel }} |
| </paper-button> |
| </template> |
| <script> |
| /* |
| * @private |
| */ |
| Polymer('ag-data-grid-column-renderer', { |
| 'observe': { |
| 'data.flex' : 'updateWidth', |
| 'data.totalFlex' : 'updateWidth', |
| 'gridState.sort.key' : 'formatLabel', |
| 'gridState.sort.ascending' : 'formatLabel' |
| }, |
| |
| formattedLabel: '', |
| |
| ready: function() { |
| this.formatLabel(); |
| }, |
| |
| domReady: function() { |
| this.updateWidth(); |
| }, |
| |
| updateWidth: function() { |
| // calculate the width value based on flex and total flex of the whole grid. |
| this.style.width = (this.data.flex / this.data.totalFlex) * 100 + '%'; |
| }, |
| |
| updateGridState:function() { |
| if( !this.data.sortable ) { |
| return; |
| } |
| this.gridState.sort.ascending = !this.gridState.sort.ascending; |
| this.gridState.sort.key = this.data.key; |
| }, |
| |
| formatLabel: function() { |
| if (!this.data.sortable || this.gridState.sort.key != this.data.key) { |
| this.formattedLabel = this.data.label; |
| return; |
| } |
| |
| if (this.gridState.sort.ascending) { |
| this.formattedLabel = this.data.label + ' \u21A5'; // up wedge unicode character |
| } else { |
| this.formattedLabel = this.data.label + ' \u21A7'; // down wedge unicode character |
| } |
| } |
| }); |
| </script> |
| </polymer-element> |