Merge pull request #16 from Polymer/polymer-element

update to <polymer-element>
googlearchive · Jun 26, 2013 · 35cda39 · 35cda39
2 parents eadb60c + b9b322e
commit 35cda39
Show file tree

Hide file tree

Showing 60 changed files with 1,159 additions and 1,144 deletions.
diff --git a/AceEditor/index.html b/AceEditor/index.html
@@ -25,7 +25,7 @@
  </ace-app>
 
 
-    <element name="ace-app" extends="g-app">
+    <polymer-element name="ace-app" extends="g-app">
       <template> 
         <style>
           ajaxorg-ace {
@@ -49,7 +49,7 @@
         </g-panels>
       </template>
       <script>
-        Polymer.register(this, {
+        Polymer('ace-app', {
           ready: function() {
             this.super();
             this.$.ace.value = this.textContent;
@@ -59,6 +59,6 @@
           }
         });
       </script>
-    </element>
+    </polymer-element>
   </body>
 </html>
diff --git a/Gallery/elements.html b/Gallery/elements.html
@@ -3,8 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
+<link rel="import" href="../../polymer-elements/polymer-meta/polymer-meta.html">
 <link rel="import" href="../../polymer-elements/polymer-page/polymer-page.html">
-<link rel="import" href="../../polymer-elements/polymer-layout/polymer-flex-layout.html">
+<link rel="import" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
 <link rel="import" href="../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
 <link rel="import" href="../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
 <!-- app -->

diff --git a/Gallery/elements/ga-app.html b/Gallery/elements/ga-app.html
@@ -3,9 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-app" attributes="metadata" on-select-card="showDetail">
-  <link rel="stylesheet" href="css/ga-app.css">
+<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>
@@ -25,7 +25,7 @@
     <ga-meta id="meta" list="{{metadata}}"></ga-meta>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('ga-app', {
       selectedPanel: 'main',
       searchSlideOpened: false,
       inserted: function() {
@@ -47,7 +47,7 @@
       },
       searchSlideOpenedChanged: function() {
         this.$.main.classList.toggle('slide-opened', this.searchSlideOpened);
-        if (this.searchSlideOpened) {
+        if (!this.searchSlideOpened) {
           this.$.input.value = '';
           this.search();
         } else {
@@ -73,4 +73,4 @@
       }
     });
   </script>
-</element>
+</polymer-element>
diff --git a/Gallery/elements/ga-cards.html b/Gallery/elements/ga-cards.html
@@ -3,9 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-cards" attributes="items selected">
-  <link rel="stylesheet" href="css/ga-cards.css">
+<polymer-element name="ga-cards" attributes="items selected">
   <template>
+    <link rel="stylesheet" href="css/ga-cards.css">
     <template repeat="{{items}}">
       <div class="card">
         <div class="inner" touch-action="none" on-tap="selectCard">
@@ -17,11 +17,11 @@
     </template>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('ga-cards', {
       selectCard: function(event, detail, sender) {
         this.selected = sender.templateInstance.model;
         this.fire('select-card');
       }
     });
   </script>
-</element>
+</polymer-element>
diff --git a/Gallery/elements/ga-detail.html b/Gallery/elements/ga-detail.html
@@ -3,9 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-detail" attributes="item">
-  <link rel="stylesheet" href="css/ga-detail.css">
+<polymer-element name="ga-detail" attributes="item">
   <template>
+    <link rel="stylesheet" href="css/ga-detail.css">
     <div class="main" touch-action="pan-y">
       <div class="inner">
         <div class="title">{{item.id}} <span class="label">({{item.label}})</span></div>
@@ -20,10 +20,10 @@
     </div>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('ga-detail', {
       itemChanged: function() {
         this.$.description.innerHTML = this.item.description;
       }
     });
   </script>
-</element>
+</polymer-element>
diff --git a/Gallery/elements/ga-meta.html b/Gallery/elements/ga-meta.html
@@ -3,42 +3,9 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<element name="ga-meta" attributes="list label author publishedDate description imageUrl sourceUrl demoUrl">
-  <template>
-    <style>
-      @host {   
-        * {
-          display: none;
-        }
-      }
-    </style>
-  </template>
+<polymer-element name="ga-meta" extends="polymer-meta"
+    attributes="author publishedDate description imageUrl sourceUrl demoUrl">
   <script>
-    var metaData = {}, metaArray = [];
-    Polymer.register(this, {
-      ready: function() {
-        this.idChanged();
-      },
-      idChanged: function(old) {
-        if (this.id && this.id !== 'meta') {
-          this.unregister(this, old);
-          metaData[this.id] = this;
-          metaArray.push(this);
-        }
-      },
-      unregister: function(meta, id) {
-        delete metaData[id || meta.id];
-        var i = metaArray.indexOf(meta);
-        if (i >= 0) {
-          metaArray.splice(i, 1);
-        }
-      },
-      get list() {
-        return metaArray;
-      },
-      byId: function(id) {
-        return metaData[id];
-      }
-    });
+    Polymer('ga-meta');
   </script>
-</element>
+</polymer-element>
diff --git a/MemoryGame/index.html b/MemoryGame/index.html
@@ -11,7 +11,7 @@
     <script src="../../polymer/polymer.js"></script>
     <script src="game.js"></script>
 
-    <element name="g-card" attributes="tile">
+    <polymer-element name="g-card" attributes="tile">
         <link rel="stylesheet" href="card.css">
       <template>
           <div class="card {{ flipped: tile.flipped }}">
@@ -20,12 +20,12 @@
           </div>
       </template>
       <script>
-        Polymer.register(this, {
+        Polymer('g-card', {
         });
       </script>
-    </element>
+    </polymer-element>
 
-    <element name="match-game">
+    <polymer-element name="match-game">
       <template>
         <style>
           div {
@@ -44,7 +44,7 @@
         <div class="message">{{ game.message }}</div>
       </template>
       <script>
-        Polymer.register(this, {
+        Polymer('match-game', {
           ready: function() {
             this.game = new Game(['8-ball', 'kronos', 'baked-potato',
                                   'dinosaur', 'rocket', 'skinny-unicorn',
@@ -55,7 +55,7 @@
           }
         });
       </script>
-    </element>
+    </polymer-element>
 
   </head>
 

diff --git a/Playground/samples/cats.html b/Playground/samples/cats.html
@@ -1,7 +1,7 @@
 <link rel="import" href="../../toolkit-ui/elements/g-animation.html">
 <link rel="import" href="../../labs/animation2/components/x-staggered-group.html">
 <link rel="import" href="../../labs/animation2/components/x-left-right.html">
-<element name="x-cats">
+<polymer-element name="x-cats">
   <template>
     <style>
       @host {
@@ -104,7 +104,7 @@
       return arr;
     }
 
-    Polymer.register(this, {
+    Polymer('x-cats', {
       count: 10,
       loadedCount: 0,
       contents: null,
@@ -246,9 +246,9 @@
       }
     });
   </script>
-</element>
+</polymer-element>
 
-<element name="x-item" attributes="url">
+<polymer-element name="x-item" attributes="url">
   <template>
     <style>
       img {
@@ -259,17 +259,17 @@
     <img id="image" src="{{url}}">
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('x-item', {
       url: null,
       ready: function() {
         this.$.image.onload = this.onLoad.bind(this);
       },
       onLoad: function() {
-        this.send('load');
+        this.fire('load');
       }
     });
   </script>
-</element>
+</polymer-element>
 
 <link rel="stylesheet" type="text/css" href="../../toolkit-ui/elements/css/g-flex-layout.css">
 

diff --git a/Playground/samples/echo.html b/Playground/samples/echo.html
@@ -1,18 +1,18 @@
 <link rel="import" href="samples/nametag.html">
-<element name="x-echo" attributes="value">
+<polymer-element name="x-echo" attributes="value">
   <template>
     <input value="{{value}}">
     <button on-click="clearInput">X</button>
     <br>
     <x-nametag name="{{value}}"></x-nametag>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('x-echo', {
       clearInput: function() {
         this.value = ''
       }
     });
   </script>
-</element>
+</polymer-element>
 
 <x-echo value="Bob"></x-echo>
diff --git a/Playground/samples/nametag.html b/Playground/samples/nametag.html
@@ -1,7 +1,7 @@
 <!-- Polymer supports declarative binding of events to methods in 
 the element. The polymer uses special on-event syntax to trigger 
 this binding behavior. -->
-<element name="x-nametag" on-click="makeLarge" attributes="name color">
+<polymer-element name="x-nametag" on-click="makeLarge" attributes="name color">
   <template>
     <style>
       @host {
@@ -19,15 +19,15 @@
     Hello! My name is <span style="color:{{color}}">{{name}}</span>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('x-nametag', {
       color: 'blue',
       makeLarge: function() {
         this.style.fontSize = '40px';
         this.style.fontWeight = 'bold';
       }
     });
   </script>
-</element>
+</polymer-element>
 
 <x-nametag name="Joe"></x-nametag>
 <x-nametag name="Mary" color="tomato"></x-nametag>
diff --git a/Playground/samples/youtubesearch.html b/Playground/samples/youtubesearch.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../../toolkit-ui/elements/g-ajax.html">
 <link rel="import" href="../../toolkit-ui/elements/g-selector.html">
-<element name="x-youtubesearch" attributes="query">
+<polymer-element name="x-youtubesearch" attributes="query">
   <template>
     <style>
       .item {
@@ -20,8 +20,8 @@
     </g-selector>
   </template>
   <script>
-    Polymer.register(this);
+    Polymer('x-youtubesearch');
   </script>
-</element>
+</polymer-element>
 
 <x-youtubesearch query="Chrome"></x-youtubesearch>
diff --git a/Playground/src/pg-app.html b/Playground/src/pg-app.html
@@ -13,9 +13,9 @@
 <link rel="import" href="../../../toolkit-ui/elements/g-ribbon.html">
 <link rel="import" href="../../../toolkit-ui/elements/g-icon-button.html">
 <link rel="import" href="../../../more-elements/Ace/Ace.html">
-<element name="pg-app" extends="g-app">
-  <link rel="stylesheet" href="css/pg-app.css" />
+<polymer-element name="pg-app" extends="g-app">
   <template>
+    <link rel="stylesheet" href="css/pg-app.css" />
     <g-panels id="panels" class="flex" index="1" transition="flow">
       <g-ribbon id="menu" label="Playground" valueattr="label" on-activate="toggle"
           selectedModel="{{selectedSample}}">
@@ -46,7 +46,7 @@
     <g-ajax auto on-response="fileResponse" url="{{selectedSample.file}}"></ajax>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('pg-app', {
       sampleData: [
         {name: 'NameTag', file: 'samples/nametag.html'},
         {name: 'Echo', file: 'samples/echo.html'},
@@ -105,4 +105,4 @@
       }
     });
   </script>
-</element>
+</polymer-element>
diff --git a/PolymerElementsPlayground/elements.html b/PolymerElementsPlayground/elements.html
@@ -5,7 +5,7 @@
 -->
 
 <!-- polymer-elements -->
-<link rel="import" href="../../polymer-elements/polymer-layout/polymer-flex-layout.html">
+<link rel="import" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
 <link rel="import" href="../../polymer-elements/polymer-collapse/polymer-collapse.html">
 <link rel="import" href="../../polymer-elements/polymer-meta/polymer-meta.html">