player-path.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">

<!--
##### Example

    <player-path data="{{connections}}" showteams="true"></player-path>

@element player-path
@blurb Element which shows the path from one player to another given a series of connections as data. Optionally shows teams along the way.
@status [...]
@homepage https://github.com/jklein24/6-degs-nba-polymer/blob/master/player-path.html
-->

<polymer-element name="player-path" attributes="data showteams loading" layout vertical center>
  <template>
    <link rel="stylesheet" href="player-path.css">
    <div class="spinner-wrapper" layout horizontal center-justified>
		<paper-spinner active?="{{loading}}"></paper-spinner>
	</div>

	<template repeat="{{connection,index in data}}">
		<div  hidden?="{{!showteams && !loading}}">
			{{connection.p2.name | capitalize}} played with {{connection.p1.name | capitalize}} on the {{connectionTeams[index]}}
		</div>
	</template>
	<div hidden?="{{showteams && !loading}">
		<template if="{{data.length > 0}}">
			{{data[0].p2.name | capitalize}}
		</template>
		<template repeat="{{connection in data}}">
			&rarr; {{connection.p1.name | capitalize}}
		</template>
	</div>
  </template>

  <script src="player-path.js"></script>
</polymer-element>