Merge pull request #14 from Polymer/event-bindings

Event bindings

Animation/animation-group.html

@@ -1,5 +1,5 @@
 <link rel="import" href="../../polymer-elements/polymer-animation/polymer-animation-group.html">
-<polymer-element name="animation-group" extends="polymer-animation-group" on-click="clickHandler">
+<polymer-element name="animation-group" extends="polymer-animation-group" on-click="{{clickHandler}}">
   <template>
     <style>
       @host {

Animation/animation-picker.html

@@ -1,5 +1,5 @@
 <link rel="import" href="../../toolkit-ui/elements/animation/all.html">
-<polymer-element name="animation-picker" on-click="clickHandler">
+<polymer-element name="animation-picker" on-click="{{clickHandler}}">
   <link rel="stylesheet" href="../../toolkit-ui/elements/css/g-flex-layout.css">
   <template>
     <style>
@@ -46,7 +46,7 @@
           // proxied animation properties
           targetSelector: ''
         },
-        created: function() {
+        ready: function() {
           this.super();
           this.animationTypeChanged();
         },

Animation/tk-blink.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../polymer-elements/polymer-animation/polymer-blink.html">
 <script src="tk-proto.js"></script>
-<polymer-element name="tk-blink" extends="polymer-blink" on-click="clickHandler">
+<polymer-element name="tk-blink" extends="polymer-blink" on-click="{{clickHandler}}">
   <template>
     <style>
       @host {

Animation/tk-bounce.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../polymer-elements/polymer-animation/polymer-bounce.html">
 <script src="tk-proto.js"></script>
-<polymer-element name="tk-bounce" extends="polymer-bounce" on-click="clickHandler">
+<polymer-element name="tk-bounce" extends="polymer-bounce" on-click="{{clickHandler}}">
   <template>
     <style>
       @host {

Animation/tk-flip.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../polymer-elements/polymer-animation/polymer-flip.html">
 <script src="tk-proto.js"></script>
-<polymer-element name="tk-flip" extends="polymer-flip" on-click="clickHandler">
+<polymer-element name="tk-flip" extends="polymer-flip" on-click="{{clickHandler}}">
   <template>
     <style>
       @host {

Animation/tk-shake.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../polymer-elements/polymer-animation/polymer-shake.html">
 <script src="tk-proto.js"></script>
-<polymer-element name="tk-shake" extends="polymer-shake" on-click="clickHandler">
+<polymer-element name="tk-shake" extends="polymer-shake" on-click="{{clickHandler}}">
   <template>
     <style>
       @host {

Bootstrap/elements/bs-accordion.html

@@ -6,7 +6,7 @@
       }
     </style>
     <div class="accordion-heading">
-      <a id="collapse" class="accordion-toggle" on-tap="toggleAll">
+      <a id="collapse" class="accordion-toggle" on-tap="{{toggleAll}}">
         <content select=".header"></content>
       </a>
     </div>

Bootstrap/elements/bs-navbar-button.html

@@ -24,7 +24,7 @@
   </template>
   <script>
     Polymer('bs-navbar-button', {
-      created: function() {
+      ready: function() {
         this.setAttribute('data-toggle', 'collapse');
       }
     });

Bootstrap/elements/bs-simple.html

@@ -25,7 +25,7 @@
     </template>
     <script>
       Polymer('bp-btn-navbar', {
-        created: function() {
+        ready: function() {
           this.classList.add('btn', 'btn-navbar');
           this.setAttribute('data-toggle', 'collapse');
           this.setAttribute('data-target', '.nav-collapse');
@@ -37,7 +37,7 @@
   <polymer-element name="bp-icon-bar">
     <script>
       Polymer('bp-icon-bar', {
-        created: function() {
+        ready: function() {
           this.classList.add('icon-bar');
         }
       });
@@ -47,7 +47,7 @@
   <polymer-element name="bp-brand" extends="a">
     <script>
       Polymer('bp-brand', {
-        created: function() {
+        ready: function() {
           this.classList.add('brand');
         }
       });
@@ -57,7 +57,7 @@
   <polymer-element name="bp-nav-collapse" extends="p">
     <script>
       Polymer('bp-nav-collapse', {
-        created: function() {
+        ready: function() {
           this.classList.add('nav-collapse', 'collapse');
         }
       });
@@ -67,7 +67,7 @@
   <polymer-element name="bp-navbar-text-right" extends="p">
     <script>
       Polymer('bp-navbar-text-right', {
-        created: function() {
+        ready: function() {
           this.classList.add('navbar-text', 'pull-right');
         }
       });
@@ -77,7 +77,7 @@
   <polymer-element name="bp-navbar-link" extends="a">
     <script>
       Polymer('bp-navbar-link', {
-        created: function() {
+        ready: function() {
           this.classList.add('navbar-link');
         }
       });
@@ -91,7 +91,7 @@
     <script>
       Polymer('bp-nav', {
         selectedClass: 'active',
-        created: function() {
+        ready: function() {
           this.super();
           this.classList.add('nav');
         }
@@ -106,7 +106,7 @@
     </template>
     <script>
       this.component && this.component({
-        created: function() {
+        ready: function() {
            this.nameChanged();
         },
         nameChanged: function() {
@@ -121,7 +121,7 @@
     </template>
     <script>
       this.component && this.component({
-        created: function() {
+        ready: function() {
            this.nameChanged();
         },
         nameChanged: function() {

ace-element/ace-element.html

@@ -41,7 +41,7 @@
       // may be used before that. Instead of making each function bail if
       // this.editor is not set, we create a dummy editor. At editor
       // initialization time, any pending changes are synch'd.
-      created: function() {
+      ready: function() {
         this.editor = ace.edit(document.createElement('div'));
       },
       enteredView: function() {

chart-js/chart-js.html

@@ -24,7 +24,7 @@
       options: null,
       color: '#AABBDD',
       dataString: '28,48,40,19,96,27,100',
-      enteredDocument: function() {
+      enteredView: function() {
         this.$.chart.width = Math.max(this.offsetWidth, 100);
         this.$.chart.height = Math.max(this.offsetHeight, 100);
         //Get the context of the canvas element we want to select

code-mirror/code-mirror.html

@@ -31,7 +31,7 @@
   <script>
     Polymer('code-mirror', {
       skin: '',
-      created: function() {
+      ready: function() {
         this.mirror = CodeMirror(this.shadowRoot, {
           value: "<polymer-element name=\"my-element\">\n\t<template></template>\n\t<script>\n\t\tPolymer('my-element', {\n\t\t});\n\t</scr" + 'ipt>\n</polymer-element>',
           mode: 'htmlmixed',

cool-clock/cool-clock.html

@@ -12,13 +12,13 @@
   <script>
     Polymer('cool-clock', {
       skin: '', //'Babosa',
-      created: function() {
+      ready: function() {
 
       },
       skinChanged: function() {
         this.canvas.className = 'CoolClock:' + this.skin;
       },
-      enteredDocument: function() {
+      enteredView: function() {
         // TODO(sorvell): create the canvas element manually becase ios 
         // does not render the canvas element if it is not created in the
         // main document (component templates are created in a 

flatiron-director/flatiron-director.html

@@ -11,7 +11,7 @@
       var private_router;
       Polymer('flatiron-director', {
         autoHash: false,
-        created: function() {
+        ready: function() {
           this.router.on(/(.*)/, function(route) {
             this.route = route;
           }.bind(this));

g-kratu/g-kratu.html

@@ -16,7 +16,7 @@
       data: null,
       definition: null,
       pending: 0,
-      created: function() {
+      ready: function() {
         // Instantiate a new Kratu object
         this.kratu = new Kratu();
         // Tell Kratu where to render our report

js-beautify/js-beautify.html

@@ -10,7 +10,7 @@
     Polymer('js-beautify', {
       html: '',
       options: null,
-      created: function() {
+      ready: function() {
         this.html = this.innerHTML;
       },
       htmlChanged: function() {

marked-js/marked-js.html

@@ -9,7 +9,7 @@
     Polymer('marked-js', {
       text: '',
       allowAuthorStyles: true,
-      enteredDocument: function() {
+      enteredView: function() {
 
         marked.setOptions({
           highlight: this.highlight.bind(this)

pdf-js/pdf-js.html

@@ -28,7 +28,7 @@
         font-weight: bold;
       }
     </style>
-    <span id="pdfLabel">{{label}}</span><button on-click="prev">Prev</button><button on-click="next">Next</button>
+    <span id="pdfLabel">{{label}}</span><button on-click="{{prev}}">Prev</button><button on-click="{{next}}">Next</button>
     <br/>
     <canvas id="pdfCanvas" style="border:1px solid gray; background-color: white;"/>
   </template>
@@ -38,7 +38,7 @@
       page: 1,
       src: '',
       label: '',
-      created: function() {
+      ready: function() {
       },
       prev: function() {
         if (this.page > 0) {

pixi-js/pixi-js.html

@@ -19,7 +19,7 @@
       count: 40,
       speed: 1,
       playing: false,
-      created: function () {
+      ready: function () {
         this.asyncMethod(function () {
           this.animator = this.animate.bind(this);
           this.prepare();

polymer-more/polymer-ui-clock/polymer-ui-clock.html

@@ -25,7 +25,7 @@
         seconds: -1,
         minutes: -1,
         hours: -1,
-        enteredDocument: function() {
+        enteredView: function() {
           // when we are inserted into DOM, start watching the time
           this.updateTime();
           this.interval = setInterval(this.updateTime.bind(this), 1000);

polymer-more/polymer-ui-line-chart/polymer-ui-line-chart.html

@@ -25,7 +25,7 @@
     </style>
     <div id="bg"></div>
     <div id="chart"></div>
-    <polymer-google-jsapi on-polymer-google-jsapi-loaded="jsapiLoaded"></polymer-google-jsapi>
+    <polymer-google-jsapi on-polymer-google-jsapi-loaded="{{jsapiLoaded}}"></polymer-google-jsapi>
   </template>
   <script>
     (function() {

polymer-more/polymer-ui-stock/polymer-ui-stock.html

@@ -33,7 +33,7 @@
         timeData: null,
         autoupdate: false,
         updateinterval: 60000,
-        created: function() {
+        ready: function() {
           //this.$.ajax.url = this.resolvePath('mock/polymer-ui-stock-test-data.json');
           if (this.symbols === '') {
             this.symbols = '.INX,NDAQ,.DJI';

polymer-more/polymer-ui-weather/polymer-ui-weather.html

@@ -44,7 +44,7 @@
         }
       },
       icons: ['clear', 'cloudy', 'rainy', 'sunny', 'mostlysunny', 'partlycloudy'],
-      created: function() {
+      ready: function() {
         this.loadFromStorage();
       },
       loadFromStorage: function() {

polymer-stock/polymer-stock.html

@@ -39,7 +39,7 @@
       updateinterval: 60000,
       jsonpResponse: null,
       queryMatches: false,
-      created: function() {
+      ready: function() {
         this.queryMatchesChanged()
       },
       go: function() {

smoothie-chart/smoothie-chart.html

@@ -20,7 +20,7 @@
       labels: {
         fillStyle:'rgb(250, 200, 200)' 
       },
-      created: function() {
+      ready: function() {
         this.series = [];
         this.smoothie = new SmoothieChart({
           grid: this.grid,

speech-mic/speech-mic.html

@@ -36,7 +36,7 @@
        display: none;
       }
     </style>
-    <div id="mic" recognizing="{{recognizing}}" on-click="toggleRecognition"></div>
+    <div id="mic" recognizing="{{recognizing}}" on-click="{{toggleRecognition}}"></div>
   </template>
   <script>
     Polymer('speech-mic', {
@@ -46,7 +46,7 @@
       stop: function() {
         this.recognition && this.recognition.stop();
       },
-      created: function() {
+      ready: function() {
         if (window.webkitSpeechRecognition) {
           this.recognition = new webkitSpeechRecognition();
           this.recognition.continuous = true;

tk-buildbot/index.html

@@ -28,7 +28,7 @@
               'PointerGestures',
             ]
           },
-          created: function() {
+          ready: function() {
             this.generateBuilders();
           },
           generateBuilders: function() {

tk-buildbot/tk-buildbot.html

@@ -61,8 +61,8 @@
         margin-right: 5px;
       }
     </style>
-    <g-ajax id="bbot" handleAs="json" on-response="response"></g-ajax>
-    <div class="badge" on-click="toggleDetails">
+    <g-ajax id="bbot" handleAs="json" on-response="{{response}}"></g-ajax>
+    <div class="badge" on-click="{{toggleDetails}}">
       <span class="builder">{{builder}}</span>
       <span class="result {{result.resultStr}}">{{result.resultStr}}</span>
     </div>

topcoat/elements/topcoat-simple-elements.html

@@ -84,7 +84,7 @@ <h3 class="topcoat-list__header">{{header}}</h3>
   <script>
     Polymer('topcoat-list', {
       applyAuthorStyles: true,
-      created: function() {
+      ready: function() {
         this.items = this.children.array().map(function(n, i) {
           n.setAttribute('i', 'n' + i);
           return {slctr: '[i=n' + i + ']'};

typeahead-input/index.html

@@ -35,7 +35,7 @@
             border: 1px solid black;
           }
         </style>
-        <typeahead-input id="typeahead" on-typeahead-delimiter="more"></typeahead-input>
+        <typeahead-input id="typeahead" on-typeahead-delimiter="{{more}}"></typeahead-input>
         <div class="values">
           <template repeat="{{data}}">
             <div selected="{{selected}}">
@@ -77,7 +77,7 @@
             ]
           }],
           selected: 0,
-          created: function() {
+          ready: function() {
             this.$.typeahead.values = this.selectedValues;
           },
           selectedChanged: function(old) {

typeahead-input/typeahead-input.html

@@ -38,7 +38,7 @@
     </style>
     <span id="measure">{{input}}</span>
     <input id="hint" type="text" disabled value="{{hint}}">
-    <input id="input" type="text" on-input="inputHandler" on-keydown="keydownHandler" on-click="clickHandler">
+    <input id="input" type="text" on-input="{{inputHandler}}" on-keydown="{{keydownHandler}}" on-click="{{clickHandler}}">
   </template>
   <script>
     Polymer('typeahead-input', {