Merge pull request #269 from plumelo/feature/NEOV-293-rework-templati…

…zing Rework templatizing
Neovici · Mar 19, 2019 · 305994d · 305994d
2 parents 6f32844 + 444ed34
commit 305994d
Show file tree

Hide file tree

Showing 23 changed files with 29,075 additions and 21,823 deletions.
diff --git a/analysis.json b/analysis.json
diff --git a/cosmoz-omnitable-column-mixin.html b/cosmoz-omnitable-column-mixin.html
@@ -1,16 +1,17 @@
 <link rel="import" href="../shadycss/apply-shim.html"/>
+<link rel="import" href="cosmoz-omnitable-templatize-mixin.html" />
 <link rel="import" href="../polymer/lib/utils/mixin.html"/>
 
-<link rel="import" href="cosmoz-omnitable-templatizer.html" />
 
 <script>
 	window.Cosmoz = window.Cosmoz || {};
 
 	/**
 	 * @polymer
 	 * @mixinFunction
+	 * @appliesMixin Cosmoz.OmnitableTemplatizeMixin
 	 */
-	Cosmoz.OmnitableColumnMixin = Polymer.dedupingMixin(base =>	class extends base {
+	Cosmoz.OmnitableColumnMixin = Polymer.dedupingMixin(base =>	class extends Cosmoz.OmnitableTemplatizeMixin(base) {
 		static get properties() {
 			return {
 				title: {
@@ -185,10 +186,6 @@
 					value: 0
 				},
 
-				cellTemplate: {
-					type: Object,
-					observer: '_cellTemplateChanged'
-				},
 				/**
 				 * Cell title function, can be overriden.
 				 */
@@ -223,16 +220,6 @@
 					type: String,
 					computed: '_computePreferredDropdownHorizontalAlign(columnIndex)'
 				},
-
-				_dataTemplatizer: {
-					type: Object,
-					value: null
-				},
-
-				_headerTemplatizer: {
-					type: Object,
-					value: null
-				}
 			};
 		}
 
@@ -245,42 +232,9 @@
 
 		ready() {
 			super.ready();
-			this._headerTemplatizer = this._createTemplatizer('template.header');
 			this._itemCells = [];
 		}
 
-		_createTemplatizer(templateElementOrSelector) {
-			let template,
-				templateHost,
-				root;
-			if (templateElementOrSelector instanceof HTMLTemplateElement) {
-				template = templateElementOrSelector;
-				templateHost = templateElementOrSelector.parentNode;
-			} else {
-				template = this.querySelector(templateElementOrSelector);
-				if (template) {
-					root = this.getRootNode();
-				} else {
-					root = this.getRootNode();
-					template = this.root.querySelector(templateElementOrSelector);
-				}
-				if (root) {
-					templateHost = root.host;
-				}
-			}
-
-			const templatizer = document.createElement('cosmoz-omnitable-templatizer');
-			this.appendChild(templatizer);
-			templatizer.init(template, templateHost);
-			return templatizer;
-		}
-
-		_cellTemplateChanged(cellTemplate) {
-			if (cellTemplate != null) {
-				this._cellTemplatizer = this._createTemplatizer(cellTemplate);
-			}
-		}
-
 		_externalValuesChanged(newExternalValuesValue) {
 			if (newExternalValuesValue) {
 				return;
@@ -294,36 +248,6 @@
 			}));
 		}
 
-		get editableTemplatizer() {
-			return this._editableTemplatizer = this._editableTemplatizer ||
-				this._createTemplatizer('template.edit-cell');
-		}
-		get cellTemplatizer() {
-			return this._cellTemplatizer = this._cellTemplatizer ||
-				this._createTemplatizer('template.cell');
-		}
-
-		get dataTemplatizer() {
-			return this.editable ? this.editableTemplatizer : this.cellTemplatizer;
-		}
-
-		get headerTemplatizer() {
-			return this._headerTemplatizer;
-		}
-
-		getHeaderTemplateInstance() {
-			if (!this._headerTemplatizer || !this._headerTemplatizer.createInstance) {
-				return;
-			}
-			return this._headerTemplatizer.createInstance();
-		}
-
-		releaseHeaderTemplateInstance(instance) {
-			if (this._headerTemplatizer) {
-				this._headerTemplatizer.releaseInstance(instance);
-			}
-		}
-
 		/**
 		 * Override this in column elements if you need a different default width
 		 */
@@ -462,10 +386,6 @@
 		}
 
 		_editableChanged() {
-			const prevTemplatizer = this.editable ? this._cellTemplatizer : this._editableTemplatizer;
-			if (prevTemplatizer) {
-				prevTemplatizer.releaseInstances();
-			}
 			this.dispatchEvent(new CustomEvent('cosmoz-column-editable-changed', {bubbles: true, detail: { column: this }}));
 		}
 

diff --git a/cosmoz-omnitable-group-row.html b/cosmoz-omnitable-group-row.html
@@ -71,51 +71,26 @@
 				this.columns = [newColumn];
 			}
 
+			/**
+			 * @inheritdoc
+			 */
 			_getTemplateInstance(column) {
-				return column.dataTemplatizer.getInstance();
+				return column.getTemplateInstance(
+					Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+					{item: this.item, selected: this.selected, expanded: this.expanded}
+				);
 			}
 
