boe-list.html

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

<!--
A vertical flexbox list that shows a message when empty. Useful for lists with dismissible items.

Example:

    <boe-list empty-msg="There are no more items in the queue.">
        <paper-item>Hey.</paper-item>
    </boe-list>

### Styling

The following custom properties and mixins are available for styling:

Custom property               | Description                                  | Default
------------------------------|----------------------------------------------|----------
`--boe-list-border`           | Border style when no items are present.      | `4px dashed #B7B7B7`

@demo demo/index.html
@hero hero.svg
-->

<dom-module id="boe-list">
	<template>
		<style>
			:host {
				position: relative;
				flex: 1;
				display: flex;
				overflow: auto;
				min-height: 56px;
			}

			#empty {
				position: absolute;
				height: 100%;
				width: 100%;
				@apply(--layout-horizontal);
				@apply(--layout-center);
				@apply(--layout-center-justified);
				padding: 24px;
				text-align: center;
				border: var(--boe-list-border, 4px dashed #B7B7B7);
				box-sizing: border-box;
			}

			#scroller {
				@apply(--layout-vertical);
				@apply(--boe-list-list-styles);
				min-height: min-content; /* needs vendor prefixes */
				width: 100%;
			}

			:host::-webkit-scrollbar {
				width: 6px;
			}

			:host::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
				-webkit-border-radius: 10px;
				border-radius: 10px;
			}

			:host::-webkit-scrollbar-thumb {
				border-radius: 5px;
				background: #757575;
				-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
			}

			:host::-webkit-scrollbar-thumb:window-inactive {
				background: #b9b9b9;
			}
		</style>

		<div id="empty">{{emptyMsg}}</div>
		<div id="scroller">
			<content id="content"></content>
		</div>
	</template>

	<script>
		Polymer({
			is: 'boe-list',

			properties: {
				/**
				 * The message to show when the list is empty.
				 */
				emptyMsg: {
					type: String,
					value: 'There are no more items to display.'
				}
			},

			ready: function () {
				this._observer = Polymer.dom(this.$.content).observeNodes(function () {
					var distributed = this.getContentChildren('#content').filter(function (tag) {
						return tag.tagName !== 'TEMPLATE';
					});

					if (distributed.length > 0) {
						this._showContent();
					} else {
						this._hideContent();
					}
				}.bind(this));
			},

			_showContent: function () {
				if (this._contentShowing) {
					return;
				}

				this._contentShowing = true;
				this.$.content.style.visibility = 'visible';
				this.$.empty.style.display = 'none';
			},

			_hideContent: function () {
				if (!this._contentShowing) {
					return;
				}

				this._contentShowing = false;
				this.$.content.style.visibility = 'hidden';
				this.$.empty.style.display = 'flex';
			}
		});
	</script>
</dom-module>