Introduce template 'if' and 'repeat'

Author: cletusw

auto-history.css

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}

auto-history.html

@@ -0,0 +1,14 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+
+<polymer-element name="auto-history">
+  <template>
+
+    <link rel="stylesheet" href="auto-history.css">
+
+    <template repeat="{{ item, i in history }}">
+      <span>{{ (i === 0) ? '' : '&bull; ' }}{{ item.innerText }}</span>
+    </template>
+
+  </template>
+  <script src="auto-history.js"></script>
+</polymer-element>

auto-history.js

@@ -0,0 +1,15 @@
+Polymer('auto-history', {
+
+  publish: {
+    track: null
+  },
+
+  created: function() {
+    this.history = [];
+  },
+
+  trackChanged: function(oldValue, newValue) {
+    this.history.unshift(newValue);
+  }
+
+});

filter-by-text-styled.html

@@ -1,5 +1,6 @@
 <link rel="import" href="bower_components/polymer/polymer.html">
 <link rel="import" href="filter-by-text.html">
+<link rel="import" href="auto-history.html">
 
 <polymer-element name="filter-by-text-styled" extends="filter-by-text" noscript>
   <template>
@@ -10,5 +11,7 @@
 
     <shadow></shadow>
 
+    <auto-history track="{{ selectedItem }}"></auto-history>
+
   </template>
 </polymer-element>