Event bindings

Gallery/elements/ga-app.html

@@ -3,20 +3,20 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<polymer-element name="ga-app" attributes="metadata" on-select-card="showDetail">
+<polymer-element name="ga-app" attributes="metadata" on-select-card="{{showDetail}}">
   <template>
     <link rel="stylesheet" href="css/ga-app.css">
     <polymer-flex-layout vertical></polymer-flex-layout>
     <polymer-ui-toolbar theme="polymer-ui-dark-theme">
-      <polymer-ui-icon-button icon="menu" hidden="{{mainShowing}}" on-tap="showMain"></polymer-ui-icon-button>
+      <polymer-ui-icon-button icon="menu" hidden="{{mainShowing}}" on-tap="{{showMain}}"></polymer-ui-icon-button>
       <div fit class="toolbar-title">Polymer Gallery</div>
-      <polymer-ui-icon-button icon="search" hidden="{{detailShowing}}" on-tap="toggleSearchBox"></polymer-ui-icon-button>
+      <polymer-ui-icon-button icon="search" hidden="{{detailShowing}}" on-tap="{{toggleSearchBox}}"></polymer-ui-icon-button>
     </polymer-ui-toolbar>
     <div class="panels" fit>
       <div id="main" hidden="{{detailShowing}}">
         <polymer-flex-layout vertical></polymer-flex-layout>
         <div id="searchBox">
-          <input id="input" x-webkit-speech placeholder="Search" on-input="search" />
+          <input id="input" x-webkit-speech placeholder="Search" on-input="{{search}}" />
         </div>
         <ga-cards fit items="{{items}}" selected="{{selected}}"></ga-cards>
       </div>
