Merge pull request #15 from Polymer/master

6/17 master -> stable
googlearchive · Jun 17, 2013 · 06948aa · 06948aa
2 parents 5e0f0af + 1dd6746
commit 06948aa
Show file tree

Hide file tree

Showing 41 changed files with 855 additions and 20 deletions.
diff --git a/Gallery/elements/ga-app.html b/Gallery/elements/ga-app.html
@@ -28,7 +28,7 @@
     Polymer.register(this, {
       selectedPanel: 'main',
       searchSlideOpened: false,
-      insertedCallback: function() {
+      inserted: function() {
         this.selectedPanelChanged();
         this.search();
       },

diff --git a/Gallery/index.html b/Gallery/index.html
@@ -11,7 +11,7 @@
     <script src="../../polymer/polymer.js"></script>
     <link rel="import" href="elements.html">
     <link rel="import" href="metadata.html">
-    <link rel="stylesheet" href="../../../polymer-ui-elements/basic.css">
+    <link rel="stylesheet" href="../../polymer-ui-elements/basic.css">
   </head>
   <body class="polymer-ui-full-bleed">
     <ga-app class="polymer-ui-fit"></ga-app>

diff --git a/MemoryGame/README.md b/MemoryGame/README.md
@@ -0,0 +1 @@
+This is a Polymer port/implementation of https://github.com/IgorMinar/Memory-Game.
diff --git a/MemoryGame/card.css b/MemoryGame/card.css
@@ -0,0 +1,59 @@
+@host {
+  * {
+    display: block;
+    width: 165px;
+    height: 200px;
+    position: relative;
+    -webkit-perspective: 800px;
+    -moz-perspective: 800px;
+    -ms-perspective: 800px;
+    -o-perspective: 800px;
+    perspective: 800px;
+  }
+}
+
+.card {
+  width: 100%;
+  height: 100%;
+  -webkit-transition: -webkit-transform 1s;
+  -moz-transition: -moz-transform 1s;
+  -ms-transition: -ms-transform 1s;
+  -o-transition: -o-transform 1s;
+  transition: transform 1s;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.card.flipped {
+  -webkit-transform: rotateY( 180deg );
+  -moz-transform: rotateY( 180deg );
+  -ms-transform: rotateY( 180deg );
+  -o-transform: rotateY( 180deg );
+  transform: rotateY( 180deg );
+}
+
+.card img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+
+
+.card .back {
+  background: blue;
+  -webkit-transform: rotateY( 180deg );
+  -moz-transform: rotateY( 180deg );
+  -ms-transform: rotateY( 180deg );
+  -o-transform: rotateY( 180deg );
+  transform: rotateY( 180deg );
+}
diff --git a/MemoryGame/game.js b/MemoryGame/game.js
@@ -0,0 +1,91 @@
+'use strict';
+/* Memory Game Models and Business Logic */
+
+function Tile(title) {
+  this.title = title;
+  this.flipped = false;
+}
+
+Tile.prototype.flip = function() {
+  this.flipped = !this.flipped;
+}
+
+
+function Game(tileNames) {
+  var tileDeck = makeDeck(tileNames);
+
+  this.grid = makeGrid(tileDeck);
+  this.message = Game.MESSAGE_CLICK;
+  this.unmatchedPairs = tileNames.length;
+
+  this.flipTile = function(tile) {
+    if (tile.flipped) {
+      return;
+    }
+
+    tile.flip();
+
+    if (!this.firstPick || this.secondPick) {
+
+      if (this.secondPick) {
+        this.firstPick.flip();
+        this.secondPick.flip();
+        this.firstPick = this.secondPick = undefined;
+      }
+
+      this.firstPick = tile;
+      this.message = Game.MESSAGE_ONE_MORE;
+
+    } else {
+
+      if (this.firstPick.title === tile.title) {
+        this.unmatchedPairs--;
+        this.message = (this.unmatchedPairs > 0) ? Game.MESSAGE_MATCH : Game.MESSAGE_WON;
+        this.firstPick = this.secondPick = undefined;
+      } else {
+        this.secondPick = tile;
+        this.message = Game.MESSAGE_MISS;
+      }
+    }
+  }
+}
+
+Game.MESSAGE_CLICK = 'Click on a tile.';
+Game.MESSAGE_ONE_MORE = 'Pick one more card.'
+Game.MESSAGE_MISS = 'Try again.';
+Game.MESSAGE_MATCH = 'Good job! Keep going.';
+Game.MESSAGE_WON = 'You win!';
+
+
+/* Create an array with two of each tileName in it */
+function makeDeck(tileNames) {
+  var tileDeck = [];
+  tileNames.forEach(function(name) {
+    tileDeck.push(new Tile(name));
+    tileDeck.push(new Tile(name));
+  });
+
+  return tileDeck;
+}
+
+
+function makeGrid(tileDeck) {
+  var gridDimension = Math.sqrt(tileDeck.length),
+      grid = [];
+
+  for (var row = 0; row < gridDimension; row++) {
+    grid[row] = [];
+    for (var col = 0; col < gridDimension; col++) {
+        grid[row][col] = removeRandomTile(tileDeck);
+    }
+  }
+
+  return grid;
+}
+
+
+function removeRandomTile(tileDeck) {
+  var i = Math.floor(Math.random()*tileDeck.length);
+  return tileDeck.splice(i, 1)[0];
+}
+
diff --git a/MemoryGame/img/8-ball.png b/MemoryGame/img/8-ball.png
diff --git a/MemoryGame/img/back.png b/MemoryGame/img/back.png
diff --git a/MemoryGame/img/baked-potato.png b/MemoryGame/img/baked-potato.png
diff --git a/MemoryGame/img/dinosaur.png b/MemoryGame/img/dinosaur.png
diff --git a/MemoryGame/img/kronos.png b/MemoryGame/img/kronos.png
diff --git a/MemoryGame/img/rocket.png b/MemoryGame/img/rocket.png
diff --git a/MemoryGame/img/skinny-unicorn.png b/MemoryGame/img/skinny-unicorn.png
diff --git a/MemoryGame/img/that-guy.png b/MemoryGame/img/that-guy.png
diff --git a/MemoryGame/img/zeppelin.png b/MemoryGame/img/zeppelin.png
diff --git a/MemoryGame/index.html b/MemoryGame/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+  <head>
+    <title>Memory Game</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script src="../../polymer/polymer.js"></script>
+    <script src="game.js"></script>
+
+    <element name="g-card" attributes="tile">
+        <link rel="stylesheet" href="card.css">
+      <template>
+          <div class="card {{ flipped: tile.flipped }}">
+            <img class="back" src="img/{{ tile.title }}.png">
+            <img class="front" src="img/back.png">
+          </div>
+      </template>
+      <script>
+        Polymer.register(this, {
+        });
+      </script>
+    </element>
+
+    <element name="match-game">
+      <template>
+        <style>
+          div {
+            font-size: 30px;
+          }
+        </style>
+        <div>Pairs left to match: {{ game.unmatchedPairs }}</div>
+        <div>Matching: {{ game.firstPick.title }}</div>
+          <table>
+            <tr template repeat="{{ row in game.grid }}">
+              <td template repeat="{{ tile in row }}">
+                <g-card on-click="flip" tile="{{ tile }}"></g-card>
+              </td>
+            </tr>
+          </table>
+        <div class="message">{{ game.message }}</div>
+      </template>
+      <script>
+        Polymer.register(this, {
+          ready: function() {
+            this.game = new Game(['8-ball', 'kronos', 'baked-potato',
+                                  'dinosaur', 'rocket', 'skinny-unicorn',
+                                  'that-guy', 'zeppelin']);
+          },
+          flip: function(e, detail, target) {
+            this.game.flipTile(target.templateInstance.model.tile);
+          }
+        });
+      </script>
+    </element>
+
+  </head>
+
+  <body>
+    <match-game></match-game>
+  </body>
+</html>
diff --git a/Playground/samples/pica.html b/Playground/samples/pica.html
@@ -1,4 +1,3 @@
 <script src="https://www.google.com/jsapi"></script>
-<script src="../../polymer/platform/WebAnimations/web-animations.js"></script>
 <link rel="import" href="../pica/components/pi-app.html"/>
 <pi-app></pi-app>
diff --git a/PolymerElement/element-element/index.html b/PolymerElement/element-element/index.html
@@ -22,26 +22,39 @@
   </element-element>
 
   <script>
+    document.extendHTMLPrototype(tag) {
+      var base = tag ? 
+          Object.getPrototypeOf(document.createElement(tag)) :
+              HTMLElement.prototype;
+      return Object.create(base);
+    }
     document.register('element-element', {
       prototype: Object.create(HTMLElement.prototype, {
         register: {
           value: function(api) {
-            var extend = this.getAttribute('extends');
-            var base = extend ? 
-                Object.getPrototypeOf(document.createElement(extend)) :
-                    HTMLElement.prototype;
-            this.prototype = Object.create(base);
-            if (!this.prototype.parseElements) {
-              mixin(this.prototype, boiler);
+            var extnds = this.getAttribute('extends');
+            var prototype = document.extendHTMLPrototype(extnds);
+            // insert boilerplate api in inheritance chain (if needed)
+            if (!prototype.parseElements) {
+              mixin(prototype, boiler);
+              prototype = Object.create(prototype);
             }
+            // silently override readyCallback
             if (api && api.readyCallback) {
               api.apiReadyCallback = api.readyCallback;
               api.readyCallback = boiler.readyCallback;
             }
-            mixin(this.prototype, api, {element: this});
-            this.ctor = document.register(this.attributes.name.value, {
-              prototype: this.prototype
+            // combine base api, custom api, and element property
+            Platform.mixin(prototype, api, {element: this});
+            // register the custom type
+            var ctor = document.register(this.attributes.name.value, {
+              prototype: prototype
             });
+            // constructor shenanigans
+            prototype.constructor = ctor;
+            // cache useful stuff
+            this.ctor = ctor;
+            this.prototype = prototype;
           }          
         }
       })

diff --git a/PolymerElement/polymer-element/elements.js b/PolymerElement/polymer-element/elements.js
@@ -0,0 +1,17 @@
+Polymer('x-foo', {
+  ready: function() {
+    this.style.color = 'blue';
+  }
+});
+
+Polymer('x-bar', {
+  ready: function() {
+    this.style.padding = '4px';
+    this.style.backgroundColor = 'orange';
+    this.__proto__.__proto__.ready.call(this);
+  },
+  parseElement: function() {
+    this.webkitCreateShadowRoot().appendChild(document.createElement('content'));
+    this.textContent = 'Override!';
+  }
+});
diff --git a/PolymerElement/polymer-element/index.html b/PolymerElement/polymer-element/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <script src="../../../platform/platform.js"></script>
+  <script src="polymer-element.js"></script>
+  <script src="elements.js"></script>
+</head>
+<body>
+
+  <x-foo></x-foo>  
+  <hr>
+
+  <x-bar></x-bar>
+  <hr>
+
+  <x-zot></x-zot>
+  <hr>
+
+  <x-baz></x-baz>
+  <hr>
+
+  <x-quux></x-quux>
+  <hr
+
+  <!-- preloaded external script -->
+  <polymer-element name="x-foo">
+    <template>
+      Hello Light World
+    </template>
+  </polymer-element>
+
+  <!-- external script w/templating override -->
+  <polymer-element name="x-bar" extends="x-foo">
+    <template>
+      Hello Lighter World [<shadow></shadow>]
+    </template>
+  </polymer-element>
+
+  <!-- no script -->
+  <polymer-element name="x-zot" extends="x-foo">
+    <template>
+      Hello Lighter World [<shadow></shadow>]
+    </template>
+  </polymer-element>
+
+  <!-- inline script -->
+  <polymer-element name="x-baz" extends="x-zot">
+    <script>
+      Polymer('x-baz', {
+        ready: function() {
+          this.style.padding = '4px';
+          this.style.backgroundColor = 'tomato';
+          this.__proto__.__proto__.ready.call(this);
+        }
+      });
+    </script>
+  </polymer-element>
+
+  <!-- inline external script -->
+  <polymer-element name="x-quux" extends="x-zot">
+    <script src="x-quux.js"></script>
+  </polymer-element>
+
+  <script>
+    addEventListener("WebComponentsReady", function() {
+      CustomElements.upgradeDocument(document);
+    });
+  </script>
+</body>
+</html>