paper-fab-speed-dial.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../neon-animation/animations/scale-down-animation.html">
<link rel="import" href="../neon-animation/animations/cascaded-animation.html">

<!--
`paper-fab-speed-dial`
A floating action button flinging out related actions

@demo demo/index.html 
-->

<dom-module id="paper-fab-speed-dial">
	<template>
		<style include="iron-flex iron-flex-alignment iron-flex-reverse">
			:host {
				@apply(--layout-vertical-reverse);
				position: absolute;
				bottom: 10px;
				right: 10px;
				@apply(--paper-fab-speed-dial);
			}
			
			:host::content > .dropdown-content {
				@apply(--layout-vertical-reverse);
			}
			
			:host::content > .dropdown-content paper-fab {
				margin: 0px 8px 10px 8px;
			}
			
			:host::content > .dropdown-content[hidden] {
				display: none;
			}
		</style>

		<content></content>
	</template>

	<script>
		Polymer({

			is: 'paper-fab-speed-dial',

			behaviors: [
				Polymer.NeonAnimationRunnerBehavior
			],

			ready: function () {
				var button = this._getTriggerElement();
				var menu = this._getDropdownContent();
				this.listen(button, 'tap', 'toggle');
				menu.hidden = !this.active;
			},

			properties: {
				active: {
					type: Boolean,
					value: false,
					notify: true,
					reflectToAttribute: true
				},

				animationConfig: {
					value: function () {
						var menu = this._getDropdownContent();
						var items = menu.children;
						var array = Array.prototype.slice.call(items);
						var reversed = Array.prototype.slice.call(items).reverse();
						return {
							'entry': {
								name: 'cascaded-animation',
								animation: 'scale-up-animation',
								nodes: array
							},
							'exit': {
								name: 'cascaded-animation',
								animation: 'scale-down-animation',
								nodes: reversed
							}
						}
					}
				}
			},

			toggle: function () {
				var menu = this._getDropdownContent();
				menu.hidden = false;
				this.active = !this.active;
				var animation = this.active ? 'entry' : 'exit';
				this.playAnimation(animation);
			},

			listeners: {
				'neon-animation-finish': '_onNeonAnimationFinish'
			},

			_onNeonAnimationFinish: function () {
				var menu = this._getDropdownContent();
				menu.hidden = !this.active;
			},

			_getTriggerElement: function () {
				return this.queryEffectiveChildren(':first-child');
			},

			_getDropdownContent: function () {
				return this.queryEffectiveChildren('.dropdown-content');
			}

		});
	</script>
</dom-module>