| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <link rel="import" href="../../iron-resizable-behavior.html"> |
| |
| <dom-module id="x-puck"> |
| <template> |
| <style> |
| :host { |
| display: inline-block; |
| border: 3px solid lightblue; |
| } |
| </style> |
| |
| <b>I'm a resize-aware, thirdifying puck at (<span>{{x}}</span> x <span>{{y}}</span>).</b> |
| |
| </template> |
| |
| </dom-module> |
| |
| <script> |
| |
| Polymer({ |
| |
| is: 'x-puck', |
| |
| behaviors: [ |
| Polymer.IronResizableBehavior |
| ], |
| |
| properties: { |
| x: { |
| type: Number, |
| value: 0 |
| }, |
| |
| y: { |
| type: Number, |
| value: 0 |
| } |
| }, |
| |
| listeners: { |
| 'iron-resize': '_onIronResize' |
| }, |
| |
| attached: function() { |
| this.async(this.notifyResize, 1); |
| }, |
| |
| get parent() { |
| if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { |
| return this.parentNode.host; |
| } |
| |
| return this.parentNode; |
| }, |
| |
| _onIronResize: function() { |
| var x = this.x = Math.floor(this.parent.offsetWidth / 3); |
| var y = this.y = Math.floor(this.parent.offsetHeight / 3); |
| |
| this.translate3d(x + 'px', y + 'px', 0); |
| } |
| }); |
| |
| </script> |
| |
| <dom-module id="x-app"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| </style> |
| <x-puck></x-puck> |
| |
| </template> |
| |
| </dom-module> |
| |
| <script> |
| |
| Polymer({ |
| |
| is: 'x-app', |
| |
| behaviors: [ |
| Polymer.IronResizableBehavior |
| ] |
| }); |
| |
| </script> |