@@ -28,7 +28,7 @@
     Polymer('ga-app', {
       selectedPanel: 'main',
       searchSlideOpened: false,
-      enteredDocument: function() {
+      enteredView: function() {
         this.selectedPanelChanged();
         this.search();
       },

Gallery/elements/ga-cards.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="css/ga-cards.css">
     <template repeat="{{items}}">
       <div class="card">
-        <div class="inner" touch-action="none" on-tap="selectCard">
+        <div class="inner" touch-action="none" on-tap="{{selectCard}}">
           <div class="image" style="background-image: url({{imageUrl}});"></div>
           <div class="title">{{id}}</div>
           <div class="author">by {{author}}</div>

MemoryGame/index.html

@@ -37,15 +37,15 @@
           <table>
             <tr template repeat="{{ row in game.grid }}">
               <td template repeat="{{ tile in row }}">
-                <g-card on-click="flip" tile="{{ tile }}"></g-card>
+                <g-card on-click="{{flip}}" tile="{{ tile }}"></g-card>
               </td>
             </tr>
           </table>
         <div class="message">{{ game.message }}</div>
       </template>
       <script>
         Polymer('match-game', {
-          created: function() {
+          ready: function() {
             this.game = new Game(['8-ball', 'kronos', 'baked-potato',
                                   'dinosaur', 'rocket', 'skinny-unicorn',
                                   'that-guy', 'zeppelin']);

Playground/src/pg-app.html

@@ -22,8 +22,8 @@
 
     <pg-view id="view" flex hideTitle meta="{{selectedSample}}" responsive autoRun>
       <polymer-ui-toolbar id="actionbar" hidden?="{{!selectedElement.name}}">
-        <button class="toolbar-button" on-tap="generateImport">Add Import</button>
-        <button class="toolbar-button" on-tap="generateElement">Add Element</button>
+        <button class="toolbar-button" on-tap="{{generateImport}}">Add Import</button>
+        <button class="toolbar-button" on-tap="{{generateElement}}">Add Element</button>
         <a class="toolbar-button" target="_blank"  href="view-source:{{href}}/{{selectedElement.sourcePath}}">View Source</a>
       </polymer-ui-toolbar>
     </pg-view>
@@ -34,7 +34,7 @@
   <script>
     Polymer('pg-app', {
       selectedElement: null,
-      created: function() {
+      ready: function() {
         this.href = location.href.substring(0, location.href.lastIndexOf('/'));
       },
       generateImport: function() {

Playground/src/pg-sidebar.html

@@ -38,7 +38,7 @@
 
       <div id="elementMenuContainer" v-flexbox flex>
         <div class="element-menu-header">Elements</div>
-        <polymer-ui-menu id="elementMenu" flex selectedModel="{{selectedElement}}" on-polymer-activate="activateElement">
+        <polymer-ui-menu id="elementMenu" flex selectedModel="{{selectedElement}}" on-polymer-activate="{{activateElement}}">
           <template id="elementsTemplate" repeat="{{elements}}">
             <polymer-ui-submenu-item label="{{label}}" icon="settings">
               <template repeat="{{elements}}">
@@ -52,7 +52,7 @@
   </template>
   <script>
     Polymer('pg-sidebar', {
-      created: function() {
+      ready: function() {
         this.asyncMethod(function() {
           this.$.sampleMenu.selected = 0;
         });

Playground/src/pg-view.html

@@ -22,23 +22,23 @@
     <link rel="stylesheet" href="../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.css">
 
     <polymer-ui-toolbar class="action-bar">
-      <button class="toolbar-button" on-tap="run">Run</button>
+      <button class="toolbar-button" on-tap="{{run}}">Run</button>
       <div class="action-bar-label">Auto Run:</div>
       <polymer-ui-toggle-button value="{{autoRun}}"></polymer-ui-toggle-button>
       <div class="action-bar-label" hidden?="{{hideTitle}}">{{meta.label}}</div>
       <content></content>
     </polymer-ui-toolbar>
 
     <div id="stage" h-flexbox?="{{!vertical}}" v-flexbox?="{{vertical}}" flex>
-      <ace-element id="ace" mode="html" theme="chrome" tabSize="2" vertical?="{{vertical}}" on-editor-input="editorChange"></ace-element>
+      <ace-element id="ace" mode="html" theme="chrome" tabSize="2" vertical?="{{vertical}}" on-editor-input="{{editorChange}}"></ace-element>
 
       <polymer-ui-splitter direction="{{vertical ? 'up' : 'left'}}" locked="{{maximized}}" 
-          on-pointerdown="disableOutputMouseEvents" on-pointerup="enableOutputMouseEvents" 
-          on-trackend="splitterDragEnd"></polymer-ui-splitter>
+          on-pointerdown="{{disableOutputMouseEvents}}" on-pointerup="{{enableOutputMouseEvents}}" 
+          on-trackend="{{splitterDragEnd}}"></polymer-ui-splitter>
 
       <div v-flexbox flex>
         <polymer-ui-toolbar theme="polymer-ui-light-theme">
-          <polymer-ui-icon-button src="{{arrowImageSrc}}" on-tap="toggleMaximized"></polymer-ui-icon-button>
+          <polymer-ui-icon-button src="{{arrowImageSrc}}" on-tap="{{toggleMaximized}}"></polymer-ui-icon-button>
           <div>Output</div>
         </polymer-ui-toolbar>
         <pg-output id="output" flex html="{{source}}" polymerBasePath="{{polymerBasePath}}" importHref="{{importHref}}"></pg-output>
@@ -57,7 +57,7 @@
       queryMatches: false,
       maximized: false,
       autoRun: false,
-      created: function() {
+      ready: function() {
         this.editor = this.$.ace;
         this.maximizedChanged();
         var meta = this.querySelector('polymer-meta');

Sandbox/lib/tk-app.html

@@ -3,38 +3,38 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<polymer-element name="tk-app" on-keyup="keyup" on-design-changed="designChanged" attributes="startMode">
+<polymer-element name="tk-app" on-keyup="{{keyup}}" on-design-changed="{{designChanged}}" attributes="startMode">
   <template>
     <link rel="stylesheet" href="css/tk-app.css">
     <polymer-cookie id="bannerCookie" name="seen_banner" value="{{ seen_banner }}"></polymer-cookie>
     <div id="notide" hidden?="{{ seen_banner }}"><b>Wait, is this an IDE or something?</b> Nope, Sandbox just makes it easy to get a feel for
       Polymer. It’s more of a convenience and not required to make apps using Polymer. <a
-        href="http://polymer-project.org/faq.html#sandbox" target="_blank">Read More</a> | <span id="dismiss" on-tap="hideBanner">Dismiss</span></div>
+        href="http://polymer-project.org/faq.html#sandbox" target="_blank">Read More</a> | <span id="dismiss" on-tap="{{hideBanner}}">Dismiss</span></div>
     <g-toolbar>
       <g-selector id="modeSelector" selected="{{selectedMode}}">
         <g-icon-button id="designerIcon" name="designer"></g-icon-button>
         <g-icon-button id="sourceIcon" name="source"></g-icon-button>
       </g-selector>
-      <g-icon-button id="toggle" on-pointerdown="toggleSize" src="assets/fullscreen.png"></g-icon-button>
-      <g-icon-button src="assets/ic_refresh_darkreg.png" on-tap="clearElement"></g-icon-button>
+      <g-icon-button id="toggle" on-pointerdown="{{toggleSize}}" src="assets/fullscreen.png"></g-icon-button>
+      <g-icon-button src="assets/ic_refresh_darkreg.png" on-tap="{{clearElement}}"></g-icon-button>
       <div class="flex"></div>
       <g-toolbar id="innerToolbar" responsive="true">
-        <g-menu-button responsive="true" selectedClass="" src="assets/menu.png" valign="right" on-activate="menuActivate">
-          <g-menu-item src="assets/settings.png" on-click="previewElement">Preview</g-menu-item>
-          <g-menu-item src="assets/settings.png" on-click="previewElementSource">Preview Source</g-menu-item>
-          <g-menu-item src="assets/settings.png" on-tap="publishElement">Publish</g-menu-item>
-          <g-menu-item src="assets/ic_refresh_darkreg.png" on-tap="clearElement">Clear</g-menu-item>
+        <g-menu-button responsive="true" selectedClass="" src="assets/menu.png" valign="right" on-activate="{{menuActivate}}">
+          <g-menu-item src="assets/settings.png" on-click="{{previewElement}}">Preview</g-menu-item>
+          <g-menu-item src="assets/settings.png" on-click="{{previewElementSource}}">Preview Source</g-menu-item>
+          <g-menu-item src="assets/settings.png" on-tap="{{publishElement}}">Publish</g-menu-item>
+          <g-menu-item src="assets/ic_refresh_darkreg.png" on-tap="{{clearElement}}">Clear</g-menu-item>
         </g-menu-button>
       </g-toolbar>
     </g-toolbar>
     <div id="main" class="{{banner: !seen_banner}}">
       <tk-designer id="designer" selected="{{selected}}" designElement="{{designElement}}" maximized="{{maximized}}"></tk-designer>
-      <tk-source id="source" fontSize="{{fontSize}}" sourceElement="{{designElement}}" on-source-changed="sourceChanged" on-keydown="sourceKeydown"></tk-source>
+      <tk-source id="source" fontSize="{{fontSize}}" sourceElement="{{designElement}}" on-source-changed="{{sourceChanged}}" on-keydown="{{sourceKeydown}}"></tk-source>
       <tk-tools id="tools" selected="{{selected}}" sourceElement="{{designElement}}"
-          on-parent-element="selectParentElement"
-          on-delete-element="deleteElement"
-          on-property-changed="designChanged"
-          on-bind-property="applyPropertyBinding"
+          on-parent-element="{{selectParentElement}}"
+          on-delete-element="{{deleteElement}}"
+          on-property-changed="{{designChanged}}"
+          on-bind-property="{{applyPropertyBinding}}"
       ></tk-tools>
     </div>
   </template>
@@ -48,7 +48,7 @@
       selectedMode: '',
       maximized: false,
       startMode: '',
-      created: function() {
+      ready: function() {
         this.selectedMode = 'designer';
         this.fontSize = this.normalFontSize;
         if (!this.startMode) {

Sandbox/lib/tk-canvas.html

@@ -3,8 +3,8 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<polymer-element name="tk-canvas" on-pointerup="up" on-trackstart="trackStart" 
-         on-track="track" on-trackend="trackEnd" attributes="designElement">
+<polymer-element name="tk-canvas" on-pointerup="{{up}}" on-trackstart="{{trackStart}}" 
+         on-track="{{track}}" on-trackend="{{trackEnd}}" attributes="designElement">
   <template>
     <style>
       @host {

Sandbox/lib/tk-designer.html

@@ -3,7 +3,7 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<polymer-element name="tk-designer" on-source-applied="sourceApplied" attributes="designElement selected maximized">
+<polymer-element name="tk-designer" on-source-applied="{{sourceApplied}}" attributes="designElement selected maximized">
   <template>
     <link rel="stylesheet" href="../../../more-elements/x-tags/x-tag/demo/x-tag-components.css">
     <style>
@@ -57,14 +57,14 @@
       }
     </style>
     <tk-palette id="palette" elements="{{elements}}"
-        on-palette-drag-start="paletteDragStart"
-        on-palette-drag="paletteDrag"
-        on-palette-drag-end="paletteDragEnd"
+        on-palette-drag-start="{{paletteDragStart}}"
+        on-palette-drag="{{paletteDrag}}"
+        on-palette-drag-end="{{paletteDragEnd}}"
     ></tk-palette>
     <tk-canvas id="canvas" tabIndex="-1"
-        on-tap="canvasTap"
-        on-pointerup="canvasDrop"
-        on-keydown="canvasKeydown"
+        on-tap="{{canvasTap}}"
+        on-pointerup="{{canvasDrop}}"
+        on-keydown="{{canvasKeydown}}"
         designElement="{{$.designElement}}"
     ><design-element id="designElement"></design-element></tk-canvas>
     <tk-meta id="meta" list="{{elements}}"></tk-meta>
@@ -78,7 +78,7 @@
       selected: null,
       selectedTab: 'design',
       maximized: false,
-      created: function() {
+      ready: function() {
         this.designElement = this.$.canvas;
         this.$.meta.ensureMeta(this.$.designElement);
         this.selected = this.$.designElement;

Sandbox/lib/tk-dumper.html

@@ -94,7 +94,7 @@
     Polymer('tk-element-dumper', {
       elementBlackList: ['style'],
       propertyBlackList: null,
-      created: function() {
+      ready: function() {
         var node = document.createElement('tk-dumper-blacklist');
         this.propertyBlackList = Object.keys(node.__proto__);
       },

Sandbox/lib/tk-editors.html

@@ -61,7 +61,7 @@
       }
     </style>
     <input id="input" type="{{type}}" value="{{workingValue}}" autocapitalize="off"
-      autocorrect="off" on-change="commit">
+      autocorrect="off" on-change="{{commit}}">
   </template>
   <script>
     Polymer('tk-string-editor', {
@@ -77,7 +77,7 @@
   <script>
     Polymer('tk-color-editor', {
       type: 'color',
-      created: function() {
+      ready: function() {
         // TODO(sjmiles): box-sizing: border-box doesn't play nice with color inputs
         // TODO(sjmiles): is there a way to effect these styles via stylesheet?
         this.$.input.style.boxSizing = 'content-box';
@@ -118,7 +118,7 @@
         font: inherit;
       }
     </style>
-    <input id="input" type="checkbox" checked="{{workingValue}}" on-change="inputChange">
+    <input id="input" type="checkbox" checked="{{workingValue}}" on-change="{{inputChange}}">
   </template>
   <script>
     Polymer('tk-boolean-editor', {
@@ -150,7 +150,7 @@
         user-select: all;
       }
     </style>
-    <select id="select" on-change="selectChange"></select>
+    <select id="select" on-change="{{selectChange}}"></select>
   </template>
   <script>
     // TODO(sorvell): Template repeat functions specially inside a select
@@ -207,7 +207,7 @@
         vertical-align: middle;
       }
     </style>
-    <textarea id="input" on-change="commit" rows="10"></textarea>
+    <textarea id="input" on-change="{{commit}}" rows="10"></textarea>
   </template>
   <script>
     Polymer('tk-text-editor', {
@@ -259,7 +259,7 @@
         user-select: all;
       }
     </style>
-    <input id="input" type="range" value="{{workingValue}}" min="{{min}}" max="{{max}}" step="{{step}}" on-change="commit">
+    <input id="input" type="range" value="{{workingValue}}" min="{{min}}" max="{{max}}" step="{{step}}" on-change="{{commit}}">
   </template>
   <script>
     Polymer('tk-range-editor', {
@@ -287,7 +287,7 @@
 <polymer-element name="tk-speech-editor" extends="tk-string-editor">
   <script>
     Polymer('tk-speech-editor', {
-      created: function() {
+      ready: function() {
         this.$.input.setAttribute('x-webkit-speech');
       }
     });

Sandbox/lib/tk-inspector.html

@@ -11,11 +11,11 @@
     <div id="header">
       <div id="crumbList">
         <template repeat="{{crumbs}}">
-          <g-icon-button src="assets/ic_chevron_left_darkreg.png" on-click="selectParentElement" hidden="{{top}}"></g-icon-button>
+          <g-icon-button src="assets/ic_chevron_left_darkreg.png" on-click="{{selectParentElement}}" hidden="{{top}}"></g-icon-button>
           <b>{{name}}</b>
         </template>
       </div>
-      <g-icon-button id="deleteIcon" src="assets/ic_delete_darkreg.png" on-click="deleteElement"></g-icon-button>
+      <g-icon-button id="deleteIcon" src="assets/ic_delete_darkreg.png" on-click="{{deleteElement}}"></g-icon-button>
     </div>
     <div id="interior">
       <template repeat="{{properties}}">

Sandbox/lib/tk-meta.html

@@ -14,11 +14,11 @@
       properties: null,
       shouldPrepend: false,
       hideSubtree: false,
-      created: function() {
+      ready: function() {
         this.idChanged();
         this.updateProperties();
       },
-      enteredDocument: function() {
+      enteredView: function() {
         this.updateProperties();
       },
       idChanged: function(inOld) {

Sandbox/lib/tk-palette.html

@@ -3,7 +3,7 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<polymer-element name="tk-palette" attributes="elements" on-mousedown="mousedown">
+<polymer-element name="tk-palette" attributes="elements" on-mousedown="{{mousedown}}">
   <template>
     <style>
       #title {
@@ -47,9 +47,9 @@
     <!--<div id="title">Palette</div>-->
     <div id="list"
         touch-action="pan-y"
-        on-trackstart="trackStart"
-        on-track="track"
-        on-trackend="trackEnd">
+        on-trackstart="{{trackStart}}"
+        on-track="{{track}}"
+        on-trackend="{{trackEnd}}">
       <template repeat="{{elements}}">
         <div class="item" tag="{{id}}" ishidden="{{isHidden}}">{{label}}</div>
       </template>