isw-route-selector.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-selector/iron-selectable.html">

<!--
### isw-route-selector

Router with app-route like API, wrapped in an iron-selectable element that binds the active route.

    <app-location route="{{route}}"></app-location>

    <isw-route-selector route="[[route]]" attr-for-selected="route" selected="{{selectedRoute}}" data="{{data}}">
      <isw-route route="a" pattern="/route-a"></isw-route>
      <isw-route route="b" pattern="/route-a/route-b"></isw-route>
      <isw-route route="c" pattern="/route-c/:somedata"></isw-route>
      <isw-route route="d" pattern="/route-c/route-d"></isw-route>
    </isw-route-selector>

    <iron-pages attr-for-selected="route" selected="[[selectedRoute]]">
      <div route="a">Route A</div>
      <div route="b">Route B</div>
      <div route="c">Route C</div>
      <div route="d">Route D</div>
    </iron-pages>

@demo demo/index.html
-->

<dom-module id="isw-route-selector">

	<script>
		Polymer({
			is: 'isw-route-selector',
			behaviors: [ Polymer.IronSelectableBehavior ],

			properties: {
				/**
				 * Route from app-location.
				 */
				route: {
					type: String,
					notify: true
				},
				/**
				 * The parameterized values that are extracted from the route as described by pattern.
				 */
				data: {
					type: Object,
					notify: true
				}
			},

			observers: [
				'_onRouteChanged(route.path)'
			],

			listeners: {
				'iron-items-changed': '_onRouteChanged'
			},

			_onRouteChanged: function() {
				if( this.items && this.route ) {
					// Highest priority match.
					var match;

					// Split the route.
					var routeParts = this.route.path.split( '/' );

					// Iterate items from IronSelectableBehavior.
					for( var i = 0; i < this.items.length; i++ ) {
						// Check that the item has an pattern.
						if( this.items[ i ].pattern ) {
							// Split the pattern.
							var patternParts = this.items[ i ].pattern.split( '/' );

							// Data from the placeholders.
							var data = {};
							// Some improvised priority system.
							// Parts in front are more important, placeholder less important.
							var priority = 0;
							var failed = false;

							// Iterate route parts.
							for( var j = 0; j < patternParts.length; j++ ) {
								// Ignore empty pattern parts.
								if( patternParts[ j ] ) {
									if( patternParts[ j ] == routeParts[ j ] ) {
										// Direct match.
										priority += (10 - j) * 2;
									} else if( patternParts[ j ].charAt( 0 ) == ':' && routeParts[ j ] ) {
										// Placeholder match.
										data[ patternParts[ j ].slice( 1 ) ] = routeParts[ j ];
										priority += 10 - j;
									} else {
										// No match.
										failed = true;
									}
								}
							}

							if( !failed ) {
								// If there is no match, or an match with lower priority, replace.
								if( !match || match.priority < priority ) {
									match = {
										index: i,
										data: data,
										priority: priority
									};
								}
							}
						}
					}

					if( match ) {
						this.set( 'data', match.data );
						this.set( 'selected', this._indexToValue( match.index ) );
					} else {
						this.select( this.fallbackSelection );
					}

					this.dispatchEvent( new CustomEvent( 'isw-route-changed' ) );
				}
			}
		});
	</script>
</dom-module>