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="../iron-overlay-behavior/iron-overlay-behavior.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.IronOverlayBehavior,
		Polymer.NeonAnimationRunnerBehavior
	  ],

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

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

	  ready: function(){
		var button = this._getTriggerElement();
		if (button) {
		  this.listen(button, 'tap', 'toggle');
		}
	  },

	  _renderOpened: function(){
		this.cancelAnimation();
		this.playAnimation('entry');
	  },

	  _renderClosed: function(){
		this.cancelAnimation();
		this.playAnimation('exit');
	  },

	  _onNeonAnimationFinish: function(){
		if (this.opened) {
		  this._finishRenderOpened();
		} else {
		  this._finishRenderClosed();
		}
	  },

	  _getTriggerElement: function(){
		var trigger = this.queryEffectiveChildren(':first-child');
		return trigger.classList.contains('dropdown-content') ? undefined : trigger;
	  },

	  _getDropdownContent: function(){
		return this.queryEffectiveChildren('.dropdown-content');
	  }
	});
  </script>
</dom-module>