Resolves #60, #39

David-Mulder · Dec 11, 2015 · 4d24459 · 4d24459
1 parent ee828cd
commit 4d24459
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 33 deletions.
diff --git a/demo/dynamic-columns.html b/demo/dynamic-columns.html
@@ -49,7 +49,7 @@
 
 				<paper-card heading="Just a normal data table">
 					<paper-datatable data="{{data}}" selectable multi-selection>
-						<paper-datatable-column header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></paper-datatable-column>
+						<paper-datatable-column id="titleColumn" header="Dessert (100g serving)" property="title" type="String" style="width:99%;" sortable></paper-datatable-column>
 						<paper-datatable-column header="Calories" property="calories" type="Number" align="right" sortable tooltip="The total amount of food energy in the given serving size." sorted></paper-datatable-column>
 						<paper-datatable-column header="Fat (g)" property="fat" type="Number" align="right" format-value="[[toFixedOne]]" sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>
 						<paper-datatable-column header="Carbs (g)" property="carbs" type="Number" align="right" sortable tooltip="The total amount of carbs in the given serving size."></paper-datatable-column>
@@ -61,8 +61,24 @@
 				</paper-card>
 
 				<paper-card heading="Actions">
-					<paper-button on-tap="doInsert" raised>Insert column</paper-button>
-					<paper-button on-tap="doEditableInsert" raised>Insert editable column</paper-button>
+					<div style="padding:0px 20px 20px 20px;">
+						<paper-button on-tap="doInsert" raised style="display:inline-flex;align-items:center;">
+							<iron-icon icon="add"></iron-icon>
+							&nbsp;Insert column
+						</paper-button>
+						<paper-button on-tap="doEditableInsert" raised style="display:inline-flex;align-items:center;">
+							<iron-icon icon="add"></iron-icon>
+							&nbsp;Insert editable column
+						</paper-button>
+						<paper-button on-tap="doDelete" raised style="display:inline-flex;align-items:center;">
+							<iron-icon icon="delete"></iron-icon>
+							&nbsp;Insert column
+						</paper-button>
+						<paper-button on-tap="toggleInactive" raised style="display:inline-flex;align-items:center;">
+							<iron-icon icon="cached"></iron-icon>
+							&nbsp;Toggle [inactive] on title column
+						</paper-button>
+					</div>
 				</paper-card>
 
 		</template>
@@ -76,7 +92,6 @@
 				{id: 3, title: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:.03, iron: .08},
 				{id: 4, title: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9, sodium: 327, calcium:.07, iron: .16},
 				{id: 5, title: 'Jelly bean', calories: 373, fat: 0, carbs: 94, protein: 0, sodium: 50, calcium:0, iron: 0}
-
 			];
 			app.toFixedOne = function(value){
 				return value.toFixed(1);
@@ -97,10 +112,20 @@
 			app.doEditableInsert = function(){
 				var div = document.createElement('div');
 				div.innerHTML = '<paper-datatable-column header="Fat (dyn)" property="fat" type="Number" align="right" editable sortable tooltip="The total amount of fat in the given serving size."></paper-datatable-column>';
-				div.childNodes[0].formatValue = app.toFixedOne;
 				var columns = Polymer.dom(document).querySelectorAll('paper-datatable-column');
 				columns[3].parentNode.insertBefore(div.childNodes[0], columns[3]);
 			};
+			app.doDelete = function(){
+				var columns = Polymer.dom(document).querySelectorAll('paper-datatable-column');
+				columns[3].parentNode.removeChild(columns[3]);
+			}
+			app.toggleInactive = function(){
+				if(app.$.titleColumn.inactive){
+					app.$.titleColumn.inactive = false;
+				}else{
+					app.$.titleColumn.inactive = true;
+				}
+			};
 		</script>
 
 	</body>

diff --git a/paper-datatable-column.html b/paper-datatable-column.html
@@ -403,13 +403,16 @@
 					return this;
 				},*/
 				_registerEvilFunctions: function(){
-					if(typeof this.dataHost === 'undefined') {
+					if(typeof this.dataHost === 'undefined' || typeof this.parentNodeRef.dataHost !== 'undefined') {
+						this.dataHost = this.parentNodeRef.dataHost;
+					}else if(typeof this.dataHost === 'undefined'){
 						console.warn('A hack is used to support some functionality of the `[editable]` and [`array-display-prop`] attribute. ' +
 								'This however requires the element to be located in a polymer element or `dom-bind`.')
-					}else{
-						this.dataHost._pdt_getArrayItemLabel = this._getArrayItemLabel;
-						this.dataHost._pdt_getValidRegexForInput = this._getValidRegexForInput;
 					}
+
+					this.dataHost._pdt_getArrayItemLabel = this._getArrayItemLabel;
+					this.dataHost._pdt_getValidRegexForInput = this._getValidRegexForInput;
+
 				},
 				_getArrayItemLabel: function(column, value){
 					return column.arrayDisplayProp ? value[column.arrayDisplayProp] : value;

diff --git a/paper-datatable.html b/paper-datatable.html
@@ -598,14 +598,17 @@
 					var columns = this.queryAllEffectiveChildren('paper-datatable-column');
 					columns.forEach((column) => {
 						if(!column.beenAttached.state.ready){
-							console.log('attaching', column);
 							column.parentNodeRef = this;
 							this.async(function(){
+								column._registerEvilFunctions();
 								column.beenAttached.ready();
 							});
 						}
 					});
 					this.set('_columns', columns.filter((column) => !column.inactive));
+					this.async(function(){
+						this._applySortedIndicatorsToDOM();
+					});
 				},
 
 				_setRowKeys: function(){
@@ -623,6 +626,7 @@
 
 					}.bind(this));
 					this.set("_rowKeys", rowKeys);