-			_detachTemplateInstance(instance, column, element) {
-				column.dataTemplatizer.detachInstance(instance, element);
-			}
-
-			_configureTemplateInstance(instance) {
-				if (instance.item !== this.item && this.item !== undefined) {
-					this._forwardProperty(instance, 'item', this.item);
-					this._forwardProperty(instance, 'selected', this.selected);
-					this._forwardProperty(instance, 'folded', this.folded);
-					instance._flushProperties(true);
-				}
-			}
-
-			_itemUpdated(itemChange) {
-				if (itemChange.path === 'item') {
-					this.elements.forEach(element =>
-						this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true)
-					);
-				} else {
-					this.elements.forEach(element =>
-						this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true)
-					);
-				}
+			_itemUpdated(changeRecord) {
+				this.forwardPathChange(changeRecord);
 			}
 
 			_selectedChanged(selected) {
-				this.templateInstances.forEach(instance => {
-					this._forwardProperty(instance, 'selected', selected, true);
-				});
-			}
-
-			_expandedChanged(expanded) {
-				this.templateInstances.forEach(instance => {
-					this._forwardProperty(instance, 'expanded', expanded, true);
-				});
+				this.forwardChange('selected', selected);
 			}
 
 			_foldedChanged(folded) {
-				this.templateInstances.forEach(instance => {
-					this._forwardProperty(instance, 'folded', folded, true);
-				});
+				this.forwardChange('folded', folded);
 			}
 		}
 		customElements.define(OmnitableGroupRow.is, OmnitableGroupRow);

diff --git a/cosmoz-omnitable-header-row.html b/cosmoz-omnitable-header-row.html
@@ -47,25 +47,27 @@
 			return 'header-cell';
 		}
 
-		_getTemplateInstance(column) {
-			return column.headerTemplatizer.getInstance();
+		constructor() {
+			super();
+			this.trackColumns();
 		}
 
-		_detachTemplateInstance(instance, column, element) {
-			if (column.headerTemplatizer) {
-				column.headerTemplatizer.detachInstance(instance, element);
-			}
+		/**
+		 * @inheritdoc
+		 */
+		_getTemplateInstance(column) {
+			return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.HEADER_TEMPLATE);
 		}
 
-		_configureElement(element, column) {
+		/**
+		 * @inheritdoc
+		 */
+		_configureElement(element, column, instance) {
+			super._configureElement(element, column, instance);
 			element.classList.toggle(column.headerCellClass, true);
 			element.classList.toggle('header-cell', true);
 			element.setAttribute('title', column.title);
 		}
-
-		_configureTemplateInstance(instance) {
-			instance._flushProperties(true);
-		}
 	}
 	customElements.define(OmnitableHeaderRow.is, OmnitableHeaderRow);
 

diff --git a/cosmoz-omnitable-item-expand.html b/cosmoz-omnitable-item-expand.html
@@ -85,27 +85,24 @@
 			return 'item-expand-line';
 		}
 
+		/**
+		 * @inheritdoc
+		 */
 		_getTemplateInstance(column) {
-			return column.dataTemplatizer.getInstance();
+			return column.getTemplateInstance(
+				Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+				{item: this.item, selected: this.selected, expanded: this.expanded}
+			);
 		}
 
-		_detachTemplateInstance(instance, column, element) {
-			column.dataTemplatizer.detachInstance(instance, element);
-		}
-
-		_configureElement(element, column) {
+		/**
+		 * @inheritdoc
+		 */
+		_configureElement(element, column, instance) {
+			super._configureElement(element, column, instance);
 			element.column = column;
 		}
 
-		_configureTemplateInstance(instance) {
-			if (instance.item !== this.item && this.item !== undefined) {
-				this._forwardProperty(instance, 'item', this.item);
-				this._forwardProperty(instance, 'selected', this.selected);
-				this._forwardProperty(instance, 'expanded', this.expanded);
-				instance._flushProperties(true);
-			}
-		}
-
 		_updateSize(columnsCount) {
 			this.hidden = columnsCount === 0;
 			if (this.expanded) {
@@ -117,28 +114,24 @@
 			}
 		}
 
-		_itemUpdated(itemChange) {
-			if (itemChange.path === 'item') {
-				this.elements.forEach(function (element) {
-					this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true);
-				}, this);
-			} else {
-				this.elements.forEach(function (element) {
-					this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true);
-				}, this);
-			}
+		_itemUpdated(changeRecord) {
+			this.forwardPathChange(changeRecord);
 		}
 
 		_selectedChanged(selected) {
-			this.templateInstances.forEach(instance => {
-				this._forwardProperty(instance, 'selected', selected, true);
-			});
+			this.forwardChange('selected', selected);
 		}
 
-		_expandedChanged(expanded) {
-			this.templateInstances.forEach(instance => {
-				this._forwardProperty(instance, 'expanded', expanded, true);
-			});
+		_expandedChanged(expanded, prevValue) {
+			this.forwardChange('expanded', expanded);
+
+			if (expanded) {
+				this.trackColumns();
+				this.renderCells();
+			} else if (prevValue === true) {
+				this.stopTrackingColumns();
+				this.destroyCells();
+			}
 		}
 	}
 	customElements.define(OmnitableItemExpand.is, OmnitableItemExpand);