cosmoz-omnitable-repeater-behavior.html

<link rel="import" href="../polymer/polymer.html">

<script>
(function () {
	'use strict';

	window.Cosmoz = window.Cosmoz || {};

	const IS_V2 = Polymer.flush != null;

	/**
	 * @polymerBehavior
	 */
	Cosmoz.OmnitableRepeaterBehavior = {
		properties: {
			columns: {
				type: Array
			},

			groupOnColumn: {
				type: Object,
				observer: '_groupOnColumnChanged'
			}
		},

		observers: [
			'_columnsChanged(columns.*)',
		],

		_elements: null,

		/* eslint-disable no-empty-function, no-unused-vars */

		/**
		 * The type of element to be repeated.
		 * Must be defined in implementors.
		 */
		_elementType: null,

		/**
		 * Slot name assigned to the repeated elements.
		 * Must be defined in implementors.
		 */
		_slotName: null,

		/**
		 * Get a template instance for the specified column
		 * Must be defined in implementors.
		 * @param {Object} column - The column.
		 * @return {Object} - The instance.
		 */
		_getTemplateInstance: function (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: function (instance, column, element) {},

		/**
		 * Configure a newly created repeated element
		 * Must be defined in implementors.
		 * @param {Object} element - The element.
		 * @return {undefined}
		 */
		_configureElement: function (element) {},

		/**
		 * Configure a newly created cell template instance
		 * Must be defined in implementors.
		 * @param {Object} instance - The instance.
		 * @return {undefined}
		 */
		_configureTemplateInstance: function (instance) {},


		/* eslint-enable no-empty-function, no-unused-vars */

		/**
		 * Get an array of the elements generated by this repeater
		 */
		get elements() {
			if (this._elements) {
				return this._elements.slice(0);
			}
			return [];
		},

		get templateInstances() {
			if (this._elements) {
				return this._elements.map(function (element) {
					return element.__instance;
				});
			}
			return [];
		},

		/**
		 * Get the template instance rendered by the specified element.
		 * @param {Object} element - The element.
		 * @return {Object} - The instance.
		 */
		getElementTemplateInstance: function (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: function (element) {
			return element.__column;
		},

		_columnsChanged: function (change) {
			var removedColumns;
			if (change.path === 'columns') {
				if (this._elements && this._elements.length) {
					removedColumns = this._elements.map(function (element) {
						return element.__column;
					});
					this._removeElements(0, removedColumns);
				} else {
					this._elements = [];
				}
				this._addElements(0, this.columns.length);
			} else if (change.path === 'columns.splices') {
				this._renderSplices(change.value.indexSplices);
			} else if (change.path !== 'columns.length') {
				// column property change
				console.warn('column property change');
			}
		},

		_renderSplices: function (splices) {
			splices.forEach(function (splice) {
				if (splice.removed.length) {
					this._removeElements(splice.index, splice.removed);
				}
				if (splice.addedCount > 0) {
					this._addElements(splice.index, splice.addedCount);
				}
			}, this);
		},

		_addElements: function (start, count) {
			var i,
				end = start + count,
				column,
				instance,
				element,
				parent = Polymer.dom(this);

			for (i = start; i < end; i++) {
				column = this.columns[i];
				element = document.createElement(this._elementType);
				instance = this._getTemplateInstance(column);
				element.__instance = instance;
				element.__column = column;

				if (column === this.groupOnColumn) {
					element.setAttribute('hidden', '');
				} else if (element.hasAttribute('hidden')) {
					element.removeAttribute('hidden', '');
				}

				this._configureElement(element, column);
				this._configureTemplateInstance(instance);
				element.setAttribute('slot', this._slotName);

				Polymer.dom(element).appendChild(instance.root);

				if (i < this._elements.length) {
					parent.insertBefore(element, this._elements[i]);
				} else {
					parent.appendChild(element);
				}

				// HACK(plequang): repeated element should have style scoped to cosmoz-omnitable, not to the column element.
				// This is how it works with native shadow DOM but not with shady.
				if (!Polymer.Settings.useNativeShadow && Polymer.StyleTransformer) {
					Polymer.StyleTransformer.dom(element, column.is, false, true);
					Polymer.StyleTransformer.dom(element, 'cosmoz-omnitable', false, false);
				}

				this._elements.splice(i, 0, element);
			}
		},

		_removeElements: function (start, removedColumns) {
			var i,
				index,
				element;

			for (i = 0; i < removedColumns.length; i++) {
				index = start + i;
				element = this._elements[index];

				if (element.hasAttribute('hidden')) {
					element.removeAttribute('hidden');
				}

				this._detachTemplateInstance(element.__instance, element.__column, element);
				Polymer.dom(this).removeChild(element);

			}
			this._elements.splice(start, removedColumns.length);
		},

		_groupOnColumnChanged: function (column, previousColumn) {
			if (!this._elements || !this._elements.length) {
				return;
			}
			if (previousColumn) {
				const previousElement = this._elements.find(e => e.__column === previousColumn);
				if (previousElement) {
					previousElement.removeAttribute('hidden');
				}
			}
			if (column) {
				const element = this._elements.find(e => e.__column === column);
				if (element) {
					element.setAttribute('hidden', '');
				}
			}
		},

		_forwardProperty: function (instance, name, value, flush = false) {
			if (IS_V2) {
				instance._setPendingProperty(name, value);
			} else {
				instance[name] = value;
			}
			if (flush) {
				this._forwardPropertiesFlush(instance);
			}
		},

		_forwardNotifyPath: function (instance, path, value, isPathNotification = false, flush = false) {
			if (IS_V2) {
				instance._setPendingPropertyOrPath(path, value, false, isPathNotification);
			} else {
				instance.notifyPath(path, value, isPathNotification);
			}
			if (flush) {
				this._forwardPropertiesFlush(instance);
			}
		},

		_forwardPropertiesFlush: function (instance) {
			if (instance._flushProperties) {
				instance._flushProperties(true);
			}
		}
	};
}());
</script>