+					//why again was this necessary?
 					this._internalSort(this.get('_currentlySortedColumn'));
 				},
 
@@ -635,8 +639,6 @@
 					this.debounce('restructure data', function(){
 
 						var rows = Polymer.dom(this.root).querySelectorAll('tbody tr');
-						var columnCollection = Polymer.Collection.get(this._columns);
-
 						// loop through the rows
 						for(var rowI=0; rowI<rows.length; rowI++){
 							var row = rows[rowI];
@@ -649,6 +651,7 @@
 								var isEmpty = cell.hasAttribute('data-empty');
 								var isWrongRow = cell.getAttribute('data-row-key') !== row.dataset.key;
 								var isWrongColumn = cell.dataColumn !== cell.dataBoundColumn;
+
 								if(isEmpty || isWrongRow || isWrongColumn){
 									cell.removeAttribute('data-empty');
 									var prop = cell.dataColumn.property;
@@ -672,8 +675,8 @@
 										);
 										cell.instance = instance;
 										cell.instanceType = 'inline';
-										cell.innerHTML = '';
-										cell.appendChild(instance.root);
+										cell.querySelector('span').innerHTML = '';
+										cell.querySelector('span').appendChild(instance.root);
 									}else{
 										cell.querySelector('span').innerHTML = cell.dataColumn._formatValue(data)
 										//cell.textContent = data;
@@ -878,31 +881,16 @@
 
 				sort: function(column){
 					this.async(function(){
-						var sortedColumn = this._columns.find(function(aColumn){
-							return aColumn.sorted && aColumn !== column;
-						});
-						if(sortedColumn){
-							sortedColumn.set('sorted', false);
-
-							var th = Polymer.dom(this.root).querySelectorAll("th").find(function(el){
-								return el.dataColumn === sortedColumn;
-							});
-
-							th.removeAttribute('data-sorted');
-						}
-						var th = Polymer.dom(this.root).querySelectorAll("th").find(function(el){
-							return el.dataColumn === column;
-						});
-
-						th.setAttribute('data-sorted', true);
-						th.setAttribute('data-sort-direction', column.sortDirection);
 
 						var triggeredEvent = this.fire('sort', {sort: {
 							property: column.property,
 							direction: column.sortDirection
 						}, column: column}, {cancelable: true});
+
 						this.set('_currentlySortedColumn', column);
 
+						this._applySortedIndicatorsToDOM();
+
 						if(triggeredEvent.defaultPrevented){
 							this._internalSortEnabled = false;
 						}else{
@@ -912,6 +900,26 @@
 					});
 				},
 
+				_applySortedIndicatorsToDOM: function(){
+					var previouslySortedTh = Polymer.dom(this.root).querySelector("th[data-sorted]");
+					if(previouslySortedTh)
+						previouslySortedTh.removeAttribute('data-sorted');
+
+					var column = this.get('_currentlySortedColumn');
+
+					if(column){
+						var th = Polymer.dom(this.root).querySelectorAll("th").find(function(el){
+							return el.dataColumn === column;
+						});
+
+						//column might have been removed or made inactive
+						if(th){
+							th.setAttribute('data-sorted', true);
+							th.setAttribute('data-sort-direction', column.sortDirection);
+						}
+					}
+				},
+
 				_internalSort: function(column){
 					if(this._internalSortEnabled) {
 						//todo: move function to paper-datatable-column.html
@@ -1076,7 +1084,6 @@
 						var ths = Polymer.dom(this.root).querySelectorAll('th');
 						ths.forEach((th) => {
 							if(th.dataColumn){
-								console.dir(th);
 								var column = th.dataColumn;
 								if(th.scrollWidth > th.offsetWidth){
 									column.set('tooltip', column.header);