cosmoz-omnitable-item-row.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="cosmoz-omnitable-repeater-behavior.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"/>

<dom-module id="cosmoz-omnitable-item-row">
	<template>
		<style>
			:host {
				@apply --layout-horizontal;
				@apply --layout-flex;
				@apply --layout-center;
				min-width: 0;
			}

			:host > ::slotted(*) {
				flex: 1 0 auto;
				padding: 0 3px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			:host > ::slotted([hidden]),:host [hidden] {
				display: none !important;
			}
		</style>
		<slot name="item-cell"></slot>
	</template>
</dom-module>

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

	Polymer({

		is: 'cosmoz-omnitable-item-row',

		behaviors: [
			Cosmoz.OmnitableRepeaterBehavior
		],

		properties: {
			item: {
				type: Object
			},

			selected: {
				type: Boolean,
				observer: '_selectedChanged'
			},

			expanded: {
				type: Boolean,
				observer: '_expandedChanged'
			},

		},

		observers: [
			'_itemUpdated(item.*)',
		],

		_elementType: 'div',

		_slotName: 'item-cell',

		_getTemplateInstance: function (column) {
			return column.dataTemplatizer.getInstance();
		},

		_detachTemplateInstance: function (instance, column, element) {
			column.dataTemplatizer.detachInstance(instance, element);
		},

		_configureElement: function (element, column) {
			element.style.flexBasis = column.editable ? column.editWidth : column.width;
			element.style.minWidth = column.editable ? column.editMinWidth : column.minWidth;
			element.style.flexGrow = column.flex;
			element.setAttribute('title', this._getCellTitle(column, this.item));
			element.setAttribute('class', this._computeItemRowCellClasses(column));
		},

		_configureTemplateInstance: function (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);
				this._forwardPropertiesFlush(instance);
			}
		},

		_computeItemRowCellClasses: function (column) {
			var originalIndex = column.__index;
			return 'itemRow-cell'
				+ (column.cellClass ? ' ' + column.cellClass + ' ' : '')
				+ ' cosmoz-omnitable-column-' + originalIndex;
		},

		_itemUpdated: function (itemChange) {
			if (itemChange.path === 'item') {
				this.elements.forEach(function (element) {
					this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true);
					element.setAttribute('title', this._getCellTitle(this.getElementColumn(element), this.item));
				}, this);
			} else {
				this.elements.forEach(function (element) {
					this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true);
				}, this);
			}
		},

		_selectedChanged: function (selected) {
			this.templateInstances.forEach(instance => {
				this._forwardProperty(instance, 'selected', selected, true);
			});
		},

		_expandedChanged: function (expanded) {
			this.templateInstances.forEach(instance => {
				this._forwardProperty(instance, 'expanded', expanded, true);
			});
		},

		_getCellTitle: function (column, item) {
			return column && column.getString(item, column.valuePath);
		},
	});
}());
</script>