created -> ready

entered|leftDocument -> entered|leftView
update on-* handlers to use {{...}}

pica/components/pi-accounts-model.html

@@ -42,7 +42,7 @@
       var ACCOUNTS_STORAGE_NAME = 'pica-accounts-model-1';
 
       Polymer('pi-accounts-model', {
-        created: function() {
+        ready: function() {
           this.load();
         },
         addTopic: function(topic) {

pica/components/pi-accounts.html

@@ -14,28 +14,28 @@
     <link rel="stylesheet" href="css/pi-accounts.css" />
     <div class="item">
       <div class="flex"></div>
-      <button class="button" on-tap="reset">Restore Defaults</button>
+      <button class="button" on-tap="{{reset}}">Restore Defaults</button>
     </div>
     <div class="header item">Finance</div>
     <div>
       <template repeat="{{accounts.stocks}}">
         <div class="item">
           <div class="flex">{{}}</div>
-          <polymer-ui-icon-button icon="close" on-tap="removeStock"></polymer-ui-icon-button>
+          <polymer-ui-icon-button icon="close" on-tap="{{removeStock}}"></polymer-ui-icon-button>
         </div>
       </template>
     </div>
     <div class="item">
       <div class="item-input-label">Symbol: </div>
-      <input id="symbol" autocorrect="off" operation="addStock" on-keyup="keyupHandler" />
-      <polymer-ui-icon-button icon="plus" on-tap="addStock"></polymer-ui-icon-button>
+      <input id="symbol" autocorrect="off" operation="addStock" on-keyup="{{keyupHandler}}" />
+      <polymer-ui-icon-button icon="plus" on-tap="{{addStock}}"></polymer-ui-icon-button>
     </div>
     <div class="header item">Topics</div>
     <div class="item accounts-title">Add New Feed</div>
     <div class="item no-border">
       <div class="item-input-label">Url: </div>
-      <input id="feed" type="url" class="flex" operation="addFeed" on-keyup="keyupHandler" />
-      <polymer-ui-icon-button icon="plus" on-tap="addFeed"></polymer-ui-icon-button>
+      <input id="feed" type="url" class="flex" operation="addFeed" on-keyup="{{keyupHandler}}" />
+      <polymer-ui-icon-button icon="plus" on-tap="{{addFeed}}"></polymer-ui-icon-button>
     </div>
     <div class="item">
       <div class="item-input-label">Category: </div>
@@ -49,32 +49,32 @@
     <div class="item accounts-title">Add New Category</div>
     <div class="item">
       <div class="item-input-label">Name: </div>
-      <input id="category" class="flex" operation='addCategory' on-keyup="keyupHandler" />
-      <polymer-ui-icon-button icon="plus" on-tap="addCategory"></polymer-ui-icon-button>
+      <input id="category" class="flex" operation='addCategory' on-keyup="{{keyupHandler}}" />
+      <polymer-ui-icon-button icon="plus" on-tap="{{addCategory}}"></polymer-ui-icon-button>
     </div>
     <div>
       <template repeat="{{accounts.topics}}">
         <div class="item accounts-title">
           <polymer-ui-icon class="accounts-title-icon" icon="favorite"></polymer-ui-icon>
           <div class="flex">{{title}}</div>
-          <polymer-ui-icon-button icon="close" on-tap="removeTopic"></polymer-ui-icon-button>
+          <polymer-ui-icon-button icon="close" on-tap="{{removeTopic}}"></polymer-ui-icon-button>
         </div>
         <template repeat="{{feed}}">
           <div class="item">
             <div class="flex accounts-feed-title">{{title}}</div>
-            <polymer-ui-icon-button icon="close" on-tap="removeFeed"></polymer-ui-icon-button>
+            <polymer-ui-icon-button icon="close" on-tap="{{removeFeed}}"></polymer-ui-icon-button>
           </div>
         </template>
       </template>
     </div>
-    <pi-gfeeds feed="{{feedUrl}}" count="0" on-response="feedResponse" on-error="feedResponse"></pi-gfeeds>
+    <pi-gfeeds feed="{{feedUrl}}" count="0" on-response="{{feedResponse}}" on-error="{{feedResponse}}"></pi-gfeeds>
   </template>
   <script>
     (function() {
       var ENTER_KEY = 13;
 
       Polymer('pi-accounts', {
-        created: function() {
+        ready: function() {
           this.setAttribute('touch-action', 'scroll');
           this.asyncFire('ready');
         },

pica/components/pi-app.html

@@ -17,30 +17,30 @@
 <link rel="import" href="pi-accounts.html">
 <link rel="import" href="pi-accounts-model.html">
 
-<polymer-element name="pi-app" on-keyup="keyupHandler">
+<polymer-element name="pi-app" on-keyup="{{keyupHandler}}">
   <template>
     <link rel="stylesheet" href="css/pi-app.css">
 
     <polymer-ui-scaffold id="panels" hideMenuButton menuActive="{{menuActive}}">
       <polymer-ui-sidebar-menu id="ribbon" navigation offscreen="basement" class="custom-panel" label="Pica" 
-          selected="{{ribbonSelected}}" valueattr="label" on-polymer-activate="showMain" theme="polymer-ui-dark-theme">
+          selected="{{ribbonSelected}}" valueattr="label" on-polymer-activate="{{showMain}}" theme="polymer-ui-dark-theme">
         <polymer-ui-menu-item label="Home" src="../images/ribbon_home_lightreg.png"></polymer-ui-menu-item>
         <polymer-ui-menu-item label="Topics" src="../images/ribbon_topics_lightreg.png"></polymer-ui-menu-item>
         <polymer-ui-menu-item label="Explore" src="../images/ribbon_explore_lightreg.png"></polymer-ui-menu-item>
         <polymer-ui-menu-item label="Accounts" src="../images/ribbon_accounts_lightreg.png"></polymer-ui-menu-item>
       </polymer-ui-sidebar-menu>
 
-      <polymer-ui-icon-button tool icon="{{nav}}" on-tap="navAction"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="{{nav}}" on-tap="{{navAction}}"></polymer-ui-icon-button>
       <div tool class="toolbar-label flex">{{toolbarLabel}}</div>
       <polymer-ui-toolbar id="actionbar" tool hidden?="{{hideActionbar}}" responsive>
         <pi-link-button id="linkButton" link="{{story.link}}" hidden?="{{hideLinkButton}}"></pi-link-button>
         <pi-view-button id="viewButton" layout="{{selectedLayout}}" halign="right" hidden?="{{hideViewButton}}"></pi-view-button>
         <pi-action-button halign="right"></pi-action-button>
-        <polymer-ui-icon-button icon="refresh" on-tap="reloadAction"></polymer-ui-icon-button>
+        <polymer-ui-icon-button icon="refresh" on-tap="{{reloadAction}}"></polymer-ui-icon-button>
       </polymer-ui-toolbar>
 
       <polymer-ui-pages id="contentPanels" main selected="{{ribbonSelected}}" valueattr="id" 
-          on-polymer-select="panelSelectAction" on-tap="showMain">
+          on-polymer-select="{{panelSelectAction}}" on-tap="{{showMain}}">
         <div id="Home"><template if="{{activatedPanels.Home}}">
             <pi-home stocks="{{$.accountsModel.stocks}}"></pi-home>
         </template></div>
@@ -66,7 +66,7 @@
         menuActive: false,
         selectedViewPanel: '',
         selectedLayout: null,
-        created: function() {
+        ready: function() {
           this.activatedPanels = {};
           // listen for screen size change
           var mq = window.matchMedia('(max-width: 800px)');
@@ -76,7 +76,7 @@
           this.selectedLayout = this.layout;
           this.selectedViewPanel = 'topics';
         },
-        enteredDocument: function() {
+        enteredView: function() {
           this.super();
         },
         screenSizeChange: function(query) {

pica/components/pi-explore.html

@@ -13,18 +13,18 @@
   <template>
     <link rel="stylesheet" href="css/pi-explore.css" />
     <div id="searchBox">
-      <input id="searchInput" on-input="inputChange"/>
+      <input id="searchInput" on-input="{{inputChange}}"/>
       <polymer-ui-icon icon="search"></polymer-ui-icon>
-      <speech-mic id="speech" on-result="speechResult"></speech-mic>
+      <speech-mic id="speech" on-result="{{speechResult}}"></speech-mic>
     </div>
     <pi-feed-viewer id="viewer" topics="{{topics}}" topic="{{topic}}" panel="{{panel}}"
         layout="{{layout}}" topicsLayout="{{layout}}" loading="{{loading}}" disableTracking></pi-feed-viewer>
-    <pi-gfeeds query="{{query}}" on-queryresponse="queryResponse" loading="{{loading}}"></pi-gfeeds>
+    <pi-gfeeds query="{{query}}" on-queryresponse="{{queryResponse}}" loading="{{loading}}"></pi-gfeeds>
   </template>
   <script>
     Polymer('pi-explore', {
       layout: 'list',
-      created: function() {
+      ready: function() {
         this.contentNode = document.createElement('div');
       },
       get canPrevious() {

pica/components/pi-feed-aggregator.html

@@ -51,7 +51,7 @@
         count: 24,
         useCache: true,
         feedResults: null,
-        created: function() {
+        ready: function() {
           this.resetCache();
           this.contentNode = document.createElement('div');
         },

pica/components/pi-feed-tracker.html

@@ -11,7 +11,7 @@
       var FEED_TRACKER_STORAGE_NAME = 'pica-feed-tracker-1';
 
       Polymer('pi-feed-tracker', {
-        created: function() {
+        ready: function() {
           this.feeds = {};
           this.load();
         },

pica/components/pi-feed-viewer.html

@@ -18,13 +18,13 @@
     <link rel="stylesheet" href="css/pi-feed-viewer.css">
 
     <polymer-ui-animated-pages id="panels" class="feed-viewer-panels" selected="{{panel}}" valueattr="id"
-        on-polymer-pages-animation-end="panelSelected" directional transition="{{$.hslide}}">
+        on-polymer-pages-animation-end="{{panelSelected}}" directional transition="{{$.hslide}}">
       <pi-items-view id="topics" layout="{{topicsLayout}}" items="{{topics}}" view="topics" selected="{{topic}}"></pi-items-view>
       <pi-items-view id="stories" layout="{{layout}}" items="{{stories}}" view="flex" selected="{{story}}"></pi-items-view>
-      <pi-story id="story" story="{{story}}" on-flick="storyFlickHandler" on-keydown="storyKeydownHandler"></pi-story>
+      <pi-story id="story" story="{{story}}" on-flick="{{storyFlickHandler}}" on-keydown="{{storyKeydownHandler}}"></pi-story>
     </polymer-ui-animated-pages>
 
-    <polymer-animation-group id="hslide" duration="0.3" easing="ease-in-out">
+    <polymer-animation-group id="{{hslide}}" duration="0.3" easing="ease-in-out">
       <polymer-animation>
           <polymer-animation-keyframe>
             <polymer-animation-prop name="transform" value="scale(1)"></polymer-animation-prop>
@@ -58,7 +58,7 @@
         loading: true,
         disableTracking: false,
         feedCount: 200,
-        enteredDocument: function() {
+        enteredView: function() {
           var mq = window.matchMedia('(max-width: 800px)');
           mq.addListener(this.layoutChange.bind(this));
           this.layoutChange(mq);

pica/components/pi-home.html

@@ -25,7 +25,7 @@
   </template>
   <script>
     Polymer('pi-home', {
-      created: function() {
+      ready: function() {
         this.asyncFire('ready');
       }
     });

pica/components/pi-items-view.html

@@ -14,7 +14,7 @@
     <div id="container" loaded="{{loaded}}" class="{{layout}} {{view}}">
       <template repeat="{{viewItems}}">
         <div class="item">
-          <div class="card" on-tap="selectItem">
+          <div class="card" on-tap="{{selectItem}}">
             <div class="image" style="background-image: url({{imgSrc}});" showing="{{imageShowing}}"></div>
             <div class="info">
               <div class="title">{{title}}
@@ -32,7 +32,7 @@
           </div>
         </div>
       </template>
-      <div id="more" on-tap="loadMore">
+      <div id="more" on-tap="{{loadMore}}">
         <polymer-ui-icon icon="refresh" theme="polymer-ui-dark-theme"></polymer-ui-icon>
           Load more articles
       </div>
@@ -56,10 +56,10 @@
         layout: 'grid',
         loaded: true,
         pageSize: 24,
-        created: function() {
+        ready: function() {
           this.setAttribute('touch-action', 'scroll');
         },
-        enteredDocument: function() {
+        enteredView: function() {
           this.updateMoreShowing();
         },
         loadedChanged: function() {

pica/components/pi-story.html

@@ -25,7 +25,7 @@
   <script>
     Polymer('pi-story', {
       content: '',
-      created: function() {
+      ready: function() {
         if (!this.hasAttribute('tabindex')) {
           this.tabIndex = -1;
         }