blob: cf1524e1702b3d7ee61abec85a63030e0e8693fb [file] [log] [blame]
<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>