diff --git a/cosmoz-omnitable-group-row.html b/cosmoz-omnitable-group-row.html
index 6b25eab8..509a1685 100644
--- a/cosmoz-omnitable-group-row.html
+++ b/cosmoz-omnitable-group-row.html
@@ -71,51 +71,26 @@
this.columns = [newColumn];
}
- _getTemplateInstance(column, props) {
- return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE, props);
+ /**
+ * @inheritdoc
+ */
+ _getTemplateInstance(column) {
+ return column.getTemplateInstance(
+ Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+ {item: this.item, selected: this.selected, expanded: this.expanded}
+ );
}
- _detachTemplateInstance(instance, column) {
- column.detachTemplateInstance(instance);
- }
-
- _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
index 814ce9f2..3c3f2ac4 100644
--- a/cosmoz-omnitable-header-row.html
+++ b/cosmoz-omnitable-header-row.html
@@ -47,23 +47,22 @@
return 'header-cell';
}
- _getTemplateInstance(column, props) {
- return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.HEADER_TEMPLATE, props);
+ /**
+ * @inheritdoc
+ */
+ _getTemplateInstance(column) {
+ return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.HEADER_TEMPLATE);
}
- _detachTemplateInstance(instance, column) {
- column.detachTemplateInstance(instance);
- }
-
- _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
index 3c7dbf4d..78b597b6 100644
--- a/cosmoz-omnitable-item-expand.html
+++ b/cosmoz-omnitable-item-expand.html
@@ -85,27 +85,24 @@
return 'item-expand-line';
}
- _getTemplateInstance(column, props) {
- return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE, props);
+ /**
+ * @inheritdoc
+ */
+ _getTemplateInstance(column) {
+ return column.getTemplateInstance(
+ Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+ {item: this.item, selected: this.selected, expanded: this.expanded}
+ );
}
- _detachTemplateInstance(instance, column) {
- column.detachTemplateInstance(instance);
- }
-
- _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,16 @@
}
}
- _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);
- });
+ this.forwardChange('expanded', expanded);
}
}
customElements.define(OmnitableItemExpand.is, OmnitableItemExpand);
diff --git a/cosmoz-omnitable-item-row.html b/cosmoz-omnitable-item-row.html
index 6a728c4c..50d14c68 100644
--- a/cosmoz-omnitable-item-row.html
+++ b/cosmoz-omnitable-item-row.html
@@ -78,15 +78,23 @@
return 'item-cell';
}
- _getTemplateInstance(column, props) {
- return column.getTemplateInstance(column.editable ? Cosmoz.OmnitableTemplatizeMixin.EDIT_TEMPLATE : Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE, props);
- }
-
- _detachTemplateInstance(instance, column) {
- column.detachTemplateInstance(instance);
+ /**
+ * @inheritdoc
+ */
+ _getTemplateInstance(column) {
+ return column.getTemplateInstance(
+ column.editable
+ ? Cosmoz.OmnitableTemplatizeMixin.EDIT_TEMPLATE
+ : Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+ {item: this.item, selected: this.selected, expanded: this.expanded}
+ );
}
- _configureElement(element, column) {
+ /**
+ * @inheritdoc
+ */
+ _configureElement(element, column, instance) {
+ super._configureElement(element, column, instance);
element.style.flexBasis = column.editable ? column.editWidth : column.width;
element.style.minWidth = column.editable ? column.editMinWidth : column.minWidth;
element.style.flexGrow = column.flex;
@@ -94,44 +102,18 @@
element.setAttribute('class', this._computeItemRowCellClasses(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);
- }
- }
-
- _computeItemRowCellClasses(column) {
- return 'itemRow-cell' +
- (column.cellClass ? ' ' + column.cellClass + ' ' : '') +
- ' cosmoz-omnitable-column-' + column.__index;
- }
-
- _itemUpdated(itemChange) {
- if (itemChange.path === 'item') {
- this.elements.forEach(element => {
- this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true);
- element.setAttribute('title', this._getCellTitle(this.getElementColumn(element), this.item));
- });
- } else {
- this.elements.forEach(element => {
- this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true);
- });
- }
+ _itemUpdated(changeRecord) {
+ this.forwardPathChange(changeRecord, (element, column) => {
+ element.setAttribute('title', this._getCellTitle(column, this.item));
+ });
}
_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);
- });
+ this.forwardChange('expanded', expanded);
}
/**
@@ -143,6 +125,12 @@
_getCellTitle(column, item) {
return column && column.cellTitleFn(item, column.valuePath);
}
+
+ _computeItemRowCellClasses(column) {
+ return 'itemRow-cell'
+ + (column.cellClass ? ' ' + column.cellClass + ' ' : '')
+ + ' cosmoz-omnitable-column-' + column.__index;
+ }
}
customElements.define(OmnitableItemRow.is, OmnitableItemRow);
diff --git a/cosmoz-omnitable-repeater-mixin.html b/cosmoz-omnitable-repeater-mixin.html
index 2c9c491c..c897b100 100644
--- a/cosmoz-omnitable-repeater-mixin.html
+++ b/cosmoz-omnitable-repeater-mixin.html
@@ -33,6 +33,25 @@
];
}
+ constructor() {
+ super();
+ this._elements = [];
+ }
+
+ forwardChange(property, value, callback) {
+ this.forwardPathChange({path: property, value}, callback);
+ }
+
+ forwardPathChange(changeRecord, callback) {
+ this._elements.forEach(element => {
+ this._forwardNotifyPath(element.__instance, changeRecord.path, changeRecord.value, true);
+
+ if (callback) {
+ callback(element, element.__column);
+ }
+ });
+ }
+
/* eslint-disable no-empty-function, no-unused-vars */
/**
@@ -56,73 +75,33 @@
/**
* Get a template instance for the specified column
* Must be defined in implementors.
+ * @abstract
* @param {Object} column - The column.
* @return {Object} - The instance.
*/
_getTemplateInstance(column) {}
- /**
- * Detach and release the template instance associated with
- * the specified column and rendered in the specified element.
- * Must be defined in implementors.
- * @param {Object} instance - The instance.
- * @param {Object} column - The column.
- * @param {Object} element - The element.
- * @return {undefined}
- */
- _detachTemplateInstance(instance, column, element) {}
-
- /**
- * Configure a newly created repeated element
- * Must be defined in implementors.
- * @param {Object} element - The element.
- * @return {undefined}
- */
- _configureElement(element) {}
-
- /**
- * Configure a newly created cell template instance
- * Must be defined in implementors.
- * @param {Object} instance - The instance.
- * @return {undefined}
- */
- _configureTemplateInstance(instance) {}
-
/* eslint-enable no-empty-function, no-unused-vars */
/**
- * Get an array of the elements generated by this repeater
+ * Configure a newly created repeated element
+ *
+ * @param {[type]} element [description]
+ * @param {[type]} column [description]
+ * @param {[type]} instance [description]
+ * @return {[type]} [description]
*/
- get elements() {
- if (this._elements) {
- return this._elements.slice(0);
- }
- return [];
- }
-
- get templateInstances() {
- if (this._elements) {
- return this._elements.map(element => element.__instance);
+ _configureElement(element, column, instance) {
+ element.__instance = instance;
+ element.__column = column;
+
+ if (column === this.groupOnColumn) {
+ element.setAttribute('hidden', '');
+ } else if (element.hasAttribute('hidden')) {
+ element.removeAttribute('hidden', '');
}
- return [];
- }
-
- /**
- * Get the template instance rendered by the specified element.
- * @param {Object} element - The element.
- * @return {Object} - The instance.
- */
- getElementTemplateInstance(element) {
- return element.__instance;
- }
- /**
- * Get the column that was used to rendered the specified element
- * @param {Object} element - The element.
- * @return {Object} - The column.
- */
- getElementColumn(element) {
- return element.__column;
+ element.setAttribute('slot', this._slotName);
}
_columnsChanged({ path, base, value }) {
@@ -165,21 +144,11 @@
_addElements(start, count) {
const end = start + count;
for (let i = start; i < end; i++) {
- const column = this.columns[i],
- element = document.createElement(this._elementType),
- instance = this._getTemplateInstance(column, {item: this.item});
- element.__instance = instance;
- element.__column = column;
-
- if (column === this.groupOnColumn) {
- element.setAttribute('hidden', '');
- } else if (element.hasAttribute('hidden')) {
- element.removeAttribute('hidden', '');
- }
+ const element = document.createElement(this._elementType),
+ column = this.columns[i],
+ instance = this._getTemplateInstance(column);
- this._configureElement(element, column);
- this._configureTemplateInstance(instance);
- element.setAttribute('slot', this._slotName);
+ this._configureElement(element, column, instance);
element.appendChild(instance.root);
@@ -204,7 +173,7 @@
this._elements
.splice(start, removedColumns.length)
.forEach(element => {
- this._detachTemplateInstance(element.__instance, element.__column);
+ element.__column.detachTemplateInstance(element.__instance);
element.__instance = element.__column = element.column = null;
this.removeChild(element);
});
@@ -228,16 +197,8 @@
}
}
- _forwardProperty(instance, name, value, flush = false) {
- instance._setPendingProperty(name, value);
-
- if (flush) {
- instance._flushProperties(true);
- }
- }
-
- _forwardNotifyPath(instance, path, value, isPathNotification = false, flush = false) {
- instance._setPendingPropertyOrPath(path, value, false, isPathNotification);
+ _forwardNotifyPath(instance, path, value, flush = false) {
+ instance._setPendingPropertyOrPath(path, value, false, true);
if (flush) {
instance._flushProperties(true);
}
diff --git a/cosmoz-omnitable.js b/cosmoz-omnitable.js
index e02c732a..27c26b47 100644
--- a/cosmoz-omnitable.js
+++ b/cosmoz-omnitable.js
@@ -510,8 +510,6 @@
return child.nodeType === Node.ELEMENT_NODE && child.isOmnitableColumn
// filter out elements that are hidden
&& !child.hidden;
- // filter out elements that don't have headerTemplatizer yet
- // && child.headerTemplatizer != null;
}),
valuePathNames;