cosmoz-omnitable-column-list-data.html

<link rel="import" href="../shadycss/apply-shim.html">
<link rel="import" href="../polymer/polymer-element.html"/>
<link rel="import" href="../polymer/lib/legacy/class.html"/>
<link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
<link rel="import" href="../cosmoz-behaviors/cosmoz-templatehelper-behavior.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="cosmoz-omnitable-column-list-data">
	<template>
		<style>
			:host {
				display: block;
			}

			:host a {
				color: var(--primary-link-color, inherit);
			}

			[hidden] {
				display: none;
			}

			ul {
				margin: 0.3em 0;
				padding-left: 1em;
			}
		</style>

		<ul hidden$="[[ isEmpty(items) ]]">
			<li>
				<span>[[ _firstItem(items) ]]</span>
			</li>
			<li class="see-more" hidden$="[[_hideExpand(items, _expanded)]]">
				<a href="#" on-tap="_toggleExpand">[[ _('and {0} more', _othersCount, t) ]]</a>
			</li>
			<template is="dom-repeat" items="[[ _otherItems(items, _expanded) ]]"	as="item">
				<li>
					<span class="item">[[ item ]]</span>
				</li>
			</template>
			<li class="see-less" hidden$="[[ _hideCollapse(items, _expanded) ]]">
				<a href="#" on-tap="_toggleExpand">[[ _('See less', t) ]]</a>
			</li>
		</ul>
	</template>
	<script>
		window.Cosmoz = window.Cosmoz || {};

		class OmnitableColumnListData extends Polymer.mixinBehaviors(
			[
				Cosmoz.TemplateHelperBehavior,
				Cosmoz.TranslatableBehavior
			],
			Polymer.Element
		) {
			static get is() {
				return 'cosmoz-omnitable-column-list-data';
			}

			static get properties() {
				return {
					items: {
						type: Array
					},

					_expanded: {
						type: Boolean,
						value: false
					},

					_othersCount: {
						type: Number,
						computed: '_computeOthersCount(items)'
					},

					// FIXME: remove when TranslatableBehavior is a 2.x mixin
					t: {
						type: Object,
						value() {
							return {};
						}
					}
				};
			}

			isEmpty() {
				// FIXME: remove this when TemplateHelperBehavior is a 2.x mixin
				return Cosmoz.TemplateHelperBehavior.isEmpty.apply(this, arguments);
			}

			_() {
				// FIXME: remove this when TranslatableBehavior is a 2.x mixin
				return Cosmoz.TranslatableBehavior._.apply(this, arguments);
			}

			_firstItem(items) {
				if (items !== undefined && items !== null && items.length > 0) {
					return items[0];
				}
			}

			_hideExpand(items, expanded) {
				if (items !== undefined && items.length !== null) {
					return items.length <= 2 || expanded;
				}
				return true;
			}

			_hideCollapse(items, expanded) {
				if (items !== undefined && items.length !== null) {
					return items.length <= 2 || !expanded;
				}
				return true;
			}

			_otherItems(items, expanded) {
				if (items !== undefined && items !== null) {
					if (items.length <= 2 || expanded) {
						return items.slice(1);
					}
				}
			}

			_computeOthersCount(items) {
				if (items !== undefined && items !== null) {
					return items.length - 1;
				}
			}

			_toggleExpand(event) {
				this._expanded = !this._expanded;
				event.stopPropagation();
				event.preventDefault();
				this.dispatchEvent(new CustomEvent('iron-resize', {bubbles: true}));
			}
		}
		customElements.define(OmnitableColumnListData.is, OmnitableColumnListData);

		Cosmoz.OmnitableColumnListData = OmnitableColumnListData;
	</script>
</dom-module>